Designing my portfolio like a product

The challenge

My old portfolio was technically impressive. Perfect Lighthouse score, every component hand-coded from scratch with zero framework help, styled entirely in SCSS. At the time, the fact that I'd built it all myself was the showcase. I even had a page listing every tool used, to prove I could build what I designed. But the industry moved on. With AI widely embraced in tech culture and expected in workflows, the "built from scratch" flex stopped landing the way it used to. And beyond that, the site was weak where it mattered most: storytelling. The case studies didn't do the work justice, and the content structure was too rigid to fix without starting over.

The solution

I started with an audience analysis, mapping out every type of person who might land on the site and plotting them on a matrix of browsing vs evaluating and aesthetics vs information. That made it clear who to prioritise: recruiters, hiring managers, and potential clients, the people who need evidence and substance over visual flair alone.

From there I kept the site deliberately minimal. Four pages, no footer, no noise. An about page doubling as the homepage, a projects hub, individual case study pages, and a contact form. Everything else was left out.

The real investment went into the project pages. I wanted to tell stories without technical limitations, so I built a flexible component system using Strapi's Dynamic Zones. If a case study needed a chart, a comparison slider, a carousel, or just a block of text, I could drop it in anywhere. Recharts for data visualisation, custom comparison sliders for before/after moments, carousels with captions. The system was designed so the content could dictate the layout, not the other way around.

My role

This was a solo project across design, development, and content. I audited the old site to identify weaknesses, ran the audience analysis, made all the IA and content structure decisions, and designed and built the frontend in Next.js with Radix UI/shadcn and Lucide icons. Instead of hand-coding everything to prove a point, I embraced frameworks that handle semantics, accessibility, and performance so I could focus on content, structure, and the overall experience.

I set up and configured Strapi as the CMS and managed hosting across Netlify, Render, Supabase, and Cloudflare, choosing each platform carefully for cost, performance, and sustainability. I used Claude Code throughout development, with detailed rules in CLAUDE.md to keep the output precise and avoid guesswork. Every pull request included a Lighthouse check, and I optimised as I went. Early on I experimented with playful animations that I thought added personality, but after testing on real devices I stripped them back. They didn't make the site better, so they didn't stay.

The impact

The result is a portfolio that works as a product: flexible enough to tell different stories in different ways, fast and lightweight, built on a stack I fully control, and shaped by a clear understanding of who it's for. The component system means adding new case studies is straightforward, and the content can evolve without touching the codebase.

Key takeaways

The biggest lesson was a simple one: if it doesn't make the site better, leave it out.

That applied to animations, pages, features, and copy. Treating a portfolio like a product, with audience research, deliberate constraints, and a scalable content system, made it a much stronger piece of work than just "making it look nice."