Screenshot of Clement Grellier

Clement Grellier

clementgrellier.fr

Solo front-end developer portfolio at its most reductive — a single 144px wordmark, one rotating dual-image work card, three-word descriptor, and a pill-tab bottom-center nav. The whole site is one viewport.

Design Portfolio Front End Developer niche

Design tokens

page
text
inverseText
inverseSurface
display
Amiamie
body
AmiamieLight
fallback
Arial, serif

Do / Don't

Reference it for

  • Pure rgb(0, 0, 0) on rgb(255, 255, 255) — zero greys, zero accent, just monochrome
  • 144px wordmark headline sitting flush at the page top, no margins
  • Letter-spacing -7.99px — extreme negative tracking that fuses letters into a slab
  • Amiamie typeface (Regular for display, Light for body) — paired family from a single foundry
  • Self-hosted WOFF2 only — no Google Fonts, 2 font requests total
  • Two CSS custom properties for easings (--custom, --smooth) — minimal token system
  • cubic-bezier(0.76, 0, 0.24, 1) heavy S-curve as workhorse motion
  • cubic-bezier(0.15, 0.9, 0.34, 0.95) elastic-out for character-level reveals

Do not copy

  • The "Clement Grellier" wordmark / personal name
  • The Amiamie typeface unless properly licenced (it's a paid commercial font)
  • The "32 years-old French front-end developer" bio copy
  • The "Dine" / "Apzy" project names visible in the work card
  • The "Bringing designs to life with pixel-perfect precision and smooth animations" descriptor verbatim
  • The three-route nav (Home/Work/About) unless the brand genuinely has only those three destinations
  • The single-viewport homepage if the brand has more than one offer to communicate
  • The pure monochrome reduction unless the brand has no use for an accent colour

Signature moves

single-viewport monochrome wordmark homepage

a pure-black-on-white homepage fits everything in 100vh: a 144px wordmark flush at the page top with no margins, a two-column hero with confident empty negative space on the right, zero greys or accent.

letter-spacing animation fusing the wordmark into a slab

the wordmark animates its tracking (resting at -7.99px, observed down to -9.03px mid-animation) via Splitting.js so letters fuse into a slab, on a GSAP + Lenis + Splitting trinity with a heavy S-curve workhorse (cubic-bezier(0.76,0,0.24,1)).

bottom-centre pill-tab nav with slide-in on load

a bottom-centre pill-tab nav (active tab filled black at 24px radius) slides up on load via transform translateY(100px) plus a 0.8s transition, a disciplined three-route inventory.