ポートフォリオサイト — メンテナンススキル
これはMitchell Palmerの個人ポートフォリオです。Next.js 16 (App Router) で以前のWebflowサイトをリビルドしたものです。コンテンツはCMSの代わりに src/content/ 以下にプレーンなTypeScript/JSON/MDXファイルとして保存されています。変更を加える前に必ずこれを読み、新しいパターンを導入するのではなく既存の規約に従ってください。
メンタルモデル
src/content/ → データ (何を言うか — ほとんどの場合はこれを編集)
src/app/ → ページ (ルーティング — 1フォルダ = 1URL、App Router規約)
src/components/ → UI部品 (再利用可能 — Header, Footer, ProjectCard, PhotoGallery, MDX埋め込み)
public/images/ → 静的アセット、セクションごとに整理 (site/, projects/, projects/hero/, photography/, icons/)
タスクが「コンテンツの追加/編集」(プロジェクト、職歴、経歴の一文、写真) の場合、ほぼ確実に src/content/ だけを触ります。純粋なコンテンツ変更では src/app/ や src/components/ には触らないでください。
コンテンツファイル一覧
| ファイル | 制御対象 |
|---|---|
src/content/site.ts | 名前、タグライン、メール、ナビリンク、ソーシャルリンク |
src/content/about.ts | 経歴段落、「journey」ストーリー、ミッションステートメント、ステータス |
src/content/experience.ts | 職歴 (experience[])、学歴、スキル一覧、サービスカード |
src/content/photography.json | { src, season, location, type } の配列 — /photography のフィルターボタンはここに現れる値から自動生成 |
src/content/projects.ts | ロジックのみ (projects/ 以下の .mdx ファイルを読み込む) — プロジェクトの読み込み/ソート方法を変更する場合以外は編集しない |
src/content/projects/*.mdx | プロジェクト1件につき1ファイル。frontmatter + Markdown/MDX本文。ファイル名 = URLスラッグ |
プロジェクトMDX frontmatterの構造
---
title: "プロジェクトタイトル"
description: "1〜2文。カードと詳細ページ上部に表示。"
image: "/images/projects/thumbnail.jpg"
heroImage: "/images/projects/hero/banner.jpg" # オプション、未指定時は `image` にフォールバック
featured: true # ホームページに表示
link: { label: "GitHubリポジトリ", href: "https://..." }
skills: ["スキル1", "スキル2"]
tools: ["Python", "PostgreSQL"]
# または、多数のテクノロジーがある場合は skills/tools の代わりに techGroups を使用:
techGroups:
言語とライブラリ: ["Python", "pandas"]
統計手法: ["CUSUM", "Z-Score分析"]
---
注: ProjectCard.tsx は project.tools ?? project.skills を表示します (両方存在する場合は tools が優先)。techGroups は表示上 skills/tools と排他的です — 詳細ページのサイドバーにはどちらか一方のみ表示され、両方は表示されません。
プロジェクト本文内では2つのカスタムMDXコンポーネントが使用可能です:
<DashboardEmbed src="https://your-app.streamlit.app/" title="マイダッシュボード" />
<PdfEmbed src="/path/to/summary.pdf" />
スタイリング規約
- Tailwind v4、CSS変数は
src/app/globals.cssの:root内で定義 (例:--color-brand: #486161)。パレットを変更する場合はそこで行い、コンポーネントに16進数をハードコードしないでください。 - 2種類のフォント:
--font-serif(Merriweather、見出し) と--font-sans(Inter Tight、本文) — どちらもlayout.tsxでnext/font/googleにより読み込まれます。ビルド時にインターネットアクセスが必要です — オフライン/サンドボックス環境では失敗します。 .container-pageユーティリティクラスが、一貫した最大幅 + パディングを全ページに提供します。
触ってはいけないもの
node_modules/— gitignore対象、npm installで再生成されます。絶対にgitに再追加しないでください。- リポジトリルートの
AGENTS.md—next devで自動再生成され、AIエージェントにこのNext.jsバージョンの固有規約を伝えます。手動編集しないでください。上書きされます。 - リポジトリルートの
CLAUDE.md— 現在は単に@AGENTS.md(インポート) です。永続的なカスタム指示を追加する場合は、新しいファイルに記述して別途参照させ、AGENTS.mdのインポートを上書きしないでください。 next-env.d.ts— 自動生成、gitignore対象。
よくあるタスク、クイックリファレンス
新規プロジェクト → public/images/projects/ にサムネイル (＋オプションでヒーローバナー) → src/content/projects/ に新しい .mdx ファイル → 完了、ルーティングコードは不要。
新しい写真 → public/images/photography/ にファイル → photography.json に該当エントリーを追加。
経歴/ミッションの編集 → src/content/about.ts、プレーンな文字列編集。
新しい職歴エントリ → src/content/experience.ts、experience[] 配列の先頭に追加 (配列順にレンダリングされるので、最新が先頭)。
ナビ/ソーシャルリンクの変更 → src/content/site.ts。
ビルドと確認
npm install # package.json に変更を加えたプル後
npm run dev # ローカル開発サーバー、ホットリロード
npm run build # プロダクションビルド — 構造変更をプッシュする前に実行
npm run lint # eslintチェック
npm run build はインターネットアクセスがないと失敗します (Google Fontsの取得) — 完全オフライン環境では想定内の動作であり、コードのバグではありません。