shape

개인 웹 포트폴리오 - Next.js와 Prisma로 이력을 DB로 관리하기

프로젝트 설명

코드 수정 없이 이력을 갱신할 수 있는 개인 포트폴리오 사이트 만들기

기술 스택

  • PostgreSQL

    PostgreSQL

  • Prisma

    Prisma

  • Cloudflare

    Cloudflare

  • Vercel

    Vercel

  • TypeScript

    TypeScript

  • React

    React

  • Tailwind CSS

    Tailwind CSS

참여인원

1명 (개인 프로젝트)

기간

2025.08 ~ 2025.10

관련 링크

웹 페이지

상세 내용

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