Clay Boan
www.clayboan.comA one-screen portfolio reduced to a single fragmented blackletter wordmark on near-pure-black, where the only "design" on the canvas is a piece of broken display typography that morphs as you scroll.
Design tokens
- display
- Emeritus Display
- body
- Aeonik Pro
- mono
- (none)
- fallback
- Times
Do / Don't
Reference it for
- Near-black rgb(14, 14, 14) page with pure-white type — high-contrast monochrome, not pure black
- Single-viewport landing (900px) — no fold, no scroll cue, no hero copy
- One 180px display cut as the entire hero — a fragmented blackletter that doubles as portrait + wordmark
- Hairline top nav at 12.6px in two-typeface contrast (Aeonik Pro Medium vs Emeritus Display)
- Five-item horizontal nav (CB ◆, SELECTED WORK, ABOUT, BOANYARD, LET'S CHAT) — anchor monogram + four destinations
- Diamond ◆ glyph next to the monogram as personal mark
- Parenthetical role descriptor at viewport bottom — (MULTIDISCIPLINARY DESIGNER) in 12.6px caps
- Two-font system: bespoke display + neutral grotesque (Emeritus Display 900 + Aeonik Pro 400/500)
Do not copy
- The literal "Clay Boan" wordmark or the CB ◆ monogram
- The Emeritus Display 900 typeface cut (commissioned/licensed)
- The exact blackletter fragmentation of the "CLAY" hero glyph
- The (MULTIDISCIPLINARY DESIGNER) parenthetical phrasing
- The "Boanyard" sub-brand naming pattern
- The five-item nav verbatim — SELECTED WORK / ABOUT / BOANYARD / LET'S CHAT is brand-coded
- The single-viewport landing pattern unless the brand can carry a portfolio behind one gesture
- The Nuxt stack unless the team already runs Nuxt — the Astro equivalent is straight static HTML
Signature moves
single-viewport wordmark-as-hero on near-black
the entire hero is one 180px display cut on a near-black (#0e0e0e) page with white type, no fold, scroll cue or hero copy, the wordmark doubling as portrait.
two-font hairline nav with negative-tracking display
a hairline top nav at 12.6px contrasts a bespoke display against a neutral grotesque (Emeritus Display 900 + Aeonik Pro 400/500), while the 180px display uses -7.2px negative letter-spacing so letters touch and overlap.
Lenis + Splitting character morph as the whole motion budget
the entire motion budget is Lenis smooth scroll plus Splitting.js character animation on one ease-out-cubic curve (cubic-bezier(0.215,0.61,0.355,1)) at 500ms, with only 3 transitions and 0 keyframes.
Related references
Gianluca Gradogna
nicheDesign Portfolio
a multidisciplinary designer's portfolio that floats a crisp white intro card over a dark, full-bleed photographic world, pairing a clean Neue Montreal grotesque with a high-contrast Times display serif and one slow in-out-sine colour fade.
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.