Oga Aiichiro - Interactive Portfolio

天気と連動する、遊び心あふれるインタラクティブなポートフォリオサイトです。訪問者が楽しめるユニークな体験を提供することを目指して開発しました。

👇 今すぐサイトを体験！

ポートフォリオサイトのスクリーンショット

🌟 プロジェクトの特徴 (Features)

このポートフォリオは、単に情報を表示するだけでなく、随所にアニメーションやインタラクションを散りばめています。

🌍 天気と連動するヒーローセクション
- リアルタイムの天気情報をOpen-Meteo APIから取得。
- 天候に合わせて、ドラッグ＆ドロップで動かせるオブジェクト（🌞, ☁️, 🌧️など）が出現します。
✍️ タイピングアニメーションによる自己紹介
- AIが文章を生成しているかのような、一文字ずつ表示されるタイピングエフェクトで自己紹介文を演出します。
🖱️ インタラクティブなUI/UX
- ナビゲーションバー: マウスホバーでメニューが拡大する直感的なアニメーション。
- スキル & プロジェクト: スクロールすると、各要素が順番にフェードインで表示されます。
- コンタクト: SNSアイコンがふわふわと浮遊し、ホバーすると詳細情報が表示されるエフェクトを実装。
📱 レスポンシブデザイン
- PC、タブレット、スマートフォンなど、あらゆるデバイスで最適な表示と体験を提供します。
🚀 即時共有可能
- ウェブサイトとしてデプロイ済みのため、GitHubプロフィールや名刺からいつでも共有できます。

このプロジェクトは、以下の技術を主に使用して構築されています。

このプロジェクトのヒーローセクションでは、Open-Meteoの無料天気予報APIを使用しています。

このプロジェクトをご自身の環境で動かす場合は、以下の手順に従ってください。

リポジトリをクローン

git clone https://github.com/your-username/your-repository.git

ディレクトリに移動
```
cd your-repository
```
依存関係をインストール
```
npm install
# または yarn install
```
開発サーバーを起動
```
npm run dev
# または yarn dev
```
ブラウザで http://localhost:3000 (または指定されたポート) を開いてください。