ポートフォリオサイト制作

Next.js App Routerを用いた完全静的アプリケーションです。 output: 'export' による静的エクスポートで、ビルド時に全ページをHTMLとして生成。 サーバーランタイムを一切持たず、Cloudflare Pages上で配信しています。 デプロイはGitHub Actionsで自動化しています。 Server ComponentsとClient Componentsを役割ごとに分離しています。 一覧ページ（ブログ・プロジェクト・活動実績）はServer Componentで実装し、generateStaticParamsによりSEOに最適化された静的HTMLを生成。 液体背景・湯気カーソル・オープニングアニメーションなどのインタラクティブなUIは、Framer Motionを用いたClient Componentで実装しています。 多言語対応はライブラリを使用せず、URLプレフィックス(/en, /ja)方式で実装。 各ページはビルド時に両言語分を生成し、postbuildスクリプトで日本語ページのhtml lang属性を補正しています。 SEOメタデータとして、hreflang・OGPタグ・JSON-LD構造化データ（Person, BreadcrumbList）をページごとに生成。 prebuildステップでは、Node.jsスクリプトがMedium（RSS）とZenn（API）から最新記事を取得。 共通のblogPosts.jsonに正規化し、静的データとしてインポートすることで、ランタイムAPIコールなしにブログコンテンツを最新に保っています。 ビジュアル面では、コーヒーをテーマにしたTailwindカスタム設定を基盤としています。 6色のブランドカラー(cream, latte, beige, brown, dark, espresso)とグラデーションユーティリティを定義。 オープニングアニメーション、スクロール連動の液体波背景、マウス追従の湯気カーソルにより、統一感のある没入体験を実現しています。

• •完全静的エクスポート(SSG) — サーバー不要、Cloudflare Pagesにデプロイ
• •SEO重要ページはServer Components + インタラクティブ要素はClient Componentsで分離
• •URLベースの多言語対応(日/英) — hreflang・OGP・JSON-LD構造化データを自動生成
• •prebuildスクリプトでMedium・Zenn APIからブログ記事を自動取得
• •postbuildスクリプトで日本語ページのhtml lang属性を補正
• •コーヒーテーマのデザインシステム（Tailwindカスタムカラーパレット・グラデーション）
• •スクロール連動の液体背景アニメーションとインタラクティブな湯気カーソルエフェクト
• •レスポンシブ分割画面レイアウト（デスクトップ: 固定サイドバー / モバイル: 縦スクロール）