Screenshot of Adrien Lamy

Adrien Lamy

adrienlamy.fr

A 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 Portfolio Creative Developer Portfolio niche

Design tokens

page
surfaceDark
black
white
textMuted
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.