Colophon

Everything is set in Atkinson Hyperlegible Next, with Atkinson Hyperlegible Mono for dates and details. The Braille Institute designed both for people with low vision: every letter is built to be told apart from its neighbours. Most of what I build is for charities, where being easy to read isn't optional. Both typefaces are self-hosted.

Chalk paper and a pitch green, with an ember orange for the splash of colour. The dark theme follows your system setting, and the switch at the top of the page overrides it. Every text colour passes WCAG AA contrast in both themes.

Hover over "Hi," on the home page, and the orange changes to a new colour everywhere it's used, dots and favicon included, for the rest of your visit. The hue is random, but its lightness is worked out so it still passes AA in both themes.

Behind the top of the home page, a field of dots rolls slowly towards the horizon, with a ball of lines turning around my photo, and it leans towards your pointer. It's adapted from the DOTS effect in Vanta.js by Teng Bao.

Touch the photo, or run your cursor across it, and it ripples like water. The water is simulated on your graphics card, and you see the photo through it. Once the water settles, you're looking at a plain image again.

Both are drawn with three.js, which only loads once you interact with the page, or when your browser is idle. It never loads if you prefer reduced motion, use forced colours, have Save-Data turned on, or your device can't run WebGL. Then there are no dots, and the photo is just a photo.

As you scroll, things come into focus from a touch of gaussian blur. A few lines of JavaScript notice what's arriving on screen, and CSS does the rest.

• Astro, which builds everything into static HTML.
• TypeScript, and plain CSS with custom properties.
• Projects and journal entries are Markdown files in the repository.
• The activity heatmap is my GitHub contribution calendar, read when the site builds.
• Hosted on Cloudflare Pages.

There are no cookies or ad trackers, and the fonts are self-hosted. Visits are counted with Cloudflare Web Analytics, which is cookieless and doesn't collect personal data.

Until the dots load, the home page runs under 5KB of JavaScript. Every page works without JavaScript, with a keyboard and at any screen size. Motion stops if you've asked your device to reduce it.