Adrien Lamy
adrienlamy.frA solo creative-dev portfolio that bets the entire visual system on one screaming red surface plus one handwritten font, with media-layer canvas and video carrying every interactive moment.
Design tokens
- display
- Comic CAT
- body
- Comic CAT
- mono
- none captured - relies on system ui-monospace fallback if needed
Do / Don't
Reference it for
- Single-colour saturated page — rgb(255, 11, 54) red as the entire surface, no second background tint
- One bespoke handwritten font carrying the whole identity (Comic CAT, self-hosted WOFF2)
- Three-layer z-stack composition — media-layer (canvas + video) behind side-panel text column
- Fixed-width text column (300-400px max-width) over a full-bleed canvas
- Empty <nav> — no link bar, navigation is implicit through canvas / mobile toggle
- sr-only H1 + H2 — semantic headings hidden, visible heading is an H3 ("about__title title")
- Generic-noun self-positioning — "Creative Dev Mercenary" sidesteps "Freelancer / Developer"
- First-person playful copy — "Sup, I'm Adrien Lamy", "(the french one)" parenthetical
Do not copy
- The Comic CAT handwritten font (Lamy-owned, not licensed for distribution)
- The exact rgb(255, 11, 54) red — it's load-bearing for the personal brand
- The "Sup, I'm Adrien Lamy" / "Creative Dev Mercenary" copy verbatim
- The "(the french one)" parenthetical voice (signature personal aside)
- The empty-nav pattern unless the brand has comparable interactive canvas to replace nav
- The 15px-everywhere type scale unless using a similarly compact handwritten face
- The sr-only H1+H2 pattern on B2B brands — accessibility-only headings risk SEO if the visible H3 is the only crawlable heading
- The single-page-canvas architecture unless the brand has a real WebGL / canvas scene to anchor it
Signature moves
single saturated full-surface page
one screaming red rgb(255, 11, 54) fills the entire surface with no second background tint, flat with no border-radius and no box-shadow.
three-layer z-stack: media canvas behind a fixed text column
a media-layer (canvas + video) sits behind a narrow 300-400px max-width side-panel text column, with character-level splitting.js animation over the top.
anticipate-curve micro-motion vocabulary
transforms transition on an anticipate curve cubic-bezier(0.175, 0.885, 0.32, 1.275) at 0.3s, with a fast 0.1s easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94) for background-colour shifts.
Related references
Samsy
strongDesign Portfolio
The reference for award-winning single-developer creative portfolios — pure black canvas with a glowing red ninja-creature logomark, glitch-text keyframes, single-font Adobe Typekit minimalism.
Abby Wilson Therapy
strongOther
A boutique therapist for "anxious, high-achieving women" who reassures by being polished and specific - a warm sand-and-charcoal editorial system, a Calluna serif voice, named specialties and a clearly walked process that says "I understand exactly who you are and how this works".
Abhishek Jha
nicheDesign Portfolio
Indian designer personal portfolio — 4-font system (DM Sans + thunder + editorial + playground), 17-step scale up to 288px, dark plum + pink palette, 9-keyframe marquee/cloud motion.
Alche
strongCreative Studio
The reference for Japanese virtual-character + immersive experience studios — Astro v5 build, neon yellow-green accent, 5-font multi-language system, KizunaAI case study.