[Portfolio] 포트폴리오 사이트

김진영·2022년 12월 11일
0

Portfolio

목록 보기
6/6

📋 포트폴리오 사이트

사용한 기술 스택
FE : TypeScript React.js recoil Firebase styled-component Vite

JUSTCODE 6기 부트캠프 과정이 끝나고 본격적으로 구직 활동을 시작하기 위해 포트폴리오를 이 블로그에 올리기 시작했습니다.

굳이 포트폴리오를 블로그에 올린 이유는 개인 블로그에 올려놓으면 접근성이 좋아 어색하거나 잘못된 부분이 있으면 그때마다 바로 수정이 가능하고 또 마크다운을 통해 간편하게 내용을 작성할수 있는 등 다양한 장점이 있다고 생각하여 블로그에 게시하게 되었습니다.

하지만 포트폴리오를 작성하고 나니 한눈에 모아볼 수가 없어서 어떤 방식으로 포트폴리오를 모을까 고민하다가 현재 공부중인 TypeScript도 연습할 겸 TypeScript + React.js로 포트폴리오 웹사이트를 만들기로 결정했습니다.


🔗 링크

💻 GitHub

🌐 배포 링크


🧿 포트폴리오 2.0

사실 이 포트폴리오는 중간에 한번 뒤엎었던 기록이 있습니다.

초기 버전을 만들다 보니 디자인이 마음에 들지 않아 새로운 브랜치를 파서 디자인만 뒤엎으려고 했습니다.

하지만 수정하며 계속 포트폴리오를 살펴보니 제 자신을 충분히 어필하지 못하고 제 기술에 대한 숙련도를 제대로 나타내지 못하는 포트폴리오라는 생각이 들었습니다.

때문에 포트폴리오의 구조도 일부 수정하고 Timeline 섹션을 추가하여 보기에도 좋고 저를 더 어필할 수 있는 포트폴리오로 재탄생시켰습니다.

😮 실패했던 포트폴리오 1.0


🔧 기능 설명

1. Firebase

처음엔 mockdata를 통해 기술 스택, 프로젝트, 타임라인 데이터를 관리하고 있었지만 데이터는 계속해서 수정해야하기 때문에 Firebase를 통해 관리할 수 있도록 개선했습니다.

2. About Me

타이핑 애니메이션을 구현했습니다.

직접 구현할까 생각했지만 react-simple-typewriter라는 라이브러리가 잘 정리되어있어 이 라이브러리를 통해 구현했습니다.

3. Skills

흔히 말하는 Accordion 형태로 Skills를 구현했습니다.

초기버전에선 단순히 기술명만 명시해놓았는데, 기술에 대한 저의 숙련도를 알리고싶어 클릭했을 때 내부 요소의 높이값이 변경되며 안의 내용이 나타나게 하도록 설정했습니다.

4. Projects

우선 맨 위에 필터를 놓아 전체, 팀 프로젝트, 개인 프로젝트, 인턴십으로 프로젝트를 필터링 할 수 있도록 구현했습니다.

또 프로젝트를 클릭하면 view width가 1024px이 넘어갈 시 모달창 안에 포트폴리오가 나오도록 했고, 1024px 이하라면 포트폴리오가 새창에서 열리도록 설정했습니다.

5. Timeline

반응형으로 구현하여 view width가 일정 크기 이하가 되면 내부의 font-size들이 줄어들도록 했습니다.

6. Header

react-scroll 라이브러리를 통해 각 메뉴를 클릭했을 때 해당 컴포넌트로 이동할수 있도록 구현했습니다.

또 반응형으로 구현하여 view width가 일정 크기 이하가 되면 로고와 메뉴를 분리하여 메뉴가 화면 하단에 나타나도록 했습니다.

7. Mouse Tracker

마우스의 위치를 state로 설정하고 전역객체에 마우스가 이동될 때마다 state값을 변경해주는 이벤트를 추가해주었습니다.

그리고 애니메이션 라이브러리인 framer-motion 라이브러리를 통해 Mouse 컴포넌트가 현재 마우스 위치를 부드럽게 따라가도록 구현했습니다.

뿐만 아니라, 클릭 가능한 요소ex) 링크, 메뉴 등에 마우스를 올리면 Mouse Tracker의 animate상태가 바뀌어 사이즈가 커지는 기능을 추가했습니다.

이 animate의 상태는 recoil 라이브러리를 통해 전역적으로 관리했습니다.


💪 내가 성장한 부분

1. 새로운 언어에 적응

포트폴리오를 아직 익숙하지 않은 언어인 타입스크립트를 통해 만들다 보니
처음엔 계속해서 문법을 구글링하며 찾던 제가 어느덧 구글링 없이도 포트폴리오를 만들 수 있게 되어있었습니다.

2. 타입스크립트를 사용하는 이유를 깨닫다

작은 프로젝트라 사실 타입스크립트의 중요성이 크게 부각되진 않았지만,
그럼에도 타입을 정적으로 선언하여 사용하다 보니 나중에 큰 프로젝트를 할 때에도 타입스크립트를 사용하면 컴파일 단계에서 미리 오류를 포착해 해결할 수 있을 것 같다는 생각이 들었습니다.

0개의 댓글