Project
: 최지은 포트폴리오Project duration
: 2023.08.31 - 2023.09.31Link
: 배포 사이트피그마 구상도
: 피그마 임시 구상도Stack
: Vite, React, TypeScript, Redux Toolkit, Tailwind CSS, Styled Components
노션, 템플릿 소스 등을 이용할 수 있었지만 저만의 포트폴리오
사이트를 가지고 싶어 제작했습니다.
주요 색상인 black & white
로 심플하고 차분한 느낌을 줬고,
간단한 자기 소개와 프로젝트, 이력 등 중요도 순으로 배치해 내용을 구성했습니다.
이를 통해 포트폴리오를 보는 사람들에게 원하는 정보를 쉽게 전달할 수 있도록 했습니다.
지금에서 마무리하지 않고 개선할 점을 찾으며 업데이트하고 있습니다.
Redux Toolkit
을 활용해 조건에 따라 모달창 내용 다르게 표시- react-router-dom 도입으로 인해
Redux Toolkit
활용가치 떨어짐 (라이트 모드, 다크 모드 도입해 보기)
- react-router-dom 도입으로 인해
framer-motion
라이브러리를 활용해 초기 화면에 시선 집중하도록 작업- 사용자 경험을 개선하기 위해 tooltip 추가
Tailwind CSS
를 활용해 일관된 스타일의 반응형 작업- 데이터를 객체 형식의 데이터로 분리해 진행
useRef
등을 활용해 스크롤 시 특정 컨포넌트 애니메이셔 효과 작업, 다른 컴포넌트에서도 사용할 수 있도록 Custom Hook으로 만들어 재사용
- 프로젝트 디테일 영역 문제해결 섹션 추가하기
- 프로젝트 영역 탭 메뉴 추가하기
- 시작 화면 애니메이션 스킵 기능 고려해 보기
- 이력서 바로가기 버튼 추가 고려해 보기 (개인 정보 이슈로 고민)
- mdx파일 도입해 보기 (프로젝트 디테일 내용이 많아짐에 따라 고려 중)
- react-markdown 도입으로 가독성 높이기 (임시)
[회고][나의 포트폴리오 만들기]
[회고][포트폴리오 개선하기]
[개선][Tooltip 추가하기]
Main |
---|
- 소셜 링크(GitHub, Velog) - 업데이트 날짜 - 간략한 소개 표시 |
About me |
---|
- 인터뷰 형식의 간략한 소개 - 간략한 사용 툴 및 스택 - 팀원 리뷰 바로보기 |
Career |
---|
- 기간, 기관명 - 활동 내역 - 사용했던 스택 |
Project |
---|
- 탭 메뉴로 카테고리별 확인 가능 - 프로젝트 명 - 간략한 소개 - 관련 태그 |
Education |
---|
- 기간, 기관명 - 활동 내역 - 사용했던 스택 |
Project Detail |
---|
- 프로젝트 상세 정보(기간, 인원 등) - 프로젝트 상세 내용(프로젝트 설명, 사용한 기술, 작업 기여도, 문제 해결) - 바로가기 링크(GitHub, 배포 링크, 관련 블로그 링크) |
Review Detail |
---|
- 팀원 및 멘토 리뷰 최신순으로 확인 (이름, 프로젝트 명 표시) |
Mop |
---|
- 끝 맺음 표시 - 소셜 링크 제공 |