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.

@keyframes hover-bounce {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

🛠️ 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. ⚡