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

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

デモリンク

概要

• 役割: フルスタック開発 ＆ UI/UX デザイン
• 技術スタック: Next.js 14, React Three Fiber, Eldora UI, GSAP, Tailwind CSS
• 主な成果: 没入型でインタラクティブな3Dポートフォリオの提供に成功
• 要約: Next.js 14、React Three Fiber、Eldora UIコンポーネント、GSAPを使用してPrince Jeruh Reyesのために構築されたアニメーション3Dポートフォリオウェブサイト。没入型の3Dシーン、blobityカーソルエフェクト、スムーズなページ遷移が特徴です。

課題

• 課題: 課題は、DOMを操作し、3D要素をシームレスに統合することでした。特に、より確立されたコンセプトを持つ以前の v1 "glass" ポートフォリオ と比較して難易度がありました。
• 対象者: 学生としての次のインターンシップや就職活動をサポートするために、Prince Jeruh Reyesのために構築されました。
• 制約事項: 厳密な期限はなく、情報の追加と改良を繰り返す反復的なプロセスでした。

アプローチと決定

• アーキテクチャ: シンプルでクライアントサイドに焦点を当てたNext.js 14アーキテクチャ。
• 主要な決定事項: 現実世界のシナリオで機能を試して学習したいという理由から、主にReact Three FiberとGSAPを選択しました。
• トレードオフ: トレードオフは最小限に抑えられました。最終的な結果は、視覚的に印象的で、全体的に機能性の高いウェブサイトになりました。
• データフロー: 複雑なバックエンドのない、純粋に静的/クライアントサイドのデータフロー。

主な結果と影響

• 結果: クライアントは「すごく良い」と述べており、非常に満足していました。
• 影響: 2026年のインターンシップや就職活動に役立つ、傑出したプロフェッショナルなオンラインプレゼンスを提供します。

技術的詳細

• 注目すべき詳細: カスタムカーソル（blobity）を統合し、Eldora UIのオープンソースアニメーションコンポーネントを適用しました。
• 検証: ウェブサイトのコンテンツを1つのファイルで簡単に編集できる、わかりやすいコードベースを維持しました。
• 最適化: 視覚的な豊かさとさまざまなデバイスでのスムーズなパフォーマンスのバランスをとるため、過程で数多くの最適化を実装しました。
• コード品質: すべてのセクション（ヒーロー、概要、作品、ツール、連絡先）をダークテーマと完全なレスポンシブレイアウトで設計しました。

振り返り

• 成功体験: React Three FiberとNext.jsを効果的に組み合わせることに成功し、大きな妥協をすることなく、高品質で洗練された視覚的結果を達成しました。
• 教訓: 反復的なプロセスにより、柔軟で編集しやすいプロジェクト構造の価値が再確認されました。

私の貢献

• テンプレートのカスタマイズ: 事前構築されたテンプレートをポートフォリオの基盤として使用し、Prince Jeruh Reyesの特定のニーズに合わせてUIとレイアウトをカスタマイズしました。
• コンテンツの統合: プレースホルダーのコンテンツを実際のプロジェクトデータに置き換え、すべてのセクションでクライアントの作業を正確に反映するように構成と詳細を調整しました。
• 技術的調整: DOM操作を管理し、新しいコンテンツのフローに合わせて既存の3D要素（React Three Fiber）とスクロールアニメーション（GSAP）をスムーズに機能するように微調整しました。

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

このプロジェクトは、シンプルでわかりやすいクライアントサイドのアーキテクチャに従っています。

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

デモプレビュー

• ライブサイト: pjreyes.vercel.app
• 表示セクション: プリローダー、ヒーロー、概要、作品、ツール、連絡先、フッター
• コア機能: Three.jsを使用した3Dインタラクティブヒーロー、スクロールによってトリガーされるスムーズなアニメーション、blobity効果のあるカスタムカーソル、Workセクションを使用したプロジェクトショーケース、ダークテーマのレスポンシブレイアウト上の連絡先フォーム。

ホスティングに関する注意:
プロジェクトは現在、提供されているデモリンクでVercelにデプロイされ、公開されています。

帰属表示:
このプロジェクトは Eldora UI Portfolio Template を使用して構築されました。元のテンプレートのデザイン、コンポーネント、およびコア設定の全クレジットは Eldora UI に帰属します。