Clement Grellier
clementgrellier.frSolo 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 tokens
- 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.
Related references
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.
Alejandro Mejias
nicheDesign Portfolio
A Melbourne solo UX designer's Framer-built portfolio in a brutalist bracket-wrapped monospace voice — black-on-white chrome punctuated by a single neon-yellow accent, dotted-grid hero, and full-bleed yellow about page.
Analogue
strongCreative Studio
a "seriously playful" brand-and-motion studio that wears its personality as type, a wonky multi-alternate ANALOGUE wordmark, emoji and icon glyphs set inline in the copy, a candy-pink accent on white, and a GSAP-driven box of tricks (mexican-wave letters, glitches, bounce, float) kept just on the right side of chaos.