A little more personality on the homepage
Building a cursor-following portrait for this website, inspired by Claire Vo.
The portrait on my homepage now looks toward your cursor. Click it and I pull a face.
The inspiration came from Claire Vo, one of my favourite podcast hosts (check out How I AI). She wrote about how she built the cursor-following portrait on her website, sharing the process, prompts, and code. Her post gave me a starting point for trying something similar on my own site.
I started with my profile photo and worked with Codex to create a front-facing portrait with a monochrome bitmap treatment. We then made matching versions looking left, right, up, and down.
On mobile, there’s no cursor to follow, so I added a small Easter egg: tap the portrait for a different expression.
The portrait is monochrome in light mode and warm duotone in dark mode. Both themes use the same images; only the colours change.
Underneath, it’s nine saved images and a little JavaScript choosing which one to display. AI helped create the images during the build; the interaction itself runs entirely in the browser.
The initial portrait is about 21 KB, and the full image set is about 186 KB. The remaining images load as you start interacting, and switching themes doesn’t require another download. Keyboard activation works too, and automatic cursor following respects reduced-motion settings.