How I built this website with Claude Code
My old portfolio looked like every other developer site. I rebuilt it with Claude Code, from the design system to the SEO. Here is how that went and what I learned.
My previous portfolio had a problem a lot of developer sites have: it looked generated. For someone who tells clients he cares about UI/UX, that is a bad billboard. So I rebuilt it, and I used Claude Code for almost everything. This post is the honest version of how that went.
Start from a design direction, not a prompt
I collected four references on Dribbble first: brutalist, Swiss-style work with big type, off-white paper and one lime accent. I gave Claude Code the actual images. It read them and translated the direction into a design system: color tokens, an expanded grotesque for headlines, a mono font for the small labels, alternating light and dark sections.
The first version was already close. From there we iterated with screenshots: Claude takes them with a headless browser, looks at the result, and fixes what is off. It caught its own layout bugs that way, like a long project title overflowing its column on case pages.
Content without a CMS
My project content lived in a headless CMS. Claude wrote a sync script that pulled all 28 projects and my work history out, downloaded every image, and saved everything as JSON in the repo. The site now builds with zero external dependencies and my content is version-controlled like the rest of the code. If the CMS disappears tomorrow, nothing breaks.
For the case pages it went one step further: it visits the live project sites with a headless browser, takes fresh desktop and mobile screenshots, and the site presents them in a browser window or an iPhone frame depending on their orientation.
The numbers
Performance and accessibility were hard requirements, because this site is also a sales argument for client work.
- Lighthouse 100 / 100 / 100 / 100 on the home page, on mobile with simulated 4G
- Zero JavaScript shipped, the whole site is static HTML and CSS
- axe-core run on every page in two viewports: zero WCAG violations
- Self-hosted fonts, WebP images, structured data and an OG image on every page
What I learned
AI is genuinely fast at production work. Scaffolding, refactors, performance passes, accessibility audits: things that used to cost me evenings now cost minutes.
The judgment stays human. Review every claim AI writes about you. At one point it described a component library as something I built, when I had only worked with it. Nobody else would catch that. You have to.
Watch the writing. AI copy has tells: em dashes everywhere, “X, not Y” sentence constructions, punchy one-word endings. We stripped those out of every page deliberately, because text that sounds generated undermines the work it describes.
If you are a founder wondering whether AI-assisted development means lower quality, this site is the counterexample I can point to. It was fast to build and it still passes every audit you throw at it. That combination is the whole point.