When building a developer portfolio, we often fall into the trap of using a standard template or a minimum viable product. But first impressions count. If your site looks simple or generic, visitors click away.
I wanted to build a developer portfolio that felt premium, minimalist, and alive with clean animations and micro-interactions.
Here is how I designed my portfolio using React 19, Next.js 16 (App Router), and Tailwind CSS v4, and solved the absolute nightmare of contribution graph sizing.
Most websites use a standard icon transition when toggling dark mode. I wanted a tangible feel, so I added instant audio feedback.
Instead of dealing with complex Web Audio API contexts or mobile tap delays, I implemented a pre-loaded HTML5 element that plays a light click sound seamlessly across both desktop and iOS Safari:
