About
BetaOverview
인터랙티브 이력서/포트폴리오와 마크다운 기반 블로그 CMS를 결합한 풀스택 웹 애플리케이션. Next.js App Router 기반, Vercel 인프라(Blob, Neon)로 서버리스 운영.
Tech Stack
CoreNext.js 16, React 19, TypeScript
StylingSCSS, Geist Font
AnimationGSAP, ScrollTrigger, Framer Motion, Lenis
3D / PhysicsThree.js, Matter.js
DatabaseNeon PostgreSQL, Vercel Blob
ContentReact Markdown, Sugar High
Database
Neon PostgreSQL 서버리스 DB 사용. posts 테이블에 마크다운 원문(content_md)과 검색용 순수 텍스트(content_text)를 분리 저장하여 검색 인덱싱 최적화. Vercel Blob으로 이미지 저장, posts/{postId}/ 구조로 관리.
Admin CMS
/admin 경로에서 블로그 관리. 글 CRUD, Hero/본문 이미지 업로드, 발행/발행취소, Featured Posts 설정. Bearer Token 인증.
ISR
모든 블로그 페이지 정적 생성 후 revalidatePath로 On-Demand 재생성. 글 생성/수정/삭제 시 /blog, /blog/[slug], /sitemap.xml 캐시 무효화.
Interactive Components
ParticleTextThree.js 3D 파티클 텍스트. 소용돌이 진입, 웨이브 Idle, 마우스 밀림/폭발
ProjectCarouselFramer Motion 3D 카드 캐러셀. 스크롤/드래그 회전, 중앙 카드 강조
TextEffectGSAP + ScrollTrigger 스크롤 텍스트 애니메이션. scrub 동기화
MatterCanvasMatter.js 2D 물리 시뮬레이션. 드래그 조작, 클릭 시 중력 활성화
Velog Migration
Velog GraphQL API를 활용한 자동 마이그레이션 스크립트 구현. username만 입력하면 모든 글을 자동으로 가져오며, 이미지도 Vercel Blob에 자동 업로드 후 URL 교체. 원본 발행일(released_at) 보존으로 SEO 연속성 확보. 중복 글 자동 건너뛰기 지원.
npx tsx scripts/import-velog.ts {username}
SEO
MetaOpenGraph, Twitter Card, Canonical URL
JSON-LDPerson, Blog, BlogPosting, ItemList, BreadcrumbList
Sitemapsitemap.ts로 동적 생성, 글 추가 시 자동 업데이트
Robotsrobots.ts로 크롤링 규칙 설정