Building your own portfolio is supposed to be simple. Design a few pages, throw in some work samples, ship it. But I wanted to push what's possible.

What started as "I need a new site" spiraled into multiple design iterations and a technical obsession. Animation timing, performance tweaks, browser compatibility. The whole thing. End result? A site that performs while still having all the custom interactions and animations I wanted.

I wanted structure without the corporate feel. Swiss grid systems gave me that foundation. Clean and systematic but not soulless.

Color started with collecting moodboards and figuring out the goal. What feeling did I want? Then I ran AAA contrast tests, used HCT and Oklab color spaces to keep everything perceptually uniform. The palette feels deliberate instead of random.

Typography testing happened at the same time. Tried different fonts, pairings before finding the right one. Every size and weight follows a system. No guessing.

Designed in Figma. Built in Webflow for speed. But Webflow wasn't enough, so I moved to Astro.

The animation list is absurd: page transitions with stagger, magnetic cursor, scroll-triggered videos, infinite scroll, custom form states, interactive 3D animations. Each one needed custom JavaScript, GSAP timing, device-specific tweaks.

Cross-browser compatibility was its own challenge. Safari and Chrome render CSS differently. Touch devices need different hover logic. Responsive breakpoints needed custom animation behavior.

Performance meant minifying everything, server-side rendering, BunnyCDN for content delivery, Vercel for deployment, tweaking until Lighthouse hit 90+. You can have animations and still keep things fast. Beyond the interactions, I added Three.js (3D) animations to push it further.

I design and I code. This site shows both. If you're building something that needs this kind of attention, let's talk!