Time for a change, v2

The first version of this post went up on Christmas Eve, five years ago. Back then I didn't know who I was writing for, so I wrote for myself. That hasn't changed. Admittedly, I've written bugger all since, but plenty else has changed.

There's a point in life where your Christmas list changes from things you want to things you need. A decent frying pan, new socks, the boring stuff that makes life easier. These days I'm going back to asking the big man for things I want. Still, nothing I won't use, but things that make me happy rather than things that fill a void.

The last version of this site was a needs list. Minimum viable, fewer dependencies, nothing it couldn't justify. This one is a wants list.

Five years, a few jobs and a small human later, I've got considerably less time for tinkering. But I've also realised I miss making things just because I want to make them.

A proper kitchen

The site had quietly become more of a representation of my kitchen than a blog, and I needed a new one.

My recipes started life on a spreadsheet that was essentially a dumping ground of things I'd made rather than a curated cookbook. Originally I was cooking something new every week, but eventually it became a log of recipes I'd found buried among the 50 open tabs on my phone. I write notes in physical cookbooks too, so the next logical step was to centralise everything somewhere I could actually keep track of and share it.

Transitioning from the sheet to the site was painful. Some things were in metric, some were in US measurements, a few were jumbled up, and some methods just said "make the thing". So I got stuck into clearing out the mismatched tupperware.

Recipes now have proper sections for dishes with multiple components, and ingredients are checkboxes you can tick off as you go (using pure CSS). There's a switch between metric and US measurements because apparently we still can't agree on how to measure something. The conversions happen at build time, so they'll even work without JavaScript.

I've added a "cook mode" that bumps the text size up so you can read it from across the worktop, turns the method into a checklist, and asks the browser to keep the screen awake. No more jabbing at your phone with hands covered in whatever you're cooking. I'll be testing and fine-tuning this over the next few weeks.

Adding a recipe is now one step too. I paste a link and a recipe page comes back as a pull request, with the method rewritten in my own words and credit given to the original. A lot less copying, pasting and faffing about.

The things I wanted

My logo has always been a single, very detailed icon. I've had this contact sheet idea knocking around since it was designed in 2013, and I've finally got round to doing it.

The artwork is drawn once per page as an SVG symbol, and everything else is just use'n it. Each tile on the homepage shows a different crop of the same image, zoomed and panned using viewBox.

Whilst the homepage loads the tiles as one picture of the whole mark and then pull apart into their own contact sheets, the 404 page does the opposite, there's an underlying design choice there or something.

Nobody needs a homepage like this one, but I wanted one that's a bit of fun. There's more fine-tuning to do, so check back later, or not.

Keeping it lean

Just because I wanted a few toys doesn't mean I wanted to drag in everything and the kitchen sink.

• System fonts, so there's nothing to download.
• Dark only. One colour scheme, to rule them all.
• Plain CSS components instead of a framework, you guessed it, no React.
• The unused stuff went. I ported a component library from my design system, then deleted every piece the site doesn't actually use.

My logo used to be embedded in every page. Now it only goes where it's needed, and a typical recipe page dropped from 42KB to 13KB. The whole site went from 4.8MB of HTML to 1.6MB.

Every page has a proper description for search engines now too. It turns out none of them ever had one.

It's not perfectly optimised, and it isn't trying to be. The homepage animation is there because I like it, not because it scores well. Lighter where it matters, fun where I want it, and a return to old skool front-end development 101.

Every byte is sacred, every byte is good.

How it got built

I am a number of years past waking up in the middle of the night with a new portfolio idea and being able to afford to spend a night building it. Since I threw my old site up, I've got less time than ever, so I paired on most of this with Claude Code.

As an engineer turned manager, it was a fun and interesting way to spend some evenings. It felt a lot like working with a quick and keen design engineer: brilliant at the legwork, occasionally confident about the wrong thing, and much better once I'd been clear about what I wanted.

It also meant I could spend more time on the bits I enjoy. Playing with ideas, figuring out how things should work, and occasionally making something entirely unnecessary just because I could. Sorry for all the tokens I burned.

In any regard the decisions are still mine, and so are the bugs. And I'll own the source code I only half-read, if the machine lets me.

Same dinner, better table

The idea hasn't changed and so, if you're reading this, you're round for dinner.