プロフィールサイト

概要

このプロジェクトでは、Framer Motion を活用したインタラクティブなプロフィールサイトを構築します。

天気 API と連携し、自分が拠点とする地域の天気に応じて、画面の表示を動的に変化させます。

学習目標

Framer Motion を使用した、React でのさまざまなアニメーション効果について学習します。

天気 API から取得するデータに応じた、UI の切り替え方法なども確認してください。

推奨技術

このプロジェクトの難易度と趣旨を踏まえて、以下の使用をお勧めします。

• Framer Motion を用いたアニメーション実装
• Vite を用いた React 環境構築
• TypeScript による型チェック
• Tailwind CSS を用いたスタイリング
• 天気 API との連携
• swr を使用したデータフェッチ
• GitHub Pages へのデプロイ

---

🎯 お題

• 「ユーザーストーリー」を全て満たす、アプリを構築してください。
• 必要に応じて、スクリーンショットやデモサイトの URL を、参照してください。
• なお、スタイルは、あなた自身で独自にカスタマイズすることが可能です。

必須セクション

1. ナビゲーションバー：
   • ホバー時に変化するアニメーション効果を適用。
2. ヒーローセクション：
   • 天気に応じた、ドラッグ可能な天気アイテム（雲、太陽など）を表示。
3. 自己紹介セクション：
   • タイピングアニメーションを実装。
4. スキル＆プロジェクトセクション：
   • 要素の出現アニメーションを適用。
5. コンタクトセクション：
   • アイコンがふわふわと浮遊するアニメーションや、ホバーエフェクトを実装。

追加情報

今回使用する API は、「**https://open-meteo.com/**」です。

• この API は、特定の地域の緯度・経度から天気情報を提供します。
• 無料でパブリックに公開されており、アクセスキーなどは必要ありません。
• 詳細は、API ドキュメントを参照してください：Docs

ユーザーストーリー

• ユーザーがサイトにアクセスすると、自分のプロフィール情報が表示される
• TOP ページには、天気に合わせたドラッグ可能なアイテム（晴れの日は太陽、雨の日は雲など）が表示される
• ナビゲーションバーは、ホバーするとアイテムが拡大される
• 自己紹介文はタイピングアニメーション（デモでは、生成 AI 風）で表示される
• スキル/プロジェクトのセクションに遷移すると、順番に要素がアニメーションして画面に現れる
• コンタクトのセクションでは、SNS アイコンがふわふわと浮遊するアニメーションで表示されている
• SNS アイコンは、ホバー時に詳細情報を確認することができる。
• アプリケーションがデプロイされており、GitHub プロフィールや名刺代わりとして共有できる