Portfolio: Eldora Animated

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

DEMO LINK

Overview

• Role: Full-Stack Development & UI/UX Design
• Stack: Next.js 14, React Three Fiber, Eldora UI, GSAP, Tailwind CSS
• Key Result: Successfully delivered a highly immersive, interactive 3D portfolio
• 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.

The Problem

• Challenge: The challenge was manipulating the DOM and integrating 3D elements seamlessly, especially compared to the previous v1 "glass" portfolio which had a more established concept.
• Audience: Built for Prince Jeruh Reyes to support his upcoming internship and job hunt as a student.
• Constraints: There was no strict deadline, just an iterative back-and-forth process of adding and refining information.

Approach & Decisions

• Architecture: Simple, client-side focused Next.js 14 architecture.
• Key Decisions: Chose React Three Fiber and GSAP primarily out of a desire to try them out and learn their capabilities in a real-world scenario.
• Trade-offs: Minimized trade-offs; the end result is a visually impressive and highly functional website overall.
• Data Flow: Purely static/client-side data flow with no complex backend.

Key Results & Impact

• Outcome: The client was highly satisfied, stating that "it looks great".
• Impact: Provides a standout, professional online presence to aid in his 2026 internship and job hunt.

Technical Deep Dive

• Notable Details: Integrated a blobity custom cursor and applied Eldora UI open-source animated components.
• Verification: Maintained a straightforward codebase where the website content can be easily edited in one file.
• Optimizations: Implemented tons of optimizations along the way to balance visual richness with smooth performance across devices.
• Code Quality: Designed all sections (Hero, About, Work, Tools, Contact) with a dark theme and fully responsive layout.

Reflections

• Successes: Managed to effectively combine React Three Fiber with Next.js, achieving a high-quality, polished visual result without major compromises.
• Lessons: The iterative process reinforced the value of a flexible, easy-to-edit project structure.

My Contributions

• Template Customization: Utilized a prebuilt template as the foundation for the portfolio and customized the UI and layout to fit Prince Jeruh Reyes' specific needs.
• Content Integration: Swapped out placeholder content with real project data, adjusting the configuration and details to accurately reflect the client's work across all sections.
• Technical Adjustments: Managed DOM manipulations and tweaked the existing 3D elements (React Three Fiber) and scroll animations (GSAP) to align smoothly with the new content flow.

Project Architecture

The project follows a simple and straightforward client-side 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
• Cursor: Blobity custom cursor
• Tools: Leva (debug panel), Meshline (3D lines)
• Deployment: Vercel

Demo Preview

• Live Site: pjreyes.vercel.app
• Sections Shown: Preloader, Hero, About, Work, Tools, Contact, Footer
• Core Features: 3D interactive hero with Three.js, smooth scroll-triggered animations, custom cursor with blobity effect, project showcase with Work section, and a contact form on a dark-themed responsive layout.

Hosting Note:
The project is currently deployed and live on Vercel at the provided demo link.

Attribution:
This project was built using the Eldora UI Portfolio Template. Full credit for the original template design, components, and core configurations goes to Eldora UI.