// Eldora アニメーションポートフォリオ

Eldora アニメーションポートフォリオ

3D ポートフォリオ / Next.js / React Three Fiber / Eldora UI

一言サマリー： Next.js 14、React Three Fiber、Eldora UI コンポーネント、GSAP を使用して Prince Jeruh Reyes のために構築されたアニメーション 3D ポートフォリオウェブサイト。没入型の 3D シーン、blobity カーソルエフェクト、スムーズなページ遷移が特徴です。

ライブサイト: pjreyes.vercel.app

特徴

• React Three Fiber、Drei、Rapier 物理エンジンを使用した 3D インタラクティブシーン
• 没入型ナビゲーションのための Blobity カスタムカーソル
• ページ入場時のプレローダーアニメーション
• アニメーションセクション：Hero、About、Work、Tools、Contact
• GSAP を使用したスクロールトリガーアニメーション
• UI 遷移のための Framer Motion
• カスタムスタイリングを施したダークテーマ
• 完全レスポンシブデザイン

私の貢献（役割と責任）

フルスタック開発:

• Next.js 14 を使用してポートフォリオウェブサイト全体を一から構築
• 3D シーンとインタラクティブ要素のために React Three Fiber を統合
• blobity カスタムカーソルシステムを実装
• スムーズな入場体験のためのプレローダーアニメーションを作成

UI/UX デザイン:

• すべてのセクションをデザイン：Hero、About、Work、Tools、Contact、Footer
• Eldora UI オープンソースアニメーションコンポーネントを適用
• セクションの公開に GSAP スクロールトリガーアニメーションを実装

アニメーション:

• Three.js/Drei による 3D オブジェクトのレンダリング
• スクロールベースの公開のための GSAP タイムラインアニメーション
• コンポーネントレベルの遷移のための Framer Motion
• アニメーションパラメータの微調整に Kinet と Leva を使用

直面した課題

• 3D パフォーマンス: 視覚的な豊かさとデバイス間でのスムーズなパフォーマンスのバランスをとるために、Three.js シーンの最適化が必要でした。
• カスタムカーソルの統合: blobity カーソルを 3D キャンバス要素とシームレスに連携させること。
• アニメーションの調整: コンフリクトを起こさずに GSAP スクロールアニメーションと Framer Motion コンポーネントの遷移を同期させること。
• レスポンシブ 3D: モバイルデバイスで 3D シーンが美しく見え、快適に動作するようにすること。

プロジェクトアーキテクチャ

• フレームワーク: Next.js 14 App Router
• 3D エンジン: React Three Fiber, Drei, Rapier
• アニメーション: GSAP, Framer Motion, Kinet
• UI: Tailwind CSS, FontAwesome アイコン, React Icons
• カーソル: Blobity カスタムカーソル
• ツール: Leva (デバッグパネル), Meshline (3D ライン)
• デプロイ: Vercel

デモプレビュー

• ライブサイト: pjreyes.vercel.app
• プラットフォームビュー: Web（レスポンシブ）
• セクション: プレローダー、Hero、About、Work、Tools、Contact、Footer
• 示されている機能:
  • Three.js を使用した 3D インタラクティブヒーロー
  • スムーズなスクロールトリガーアニメーション
  • blobity エフェクトを備えたカスタムカーソル
  • Work セクションによるプロジェクト紹介
  • お問い合わせフォーム
  • ダークテーマのレスポンシブレイアウト

開発リソース

• ガイド/ドキュメント:
  • Next.js, React Three Fiber, GSAP, Framer Motion ドキュメント
  • Eldora UI コンポーネントライブラリ (eldoraui.site)

さらに詳細が必要な場合は、著者に直接お問い合わせください。