소개

전직 활동용으로 자기 소개 페이지를 만들었습니다.

하지만 나는 이미 엔지니어 4학년인데, 단지 정적인 자기소개 페이지라면 일단 CRUD라든지를 하고 있는 입문용 TODO리스트에도 미치지 않고… .
라고 생각해 일단 배경을 움직이게 하거나 로그인의 유무에 의해 표시 내용을 바꾸거나 하도록(듯이) 했습니다.

배경이 반짝입니다.
다만, 배경이 시끄러움과 중요한 자기 소개를 읽을 때에 매우 신경이 쓰인다고 생각하기 때문에, 멈출 수 있도록 했습니다.
오른쪽 상단의 카메라 아이콘에서 드래그하거나 스크롤하려고하면 시점을 변경하여 볼 수 있습니다.

아티팩트

portfolio (자기 소개 페이지)

코드

github jesusisao/portfolio

구성도

설명

왼쪽 상단에 로그인 버튼이 있습니다만, 로그인하면 나의 본명이나 경력이나에 액세스 할 수 버리기 때문에 채용 담당자의 사람 이외는 비밀입니다!
넷상에서 진명을 결코 내서는 안 된다는 가르침을 계속 지키는 인터넷 노인이므로, 미안해.

최근의 일로 Nuxt.js를 사용하고 있었으므로, 이것의 TypeScript 대응을 하면 어떤 느낌이 될 것이라고, 생각해 Nuxt+TypeScript를 실험적으로 해 보았습니다.

그런 다음 로그인은 Firebase Auth를 처음으로 사용해 보았습니다. 로그인만 Firebase를 이용하면서도 백엔드는 보통의 API 서버나 MySQL을 사용하고 싶었으므로, 클라이언트측에서 Firebase에 토큰을 취득하러 가서, 클라이언트가 취득한 토큰을, 자신의 Express의 API로 받았다 나중에 Firebase Admin SDK를 사용하여 확인하고 로그인을 확인하는 것과 같은 일을하고 있습니다.

Heroku는 무료이므로 고맙게 사용하고 있습니다. MySQL의 접속 정보나 Firebase Admin SDK의 액세스 정보등의 중요한 정보는 당연히 코드중에 쓸 수는 없습니다. 이번에는 그러한 정보는 Heroku의 사정도 있어 모두 환경 변수에 갖게 하고 있습니다.

배경 움직이는 반짝이는 Three.js에서 만들었습니다. 실은 처음은 Canvas API로 파티클을 만들려고 했습니다만, 처리가 무척 무겁게 되어 버려 보통의 PC나 스마트폰으로는 움직일 수 없다… … 괴로워… 거기에서 WebGL과 Three.js되는 것을 알고 공부하고 다시 만들었습니다. 내 아이폰 6에서도 흔들립니다. WebGL의 힘은 굉장하다.

감상

「다음 전직할 때는 최저한 포트폴리오 없으면 안 된다… 라든지 WebGL이라든지)에 접하는 것은 어쩐지 즐거웠습니다.
특히 WebGL은 재미있었고, 대학생 때 영상을 조금만 꺾고 있던 것도 있어 인터랙티브하게 움직이는 파티클의 즐거움에 매료되었습니다. 일에 사는지는 전혀 불명합니다만, 시간이 있을 때에 조금 만져 가고 싶네요.