Designing my portfolio like a product
Built a portfolio website from scratch, treating it as a product design challenge with audience research, technical decision-making, and a content system designed to scale.
•Lead Product Designer
Claude AI
Cloudflare
Cloudinary
Figma
GitHub
Linear
Miro
Netlify
Shadcn
Nextjs
Visual Studio Code
Tailwind CSS
Supabase
Render
React
Radix UI
Why start again?
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.
Who is this for?
Before designing anything, I mapped out every type of person who might land on the site and plotted them on a 2x2 matrix: browsing vs evaluating, aesthetics vs information. Friends, family, students, fellow designers, collaborators, conference organisers, hiring managers, recruiters, potential clients.
That made the priority clear. The people who matter most cluster in the evaluating/information corner. They want evidence and substance. The site needed to serve them first, while still working for everyone else.
Knowing what I didn't want
Getting clear on the audience made the constraints obvious. I didn't want a site where performance was sacrificed for flashy effects, animations that look impressive in a demo but slow things down for real users on real devices. I didn't want people to have to click three times to find out who I am.
The about page became the homepage. The most recent project sits right there on arrival. The nav isn't hidden behind a burger menu on mobile because with four pages, there's no reason to hide it. Every one of those decisions came from asking the same question in reverse: what would make this worse? Cutting those things out is what made it better.
Less is more, applied literally
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 because it didn't make the site better.
The same thinking applied to the visual identity. The palette is deliberately neutral, leaning on photography and project visuals rather than a strong personal brand colour. Every case study comes with its own personality, so imposing a dominant colour would have created clashes rather than cohesion. Keeping it neutral lets the work speak without competing with it.
That restraint extended to the logo too. Rather than a full wordmark or a generic placeholder, I designed a custom "g" monogram from scratch - small, personal, and unobtrusive. It signs off on the work without demanding attention.
A system for stories
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 content dictates the layout, not the other way around.
The stack and the standards
Instead of hand-coding everything to prove a point, I embraced Next.js, Radix UI/shadcn, and Lucide - trusting frameworks that handle semantics, accessibility, and performance so I could focus on content, structure, and experience.
Every platform was chosen against the same three criteria:
- Free or low cost at portfolio scale - no surprise bills when traffic spikes
- Sustainable long term - nothing that locks you in or disappears
- Replaceable without bringing everything else down - modular by design
Netlify for hosting, Render for the API, Supabase for the database, Cloudflare for DNS. None of them lock you in. None of them cost anything until you outgrow them.
Responsive behaviour got the same level of attention. The site had to work across every breakpoint without compromise - not just technically, but felt considered at every size. Component behaviour changed across breakpoints too. On desktop, hover states trigger tooltips. On touch screens, those same tooltips become a drawer. That level of detail is the difference between a site that works at every size and one that actually feels right at every size.
I tracked all the work in Linear the same way I would a real product: raising tickets, assigning to cycles, prioritising to stay focused. Every pull request included a Lighthouse check.
What came out of it
A portfolio that actually works as a product. Flexible enough to tell different stories in different ways. Fast and lightweight. Built on a stack I fully understand and control. Shaped by a clear picture of who it's for and what they need from it. Adding new case studies is straightforward, and the content can evolve without touching the codebase.
The real takeaway
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."
