This portfolio

Problem

I wanted a place to put my side projects and show them to the world.

I’d been building those projects with Claude Code, so rather than reach for a templated portfolio site, I built one from scratch.

Decisions

Mocks before markup

On the portfolio, I landed on a design workflow: Claude writes a self-contained HTML mockup, I review and give feedback verbally, Claude goes again. As a PM, I’d always meant to play around with Figma but never set aside the time. An experienced Figma user would have started there. I started from scratch, landed on this, and it worked.

A few of those trails:

• Site accent palette: v1 → v2 → v3 → v4 → v5
• Homepage card deep-dive: v1 → v2 → v3 → v4 → v5 → v6 → v7
• Case-study diagram samples: v1 → v2
• VersionedEmbed phone frame: v1 → v2 → v3

Dark mode only

Other hobby apps were all light mode. For the portfolio, I wanted something different. Royal blue is my favourite colour, so I played with it. The palette stayed minimal: monochrome blue with violet as a sparing highlight. Line drawings throughout. Simple and striking.

Analytics

There’s a lot of value for analytics in a portfolio website - I want to see what’s getting the most views, how far people are reading, where visits are coming from, and so on. I decided to add product analytics tooling to my hobby project tech stack. After an evaluation of options I settled on Posthog, due to its all-in-one support for everything I need, and a very generous free tier. I’ve been extremely impressed with Posthog’s product - particularly the performance of dashboards, and the ease-of-install. It only took 15 minutes to get it working, including putting it behind a reverse proxy to avoid ad-blocker issues.

After getting Posthog going I realised generating links with the right tracking parameters was going to be a pain, and the URLs would be a bit ugly with all the parameters added. So I also ended up buying a shorter domain name, and making a URL shortener tool including a nice admin dashboard for generating short links with all the analytics parameters built-in.

Outcome

The outcome is what you’re reading. The site features all of my homemade projects, and will also feature any articles I write in the future. I hope you find it interesting!

Next project

Version status

A dashboard showing where every project sits across prod, preview, and master. Idea to deploy in a day.