// Eldora Animated Portfolio

Eldora Animated Portfolio

3D Portfolio / Next.js / React Three Fiber / Eldora UI

One-liner summary: An animated 3D portfolio website built for Prince Jeruh Reyes using Next.js 14, React Three Fiber, Eldora UI components, and GSAP -- featuring immersive 3D scenes, blobity cursor effects, and smooth page transitions.

Live site: pjreyes.vercel.app

Features

• 3D interactive scenes with React Three Fiber, Drei, and Rapier physics
• Blobity custom cursor for immersive navigation
• Preloader animation on page entry
• Animated sections: Hero, About, Work, Tools, Contact
• GSAP-powered scroll-triggered animations
• Framer Motion for UI transitions
• Dark theme with custom styling
• Fully responsive design

My Contributions (Role & Responsibilities)

Full-Stack Development:

• Built the entire portfolio website from scratch using Next.js 14
• Integrated React Three Fiber for 3D scenes and interactive elements
• Implemented blobity custom cursor system
• Created preloader animation for smooth entry experience

UI/UX Design:

• Designed all sections: Hero, About, Work, Tools, Contact, Footer
• Applied Eldora UI open-source animated components
• Implemented GSAP scroll-triggered animations for section reveals

Animations:

• 3D object rendering with Three.js/Drei
• GSAP timeline animations for scroll-based reveals
• Framer Motion for component-level transitions
• Kinet and Leva for fine-tuning animation parameters

Challenges Faced

• 3D performance: Balancing visual richness with smooth performance across devices required optimizing Three.js scenes
• Custom cursor integration: Making the blobity cursor work seamlessly with 3D canvas elements
• Animation coordination: Syncing GSAP scroll animations with Framer Motion component transitions without conflicts
• Responsive 3D: Ensuring 3D scenes look good and perform well on mobile devices

Project Architecture

• Framework: Next.js 14 App Router
• 3D Engine: React Three Fiber, Drei, Rapier
• Animation: GSAP, Framer Motion, Kinet
• UI: Tailwind CSS, FontAwesome Icons, React Icons
• Curso Blobity custom cursor
• Tools: Leva (debug panel), Meshline (3D lines)
• Deployment: Vercel

Demo Preview

• Live Site: pjreyes.vercel.app
• Platform Views: Web (responsive)
• Sections: Preloader, Hero, About, Work, Tools, Contact, Footer
• Functionality Shown:
  • 3D interactive hero with Three.js
  • Smooth scroll-triggered animations
  • Custom cursor with blobity effect
  • Project showcase with Work section
  • Contact form
  • Dark-themed responsive layout

Development Resources

• Guides/Docs:
  • Next.js, React Three Fiber, GSAP, Framer Motion documentation
  • Eldora UI component library (eldoraui.site)

If you need further details, please contact the author directly.