포트폴리오: Eldora 애니메이션

3D 포트폴리오 / Next.js / React Three Fiber / Eldora UI

데모 링크

개요

• 역할: 풀스택 개발 및 UI/UX 디자인
• 기술 스택: Next.js 14, React Three Fiber, Eldora UI, GSAP, Tailwind CSS
• 주요 성과: 몰입도가 높고 상호 작용이 가능한 3D 포트폴리오의 성공적인 제공
• 요약: Next.js 14, React Three Fiber, Eldora UI 구성 요소 및 GSAP를 사용하여 Prince Jeruh Reyes를 위해 구축된 애니메이션 3D 포트폴리오 웹사이트로, 몰입형 3D 장면, blobity 커서 효과 및 부드러운 페이지 전환이 특징입니다.

문제

• 과제: 특히 더 확립된 개념을 가지고 있던 이전 v1 "glass" 포트폴리오와 비교할 때, DOM을 조작하고 3D 요소를 매끄럽게 통합하는 것이 과제였습니다.
• 대상: 학생으로서 다가오는 인턴십과 구직 활동을 지원하기 위해 Prince Jeruh Reyes를 위해 구축되었습니다.
• 제약 조건: 엄격한 마감일은 없었으며 정보를 추가하고 구체화하는 반복적인 과정이었습니다.

접근 방식 및 결정

• 아키텍처: 단순하고 클라이언트 측에 중점을 둔 Next.js 14 아키텍처.
• 주요 결정: 실제 시나리오에서 그 기능을 시험해보고 배우고 싶은 마음에 주로 React Three Fiber와 GSAP를 선택했습니다.
• 절충안: 절충안을 최소화했습니다. 최종 결과는 시각적으로 인상적이며 전반적으로 매우 기능적인 웹사이트입니다.
• 데이터 흐름: 복잡한 백엔드 없이 순수하게 정적/클라이언트 측 데이터 흐름.

주요 결과 및 영향

• 결과: 고객은 "멋져 보인다"고 말하며 매우 만족했습니다.
• 영향: 2026년 인턴십 및 구직 활동을 지원할 수 있는 눈에 띄고 전문적인 온라인 입지를 제공합니다.

기술적 세부 정보

• 주목할 만한 세부 사항: blobity 사용자 지정 커서를 통합하고 Eldora UI 오픈 소스 애니메이션 구성 요소를 적용했습니다.
• 검증: 웹사이트 콘텐츠를 하나의 파일에서 쉽게 편집할 수 있는 간단한 코드베이스를 유지했습니다.
• 최적화: 다양한 장치에서 원활한 성능과 시각적 풍부함의 균형을 맞추기 위해 과정 전반에 걸쳐 수많은 최적화를 구현했습니다.
• 코드 품질: 어두운 테마와 완벽하게 반응하는 레이아웃으로 모든 섹션(히어로, 소개, 작업, 도구, 연락처)을 디자인했습니다.

성찰

• 성공: React Three Fiber를 Next.js와 효과적으로 결합하여 큰 타협 없이 고품질의 세련된 시각적 결과를 얻었습니다.
• 교훈: 반복적인 프로세스는 유연하고 편집하기 쉬운 프로젝트 구조의 가치를 강화했습니다.

나의 기여

• 템플릿 사용자 정의: 포트폴리오의 기반으로 사전 구축된 템플릿을 활용하고 Prince Jeruh Reyes의 특정 요구 사항에 맞게 UI 및 레이아웃을 사용자 정의했습니다.
• 콘텐츠 통합: 자리 표시자 콘텐츠를 실제 프로젝트 데이터로 바꾸고, 모든 섹션에 걸쳐 클라이언트의 작업을 정확하게 반영하도록 구성 및 세부 사항을 조정했습니다.
• 기술적 조정: DOM 조작을 관리하고 기존 3D 요소(React Three Fiber)와 스크롤 애니메이션(GSAP)을 조정하여 새로운 콘텐츠 흐름에 원활하게 맞췄습니다.

프로젝트 아키텍처

이 프로젝트는 간단하고 직관적인 클라이언트 측 아키텍처를 따릅니다.

• 프레임워크: Next.js 14 App Router
• 3D 엔진: React Three Fiber, Drei, Rapier
• 애니메이션: GSAP, Framer Motion, Kinet
• UI: Tailwind CSS, FontAwesome Icons, React Icons
• 커서: Blobity 사용자 지정 커서
• 도구: Leva(디버그 패널), Meshline(3D 선)
• 배포: Vercel

데모 미리보기

• 라이브 사이트: pjreyes.vercel.app
• 표시된 섹션: 프리로더, 히어로, 소개, 작업, 도구, 연락처, 바닥글
• 핵심 기능: Three.js를 사용한 3D 대화형 히어로, 스크롤로 트리거되는 부드러운 애니메이션, blobity 효과가 있는 사용자 지정 커서, Work 섹션이 있는 프로젝트 쇼케이스 및 반응형 어두운 테마 레이아웃의 연락처 양식.

호스팅 참고:
프로젝트는 현재 제공된 데모 링크의 Vercel에 배포되어 라이브 상태입니다.

저작자 표시:
이 프로젝트는 Eldora UI Portfolio Template을 사용하여 구축되었습니다. 원본 템플릿 디자인, 구성 요소 및 핵심 구성에 대한 모든 크레딧은 Eldora UI에 있습니다.