My old site was mainly a professional portfolio. That was useful, but it left out a fair amount of what I was actually spending time on: games, small tools, experiments and the interests behind them. I wanted those things to belong here too, rather than trying to make every idea justify its place on a CV.
The challenge was giving the site more personality without making it harder to use. Someone looking for my experience should still be able to find it quickly, even if I’ve also been thinking about how an animated folder ought to open.
Making room without making a maze
Work brings together my experience, CV and case studies. About is the more personal part, and Projects points to the things I build myself. Gaming and Commonplace are still draft sections, so there’s room for longer notes without needing to publish them before they’re ready.
The copy lives in Markdown and MDX collections. For the main pages, I can arrange existing sections such as an introduction, a set of cards or a block of writing beside an illustration. The components look after presentation, which means changing a paragraph doesn’t need to become a template-editing task.
That separation matters for publication too. Published, draft, private and archived entries have different routing rules, so I can work on a draft locally without putting it into the deployed HTML or sitemap. Having somewhere to leave an unfinished thought is surprisingly useful on a personal site.
Keeping the character in the details
I wanted the professional and personal pages to feel related, with shared type, colours and square geometry, while allowing the Work pages a more compact rhythm. The little SVG illustrations and navigation previews are part of that character, rather than an attempt to make every visit an event.
There’s a practical limit to the movement. Illustrations have static fallbacks and respect reduced motion, and the reading controls let visitors pause animations, change reading colours and add space. Those choices are saved in the browser. The page still needs to be useful when none of the decorative bits are moving.
Astro produces the main pages as HTML, with React used for the contact form and the two Work explorers. Ordinary writing and links don’t need a client-side application to appear. That felt proportionate to a site where most people are here to read something.
Keeping the plumbing separate
The contact form sends to a DigitalOcean Function, which validates the submission, checks Turnstile and passes accepted messages to Resend. It has a different job from KJ’s Counter, which records selected page and action events. Contact values and security information stay out of analytics.
Counter only runs on the canonical production host. Staging and ordinary local previews don’t send production events, so working on the site doesn’t become indistinguishable from somebody visiting it. Staging has its own hosting component and noindex rules; the optional browser gate is only an overlay, so private material is excluded from deployed builds rather than relying on that screen to protect it.
Looking at what actually arrives
The checks cover generated links, canonical URLs, sitemap membership, keyboard behaviour, wrapping and client loading, alongside mocked contact and analytics requests. They help catch regressions, but I still need to look at the pages and use the interactions. Copy that reads well in a file can feel repetitive once the surrounding headings and cards are there.
Deployment needs that same distinction. A successful build or push doesn’t establish what the host is serving, so checking the deployed version is a separate part of the work.
Still my own website
The useful outcome is that I can keep changing the site in manageable pieces. A project can start with a card and later get a fuller account, while a note can remain in draft until I have something worth saying. I don’t have to rebuild the whole thing every time my interests move on, although having my name on it does make leaving it alone slightly harder.
AI helps with the implementation and review. The AI-assisted workflow case study covers that process; this site is one of the places where I keep putting it to use.