Overview

This project was built to showcase my skills in modern web development. It features a completely custom design, 3D interactive elements, and a robust content management system using MDX.

Technical Challenge

One of the main challenges was integrating React Three Fiber for the 3D hero section while maintaining high performance and accessibility (Lighthouse score > 90).

Solution

I used next/dynamic to lazy load the 3D scene so it doesn't block the main thread during initial load. I also implemented a static fallback for mobile devices and users who prefer reduced motion.

const Hero3D = dynamic(() => import("./Hero3D"), {
  ssr: false,
  loading: () => <HeroStatic />,
});

Performance & SEO

The site achieves a perfect 100 Performance score on Lighthouse mobile. We used next/font to optimize font loading and implemented a custom metadata generation strategy for dynamic OpenGraph images.