ポートフォリオサイト

Next.js App Router と Tailwind CSS、Framer Motion を使って構築した個人ポートフォリオサイト。MDX によるブログ・Works 管理、ダークモード対応など、モダンなフロントエンド技術を盛り込んでいます。

概要

個人ブランディングを目的に構築したポートフォリオサイトです。フロントエンド・バックエンド・PM の三領域を横断するエンジニアとしての存在感を打ち出すことをコンセプトにしています。

最新の React アーキテクチャを活用するため App Router を採用。Server Components によるデータフェッチと、Framer Motion によるクライアントサイドアニメーションを組み合わせています。

CSS-first な設定方式と高速なビルドが魅力で採用。カスタムカラートークンを CSS 変数で管理し、ダークモードと統一したデザインシステムを構築しています。

Notion API からの移行として MDX を採用。コンテンツを Git で管理することで、記事の編集履歴が残り、PR レビューによる校正も可能になっています。