Next.js 포트폴리오 페이지 제작기 - 0. 프로젝트 구상

# 시작하기에 앞서

Next.js로 뭘 만들까 하다가 아이디어가 없어 한동안 알고리즘 공부만 하고 있었는데,

가장 중요한걸 빠뜨리고 있었다.

 

프론트엔드 개발자라면 자기 페이지 하나 쯤은 있어야 하는데, 그게 없다...!

 

고로 만든다.

(이걸 이제야 생각하는 나 자신 반성하자...)

 

# 프로젝트 구상

크게 두 페이지로 구성할 계획이다.

 

1. Welcome page

뭐든지 첫 인상이 가장 중요하다고 하였다.

여러 프론트엔드 개발자 분들의 포트폴리오를 검색해봤고, 그 중 아래 페이지가 가장 인상깊었다 .

http://parkjin.com/

 

방문자와 상호작용할 수 있는 welcome page를 준비하고

해당 상호작용을 자연스레 자신의 스토리와 연결짓는

말 그대로 순식간에 방문자를 자신의 이야기 속으로 빨아들이는 듯한 인상을 받았다.

경력을 보니 원래 디자인 쪽 일을 하신 것 같은데, 역시 예술을 하시는 분들은 위대하다.

 

2. Main page

말 그대로 메인 페이지이다.

클릭 기반으로 라우팅을 유도하는 페이지와 스크롤 기반으로 쭉쭉 내리면서 정보를 전달하는 페이지 중 후자가 더 깔끔해보여 이를 선택하기로 하였다.

또한 혹시나 모바일에서 접근 시에도 스크롤 기반으로 된 페이지들이 효과적일 것 같다는 생각을 하였다.

 

# Concept

이리저리 멋드러진 영감님이 나타나기만을 기다리며 웹 서핑을 하다가 코드펜에서 이런걸 발견했다.

https://codepen.io/akm2/pen/RwQXLdP

 

예시도 같이 첨부한다.

위에 마우스를 호버하면 이에 따라 파티클의 이동 방향이 달라지며,

마우스 왼쪽 버튼을 홀드하는 동안 파티클의 이동 속도가 빨라진다.

제일 좋아하던 노래가 넬의 백색왜성이고 얼마전까지 StarGazing이란 이름으로 밴드 활동까지 하던 나에게는 너무나도 아름다운 애니메이션이다.

 

그런고로 컨셉은 우주다.