A note on the work

Colophon.

Notes on the design and build of this edition.

Concept: A sequence of brutalist posters, scrolled tight. Every phrase is a hit. Cinematic fragments instead of paragraphs. The page is one continuous read, but the type does the talking. No raster images on the home page, no third-party scripts, no heavy frameworks. Just typography, a handful of inline SVG glyphs, and motion that pulls the words toward your cursor.
The reel: Masthead with a live status marquee. Opener title card. Name poster. The work as a single statement. Open source. Recent runs, one project per poster. Build., the brutalist stack. What I believe. The Shelf, what feeds the work in six facets. The personal. Sign-off.
Type — primary display: Big Shoulders by Patric King, set as a variable font on weight and optical size. Brutalist condensed sans. Carries the cinematic title cards, the project poster names, the belief lines, the personal beats.
Type — secondary display: Bricolage Grotesque by Mathieu Triay, variable on weight (200–800) and width (75–100). Width axis carries the rhythm in the Build. stack and the I-read author wall. Same word or name, walked through wdth, each line a different specimen of the same letter. Also the body sans on this page.
Type — italic warmth: Instrument Serif by Rodrigo Fuenzalida, italic only. Cinematic asides. Patient. A little obsessive. With the lights low. Contrast against the brutalist sans so the warm moments land warmer.
Type — mono baseline: JetBrains Mono for the masthead bar, section kickers, and the colophon line. Four families total. Loaded with next/font/google and font-display: swap.
Magnetic letters: The signature mechanic. Every letter on the Build. stack, the hero opener, the project posters, and the Shelf author wall is wrapped in its own span. A global driver writes font-variation-settings and translateY per frame, lerped toward a target derived from the cursor's distance (or the viewport center on touch). The result is a continuous flow, not a stutter. The stack genuinely leans toward you as you drag a cursor across it.
Glyphs: Inline SVGs drawn in currentColor and scaled with em. Most section breaks get one: moon, compass, star, lasso, vinyl. Each signals the tonal shift coming next. Editorial, retro-futurist, never decorative for its own sake.
Ukiyo-e clouds: Four Japanese cloud illustrations, used sparingly. A breaking kumo curl after Build., a rising sun before the sign-off, a faint layered cloud between the beliefs and the Shelf, and a round seal in the home colophon beside the hanko. Inlined in currentColor so they take the page's ink, set in aizuri (Prussian blue) that lifts to a luminous indigo in Night so it holds against black. The curl drifts and breathes, the sun rises, the rest stay still. Reduced-motion safe.
Brutalist stack: The Build. moment. The word Build. tiled seven times, each line at a different position on the Bricolage width axis with mixed weights. Tight letter-spacing. Pure black on pure white. The single typographic shout in an otherwise restrained menu.
The Shelf: Six verbs that show the whole person. I read (eight authors stacked at varied weights and widths, brutalist, with a Currently line for what I'm reading right now). I build (funko pops and a Spindrift). I grow (a garden, with the current crops listed). I write (The Obtainer, a novel in progress). I watch (Columbo, favorite episode called out). I listen (a public Spotify playlist embedded inline).
Live data: The masthead marquee cycles through a handful of live signals. Currently reading, what's on the desk, what's spinning on the foundry floor. A server route pulls GitHub's most recently pushed repo and the Spotify Now Playing track via an OAuth refresh token. When the data goes stale, the marquee falls back to a sensible default so the page never looks broken.
Mood toggle: Day, Night, and Lowcountry, in the bottom-right corner. Cycles through three CSS variable sets that swap paper, ink, accent, and rule colors. Persisted to localStorage and applied before paint, so refreshes don't flash. Every hover, link, and active state across the page reads the accent variable, so the whole composition repaints in tone when you cycle.
Ambient motion: Three drivers running off a single rAF loop. Cursor proximity gives every body paragraph a --proximity value (0–1), warming weight within ~280px of the cursor. Scroll velocity writes --velocity on the document, opening body width subtly during fast scrolls. Magnetic letters lerp toward a per-frame target. All three respect prefers-reduced-motion.
Palette: Black ink on paper white at default. Orange is a grace note, used a handful of times across the whole page: the masthead dot, the cursor reticle, a couple of nouns that earn it. Two ukiyo-e accents sit beneath it, aizuri blue for the clouds and cartouche and seal red for the hanko, punctuation rather than competition. The mood toggle swaps the primary accent without touching anything else.
Reticle cursor: Inline-SVG cross-hair with a colored center that swaps to a thicker reticle over interactive elements. Signature inlay, zero asset weight. Color follows the active mood.
Command palette: ⌘K from anywhere. Jump to any section by name, hit external links, open the resume, write me. Built on cmdk.
Accessibility: Skip link, semantic HTML, keyboard-navigable command palette, prefers-reduced-motion respected (motion drivers disable themselves and magnetic text stays at its base values). Black on white means 21:1 contrast on body copy. All decorative glyphs are aria-hidden.
Performance: No raster images on the home page, no third-party scripts. Four variable font files via next/font/google. Motion drivers run on rAF, throttle to one tick per frame, and skip work for off-screen elements. The continuous loop self-suspends when nothing is animating.
Stack: Next.js 16 (App Router) with Turbopack, React 19, Tailwind CSS 4. Fonts via next/font/google. cmdk for the command palette. Deployed on Vercel.
Built by: Me. Edition 3 was wired up over a focused stretch with Claude, the same AI tooling I use day to day. The site is itself a sample of the work. Premium frontend craft, made with the tools I bring to client engagements.