• Project : 최지은 포트폴리오
• Project duration : 2023.08.31 - 2023.09.31
• Link : 배포 사이트
• 피그마 구상도: 피그마 임시 구상도
• Stack : Vite, React, TypeScript, Redux Toolkit, Tailwind CSS, Styled Components

설명

노션, 템플릿 소스 등을 이용할 수 있었지만 저만의 포트폴리오 사이트를 가지고 싶어 제작했습니다.
주요 색상인 black & white로 심플하고 차분한 느낌을 줬고,
간단한 자기 소개와 프로젝트, 이력 등 중요도 순으로 배치해 내용을 구성했습니다.
이를 통해 포트폴리오를 보는 사람들에게 원하는 정보를 쉽게 전달할 수 있도록 했습니다.

지금에서 마무리하지 않고 개선할 점을 찾으며 업데이트하고 있습니다.

작업사항

• Redux Toolkit을 활용해 조건에 따라 모달창 내용 다르게 표시
  • react-router-dom 도입으로 인해 Redux Toolkit 활용가치 떨어짐 (라이트 모드, 다크 모드 도입해 보기)
• 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
- 끝 맺음 표시 - 소셜 링크 제공