Yeoni's Portfolio
본 프로젝트는 디자이너에서 퍼블리셔로 성장하는 과정을 담은
개인 포트폴리오 사이트입니다.
기획, 디자인, 개발까지 전 과정을 단독으로 수행하였으며,
다양한 라이브러리와 애니메이션 기술을 활용하여 인터랙티브한 경험을 구현했습니다.
포트폴리오는 다음의 목표를 중점으로 설계되었습니다
- - 브랜드 아이덴티티를 반영한 개성 있는 UI 디자인
- - GSAP 및 Three.js를 활용한 몰입형 애니메이션 구현
- - 작업물의 효과적인 전달을 위한 정보 구조 설계
주요 기능
📌 Intro
- Three.js 3D 오브젝트인터랙티브한 3D 파티클 효과로 강렬한 첫 인상 제공
- 타이핑 애니메이션GSAP 기반 텍스트 등장 효과로 브랜드 메시지 전달
📌 About Me
- 스킬 영역사용 기술과 숙련도를 시각화한 스킬 바 구성
- 타임라인학습 경력과 성장 과정을 타임라인으로 표현
📌 Project
- 프로젝트 카드작업물을 카드형으로 배치하여 썸네일과 기본 정보 제공
- 디자인 필터카테고리별 필터로 원하는 작업물 탐색 기능
📌 공통 기능
- 스크롤 애니메이션GSAP ScrollTrigger를 활용한 섹션별 등장 애니메이션
- 커스텀 커서브랜드 감성을 살린 커스텀 마우스 커서 구현
- Contact 모달연락처 정보를 포함한 홀로그램 스타일 모달
폴더 구조
📦 yeoni-portfolio ┣ 📂 assets ┃ ┣ 📂 images ┃ ┗ 📂 videos ┣ 📂 css ┣ 📂 js ┣ 📄 index.html ┣ 📄 about.html ┣ 📄 project.html ┗ 📄 design.html
사용 기술 및 도구
- 개발 HTML5, CSS3, JavaScript, GSAP, Three.js, Swiper
- 디자인 Figma
- 개발 환경 VS Code