ポートフォリオサイトスキル
プロフェッショナルなポートフォリオWebサイト（ヒーローセクション、プロジェクトショーケースグリッド、アバウトセクション、お問い合わせフォーム）を生成します。クリーンでタイポグラフィック、ミニマルなデザイン。
メタデータ
名前: portfolio-site 説明: ヒーロー、プロジェクトショーケース、アバウト、お問い合わせセクションを備えたプロフェッショナルなポートフォリオWebサイトを生成します。 トリガーキーワード: "portfolio", "personal website", "developer portfolio", "creative portfolio", "resume site"
入力とパラメータ
| パラメータ | 型 | 必須 | デフォルト |
|---|---|---|---|
name | string | ✓ | — |
tagline | string | ✓ | — |
projects | array | ✓ | — |
github_url | string | — | — |
linkedin_url | string | — | — |
email | string | — | — |
years_experience | number | — | 3 |
skills | array | — | [] |
プロジェクト配列の各要素:
{ title: string; description: string; tags: string[]; url?: string; image?: string }
必須セクション（順番通り）
- ナビゲーション — 名前をロゴとして、リンク: プロジェクト / アバウト / お問い合わせ
- ヒーロー — 名前、タグライン、一行の価値提案、ソーシャルリンク（GitHub、LinkedIn、メール）
- プロジェクトグリッド — 3列のレスポンシブグリッド、各カード: タイトル + 説明 + タグ + リンク
- アバウト — 2列: 左に経歴テキスト、右にスキル/統計
- お問い合わせ — シンプルなフォーム: 名前、メール、メッセージ、送信ボタン
- フッター — 著作権 + ソーシャルリンク
デザインルール
- シングルページ、完全レスポンシブ
- デフォルトでダークモード（DESIGN.mdのダークモードトークンを使用）
- すべてのリンクは新しいタブで開く
- 外部JSライブラリは使用しない
- すべてのCSSは
<style>ブロック内に記述 - セマンティックHTML5（
<header>、<nav>、<main>、<section>、<footer>）
出力
単一ファイル: index.html（自己完結型）
セルフチェック
- ヒーローの見出しは名前であり、「ようこそ」ではない
- 少なくとも4つのプロジェクトが表示されている
- ソーシャルリンクはSVGアイコンを使用している（絵文字ではない）
- モバイル: シングルカラムグリッド
- お問い合わせフォームの
action属性が壊れていない