Screenshot of Clay Boan

Clay Boan

www.clayboan.com

A 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 Portfolio Multidisciplinary Designer Portfolio niche

Design tokens

page
text
textMuted
black
placeholder
jumbo
translucentGrey
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.