📌 HAYOON DESIGN - 포트폴리오 웹사이트

🔹 프로젝트 개요

• 작업 기간: 2024.10 ~ 2024.10
• 작업 범위: 전체 UI 시안 디자인, 프론트엔드 개발
• 사용 도구: Figma, Adobe Photoshop, Adobe Illustrator, HTML5, CSS3 (Flex/Grid), JavaScript (ES6+), GSAP, ScrollTrigger, Locomotive Scroll, Swiper.js, AOS, JSON, Git, GitHub, Visual Studio Code
• 포트폴리오 홈페이지 바로가기 : www.hayoondesignllc.com

🔹 프로젝트 목적

디자인 전문성과 수상 실적을 시각적/기술적으로 극대화하여 표현하는 포트폴리오 웹사이트 구축

• 디자인 전문성 강조: 하이엔드 디자인 스튜디오의 고급스러운 브랜드 이미지와 프로젝트의 몰입도 높은 경험을 전달하는 웹사이트 구현.
• 성능 및 접근성 최적화: 다크 테마 기반의 풍부한 시각적 요소를 최소화된 로딩 시간과 안정적인 성능으로 제공하여 사용자 경험 극대화.
• 풀스택 기술력 입증: 정적인 디자인 페이지를 넘어, 콘텐츠 관리의 효율성과 유연한 확장성을 갖춘 안정적인 아키텍처를 설계 및 구축하여 풀스택 역량 입증.

🔹 디자인 포인트

• 프론트엔드 & UI/UX 구현 (디자인 시각화 및 인터랙션)

• 반응형 웹 및 크로스 브라우징: 데스크톱, 태블릿, 모바일까지 모든 기기에서 최적화된 레이아웃과 일관된 사용자 경험을 제공하도록 CSS Grid/Flexbox 기반으로 설계. • 고급 애니메이션 및 인터랙션: GSAP 라이브러리를 활용하여 스크롤 기반의 역동적인 섹션 전환($\text{e.g., Portfolio 섹션}$) 및 요소별 섬세한 애니메이션($\text{e.g., Moon 이미지 애니메이션}$)을 구현하여 디자인 몰입도 향상. • 최적화된 이미지 및 미디어 로딩: lazy loading 및 WebP 포맷 적용, 비동기 데이터 처리를 통해 풍부한 시각 콘텐츠에도 불구하고 Core Web Vitals 성능 지표를 높게 유지.

🔹 담당 역할

기획/설계

프로젝트 요구사항 분석 및 기능 정의, 전체 서비스. 기술 스택 및 아키텍처(프런트-백엔드 연동) 설계

프런트엔드