Portfolio: Eldora Animated

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

DEMO LINK

Pangkalahatang-ideya

• Tungkulin: Full-Stack Development at UI/UX Design
• Teknolohiya: Next.js 14, React Three Fiber, Eldora UI, GSAP, Tailwind CSS
• Pangunahing Resulta: Matagumpay na naihatid ang isang lubos na nakaka-engganyong at interactive na 3D portfolio
• Buod: Isang animated na 3D portfolio website na ginawa para kay Prince Jeruh Reyes gamit ang Next.js 14, React Three Fiber, Eldora UI components, at GSAP -- nagtatampok ng mga immersive na 3D na eksena, blobity cursor effects, at makinis na mga transition ng pahina.

Ang Problema

• Hamon: Ang hamon ay ang pagmamanipula sa DOM at pag-integrate ng mga 3D na elemento nang walang putol, lalo na kumpara sa nakaraang v1 "glass" portfolio na may mas matatag na konsepto.
• Audience: Ginawa para kay Prince Jeruh Reyes upang suportahan ang kanyang paparating na internship at paghahanap ng trabaho bilang isang mag-aaral.
• Mga Limitasyon: Walang mahigpit na deadline, isa lamang umuulit na proseso ng pagdaragdag at pagpino ng impormasyon.

Diskarte at Mga Desisyon

• Arkitektura: Simple at nakatuon sa client-side na Next.js 14 na arkitektura.
• Pangunahing Desisyon: Pinili ang React Three Fiber at GSAP pangunahin dahil sa pagnanais na subukan ang mga ito at matutunan ang kanilang mga kakayahan sa isang totoong sitwasyon sa mundo.
• Mga Trade-off: Pinaliit ang mga trade-off; ang huling resulta ay isang biswal na kahanga-hanga at lubos na gumaganang website sa pangkalahatan.
• Daloy ng Data: Purong static/client-side na daloy ng data nang walang kumplikadong backend.

Mga Pangunahing Resulta at Epekto

• Kinalabasan: Lubos na nasiyahan ang kliyente, na nagsasabing "mukhang maganda ito".
• Epekto: Nagbibigay ng isang namumukod-tangi at propesyonal na presensya sa online upang makatulong sa kanyang 2026 internship at paghahanap ng trabaho.

Teknikal na Pagsusuri

• Kapansin-pansing Detalye: Pinagsama ang isang blobity custom na cursor at inilapat ang mga open-source na animated na component ng Eldora UI.
• Pag-verify: Napanatili ang isang direktang codebase kung saan ang nilalaman ng website ay madaling ma-edit sa isang file.
• Mga Pag-optimize: Ipinatupad ang napakaraming pag-optimize sa daan upang mabalanse ang visual richness na may maayos na pagganap sa lahat ng device.
• Kalidad ng Code: Dinisenyo ang lahat ng seksyon (Hero, About, Work, Tools, Contact) na may dark theme at ganap na responsive na layout.

Mga Pagninilay

• Mga Tagumpay: Nagawang mabisang pagsamahin ang React Three Fiber sa Next.js, na nakamit ang isang de-kalidad at pinakintab na visual na resulta nang walang malalaking kompromiso.
• Mga Aral: Pinalakas ng paulit-ulit na proseso ang halaga ng isang nababaluktot at madaling i-edit na istraktura ng proyekto.

Aking Mga Kontribusyon

• Pag-customize ng Template: Ginamit ang isang prebuilt na template bilang pundasyon para sa portfolio at na-customize ang UI at layout upang umangkop sa mga partikular na pangangailangan ni Prince Jeruh Reyes.
• Pagsasama ng Nilalaman: Pinalitan ang nilalaman ng placeholder ng totoong data ng proyekto, inaayos ang configuration at mga detalye upang tumpak na maipakita ang gawa ng kliyente sa lahat ng mga seksyon.
• Mga Teknikal na Pagsasaayos: Pinamahalaan ang mga manipulasyon ng DOM at binago ang mga umiiral na 3D na elemento (React Three Fiber) at mga scroll animation (GSAP) upang maayos na umayon sa bagong daloy ng nilalaman.

Arkitektura ng Proyekto

Ang proyekto ay sumusunod sa isang simple at direktang client-side na arkitektura.

• 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 (mga 3D na linya)
• Deployment: Vercel

Demo Preview

• Live Site: pjreyes.vercel.app
• Mga Ipinakitang Seksyon: Preloader, Hero, About, Work, Tools, Contact, Footer
• Mga Pangunahing Tampok: 3D na interactive hero na may Three.js, makinis na scroll-triggered animations, custom na cursor na may blobity effect, project showcase sa Work section, at isang contact form sa isang dark-themed na responsive na layout.

Tala sa Pag-host:
Ang proyekto ay kasalukuyang naka-deploy at live sa Vercel sa ibinigay na link ng demo.

Atribusyon:
Ang proyektong ito ay ginawa gamit ang Eldora UI Portfolio Template. Ang buong kredito para sa orihinal na disenyo ng template, mga bahagi, at mga pangunahing configuration ay mapupunta sa Eldora UI.