GrimNej/portfolio-design

ポートフォリオデザイン

このスキルは、特定のポートフォリオデザインを誰でも再現できるようにします。デザインは固定されており、調整済みです。あなたの仕事は、対象者の情報を収集し、適切な文体でコピーを作成し、サイトを生成し、動作を確認し、承認を得たら公開することです。

すべてのファイルはこのスキルフォルダにあります：

パス	内容
template/assets/	サイトのCSS、JavaScriptモジュール、フォント、ベンダーライブラリ（GSAP、Lenis）。個人ごとに編集しないでください。ビルド時にコピーしてテーマを適用します。
scripts/build.mjs	portfolio.jsonから完成した静的サイトを生成します。Node 18+、依存関係なし。
scripts/prepare_photos.py	ポートレートを切り抜き（背景除去）、アバウト写真を正方形にします。
scripts/discover_github.mjs	GitHubユーザーの公開リポジトリをREADMEタグラインとバナー画像とともに一覧表示し、プロジェクトを選びます。
scripts/snapshot_github.mjs	アーカイブがフォールバックする公開リポジトリリストを保存します。
scripts/render_images.py	シェアカード（og.jpg）とタッチアイコンをレンダリングします。
scripts/serve.py	構築されたサイトのローカルプレビューサーバー。
scripts/qa/run_all.py	ブラウザ品質ゲート。ビルドはこれを通過するまで完了しません。
examples/portfolio.example.json	架空の人物用の完全な設定ファイル、プレースホルダー画像付き。
reference/	設定スキーマ、インタビュースクリプト、デザインシステム、コピールール、QAゲート、デプロイガイド。

以下のコマンドでは、scripts/... はこのスキルのフォルダ（実行時は絶対パスを使用）を指し、portfolio/... は対象者のワーキングディレクトリ内のプロジェクトフォルダを指します。

設定を書く前に reference/config-schema.md を、コピーを書く前に reference/copywriting.md を読んでください。

基本ルール

• 明確なYesなしに公開しないこと。 その特定のステップを対象者が承認するまで、git push、デプロイ、リポジトリ作成は行わないでください。ローカルでのビルドとプレビューは問題ありません。
• プライバシー。 公開GitHubデータのみを使用します（両方のGitHubスクリプトは意図的に認証なしAPIを呼び出します）。アーカイブを公開する前に、表示する公開リポジトリのリストを見せて、非表示にしたいものを尋ねてください。電話番号、住所、プライベートリポジトリをページに載せないでください（対象者が依頼した場合を除く）。
• 写真は対象者のものです。 プロジェクトフォルダ内のコピーで作業してください。対象者が承認したサイト以外にアップロードしないでください。
• デザインが製品です。 対象者が曖昧なことを依頼したからといって、セクションを追加したり、フォントを変更したり、コンポーネントのスタイルを変更したりしないでください。コンテンツ、テーマプリセット、マスコット、コピーを調整してください。構造的な変更を依頼された場合は、そのコストを伝え、最初に確認を取ってください。
• コピーは書き込むものであり、埋めるものではありません。 対象者のメモは生の素材です。すべての行を対象者の文体で起草し、長さ制限を守り、最終版をビルドする前に見せてください。

ワークフロー

1. ツールチェーンの確認

node --version          # 18 またはそれ以上
python --version        # 3.10 またはそれ以上
python -m pip install playwright pillow numpy
python -m playwright install chromium

ポートレートの背景除去には python -m pip install "rembg[cpu]" が必要です（初回実行時に約1GBのモデルをダウンロードします）。それが不可能な場合は、すでに透明な背景を持つポートレートを依頼し、--no-cutout を使用してください。

対象者とプロジェクトフォルダを決めてください（デフォルト：カレントディレクトリの ./portfolio/）。レイアウト：

portfolio/
  portfolio.json      # あなたが作成する設定ファイル
  photos/              # 対象者の元の写真（そのまま公開しない）
  work/                # プロジェクトのバナーとスクリーンショット
  site/                # ビルド出力：このフォルダがデプロイされる

2. インタビュー

reference/interview.md に従ってください。10の短いラウンドで進行し、選択肢があるすべての項目（テーマ、マスコット、特集するリポジトリ、ヒーローに表示するリンク）には AskUserQuestion を使用します。自由形式の素材（経歴メモ、プロジェクトの説明）はプレーンテキストで質問します。一度に1ラウンドずつ質問し、対象者が書きたくないものがあれば、こちらで起草することを提案してください。

領域（順番）：

