Designing my portfolio like a product

Context

Technically impressive, but the storytelling was the gap

My old portfolio had hand-coded SCSS and a perfect Lighthouse score, with a content structure too rigid to fix without starting over.

The audience

Mapping every reader against two axes, before any visual decisions

Before any visual decisions, I mapped everyone who might land on the site (friends, recruiters, fellow designers, hiring managers, conference organisers) against two axes: browsing vs evaluating, aesthetics vs information. The exercise made the priority obvious, with the people who matter most clustering in the evaluating-information corner, where they want evidence and substance.

That mapping shaped the constraints. The About page doubles as the homepage, because evaluators want to know who I am fast. Four pages total, no footer, no burger menu on mobile, because hiding navigation across four pages is silly. Every decision came from the inverse question: what would make this worse? Cutting those things is what made it better.

The system

A content system where the story shapes the layout

The real engineering went into the case studies, where I wanted to tell different stories in different shapes without each one being a custom build. Strapi's Dynamic Zones let me drop charts, comparison sliders, carousels, or just text blocks into any case study, in any order, with the content dictating the layout rather than the other way around.

The same care went into the responsive behaviour, with six Tailwind breakpoints all finessed. Component behaviour adapts too: a tooltip on desktop becomes a drawer on touch screens. Same intent, different device. I tracked the whole site in Linear like any product I'd ship, with Claude Code working from a CLAUDE.md, and Lighthouse and Playwright E2E checks gating every pull request.

Outcome

A portfolio that works as a product, with new case studies landing without code changes

Fast, considered at every breakpoint, and shaped by who it's actually for. The design-to-dev gap that most portfolios advertise but few demonstrate closes here, with the site itself as the case study.