A note on the work

Colophon.

Notes on the design and build of Edition 4.

Concept: A working site that still sounds like a person. The home page opens on a sentence rather than a pitch, then gets straight to what can be bought and what it costs. Every phrase is a hit, the type does the talking, and the commercial parts are the plainest writing on the page. No raster images on the home page, no third-party scripts, no heavy frameworks. Just typography, a handful of inline SVG marks, and motion that pulls the words toward your cursor.
The sequence: Home opens on the ghost-stories line, with the offer and the starting prices beside it. Then the two ways to work together, three pieces of selected work, how a project runs, a short personal note under a rising sun, and the inquiry. Each service and each case study gets its own page. About carries the longer read: home first, the Shelf in six facets, and what is made in the open.
Primary display type: Big Shoulders by Patric King, set as a variable font on weight and optical size. Brutalist condensed sans. Carries the home page opener, every section heading, the case-study names, and the personal beats.
Secondary display type: Bricolage Grotesque by Mathieu Triay, variable on weight (200–800) and width (75–100). Width axis carries the rhythm on the author wall in the Shelf. Same name, walked through wdth, each line a different specimen of the same letter. Also the body sans on this page.
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.
Mono baseline: JetBrains Mono for the section kickers, the numbered labels, the price rows, and the colophon line. Four families total. Loaded with next/font/google and font-display: swap.
Magnetic letters: The signature mechanic, now spent on one thing. Every letter of the home page opener 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 line genuinely leans toward you as you drag a cursor across it.
Glyphs: Inline SVGs drawn in currentColor and scaled with em. A set of them exists, from moon and compass to torii and fuji, but the commercial pages spend only one: the hanko, stamped on the home page card, on the resume, and here. Editorial, never decorative for its own sake.
Ukiyo-e clouds: Japanese cloud illustrations, used sparingly and used less than they once were. A rising sun before the personal note on the home page, a breaking curl at the head of this page, a faint layered cloud on the resume, and the hanko seal in red. 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.
Case studies: Each piece of work is written as a short decision log rather than a feature list. Three or four calls, each with what forced it, what I chose, and what changed as a result. Where a product is private it stays private, and the page says so in place of a screenshot. No invented numbers, and client work is marked apart from employment.
The Shelf: Six verbs that show the whole person, now living on the About page. I read (authors stacked at varied weights and widths, 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 Shelf reads from live sources rather than a hardcoded list. Server routes pull what I am currently reading and the Spotify track, the latter through an OAuth refresh token. When a source goes stale the page falls back to a sensible default, so it 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 status dot, the cursor reticle, the numbered labels, a couple of nouns that earn it. Two ukiyo-e accents sit beneath it, aizuri blue for the clouds 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, open a service page or a case study, 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 4 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.