Overview
This portfolio is more than just a resume, it's a comprehensive demonstration of modern frontend engineering. It balances high-end visual design with rigorous performance, accessibility, and SEO standards. Built on the Next.js App Router, it features a fully custom MDX blog system, dynamic case studies, and a highly interactive user interface, serving as a real-world example of scalable web application architecture.
The Challenge
The primary challenge was integrating complex, motion-heavy features like 3D skills visualization and fluid page transitions without compromising on Core Web Vitals or accessibility. Additionally, building a custom blog with syntax highlighting and ensuring the site ranks for competitive developer keywords (SEO) required a deep dive into Next.js metadata API and semantic HTML structure.
The Solution
I utilized React Server Components (RSC) to keep the initial bundle size low while delivering rich interactive experiences via Client Components. Framer Motion and Magic UI were used for hardware-accelerated animations. For content, I built a custom file-based CMS using MDX and `rehype-pretty-code` for server-side syntax highlighting. I also implemented a robust SEO strategy including dynamic sitemaps, Open Graph images, and JSON-LD structured data.