개인 웹 포트폴리오 - Next.js와 Prisma로 이력을 DB로 관리하기
프로젝트 설명
코드 수정 없이 내용을 갱신할 수 있는 개인 포트폴리오 사이트 만들기
기술 스택
PostgreSQL
Prisma
Cloudflare
Vercel
TypeScript
React
Tailwind CSS
참여인원
1명 (개인 프로젝트)
기간
2025.08 ~ 2025.10
관련 링크
상세 내용
개요
- TypeScript와 Next.js로 직접 제작한 개인 웹 포트폴리오입니다.
- 기술 스택, 활동, 프로젝트 상세 등 모든 콘텐츠를 PostgreSQL로 관리하고 Prisma로 조회하여, 코드 수정 없이 이력을 갱신할 수 있도록 구성하였습니다.
프로젝트 상세 모달
- 프로젝트 카드를 누르면 Intercepting Route로 모달이 열리고, 주소를 직접 열면 전체 페이지로 렌더링되도록 구현하였습니다.
사용 기술
- TypeScript, Next.js, React로 프론트엔드를 구현하고 Tailwind CSS로 스타일링하였습니다.
- Prisma와 PostgreSQL로 콘텐츠를 관리하고, Framer Motion으로 인터랙션을 구현하였습니다.
- 이미지는 Cloudflare R2에 저장하고 Vercel에 배포하였습니다.