프로젝트 포트폴리오

1. 프로젝트 소개

자기소개와 작업목록을 담은 포트폴리오 페이지입니다.

현재 리펙토링 진행중입니다.

배포 페이지로 이동

크롬브라우저에 최적화 되어있으며 모바일 뷰 (500px)에서도 확인이 가능합니다.

### 2. 사용 툴 - HTML, JAVASCRIPT, REACT, SCSS - react-icon, react-router-dom

3. 페이지 구조도

• asset 폴더는 이미지와 동영상을 관리하는 폴더입니다.
• components는 페이지에 사용이 되는 컴포넌트들이 정리되어 있습니다.
  • UI는 여러 컴포넌트들이 공통으로 사용하는 컴포넌트를 따로 분리하였습니다.
• context는 전역에 사용되는 상태를 관리하는 폴더 입니다.
• data는 컴포넌트에서 사용하는 json 형태의 파일을 보관하는 폴더입니다.
• pages들은 router에 정의된 페이지들이며 components 폴더의 component가 각 페이지에 사용되어 있습니다.
• styles는 전역에 사용되는 style 입니다.
  • anmation.scss 텍스트 및 페이지 에니메이션입니다.
  • 공통으로 적용된 scss 입니다.
  • 기존 css가 가진 속성을 제거하는 scss입니다.

4. 구현사항

• scroll-snap-type 적용으로 슬라이딩 스크롤 구현
• keyframe과 height 값 감지를 통한 text 애니메이션 효과 (fade in&out 및 sliding)

• 1초 단위로 index 값 랜덤 생성 index에 대한 data 표시
• display: grid 사용으로 masonry view 구현
• useparams 사용으로 값에 따른 동적라우팅 구현

• newDate 사용으로 날짜 카운터 구현
• keyframes과 animation-play-state 속성 사용 자동이미지 슬라이더 구현
• background-attachment와 posiotion sticky 사용 작업목록 페이지 구현
• scroll indicator 적용으로 스크롤 상태 확인가능

• context 사용으로 navigation에 사용되는 값 전역 관리
• 스크롤 시 로고 투명도 조절
• 디테일 네비게이션 표시 시 화면에 overlay 적용