💡 woodaefolio

📖 지금까지 참여한 프로젝트와 여러 경험을 중심으로 Portfolio를 구성했습니다.

1. 배포 주소

🚀 WOODAEFOLIO 바로 가기

배포주소 : ( https://woodaefolio.com )

실행 명령어 `npm run dev`

2. 사용 기술

3. 폴더 구조

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 ...

4. 컴포넌트 분리 기준

👻 섹션

• 포트폴리오를 만들면서 다양한 레이아웃과 다양한 UI를 담기 위해 노력했습니다. 따라서 UI 측면이나 기능적인 측면에서 중복되는 부분이 적었습니다.
• 이러한 이유로 각 컴포넌트들을 섹션 단위로 묶어 컴포넌트를 구성했습니다.
• ex) About 섹션, ProjectList 섹션 ... (위의 폴더 구조와 동일)

🐤 반복되는 UI 또는 기능

• 우선 섹션을 기준으로 컴포넌트를 분리하고 해당 섹션 내에서 반복되는 UI나 기능을 별도의 컴포넌트로 분리했습니다.

5. 프로젝트를 진행하며

• 페이지가 복잡하지 않으며 포트폴리오의 특성상 가독성이 좋은 페이지를 구성하고자 노력했습니다.
• 복잡하지는 않지만 심심하지 않은 페이지를 만들기 위해 노력했습니다. 이를 위해 animation 적용, scroll시 header UI 변경 등 유저의 행동에 따라 동적인 변화를 주었습니다.
• 다양한 UI를 구성하고자 했습니다. 캐러셀, 포스트 글 형태, 게시판 형태 등 각 섹션 별로 다른 UI를 제공해 보다 재미있게 만들기 위해 노력했습니다.
• 깔끔한 portfolio를 만들고자 했습니다. (토스, 당근, 배민문방구, 올리브영 등 많은 사이트를 찾아보면서 최대한 트렌디하게 만들고자 했습니다만.. 최선은 다 했습니다..😢)

6. 업데이트

• daisyUI 캐러셀에서 tw-elements의 캐러셀 컴포넌트로 변경 ( 23.08.16 )

앞으로도 지속적인 업데이트와 PORTFOLIO의 내용을 채워나가기 위해 노력할 예정입니다. 긴 글 읽어주셔서 감사합니다. 🖐️