loading
HomeAboutMeProjectsContact
© 2024 SUJIN’S PORTFOLIO ALL RIGHTS RESERVED.
logo010-9507-9609/asgol9609@gmail.comhamburger button
SOLO PROJECT

/PORTFOLIO SITE

2024.04.15 ~ 2024.05.31
DESIGN, FRONT-END
이 사이트는 Next.js 14의 App Router 기능을 활용하여 제작한 개인 포트폴리오 웹사이트입니다. 자기소개와 프로젝트 포트폴리오를 소개하고 있으며, 디자인과 프론트엔드 개발을 모두 직접 담당했습니다. 반응형 웹 디자인을 적용하여 모바일에서도 최적화된 경험을 제공합니다.
GITHUBLIVE DEMO
📝 주요기능 및 특징
🛠️ 사용 기술 및 언어
NEXTJS
TYPESCRIPT
CSS-MODULE
📊 작업 기여도
웹 디자인
  • Figma를 활용한 전체 사이트 디자인
  • 모바일 반응형 디자인 적용
Full Page Scroll 기능 구현
  • useRef, WheelEvent, currentSectionIndex 활용하여 직접 구현
이메일 전송 기능 구현
  • Email.js API를 활용하여 Contact 페이지에서 이메일 전송 기능 구현
모달 라우팅 구현
  • Next.js 14의 Intercepting Routes와 Parallel Routes 기능 활용
  • 모달 창 내에서 탐색 시 모달로 렌더링, 새로고침 시 독립 페이지로 렌더링하여 사용자 경험 향상
💥 트러블 슈팅
Trouble1. Full Page Scroll 기능 구현 이슈
  • 문제: react-fullpage 라이브러리 사용 시 모달 창 스크롤과 충돌하는 이슈 발생
  • 해결:useRef, WheelEvent, currentSectionIndex를 활용하여 직접 구현
Trouble2. 스크롤 이벤트 과다 발생 이슈
  • 문제: Full Page Scroll기능의 스크롤 이벤트가 과도하게 발생하여 성능 저하 초래.
  • 해결: Lodash 라이브러리의 throttle 기능을 적용하여 0.3초마다 이벤트 발생하도록 최적화.
Trouble3. 로딩 화면 이슈
  • 문제: Next.js의 loading.tsx 파일을 사용하면 모든 로딩 상황에서 로딩 화면이 표시됨
  • 해결:useState를 활용하여 초기 실행 시에만 로딩 화면이 표시되도록 구현
📸 사이트 캡쳐
클릭시 크게 볼수있습니다.
메인 페이지
자기소개 페이지
프로젝트 목록 페이지
프로젝트 소개 페이지
사이드 메뉴
contact 페이지
THIS IS MY PORTPOLIO.