個人 Web ポートフォリオ - Next.js と Prisma で経歴を DB で管理する

詳細

1. 概要

   • TypeScript と Next.js で自ら制作した個人の Web ポートフォリオです。
   • 技術スタック、活動、プロジェクト詳細などすべてのコンテンツを PostgreSQL で管理し、Prisma で取得することで、コードを修正せずに経歴を更新できるように構成しました。
   

2. プロジェクト詳細モーダル

   • プロジェクトカードをクリックすると Intercepting Route でモーダルが開き、URL を直接開いた場合は全画面ページとしてレンダリングされるように実装しました。
   

3. 使用技術

   • TypeScript、Next.js、React でフロントエンドを実装し、Tailwind CSS でスタイリングしました。
   • Prisma と PostgreSQL でコンテンツを管理し、Framer Motion でインタラクションを実装しました。
   • 画像は Cloudflare R2 に保存し、Vercel にデプロイしました。