웹 포트폴리오 ver. 1 - 사용 기술 정리

이력서랑 PPT 버전 포트폴리오를 정리하던 도중에, 웹사이트 버전 포트폴리오를 제작하면서 사용했던 기술들을 정리하지 않았다는게 생각나서 급하게 정리해본다.

이것도 토이 프로젝트처럼 React로 만들고 싶었지만, 토이 프로젝트와 포트폴리오 사이트 모두 7월이 끝나기 전에 완성해야했어서 3월에 HTML + CSS + JS로 만들어둔 것을 수정/보완하는 형식으로 제작했다. 사실 새로운 프로젝트가 추가되거나 한다면 포트폴리오 사이트에도 반영을 해야하므로 현재 상태가 100% 완성이라고 볼 수 없지만..😅

※ 3월의 기억 - https://hjinn0813.tistory.com/27

github.io 제작하기

---

타이핑 애니메이션

See the Pen text typing animation by HJ Cho (@hjinn0813) on CodePen.

cursor가 깜빡이면서, 글자가 타이핑되었다가 사라지고 또 타이핑되는 애니메이션이다.

처음에 setInterval()을 사용했는데 원하는 기능이 제대로 동작하지 않았다. 아마도 JS 코드가 HTML에서 DOM 요소를 로드하기 전에 실행되어 해당 로직이 동작하지 않았던 것 같다. setInterval()은 타이핑이 끝나면 초기화되어 처음부터 다시 시작하는 로직이고, 나는 타이핑이 됐다가 한 글자씩 사라지는 애니메이션이 더 자연스러운 것 같아서 setTimeout()으로 변경했다.

cursor는 CSS에서, 애니메이션은 JS에서 구현했다. 어떤 원리로 동작하는지는 codepen에 주석을 적어뒀으니 생략!

---

Header의 스크롤 & 호버 이벤트

See the Pen header scroll event (gsap), hover underline by HJ Cho (@hjinn0813) on CodePen.

웹버전 페이지에서 Header에 호버하면 텍스트 컬러가 변경되고 언더라인이 생기는 이벤트는 CSS로 구현했다.

스크롤을 내리면 Header가 자연스럽게 사라졌다가, 다시 올리면 나타나는 기능은 GSAP과 Lodash로 구현했다. HTML의 body 태그 맨 끝에 CDN script를 넣고 JS 파일에서 GSAP의 ScrollTrigger를 사용했다. JS 코드에서 _.throttle 이라는 부분이 Lodash인데, Lodash는 아직 익숙하지가 않아서 공부를 해봐야겠다!🙂

---

카드 플립 이벤트

See the Pen card flip event by HJ Cho (@hjinn0813) on CodePen.

카드에 호버하면 사진 위에 연회색 배경이 생기면서 설명이 등장하고, 카드를 뒤집으면 텍스트가 나오는 기능이다.

카드를 뒤집었을 때, 뒷면에서 보여야 하는 텍스트들이 보여지지 않는 문제가 있었다. HTML 태그에서 앞면과 뒷면으로 영역을 나누고, CSS에서 transform과 backface-visibility 속성을 지정하여 해결했다.

---

급하게 정리해본 포트폴리오 사이트의 기술 설명은 여기까지다.

사실 '탑 버튼' 기능도 있지만, 그건 너무 쉬워서 굳이 기록하지 않아도 될 것 같고.. 마음 같아서는 이걸 React로 다시 만들고 디자인도 바꾸고 싶은데, 그건 아예 처음부터 재건축하는 수준이라 시간이 굉장히 많이 걸릴 것 같으니 나중에 천천히 해봐야지..