1. アイデンティティ：フルネーム、使用するエイリアスまたはハンドル、短い肩書き、メールアドレス、市区町村と国（ライブクロック用のタイムゾーン）、使用言語。
2. 写真：肩から上（ヒーローの切り抜き用）のポートレート、およびオプションでアバウトセクション用の2枚目の写真。
3. リンク：掲載したいすべてのプロフィール。ヒーロー行に2～4つ選んでください。
4. ヒーローとアバウト：ひとことで言うと何をしているか、次にどのように仕事をしているかを2つの短い段落で。
5. 制作物：4種類の仕事、各1単語、説明文とホバーアニメーション（agents、automation、context、launch、code、data、design）。
6. プロジェクト：最大6つの特集プロジェクトと最大3つのサイドクエスト。最初に discover_github.mjs を実行し、候補を提案してください。
7. アーカイブ：すべての公開リポジトリを表示するかどうか、非表示にするものを選択。
8. スタック：グループ化されたツールリスト、およびピットのボールになる12～24のツール。
9. プロセス、連絡先、バンド：3つのプロセスステップ、連絡先ライン、2つのスクロールテープバンド。
10. 外観と追加設定：テーマプリセット、マスコット（名前、声色、またはオフ）、サイトURLとホスティング先。

3. プロジェクト素材の収集

node scripts/discover_github.mjs --user <github-user> --out portfolio/discovery.json
node scripts/discover_github.mjs --user <github-user> --out portfolio/discovery.json --download portfolio/work --repos RepoA,RepoB

1回目の実行では、公開リポジトリをREADMEタグライン、画像、ライブリンクとともに一覧表示します。2回目の実行では、選択された各リポジトリの最初のREADME画像を保存します。特集する各プロジェクトには、少なくとも1つのプレビュー画像が必要です。良いソース（優先順）：READMEバナー、ライブアプリのスクリーンショット（Playwrightで1600x900を使用）、examples/assets/*.svg のスタイルで生成されたバナー。各画像を確認してください：スクリーンショットに機密情報がないか、ぼやけていないか、ワイドフォーマット（16:9またはそれに近い）であるか。

4. 写真の準備

python scripts/prepare_photos.py --portrait portfolio/photos/portrait.jpg \
  --about portfolio/photos/about.jpg --about-gray --out portfolio/photos/out

結果を開いて確認してください。切り抜きはエッジがきれいで、透けて見える部分がなく、頭部が上部付近にある必要があります。アバウト写真で顔がうまくトリミングされていない場合は、--about-focus x,y（画像の0～1の割合）を指定して再実行してください。設定の person.photos.portrait と .about を out/ 内のファイルに指定してください。

5. 設定を書いてビルド

portfolio/portfolio.json を書いてください（スキーマ：reference/config-schema.md、動作例：examples/portfolio.example.json）。内部のパスは設定ファイルからの相対パスです。その後：

node scripts/build.mjs --config portfolio/portfolio.json --out portfolio/site
node scripts/snapshot_github.mjs --user <github-user> --site portfolio/site   # アーカイブがオンの場合のみ
python scripts/render_images.py --site portfolio/site

必須フィールドがない場合、ビルドは明確なメッセージを表示して停止します。不明なアイコンに関する警告は、そのボールがテキストで名前を表示することを意味します。data/simple-icons.json からスラッグを選ぶか、そのままにしておいてください。

6. プレビュー

サイトをバックグラウンドで起動し、対象者にURLを伝えてください：

python scripts/serve.py --site portfolio/site --port 4321

このサーバーを python -m http.server の代わりに使用してください：標準のサーバーは、ページが一度に多くのファイルを要求すると接続をドロップし、ランダムなQA失敗として現れます。また、キャッシュなしヘッダーを送信するため（リビルド後にリロードで反映されます）、未知のパスに対してはGitHub Pagesのように 404.html を提供します。

7. 品質ゲート

python scripts/qa/run_all.py --url http://127.0.0.1:4321/ --out portfolio/qa

すべてのチェックが合格する必要があります（reference/quality-gates.md で各チェックの説明と通常の失敗の修正方法を説明しています）。その後、portfolio/qa/shots/ 内のスクリーンショットを自分でセクションごとに、デスクトップとスマートフォンの両方で確認してください。自動チェックは衝突やオーバーフローを検出します。あなたの目は不自然な改行、弱い画像、読みにくいコピーを見つけます。修正、再ビルド、再実行。デプロイ前に一度 --full を実行してください。

8. 対象者とレビュー

プレビューを一緒に見てください：ヒーロー、アバウト、行、プロジェクト、アーカイブ、ピット、プロセス、連絡先、マスコットチャット。変更点を収集し、ビルド済みファイルではなく設定に適用し、再ビルドしてQAを再実行してください。

9. デプロイ（明確なYesの後でのみ）

reference/deploy.md に従ってください：GitHub Pages（ユーザーサイトまたはプロジェクトサイト）、カスタムドメイン、および重要なCloudflare設定。デプロイ後、ライブチェックを実行してください：

python scripts/qa/run_all.py --url https://their-domain/ --only smoke,live --out portfolio/qa-live

「email not rewritten」チェックが失敗した場合、Cloudflareのメールアドレス難読化がオンになっており、「Let's talk」リングが壊れています。修正方法は reference/deploy.md にあります。

後から変更する場合

portfolio.json を編集し、再ビルドし、QAを再実行し、再デプロイしてください。各ビルドはすべてのアセットに新しい ?v= バージョン文字列をスタンプするため、ブラウザとCDNは手動でキャッシュを消去しなくても変更を取得します。