ポートフィリオサイトを作成しました
プロフィール・実績・ブログを集約した個人ブランドサイト。Next.js 16 と Supabase で、設計から実装・運用まで一貫して自作しました。
Next.jsTypeScriptReactTailwind CSSSupabaseDrizzle ORMAuth.jsVercel
プロフィール・制作実績・ブログを一箇所に集約するために、自分で企画・設計・実装した個人ブランドサイトです。要件定義からデザイン、実装、デプロイ・運用までを一貫して担当しました。
主な機能
- 記事（ブログ）とプロダクト実績の CMS（下書き / 公開・カテゴリ・Markdown 本文・画像アップロード）
- 管理者のみログイン可能な管理画面（GitHub 認証・多層防御）
- お問い合わせフォーム（DB 保存＋メール通知）
- SEO 対応（メタデータ / OGP・構造化データ・sitemap・RSS）
技術構成
- フロント / フレームワーク: Next.js 16 (App Router) / React 19 / TypeScript
- スタイル: Tailwind CSS v4 / shadcn(base-ui)
- DB / 認証 / ストレージ: Supabase (PostgreSQL) / Drizzle ORM / Auth.js v5
- ホスティング: Vercel（独自ドメイン・自動デプロイ）
こだわり
派手さより、確実に動き保守しやすいこと。読みやすいコードと堅実な設計を意識し、セキュリティ（IPA 準拠のヘッダ・認可の多層防御）やアクセシビリティにも配慮しました。