프로젝트 화면
프로젝트 개요
- 작업 아카이브와 현재 관심사를 한곳에서 보여주기 위해 지속적으로 개선하고 있는 개인 포트폴리오
- 파티클 로고와 파티클 인터랙션을 중심으로 다크·코스믹 시각 정체성을 구성
화면과 데이터 구성
- Next.js App Router 기반으로 홈·작업 목록·상세·연락 페이지 구성
- Three.js와 React Three Fiber로 파티클 로고 및 포인터 인터랙션 구현
- 작업 데이터를 한곳에서 관리하고 공개 상태에 따라 목록·상세 메타데이터·사이트맵을 일관되게 생성
- Spotify와 GitHub API 응답을 서버 경계에서 검증하고 최근 활동 UI에 연결
- 키보드 포커스, 모션 축소 설정, WebGL 미지원 환경의 정적 폴백을 포함한 접근성 보완
- 초기 JavaScript·SCSS 구현을 TypeScript·Tailwind CSS 구조로 단계적으로 마이그레이션
사용 기술
언어·프레임워크
Next.jsTypeScript
상태·데이터
TanStack Query
화면·인터랙션
Tailwind CSSReact Three FiberFramer Motion
- Next.js · TypeScript
- 작업 데이터와 라우트·메타데이터를 연결했습니다.
- React Three Fiber
- 홈의 파티클 로고를 구현하고 WebGL 실패 시 정적 화면을 제공합니다.
- TanStack Query
- 서버 API로 정규화한 최근 활동 데이터를 화면에 연결했습니다.