포트폴리오 기획 & 제작 일지

개발자를 시작하려는 저를 소개하기 위해, 포트폴리오를 제작하게 되었습니다.

 

 

다른 사람의 포트폴리오를 밴치마킹해서 참고를 했지만, 다들 화려한 라이브러리와 멋있는 디자인을 사용해서

저는 포트폴리오를 심플하면서 깔끔한 1차 포트폴리오를 만들어 보겠습니다.

 

 

사용한 라이브러리

 

fullPage.js

 

fullPage를 사용해서 스크롤 한번 할 때마다 한 영역씩 이동하려고 했으나, 스크롤 마다 이벤트를 주는게 더 나아 보여서 캔슬했습니다.

 

 

 

AOS

 

fullPage를 사용하는 것 보다 AOS를 사용하여 페이지 요소 마다 애니메이션을 주는게 더 시각적으로 재밌어 보여서 AOS를 사용하였습니다.

 

 

 

 

 

 

색상 팔레트

 

색상은 많이 사용하지 않을 것이다. 애초에 포트폴리오를 심플하면서 깔끔한 포트폴리오를 만들 예정이었어서 색상을 딱 세가지만 사용할 것이다. 배경색으로 #192028, 멘트 색으로 #f2 f2 f2, 마지막 포인트 컬러로 #ffc400을 사용

그리고 배경색을 #f2f2f2색을 사용할 시 멘트 색을 #192028로 사용

 

 

포트폴리오를 심플하면서 깔금한 포트폴리오를 만들 예정이여서, 주 색상 3개로 색상은 많이 사용하지 않겠습니다.

 

 

배경 : #f3f3f3

 

포인트 컬러 : #08a045

 

Stack 소개 : #2e7d32

 

 

 

들어갈 내용 정리

 

포트폴리오에 기본적으로 들어가야 하는 내용 정리

 

1. 프로필 : 이름, 생년월일, 이메일, 연락처
2. 스킬 : HTML, CSS, JavaScript....
3. 자격증
4. 교육과정 : 입학, 졸업
5. 스킬
6. 프로젝트
7. 마무리

 

밴치마킹

 

디자인이 부족한 저에게는 벤치마킹 없으면 디자인을 하지 못하기에 벤치마킹을 열심히 했습니다.

다른 사람들 포트폴리오도 많이 보고 괜찮은 디자인은 스크랩해놓고 자주 보고 며칠 동안은 벤치마킹만 하였고,

포트폴리오들을 많이 보게 되면 괜찮은 JS 라이브러리가 많이 있어서 JS도 많이 찾아보았습니다.

 

 

내용 배치

 

표지 -> About Me -> Skill -> Project -> Footer

 

1. 표지 : 왼 상단 버튼 2개 (깃, 블로그), 메인 멘트, 개인정보, 자격증, 교육과정
2. About Me : 간단한 자기소개
3. Skill  : 게이지 바를 이용하여 나의 기술을 소개
4. 프로젝트 : 프로젝트 갯수, 프로젝트 소개, 프로젝트 제작 과정......
5. 푸터 : 깃허브와 블로그 연결 버튼

 

기획은 이렇게 만들었습니다.

 

 

포트폴리오 전반 소개는 다음 글에 제작하겠습니다.