iamsachinraj/Claude-Skills

キャリアポートフォリオWebサイト

3つの入力から洗練された1ページポートフォリオを構築します：履歴書、プロフェッショナル写真、LinkedInプロフィールURL。デザインは固定されており、すでに完成しています（アニメーションするネットワーク背景、1文字ずつ現れる名前、タイピング形式のロール、重なるケーススタディカード、クリックでキャリアタイムラインが光るスキル、ライト/ダークモード、モバイルレイアウト）。あなたの仕事はコンテンツです：履歴書を読み取り、content.jsonを1つ作成し、ビルドスクリプトを実行します。

このスキルに含まれるファイル：

• assets/template.html：完成したデザイン；通常の使用では編集しないでください
• scripts/build.py：content.jsonと写真を1つのHTMLファイルにマージします
• references/content-schema.md：すべてのフィールド、長さのガイド、アイコン名
• examples/sample-content.json：完全な動作例

1. 3つの入力を収集する

不足しているものを一度にまとめて尋ねてください：

1. 履歴書：任意の形式（PDF、DOCX、テキスト、貼り付け）。必須。
2. 写真：明るく、正面を向いたヘッドショット。任意；ない場合はイニシャルが表示されます。
3. LinkedIn URL：連絡先リンクに使用されます。

それ以上は事前に要求しないでください。LinkedInのページは通常、自動読み取りをブロックするため、URLはデータソースではなくリンクとして扱ってください；履歴書が信頼できる情報源です。プロフィールを読むことができ、事実が追加される場合はそれを使用してください。

2. 履歴書を読み、ペルソナを見つける

履歴書全体を読んでください。その後、何かを書く前に、統合されたペルソナを決定してください：その人がこれまでに担ってきたすべての主要な役割を包含する1つのアイデンティティ。例：「オンボーディングを設計し、データに基づいてCSオペレーションを運用し、エンゲージメントの高いチームを構築するカスタマーサクセスリーダー」。単なる「CS責任者」ではありません。人々が1つの役割だけのサイトを望むことはほとんどありません；彼らはキャリアの一貫性を求めています。

以下を選び出してください：

• 彼らが持つ4〜8のアイデンティティ（これがタイピングラインになります）
• 役割を横断する一貫したテーマ（これがリーダーシップの見出しと柱になります）
• 明確な問題、行動、結果を含む3〜5のストーリー（ケーススタディ）
• 明記されたすべての数字（統計、ゲージ、ハイライト）
• ツール、プラットフォーム、資格、教育

3. content.jsonを作成する

references/content-schema.mdに従ってください；examples/sample-content.jsonの構造を反映させてください。ルール：

• 履歴書からの事実のみ。 指標、雇用主、日付、チーム規模、結果を決してでっち上げないでください。ケーススタディに明記された結果がない場合は、結果を定性的に記述してください。ゲージは明記された実際の割合にのみ使用してください。
• 一人称、平易で自信に満ちた文体。 短い文、バズワードの連続は避け、「熱意がある」、「結果重視」、「ダイナミック」などの表現は使わないでください。
• 長さのガイドを遵守してください；長いテキストはレイアウトのリズムを崩します。
• スキルは実際のロールIDを指す必要があります。各スキルは、履歴書にそのスキルが示されているすべてのロールにマッピングする必要があります。
• キャリアロールは新しい順に並べてください；現在のロールには current: true を設定してください。
• contact.phone は、本人が含めるように指示した場合を除き、空のままにしてください。

それをワーキングディレクトリに content.json として保存してください。

4. ビルド

python3 <skill-dir>/scripts/build.py --content content.json --photo <photo-path> --out portfolio.html

Pillow（pip install pillow）が写真をトリミングおよび圧縮します；それがない場合、写真はそのまま埋め込まれます。すべてのERRORを修正してください；各WARNINGを読み、意図的でない限り修正してください。

5. 確認する

ブラウザを開いたりスクリーンショットを撮ったりできる場合は、デスクトップと電話の幅でヒーローセクションを確認し、ページ全体を一度スクロールし、ダークモードを切り替えてください。写真のトリミングが顔を表示していること（person.photoPosition を調整）、テキストがはみ出していないことを確認してください。そうでない場合は、長さのガイドに照らしてcontent.jsonを再読してください。

6. 納品

• アーティファクトやWebページを公開できる場合は、portfolio.htmlを非公開で公開し、リンクを提供して、いつ共有するかを自分で決められることを説明してください。
• それ以外の場合は、ファイルを送信してください。

その後、簡単に以下のことを伝えてください：

• サイトをどのペルソナを中心に構築したか（方向性を変更できるように）
• コピーの変更があればいつでも依頼でき、再構築することを伝える
• 共有方法：アーティファクトリンクを公開/共有するか、単一ファイルをGitHub PagesやNetlify Dropで無料ホスティングし、そのリンクをLinkedInプロフィールのFeaturedセクションに追加する

編集

コピーの変更については、content.jsonを編集して再ビルドしてください；ビルド済みのHTMLを手動で編集しないでください。デザインの変更（色、フォント、セクション）はassets/template.htmlで行ってください；/*__PORTFOLIO_DATA__*/null、"/*__PHOTO__*/"、__TITLE__、__DESCRIPTION__のプレースホルダーはそのまま保持してください。