HuanEnzie/cinematic-portfolio

シネマティックポートフォリオ

エディターやVFXアーティストのポートフォリオから着想を得た、ダークトーン1ページポートフォリオです。人物写真の背後に巨大な文字が浮かび上がり、その前に名前、2色（白＋アクセントカラー）の見出しが配置されます。ページにアクセスすると、30体のエージェントが各ブロックをアニメーションで組み立てるエフェクトが動作します（スキル agent-build-effect を同梱し、template/vendor/ 内に収録）。

template/
  index.html        ページフレーム、編集不要
  data.js           全コンテンツ、このファイルのみ編集
  styles.css        デザイン；色は変数または `data.js` の `accent` で変更
  portfolio.js      `data.js` からページを構築し、エージェントエフェクトを起動
  vendor/           agent-build.js + .css
  assets/           人物写真（背景透過）＋スキルカード画像（サンプル：6枚のダーク/レッド画像）
scripts/cutout.py   人物写真の背景除去（rembg 使用）
references/image-prompts.md  スキルカード画像用プロンプト、統一スタイル

ワークフロー

1. 作業前に十分な情報をヒアリングする

以下の情報を一度に簡潔に尋ねます。ユーザーがまだ提供していないものだけを聞いてください。

• 大きく表示する短い名前（1語が最適）、フルネーム、役職、自己紹介の一文。
• 人物写真：膝上または全身写真、背景が複雑すぎないもの、やや斜めを向いた構図が良い。実写でも3Dでも可。
• 3～6個のスキルまたはアピールしたいプロジェクト（名前、説明文、使用技術）。実在プロジェクトでリンクがある場合は、カードの href に設定してください。
• キャリア（職歴、学歴）、スキル、ワークフロー、引用。
• 受賞歴・メディア掲載（ない場合はセクションごと削除）。
• 連絡先：メール、地域、CTAボタン。
• ページの言語、アクセントカラー（デフォルトは赤 #ff3b30）、背景文字（デフォルトは PORTFOLIO）。

数値、賞、メディア掲載を捏造しないでください。ユーザーにない項目は data.js から削除すると、ページは自動的にそのセクションを非表示にします。

2. テンプレートをコピーする

template/ ディレクトリ全体をユーザーの希望する場所（例： ./my-portfolio/）にコピーします。スキル内の元のテンプレートは変更しないでください。

3. 人物写真の背景を除去する

pip install rembg pillow
python -I <skill>/scripts/cutout.py 元の写真.jpg my-portfolio/assets/photo.webp

デフォルトモデルは isnet-general-use（軽量、約180MB、初回のみダウンロード）です。メモリに余裕がある場合のみ birefnet-portrait を試してください（このモデルは約1GBあり、1440px画像でメモリ不足になることがあります）。グレー背景で合成した結果を一度確認してください（PILでグレー背景と合成し、画像をRead）。髪の毛、メガネ、手に持った物は保持されている必要があります。hero.photo を assets/photo.webp に設定します。

4. スキルカードの画像

サンプルとして6枚のダーク/レッド画像（エージェント、自動化、Web、チャットボット、表計算、動画）が用意されています。カードの内容に合致する場合はそのまま使用できます。個別の画像が必要な場合は references/image-prompts.md に従ってください：スタイルの末尾はそのままに、主題だけを変更します。アクセントカラーを変更する場合は、プロンプト内のカラーコードも変更します。画像生成を一括で実行する前にユーザーに確認を取ってください（ユーザーのアカウント利用枠を消費するため）。

一致する画像がない場合は、そのカードの image を削除してください。画像がなくてもカードは美しく表示されます。内容の異なるカードに同じ画像を使わないでください。

5. data.js に記入する

• hero.name：1語で、自動的に大文字になります。7文字を超える長い名前の場合は .pf-name でフォントサイズを小さくしてください。
• hero.stats：実際の数値のみ記入（スキル数、年数、技術数など）。
• セクションタイトルは title（白）と accent（アクセントカラー）で構成します。2つのフレーズは短く、力強いものに：「Not just code.」/「Solutions that run.」
• agents.labels：ページの言語に合わせて翻訳します。例：日本語の場合：{ status: "{agents} エージェント · {edits} 編集", building: "ページを構築中", done: "構築完了", skip: "スキップ" }。
• テキストは textContent で設定されるため、HTMLは挿入できません（これは意図的な設計で、安全性のためです）。

6. 確認する（数値→画像の順）

index.html をブラウザで直接開く（file:// で動作）、または任意の静的サーバーで実行します。Playwright を使用して 1440×900 と 390×844 で ?agents パラメータを付けて確認します。

({
  sections: document.querySelectorAll(".pf-section").length,
  overflowX: document.documentElement.scrollWidth > innerWidth,   // false であること
  photo: document.querySelector(".pf-photo img")?.naturalWidth,    // > 0
  waiting: document.querySelectorAll('[data-ab="wait"]').length,   // スクロール完了後 0
})

window.scrollTo で600pxずつスクロールし、各ステップで約1秒待機してから waiting が0になり、コンソールエラーがないことを確認します。各サイズで1枚のヒーロー画像をスクリーンショットし、ビジュアルを評価します。注意点：自己紹介文が人物に重なっていないこと、スマートフォン表示では顔に文字がかかっていないこと。

7. 公開する

ディレクトリは静的Webサイトとしてそのまま使えます。Netlify Drop にドラッグ＆ドロップ、vercel deploy、GitHub Pages、Cloudflare Pages などにデプロイできます。ビルドは不要です。

既存のNext.js / Reactプロジェクトに組み込む

styles.css を流用し、:root を .pf に変更します。レンダリング部分をサーバーコンポーネントに書き換え、クラス名はそのまま維持します。アニメーションエフェクトは、スキル agent-build-effect の AgentBuild.tsx を使用し、portfolio.js と同じ targets リストを指定してアタッチします。Next版で遭遇した注意点：

• 固定ヘッダー（sticky）がある場合：ページの margin-top をヘッダー高さ分マイナスにして、ヒーローセクションがヘッダーの下に潜り込むようにします。
• next/image で fill を使用する場合、親要素に position: relative が必要です。そうしないと画像がページ全体を覆います。
• Anton フォントはベトナム語の文字セットに対応しています。セルフホストする場合は、latin、latin-ext、vietnamese の3つのサブセットをすべて読み込んでください。
• Turbopack の開発サーバーでは、sed で修正したCSSの変更が認識されないことがあります。編集ツールで直接編集するか、ファイルを書き換えると認識されます。