Personal Portfolio

It was about time to update my portfolio website — and what better first Contra upload than this?

I wanted to play with vibe coding, hooking a few MCPs up to my design tools. The goal was to keep full control over the design, interactions, and effects, while vibe coding the logic from start to finish.

The website and experience were designed and built from scratch — the UI, navigation, interactions, and motion. I used the following:

Figma - for the UI and all static elements

After Effects - for the motion, particle and hover effects references

Claude Code - for building the logic from start to finish

Claude MCPs - to feed my design references to Figma

Github - initial deployment

Vibe coding a fully functional website from scratch takes more time than anticipated — even when all the assets and animation references are already designed.

Beyond building the logic itself, the biggest time sinks were:

Pixel-perfect design - it took quite a few iterations to get there

Speed optimization - loading times, plus the weight of the animations and effects

Responsive Design - getting the breakpoints right