ポートフォリオサイトの作り方

転職・フリーランス活動に使えるポートフォリオサイトを作ります。

完成イメージ

• ヒーローセクション（自己紹介）
• スキル一覧
• 制作実績
• お問い合わせフォーム

ステップ1: プロジェクト作成

Next.js + TypeScript + Tailwind CSSで
ポートフォリオサイトの基本構造を作って。

セクション:
1. ヒーロー（名前、肩書き、一言）
2. About（自己紹介）
3. Skills（スキルバー）
4. Works（制作実績カード）
5. Contact（お問い合わせ）
6. Footer

デザイン:
- ダークモード対応
- モダンでミニマル
- アニメーション付き

ステップ2: ヒーローセクション

ヒーローセクションを改善して:
- 名前を大きく表示
- タイピングアニメーション
- SNSリンク（GitHub, X）
- スクロールダウン矢印

ステップ3: スキルセクション

スキルセクションを実装:
- スキル名とレベルバー
- カテゴリ分け（Frontend, Backend, Tools）
- ホバーでバーがアニメーション

ステップ4: 制作実績

制作実績セクションを実装:
- カード形式（画像、タイトル、説明）
- ホバーで拡大エフェクト
- クリックで詳細モーダル
- 使用技術のタグ表示

ステップ5: お問い合わせ

お問い合わせフォームを実装:
- 名前、メール、メッセージ
- バリデーション
- 送信成功/失敗の表示
- Web3Forms等で実際に送信

ステップ6: 公開

Vercelでデプロイ:

# Vercel CLIでデプロイ
vercel

# または GitHubと連携

デザインのコツ

• 余白を十分に: 詰め込みすぎない
• 色は2-3色: メイン、アクセント、背景
• 一貫性: フォント、ボタンを統一
• モバイル優先: スマホで見やすく

差別化のポイント

• オリジナルアニメーション
• ユニークなレイアウト
• ストーリーを伝える
• 実績の見せ方を工夫

よくある質問

Q. 実績がない場合は？

自分で作ったアプリを載せましょう。ToDoアプリでもOK。

Q. 写真は必要？

顔写真があると信頼感UP。イラストでもOK。

次のステップ

• ランディングページの作り方
• Vercelでデプロイする方法