ver.2024 Hyeona's Portfolio

Next.js의 api route를 사용했습니다. plaiceholder 라이브러리를 활용하여 외부 이미지에 blurDataURL을 주어 이미지를 최적화했습니다.
무료로 찾은 3D 강아지 풍선과 주사위 모델의 obj 파일을 사용했습니다. 3D 모델에 원하는 matcap(텍스처)을 적용하고, 주사위 위에 직접 3D 텍스트를 추가했습니다. 또한, @react-three/drei를 사용하여 강아지 풍선 뒤에 글자를 배치했습니다. skills 페이지의 하얀 공들은 @react-three/cannon을 이용해 만들었으며, 마우스가 닿으면 정전기가 발생하는 효과를 표현했습니다.
메인 페이지의 Skills 스크롤 섹션과 마우스를 따라다니는 작은 원은 GSAP을 사용해 만들었습니다.