📖 지금까지 참여한 프로젝트와 여러 경험을 중심으로 Portfolio를 구성했습니다.
배포주소 : ( https://woodaefolio.com )
실행 명령어 `npm run dev`
public
L icons
L images
src
L app
L components
L Intro // 페이지 네비게이션 및 배경 이미지 등 설정
L About // 나를 소개하는 부분
L LinkBanner // 나와 관련된 Link 연결
L ProjectList // 참여한 프로젝트 소개
L ProjectDocs // 참여한 프로젝트와 관련된 문서 연결
L ToyProjectList // 수행한 토이 프로젝트 소개
L Bottom
L Footer
data ...
👻 섹션
- 포트폴리오를 만들면서 다양한 레이아웃과 다양한 UI를 담기 위해 노력했습니다. 따라서 UI 측면이나 기능적인 측면에서 중복되는 부분이 적었습니다.
- 이러한 이유로 각 컴포넌트들을 섹션 단위로 묶어 컴포넌트를 구성했습니다.
- ex) About 섹션, ProjectList 섹션 ... (위의 폴더 구조와 동일)
🐤 반복되는 UI 또는 기능
- 우선 섹션을 기준으로 컴포넌트를 분리하고 해당 섹션 내에서 반복되는 UI나 기능을 별도의 컴포넌트로 분리했습니다.
- 페이지가 복잡하지 않으며 포트폴리오의 특성상 가독성이 좋은 페이지를 구성하고자 노력했습니다.
- 복잡하지는 않지만 심심하지 않은 페이지를 만들기 위해 노력했습니다. 이를 위해 animation 적용, scroll시 header UI 변경 등 유저의 행동에 따라 동적인 변화를 주었습니다.
- 다양한 UI를 구성하고자 했습니다. 캐러셀, 포스트 글 형태, 게시판 형태 등 각 섹션 별로 다른 UI를 제공해 보다 재미있게 만들기 위해 노력했습니다.
- 깔끔한 portfolio를 만들고자 했습니다. (토스, 당근, 배민문방구, 올리브영 등 많은 사이트를 찾아보면서 최대한 트렌디하게 만들고자 했습니다만.. 최선은 다 했습니다..😢)
- daisyUI 캐러셀에서 tw-elements의 캐러셀 컴포넌트로 변경 ( 23.08.16 )
앞으로도 지속적인 업데이트와 PORTFOLIO의 내용을 채워나가기 위해 노력할 예정입니다. 긴 글 읽어주셔서 감사합니다. 🖐️