💻 Portfolio (개인 프로젝트)
소개
- 개인 포트폴리오 웹 페이지
- 프로필, 사용 가능한 기술 스택, 진행한 프로젝트, 메일 등에 대한 정보 제공
- Main page, 자기소개 page, 프로젝트 page, contact page로 구성
- Header를 통해 페이지 간 이동 가능
- 로고, About, Projects, Contact로 구성
- 로고 클릭 → Main page로 이동
- 로고에 있는 작은 원이 360도 돌아가는 애니메이션 구현
Main page
- react-typed 라이브러리를 활용하여 타이핑 애니메이션 구현
About page
- 프로필, github, velog, notion, 경력 사항, 다룰 수 있는 기술 스택 소개
- react-reveal 라이브러리를 활용하여 scroll interaction 구현
Projects page
- 진행한 프로젝트들 소개
- 진행 기간, 참여 인원, 사용한 기술 스택, 프로젝트에 대한 간단한 설명과 캡처를 보여줌
- GITHUB 버튼을 클릭하면, 해당 프로젝트 repository로 이동
- LINK 버튼을 클릭하면, 배포된 웹사이트로 이동
- react-reveal 라이브러리를 활용하여 scroll interaction 구현
Contact page
- 연락할 수 있는 메일과 휴대폰 번호 소개
- react-reveal 라이브러리를 활용하여 scroll interaction 구현
느낀 점
- 짧은 기간, 적은 인원으로 진행하다보니 웹 퍼블리싱 수준의 프로젝트를 하게 된 부분이 다소 아쉬움
- 개발을 하다보니 기능별로 component를 분리한 것이 아니라, 페이지별로 componenet를 분리하게 되었는데, 이는 react의 component 장점을 제대로 활용하지 못한 부분
- 페이지 구조가 간단하다보니, sass를 사용하지 않고 직접 클래스명을 지정하여 css를 적용하였는데, 이 역시 좋은 방법은 아니었음
- CLOUDTYPE을 이용하여 배포를 진행하였는데, 무료로 배포가 가능한 점은 좋으나 도메인 주소가 복잡하여 접근성이 중요한 포트폴리오 페이지 배포용으로는 적절치 않아보임 (배포 사이트 변경 필요)
- 비교적 익숙한 JavaScript로 프로젝트를 진행하였는데, typeScript로 리팩토링을 해보면 좋은 경험이 될 것 같음
