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.
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.