How It Started

Last year, my portfolio looked entirely different. It was a strict, highly minmal, black-and-white site. While it served its purpose at the time, it eventually felt a bit static. It lacked personality and didn't fully reflect my growth or energy as a developer. I wanted my next digital home to have real life, fluid motion, and a premium, modern feel that would instantly engage anyone looking at my work.

Beyond just upgrading the visuals, I saw a blank canvas as the perfect engineering playground. Instead of sticking with familiar tools, I deliberately chose to step out of my comfort zone and use this rebuild to learn new technologies that I was originally unfamiliar with: Next.js and TypeScript.

Building the System

Moving to a type-safe, component-driven architecture changed how I approached frontend layout construction. Navigating TypeScript forced me to explicitly map out data contracts, clearing compilation hurdles—like handling asynchronous dynamic route parameters and mapping complex lookups for my technology badge dictionary—before the code ever hit production.

To solve performance and give the portfolio speed, I leveraged Next.js' built-in components like Image for faster asset loading. I also utilized Markdown files for my project's case studie, which the site pre-compiles into raw, static HTML at build time.

To bring the website to life, I used Motion for the site's animations. I also implemented a custom preloader with my avatar, which ensures that the rest of the application loads perfectly under the hood before the user enters the site.

Outcome

This portfolio marks a massive personal milestone. It represents the exact moment I stopped building simple screens and started designing complete web experiences. It breathed life back into my digital presence, replacing the cold, monochrome layout of last year with better visuals, a more polished typography, and smooth motion curves.

Looking back at the structural blueprint, I certainly found areas where I spent hours wrestling with hydration mismatches and strict type definitions. However, those technical bottlenecks are exactly what made the project so valuable.

Ultimately, this website didn't just showcase my engineering journey—it accelerated it. It proved I could independently pick up Next.js and TypeScript, manage strict design details under pressure, and translate technical growth straight into a live, fluid production application.