LIGTAS_NA_LINK // 0x00F4B00 ENCRYPTION: AES-256-GCM OVERRIDE: MALI
DALOY_DATOS // NAGBU-BUFFER MEM.SISTEMA // 0.0MB VRAM // 0.0MB
NODE // ONLAYN LATENCY // 14ms
> SIMULA_SEQ // KERNEL_LOAD... OK
SISTEMA AY INA-INITIALIZE...
[000%]
// Eldora Animated Portfolio
Eldora Animated Portfolio
3D Portfolio / Next.js / React Three Fiber / Eldora UI
One-liner summary:
Isang animated 3D portfolio website na binuo para kay Prince Jeruh Reyes gamit ang Next.js 14, React Three Fiber, Eldora UI components, at GSAP -- na nagtatampok ng mga immersive na 3D scene, blobity cursor effects, at smooth na transition ng pahina.
Live site: pjreyes.vercel.app
Mga Tampok
3D interactive scenes na may React Three Fiber, Drei, at Rapier physics
Blobity custom cursor para sa immersive na nabigasyon
Preloader animation sa pagpasok ng pahina
Mga animated na seksyon: Hero, About, Work, Tools, Contact
GSAP-powered scroll-triggered animations
Framer Motion para sa mga UI transition
Dark theme na may custom styling
Ganap na responsive na disenyo
Aking mga Kontribusyon (Tungkulin at Responsibilidad)
Full-Stack Development:
Binuo ang buong portfolio website mula sa simula gamit ang Next.js 14
Isinama ang React Three Fiber para sa mga 3D scene at interactive na elemento
Ipinatupad ang blobity custom cursor system
Gumawa ng preloader animation para sa smooth na karanasan sa pagpasok
UI/UX Design:
Dinisenyo ang lahat ng seksyon: Hero, About, Work, Tools, Contact, Footer
Inilapat ang Eldora UI open-source animated components
Ipinatupad ang GSAP scroll-triggered animations para sa pagpapakita ng seksyon
Mga Animation:
3D object rendering gamit ang Three.js/Drei
GSAP timeline animations para sa mga reveal na nakabase sa scroll
Framer Motion para sa mga transition sa antas ng component
Kinet at Leva para sa fine-tuning ng mga parameter ng animation
Mga Hamon na Kinaharap
3D performance: Ang pagbalanse ng visual richness sa smooth na performance sa lahat ng device ay nangangailangan ng pag-optimize ng mga Three.js scene
Custom cursor integration: Paggawa sa blobity cursor na gumana nang walang putol sa mga 3D canvas element
Animation coordination: Pag-sync ng GSAP scroll animations sa Framer Motion component transitions nang walang mga conflict
Responsive 3D: Pagtiyak na ang mga 3D scene ay maganda ang hitsura at gumagana nang maayos sa mga mobile device
Arkitektura ng Proyekto
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
Mga Tool: Leva (debug panel), Meshline (3D lines)
Deployment: Vercel
Demo Preview
Live Site: pjreyes.vercel.app
Mga View ng Platform: Web (responsive)
Mga Seksyon: Preloader, Hero, About, Work, Tools, Contact, Footer
Functionality na Ipinakita:
3D interactive hero gamit ang Three.js
Smooth na scroll-triggered animations
Custom cursor na may blobity effect
Project showcase na may Work section
Contact form
Dark-themed responsive na layout
Mga Resource sa Pagbuo
Mga Gabay/Docs:
Dokumentasyon ng Next.js, React Three Fiber, GSAP, Framer Motion
Eldora UI component library (eldoraui.site)
Kung kailangan mo ng karagdagang detalye, mangyaring makipag-ugnayan nang direkta sa may-akda.