Learning Stack
Claude Code로 완성한 개인 포트폴리오 사이트. Three.js 3D 비주얼과 모노톤 디자인 시스템으로 프로젝트를 전달합니다.
Overview
프로젝트 개요
개발 프로젝트를 기록하고 공유하기 위한 개인 포트폴리오 사이트입니다. Next.js 16 App Router 기반으로 정적 데이터에서 동적 라우팅을 생성하며, 코드 한 줄 없이 데이터만 추가하면 프로젝트 페이지가 자동으로 만들어집니다.
Claude Code 하나로 아키텍처 설계부터 구현까지 진행했습니다. CLAUDE.md에 프로젝트 컨텍스트를 정의해 세션이 바뀌어도 맥락이 유지되며, 커스텀 스킬(/add-project)로 반복 작업을 자동화했습니다.
Architecture
프로젝트 구조
portfolio-next/
├── src/
│ ├── app/
│ │ ├── layout.tsx # 사이드바 + 데코레이션 레이아웃
│ │ ├── page.tsx # About/Hero 페이지
│ │ └── projects/
│ │ ├── page.tsx # 프로젝트 리스트
│ │ └── [slug]/page.tsx # 프로젝트 상세 (동적 라우팅)
│ ├── components/
│ │ ├── Sidebar.tsx # 고정 사이드바 네비게이션
│ │ ├── Hero3D.tsx # Three.js WebGL 히어로
│ │ ├── TextScramble.tsx # 글자 스크램블 애니메이션
│ │ └── Decorations.tsx # 배경 장식 요소
│ ├── data/
│ │ ├── projects.ts # 프로젝트 데이터 (타입 + 배열)
│ │ └── navigation.ts # 네비게이션 데이터
│ └── styles/
│ └── globals.css # 단일 CSS 파일 (CSS 변수 시스템)
├── CLAUDE.md # AI 코딩 가이드라인
└── package.jsonData-Driven Routing
projects.ts 배열에 데이터를 추가하면 리스트와 상세 페이지가 자동 생성됩니다. App Router의 [slug] 동적 라우팅으로 별도 페이지 파일이 필요 없습니다.
Monotone Design System
CSS Custom Properties 기반 그레이스케일 디자인 시스템. 단일 globals.css 파일로 일관된 톤을 유지하며, Tailwind 없이 바닐라 CSS만으로 구현했습니다.
Key Features
주요 기능
Claude Code 바이브 코딩
Claude Code 하나로 설계부터 구현까지 전부 진행했습니다. CLAUDE.md로 프로젝트 컨텍스트를 유지하고, 커스텀 스킬로 반복 작업을 자동화합니다.
Three.js 3D 히어로
TorusKnot, 와이어프레임 구체, 파티클로 구성된 WebGL 히어로 씬. 마우스 트래킹 회전과 부드러운 애니메이션으로 시각적 임팩트를 줍니다.
TextScramble 애니메이션
IntersectionObserver 기반 글자 스크램블 효과. 스크롤 시 텍스트가 무작위 문자에서 원본으로 복원되는 연출을 적용했습니다.
모노톤 그레이스케일 디자인
CSS Custom Properties로 구축한 미니멀 그레이스케일 테마. Tailwind 없이 바닐라 CSS만으로 반응형 사이드바 레이아웃을 구현했습니다.
Flow
개발 흐름
Claude Code와 대화하며 사이트 구조와 디자인 방향 설정
App Router 라우팅, 사이드바 레이아웃, CSS 디자인 시스템 구축
Three.js 히어로, TextScramble, 스크롤 애니메이션 추가
projects.ts 타입 시스템 설계, 데이터 기반 동적 페이지 생성
Vercel 배포, /add-project 스킬로 프로젝트 추가 자동화
Comments
불러오는 중...