Colophon

Made by hand, built with agents.

This site is a working example of how I work now. Every decision on it is mine: the positioning, the line, the type, the palette, the room, the way the work is shown and the way it moves. What's different is the build crew. Agents did the engineering and the grunt work from my briefs, and every change still ships through a preview I review as pixels. It's a handmade site with a faster pair of hands behind it, not a prompt with a domain on the end.

How the studio was made

The room started as a picture. I wrote the brief and art directed a still of the studio: the desk, the chair, the shelving, the plants, the lamp and the mark on the red wall. That still was the first hero, cut out from its background and drawn through a depth map so it moved with the pointer.

Then I had it rebuilt as a real scene, with Codex doing the modelling. Every object is geometry. Architectural light and ambient occlusion are baked ahead of time, reflections and shadows are cached, and the enamel wall and the frosted floor are real materials, lit in the scene. I directed the proportions, the finishes, the lighting and the small details through dozens of local previews, the way I'd direct a 3D artist, except the turnaround was minutes rather than days.

The opening is a build. The room's edges draw first, then the surfaces and lighting arrive behind a moving front, and after that it's yours: drag to orbit, the slider looks closer, the lamp switches the whole site between paper and ink. Reduced motion gets a still, and the room stops drawing the moment it settles or leaves the screen. The screens on the desk and the proofs pinned to the wall are pieces from this portfolio.

How the site was made

I designed the site the way I'd design anything: positioning first, then the line, the type, the palette, the grid and the behaviour of every interactive element. Claude Code built it to that design from written briefs, page by page, and I reviewed every build as pixels, cut what didn't earn its place and signed off the copy. The discovery work was real: an audit of my old site and the portfolios I admire, an inventory of six months of work across local drives, Drive, Slack and Asana, and first drafts of the case studies from that evidence, which I then edited into my own words.

How the repository works

Content lives in typed files, not in components. A schema validates every case study at build time, so a bad edit fails the build instead of shipping a broken page. The studio is its own Three.js scene with a small adapter connecting it to the opening sequence and the theme switch. Skills describe the routine jobs: add a case study, edit copy, tune the hero, check the screens, publish. Every branch gets a preview deployment with before-and-after screenshots on the pull request. Production only changes when I say so.

The mark

One polygon, three equal strokes, pointing off the page. It appears on the room’s red wall and as a small metal sculpture on the shelf. Its shape comes from the original vector artwork.

Type and colour

One typeface, Overused Grotesk, at sizes smaller than most portfolios dare, because the work should be the loud part. Anything that is a fact is set small, in capitals, tracked: indices, counts, sources, the build date. Paper, black and one warm red, used only where something is interactive or live; ink instead of paper if you ask for it with the switch in the nav. The lab is always the ink room. Crop marks remain around selected work; the studio hero is open and unframed.

Build log

The design commits to this site, from git, with the copy edits left out. 93 commits in all since 20 September 2026.

  1. 25/09, 12:47ebe9685Hero corner: Rebuild and How it's made on one baseline, one colour
  2. 24/09, 13:078866a09The field: click it to change its state, drag to orbit, no button
  3. 24/09, 13:0177ff8e6The field: a listening toggle, a live readout, and the page rewritten around it
  4. 24/09, 12:477a97e16The field without the voice: drag, click and arrow keys, at up to 524,288 particles
  5. 24/09, 12:419a52518Field: starting a conversation no longer moves focus, so no focus ring appears on a click
  6. 24/09, 12:40cb3f81bThe lab runs the real particle field; the hero line opens on its own; controls to the corner
  7. 24/09, 12:265fe4cc0What the line means, and only the name under it
  8. 24/09, 12:2007e0ed3The cursor steps aside over an embedded player
  9. 24/09, 12:02e589f50The small register: plain facts, rare markings, no middle dots
  10. 23/09, 14:392a4d6bbStrip: a click goes straight to the piece
  11. 23/09, 14:293fd7c3dThe build's text fades up in place instead of printing in
  12. 23/09, 14:216272d2ePerformance: lighter loops, lossless WebP bake, immutable caching, loops fetched only near and after the room
  13. 23/09, 12:2451971e1Strip: subtle rounded corners, free scroll with inertia, no hint, a corner mark on the open card, and less work per frame
  14. 23/09, 11:532e23361Strip: labels anchored to each card's bottom edge, cards clipped at the gutters, crisper edges
  15. 23/09, 11:38c394187The strip as portrait cards on an arc: drag, snap, travelling titles, click to open
  16. 23/09, 11:00776cc40Strip build: the frames fade up and rise into place while the band swivels round to face the visitor
  17. 23/09, 10:5602cc3deStrip build: the frames come up out of the paper with a clean ease, no outline
  18. 23/09, 10:461fbe3abStrip build: a clean front, no dither
  19. 23/09, 10:331eadfa0The strip builds too, and the page build slows down so it reads
  20. 23/09, 10:28fc6c55fThe page builds the way the room does: rules draw, crosses stamp, labels print, gutters draw down
  21. 21/09, 15:2431d295fHero: the opening plays on every load, and the copy hangs from the room
  22. 21/09, 15:13cac93d5Hero: returning visitors see the room and the line from the first paint
  23. 21/09, 14:5556132dfMedia: embedded players fill their frame after a click
  24. 21/09, 14:228123b2eHero: the controls keep their space from first paint and fade in, so the line no longer jumps on reload
  25. 21/09, 13:17f526ee2Round two: one strip for every project, RSN-1 public, demand generation, Artie rounded out, lab retold
  26. 21/09, 03:13d11e2ebThe studio: a modelled room as the hero, with a wireframe-to-material opening
  27. 20/09, 07:50d94d154The room as a depth-mapped still: the render itself, moving in space
  28. 20/09, 07:35c26a530The room: the studio as a 3D hero, with the mark on its orange wall
  29. 20/09, 07:17b0a253dStrip: the block break follows the visitor's velocity and stops with the band
  30. 20/09, 07:15cc785b8Strip: constant edge aberration, blocks only when the visitor moves the band, tighter block zone

Stack

Astro, Three.js, GSAP and Lenis, deployed on Vercel. Gated work is protected server-side with a signed cookie. Analytics are cookieless. A plain-text mirror of every page lives at /machine for agents and for people who prefer it raw.