3D ポートフォリオウェブサイト

オリジナルポートフォリオ / 3DインタラクティブWeb / アーカイブ展示

一言要約： インパクトのある3Dランディングカード、高度なUIエフェクト、インタラクティブな要素を備えた完全レスポンシブな個人ポートフォリオウェブサイト。技術力とデザイン能力を示すため、最新のWeb技術を用いてゼロから構築。

開発期間：2025年6月

備考：

• ホスティング/コードの利用に関する免責事項： 展示プロジェクトとしてアーカイブされています。ソースコードはリクエストに応じて提供可能です。更新・最適化されたポートフォリオは現在 archivedportfolio.franzdomingo.tech で公開されています。
• 詳細情報やデモに関するお問い合わせ： franzdomingo.tech を通じて Franz Phillip G. Domingo までご連絡ください。
• ナビゲーションに関する注意： このページはオリジナルビルドの記録です。現在のポートフォリオは上記のリンクからアクセスできます。

---

主な機能

• リアルタイム回転とグラスモーフィズムを備えた3Dランディングカード
• MDXベースのブログおよびプロジェクトコンテンツ
• レスポンシブなモバイルファーストレイアウト
• 設定が保持されるテーマ切り替え
• モーフィング遷移を備えた高度なモーダルシステム
• Framer Motionによるアニメーションとページ遷移
• ナビゲーション用のコマンドパレット (CMD+K)
• localStorageに設定が保存されるドラッグ可能なドックUI
• アニメーションエフェクト付きのマグネティックボタン
• ライブクロックと埋め込みAIチャットボット
• グラスモーフィズム、ネオンアクセント、アニメーション背景
• カスタムカーソルシステム
• PWA対応、SEO最適化、アクセシビリティ優先
• カスタムエラーバウンダリ

---

私の貢献（役割と責任）

デザイン＆エンジニアリング：

• すべてのUI/UX、3Dエフェクト、およびインタラクティブ機能を設計・実装。

アニメーション＆インタラリティ：

• カスタムFramer Motionプリミティブ、マグネティックボタン、ドラッグ可能なドック、コマンドパレットを構築。

パフォーマンス＆アクセシビリティ：

• アニメーションの調整、SEOの最適化、デバイス間でのアクセシビリティの確保。

コンテンツ層：

• 柔軟なブログおよびプロジェクト執筆のためMDXを統合。

技術ドキュメント：

• 将来のリファレンスのため、アーキテクチャ、課題、技術的なハイライトを記録。

---

直面した課題

• MDX + App Routerの統合： Next.js 15におけるコンテンツローダー、動的ルーティング、ハイドレーションの手動設定。

• Framer Motionのパフォーマンス調整： アニメーションの滑らかさとデバイスのGPU/CPU制限のバランス。

• iOS/Safariのレンダリングバグ： SafariにおけるGPUテクスチャのアーティファクトに対する条件付きワークアラウンド。

• ブラウザ間でのレイアウトの一貫性： 高度なエフェクトがあらゆる環境で一貫してレンダリングされるようにすること。

• パフォーマンスのトレードオフ： 過度なアニメーションがリソース消費を招いたため、シンプルさとアクセシビリティを重視した再設計のきっかけとなりました。

---

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

• アーキテクチャスタイル： モジュール式Reactコンポーネントシステム、アトミックCSS、MDXコンテンツ層。

• コンポーネント構成：

  • ui/, core/, motion-primitives/: 再利用可能なアトミックコンポーネント
  • ブログおよびプロジェクト用のMDXコンテンツ
  • app/projects/, app/blog/ 下の明確なルーティングと動的な [slug] ルート

• 状態管理： コンテキストベースのテーマ管理、ドック/カーソル状態のためのlocalStorage

• 統合テクノロジー： Framer Motion, Radix UI, Tailwind CSS, cmdk, embla-carousel, lucide-react

---

デモプレビュー

• スクリーンショット/ビデオ： このページはオリジナルビルドの記録です。ライブデモについては archivedportfolio.franzdomingo.tech をご覧ください。現在のポートフォリオも archivedportfolio.franzdomingo.tech でアクセス可能です。

• プラットフォーム表示： Web (レスポンシブ、モバイルファースト)

• 実演された機能：

  • 3DランディングカードとインタラクティブUI
  • アニメーション遷移、モーダル、背景
  • コマンドパレット、ドック、マグネティックボタン
  • MDXベースのコンテンツ、ライブクロック、埋め込みチャットボット

• デモ手順： archivedportfolio.franzdomingo.tech にアクセスしてアーカイブデモを表示してください。最新のポートフォリオについては portfolio.franzdomingo.tech を参照してください。

---

開発リソース（オプション）

• ガイド/ドキュメント：
  • Framer Motion, Tailwind CSS, Radix UI, MDX ドキュメント

---

詳細やコードベースの確認が必要な場合は、作成者に直接お問い合わせください。

---