Designing and building my own portfolio

After seven and a half years in one role, I knew the landscape had shifted. Tools had changed, and so had what people expect from a design portfolio. I set out to design and build my own site end to end, using AI-assisted tools to take it from Figma to a live, responsive website without writing code. The goal was simple: make it easy for someone to see my work, read my LinkedIn, download my CV and get in touch.

I looked at a wide range of design portfolios along with sites I simply admire, like Mobbin (opens in a new tab), Monofactor (opens in a new tab), and Stripe (opens in a new tab). I was drawn to clean white layouts with confident use of colour. Alongside this, I leaned into my love of typography and Swiss International Style posters, particularly Mike Joyce's Swissted series (opens in a new tab).

As an experiment, I didn't open Figma at all. I gave Claude Code my inspiration screenshots, Swiss typography references, a copy document and a strict prompt, then asked it to show me what it could do. It built a working site quickly. After sleeping on it, I realised I didn't like it at all, so I took the design back into Figma and let Claude Code handle the build.

I kept the design clean and minimal so the work could lead. I pulled a burnt coral from a Swiss poster and paired it with a black ink and a warm off-white, checking every combination for accessibility and adjusting the coral where needed. For type, I paired Gabarito for headlines, for its rounded, balanced feel, with DM Mono for labels and DM Sans for body copy. I then designed a reusable case study template and deliberately cherry-picked screens, leaving room to talk through the rest in person.

I built the site in Claude Code inside VS Code, the workflow I'd started using at tiney. The first build from my Figma files was close but not right: padding and margins were off and some details were guessed. Connecting the Figma MCP through a developer seat changed that, as Claude Code could read my files directly and match spacing precisely. I tested on localhost across browsers and on my own phone, refining responsive behaviour and mobile padding as I went, and committed everything to GitHub.

I also added small moments of play that nod to Swiss posters without getting in the way. The hero background is a dotted pattern where dots repel each other like magnets as the mouse moves. The word “impact” clashes coral and pink on hover, with letters lighting up individually. Buttons fill with a circle that grows from wherever the cursor enters. Images zoom gently on hover. Each page ends with a personal quote in the footer that changes to sum up that page.

I'm a designer, and the AI's first attempt showed me that the design judgement had to come from me. The work needed to be the hero, so every decision was about staying out of its way while still feeling like mine. On my about quote, “Good design is the kind people hardly notice,” a triangle pattern sits quietly in the page and flips when you hover, which is the quote in action. That's the balance I was aiming for across the whole site.

I registered my domain through Spaceship, connected it to Netlify, and hosted and deployed the site there, with every push to GitHub updating the live site automatically. This project proved to me that I can take a product from concept to a live, responsive website on my own. It also sharpened how I work with AI: it's fast and capable, but the design judgement still has to come from me.