Abdy Portfolio

I envisioned a portfolio that truly reflects my dual identity: a precise Web Developer 💻 and a creative Game Developer 🎮. A static resume felt flat; I wanted a site that felt alive. The design language draws heavy inspiration from sci-fi HUDs, game interfaces, and bold brutalist architecture.

⚡ The Tech Stack Strategy

This project served as my proving ground for the Next.js 14 App Router. Moving away from the traditional pages/ directory, I fully embraced React Server Components (RSC) to deliver lightning-fast initial loads while keeping the client bundle lean.

• ⚛️ Frontend: React, Next.js 14, and Framer Motion for buttery smooth page transitions.
• 🎨 Styling: Tailwind CSS for rapid, utility-first UI development and maintaining a strict design system.
• 🧊 3D Elements: React Three Fiber (R3F) brings interactive 3D models directly into the DOM without killing performance.
• 🗄️ Backend: Supabase provides the muscle for authentication and database management.

🌉 Bridging 2D and 3D

The core challenge was harmonizing the 3D canvas with the flow of HTML content. I utilized React Three Fiber to instantiate a floating "Hero" element 🏆 that tracks mouse velocity and position, creating a perceptible sense of depth and interactivity.

// 🖱️ Example: Interactive Hero Component
function HeroCanvas() {
  return (
    
      
      
      }>
        {/* The 3D model that reacts to user input */}
        
        
      
      
    
  )
}
        

🛠️ Dynamic Content Management

I rejected the idea of a generic CMS. Instead, I engineered a 100% custom admin dashboard using Supabase. This gives me absolute control over my data structure. The admin panel features:

1. 📝 Markdown Editor: A bespoke editor with live preview capabilities.
2. ☁️ Storage Handling: Drag-and-drop image uploads directly to Supabase Storage buckets.
3. 📊 Analytics: Real-time dashboard integration to track site traffic vs. engagement.

"✨ A portfolio should be more than a repository of links; it must be a living demonstration of the very skills it claims to possess."

🎯 Conclusion

This build taught me the delicate art of balancing heavy visual libraries like Three.js with the strict performance metrics of the modern web. The result? A stunning interface that still achieves a Lighthouse score of 98/100. ⚡