ポートフォリオサイト

プロジェクト概要

エンジニアとして自分のブランディングと実績発信を目的に制作した個人ポートフォリオサイトです。

1ページスクロール型のトップページに加え、Works・Blogの個別詳細ページを持つ構成。クリエイティブなダークテーマとアニメーションで、「もっと知りたくなるサイト」を思わせられるようなデザインを意識しています。

技術スタック

フレームワーク・言語

Next.js 16（App Router） をベースフレームワークとして採用。Pages Routerではなく App Router を選定することで、サーバーコンポーネントによるデータ取得の最適化と、レイアウトのネスト管理を実現しています。

言語は TypeScript を使用。型安全性を担保しながら、フロントエンドからコンテンツ管理層まで一貫したコーディングを行っています。

スタイリング

Tailwind CSS v4 を採用。v4 では PostCSS プラグインベースの設定に変わり、より軽量なビルドが可能になっています。ユーティリティクラスによる開発速度の高さと、@tailwindcss/typography プラグインによる MDX コンテンツの自動スタイリングが採用の決め手です。

アニメーション

Framer Motion v12 を用いてスクロール連動アニメーションを実装。useInView フックと組み合わせたセクション単位のフェードイン・スライドインアニメーションで、ページを読み進める体験を高めています。

コンテンツ管理

Works・Blogのコンテンツは MDX ファイル で管理しています。gray-matter でフロントマター（メタデータ）をパースし、next-mdx-remote でMDX本文をサーバーコンポーネントとしてレンダリングする構成です。外部CMSを使わず、コードと同じリポジトリでコンテンツを管理できるシンプルさが採用理由です。

ホスティング

Vercel にデプロイ。マージ操作で自動デプロイが走る CI/CD フローを構築しています。また Vercel Speed Insights を導入し、実ユーザーのパフォーマンス計測を継続的に行っています。

アーキテクチャ・設計方針

ディレクトリ構成

機能単位でコードを分離する Feature-based アーキテクチャ を採用しています。

src/
├── app/          # Next.js App Router（ルーティング）
├── components/   # 共通UIコンポーネント・レイアウト
├── features/     # 機能単位のコンポーネント・ロジック
│   ├── blog/
│   └── works/
├── lib/          # MDXパース等のユーティリティ
├── constants/    # サイトメタデータ・定数
└── content/      # MDXコンテンツファイル
    ├── blog/
    └── works/

ルーティング

App Router のファイルシステムルーティングにより、以下の構成を実現しています。

パス	内容
/	トップページ（スクロール型・全セクション）
/works	Works一覧
/works/[slug]	Works詳細
/blog	Blog一覧
/blog/[slug]	Blog詳細

こだわったポイント

ダークテーマ対応

next-themes を用いてライト・ダーク両テーマに対応。CSS変数ベースのカラーシステムで、テーマ切替時もアニメーションなしで自然に切り替わるよう設計しています。

アニメーション設計

ページ全体でアニメーションを一律に使うのではなく、各セクションの「初回表示時」のみフェードイン・スライドインを発火させる設計にしています。再スクロール時に繰り返し動くとノイズになるため、once: true を基本方針としています。

OGP・SEO対応

Next.js の Metadata API を活用し、トップページ・Works詳細・Blog詳細それぞれに固有の OGP 画像と meta タグを設定しています。OGP 画像は ImageResponse による動的生成で、コンテンツのタイトルを反映した画像を自動生成しています。