Claude Codeで作るデモサイト② ── フリーランサー ポートフォリオ「YOUR NAME.dev」
デモサイト第2弾は、フリーランスデザイナー・エンジニア向けのダークモードポートフォリオサイト。React（Vite）+ Tailwind CSS を想定した HTML デモ版で、Claude Code の実力を視覚的に示します。
🎨 デザインコンセプト
背景色 #0F0F0F（ほぼ黒）にエメラルドグリーン #6EE7B7 をアクセントとしたモダン開発者系デザイン。カーソルに追従するグラデーション光彩エフェクト、タイピングアニメーション、スキルバーのプログレスアニメーションなど、動きのある演出で訪問者の目を引きます。
📦 コンポーネント構成
| セクション | 実装内容 |
|---|---|
| Hero | タイピングアニメーション・グラデーションテキスト・CTAボタン |
| About | プロフィール写真・スキルタグ・AI自己紹介文ジェネレーター |
| Works | フィルタブル作品グリッド（カテゴリ別）・ホバーオーバーレイ |
| Skills | スキルバー8本（スクロールで発火するプログレスアニメーション） |
| Contact | フォーム（名前/メール/メッセージ）+ SNSリンク |
🤖 AI Bio Generator（自己紹介文の自動生成）
Aboutセクションに埋め込まれた AI Bio Generator が特徴的な機能。職種・スキル・強み・トーンを入力するだけで、140字版・280字版・英語版の3バリエーションを同時生成します。
- 📝 140字版：Twitter / Xのプロフィール向け
- 📝 280字版：Notionや提案書の自己紹介欄向け
- 🌍 English版：グローバルなクライアント対応
💼 Worksセクション：フィルタブルグリッド
作品を「Web制作」「アプリ」「デザイン」でワンクリックフィルタ。カードにホバーすると緑のオーバーレイが表示される演出も実装しています。
📊 Skillsセクション：プログレスバーアニメーション
スクロールでセクションが画面に入ったとき、IntersectionObserver API を使ってスキルバーが左から右へアニメーションしながら伸びます。数値とバーが連動して動くことで、スキルレベルを視覚的に伝えます。
💡 ポイント：React版への移行も簡単
今回は静的HTMLデモですが、Claude Code への指示書を使えば React（Vite）+ Tailwind CSS 版として同じ構成をコンポーネント化することも容易です。Pharmapiaでは実案件でこのアプローチを採用しています。
次回は P3：ハンドメイド雑貨 ECサイト（カート機能 × AI文章生成） をご紹介します。
Powered by Pharmapia & Claude Code
📋 Claude Code への実際の指示プロンプト（抜粋）
以下が実際に Claude Code に入力したプロンプトの一部です。このまま貼り付けるだけで動くように設計しています。
以下の仕様でフリーランサー向けポートフォリオサイトをReact(Vite)+Tailwind CSSで作成してください。
【デザイン】
- ダークモード固定 BG: #0F0F0F, Accent: #6EE7B7
- フォント: Space Grotesk（見出し）, Inter（本文）
【Hero.jsx】
- タイピングアニメーション（職種が順に表示）
- グラデーションテキスト（CSS animation）
- カーソル追従グロウエフェクト
【About.jsx のAI Bio Generator】
- 入力: 職種テキスト、スキル（カンマ区切り）、強み、トーン選択
- ボタン「AIで自己紹介文を生成」クリックで Anthropic API呼び出し
- 出力エリア: 140字版 / 280字版 / 英語版を並べて表示
- コピーボタン付き
【Skills.jsx】
- スキルバー8本（幅がアニメーションで伸びる）
- IntersectionObserverでスクロール時に発火ポイントは「プロジェクト構成・デザイン・セクション・AI実装」を一度に渡すこと。分割して指示すると都度コンテキストが切れるため、仕様をまとめて一気に投げるのが効率的です。
PHARMAPIA
ポートフォリオサイトや
フリーランス向けWebサイトの制作はお任せください。
まずはお気軽にご相談ください。
通常2営業日以内にご返答します。
費用・納期・制作範囲など、どんな小さなご質問でも歓迎です
