Colophon
How this site is made.
Type
Everything is set in IBM Plex Sans, with IBM Plex Mono for dates and small details. One family, drawn for engineering documentation, which suits a site like this.
Colour
Warm paper and near-black ink, flipped for dark mode. No accent colour.
Paper
The background is three layers of SVG noise at different scales: broad mottling, horizontal fibres and fine grain, under a soft pool of light from the top-left. They're multiplied onto the page by day and lightened onto it by night. No image files.
Dither
The sphere by my name, the favicon, the toy previews and the dash by the current sidebar item are 1-bit ordered dithers. At build time an 8×8 Bayer matrix thresholds a gradient into a tiny PNG. The browser uses it as a mask, so the colour comes from the theme.
The sphere is meant to look printed rather than displayed: grain is worn into the ink, and a pair of hairline shadows lifts each pixel, and the disc behind it, slightly out of the paper. Hover over my name and the light goes once round it. It's also drawn as an SVG, one square per cell, so it scales to any size.
Motion
Motion is small and has to be asked for. Pages cross-fade while the sidebar stays put. Rest on my name and the light goes round the sphere; rest on a toy and its preview plays. Nothing starts because a pointer happened to pass over it, and once something starts it finishes. With reduced motion turned on, none of it runs.
Print the homepage and you get a one-page CV: every role, no sidebar, ink on white whatever the theme. The toys print their own way, as calendars and typeset pages.
Build
Built with Astro and hand-written CSS, served from Cloudflare Workers. Pages are static HTML, with no trackers or analytics. The images you see when a page is shared are drawn at build time, one per page, from the same type and dither.
The JavaScript only does what CSS can't: the theme toggle, the menu on small screens, the sidebar highlight, the timing on the sphere and the toy previews, the tools filter, these swatches, the 404's lamp, and the toys themselves.