Matt ZürrerCase Studies
Case Study 007 Portfolio Site

How to create a personal website that does not suck too much

The Design & Branding

I wanted a clearly structured site where the case studies take center stage, anchored by a strict grid, a dark layout, and bold colors. Everything was manually designed in Figma, which inevitably escalated into a full personal branding exercise. A welcome excuse to flex some visual design muscles outside of my day job.

Case study image
Case study image

Design-to-Code: Goodbye Vibe Coding

I refused to use off-the-shelf templates or (gasp) WordPress, opting instead to build a custom Next.js site. I’ve built Next.js marketing sites before, but this time I had a specific goal: achieve a pixel-perfect representation of my Figma design while manually writing as little code as possible.

Once the layouts were ready, I switched to the Antigravity IDE. The winning pipeline was surprisingly simple: grab the structural code from Figma Dev, feed it into an AI model (Claude worked best, though Gemini was decent), describe the desired interactions, and let the model generate the components. Goodbye, vibe coding; hello, exact execution.

The Infrastructure

To keep the architecture robust but low-maintenance, I integrated Sanity.io as a headless CMS so I could easily publish and manage these case studies. Finally, I routed all media through Cloudflare to keep performance snappy and costs low.

As it sometimes happens, the project escalated a little bit and turned into a personal branding exercise, which is just as well. I did enjoy it very much though and I learned a big deal about the most efficient and ultimately satisfying design-to-code workflow

Role

Role: Lead Product Designer

Context

About building this portfolio site