ポートフォリオ：サイバーパンク

Next.js 16、React 19、およびカスタムGSAP/Canvas物理演算を使用して構築された、デジタルグリッチとFUI（Futuristic User Interface）端末の美学を備えたインタラクティブな開発者ポートフォリオ

ライブデモ • GITHUBリポジトリ（プライベートアクセス）

概要

• 役割：制作者、ソロフルスタック＆クリエイティブエンジニア
• スタック：Next.js 16 (App Router)、React 19、TypeScript、Tailwind CSS 4、GSAP、WebGL (Three.js)、Web Audio API (Text-to-Speech)、Google Generative AI SDK、next-intl（英語、タガログ語、ドイツ語、スペイン語、フランス語、アラビア語、韓国語、日本語、中国語に完全対応したコンテンツのローカライズ）
• 主な成果：動的な音声主導のチャットボットナビゲーションと1秒未満のページロードを実現した、100%インタラクティブなポートフォリオカバレッジ
• 要約：デジタルグリッチの美学を取り入れて設計された、プレミアムなデジタルポートフォリオおよびクリエイティブエンジニアリングのショーケース。インタラクティブなAI音声会話、キャンバスベースの波動物理トランジション、スムーズなスクロール体験を特徴とし、ハイレベルなデザインとフロントエンドの習熟度をアピールします。

課題

• 課題：一般的なポートフォリオは静的で退屈であり、実際のフルスタックやAI統合の能力を示すことができません。パフォーマンスやアクセシビリティを損なうことなく、複雑なアニメーション、レイアウト、状態管理、リアルタイムAIツールの生きた概念実証（PoC）となる、没入型で高度にインタラクティブな個人ウェブサイトを作成することが目的でした。
• ターゲット：技術的な深み、プレミアムなデザインセンス、堅牢なソフトウェアアーキテクチャを求めるリクルーター、エンジニアリングマネージャー、潜在的なクライアント、および開発者。
• 制約：ウェブベースのキャンバスシミュレーション、3Dモデルビューア、カスタムストリーミングAIチャットボットを実行しながら、モバイルデバイス上でスムーズな60fpsのアニメーションと高パフォーマンス（1秒未満のロード時間）を維持すること。

アプローチと決定事項

• アーキテクチャ：Edgeレンダリングによる多言語対応ルートのためのNext.js App Routerと、テーマ、音楽、チャットボットの状態管理用グローバルReactコンテキストの組み合わせ。
• 重要な決定事項：
  • 多言語アーキテクチャ：next-intlを使用した堅牢なi18nフレームワークを構築し、ルーティング、ページメタデータ、チャットプロンプト、プロジェクトドキュメント構造をローカライズ（9言語の完全ローカライズページを用意）。
  • Canvasベースのトランジション：単純なCSSトランジションの代わりに、カスタムのパーリンノイズ波動歪みを統合し、ページ遷移時に触覚的なデジタルウェーブエフェクトを作成。
  • 音声合成とAIチャットボット：Edgeルーティングを利用して迅速に応答をストリーミングする、カスタム音声合成キューを備えたGoogle Generative AI SDKの構成。
  • Zインデックスの階層化：オーバーレイ、カスタムカーソル、3Dシーン間でのレイアウトやインタラクションの衝突を防ぐため、厳格な15層のz-indexスタッキングコンテキストを確立。
• トレードオフ：初期ページバンドルを最小限に抑え、ロード速度を100ms未満に維持するため、重い3Dアセットの代わりにCSSオーバーレイと軽量な2Dキャンバスエフェクトを使用することを決定。
• データフロー：ユーザー入力 -> Next.jsルートハンドラー -> Google Generative AI -> テキストストリーム -> 音声合成キュー -> カスタムWeb Audioプレーヤー。

主な結果と影響

• 成果：デバイスを問わないスムーズな60fpsアニメーション、100ms未満のTime-to-First-Byte (TTFB)、および完全にインタラクティブなバイリンガル音声アシスタントを実現。
• Lighthouseパフォーマンス：Lighthouseのすべての主要カテゴリ（パフォーマンス、アクセシビリティ、ベストプラクティス、SEO）において100/100/100/100の完璧なスコアを達成。
• セキュリティ準拠：Cloudflareのisagentreadyアセスメントを通じて、セキュリティ検証監査で完璧な100/100を達成。
• 比較：制作者の最初の最適とは言えなかったポートフォリオPortfolio: Glassから、カスタムのインタラクティブ端末へとアップグレードしたことで、ユーザーのエンゲージメント時間が伸び、直接的な技術的問い合わせにつながりました。
• 影響：モダンで複雑なユーザーインターフェースと本番環境レベルのフルスタックアーキテクチャを構築する能力を証明。

技術的な深掘り

• 注目すべき詳細：独自構築 of CRT画面走査線フィルター、レスポンシブなカスタムカーソル追従、動的オーディオビジュアライザー、およびカスタムの多言語next-intlルーティング。
• 検証：Lighthouse監査、アクセシビリティチェック（コントラスト比 >= 4.5:1）、および低スペックデバイスでのモバイルエミュレーションを使用して検証。
• 最適化：Next.jsの画像リモートパターンの構成、Three.jsキャンバスアセットの遅延読み込み、および未使用CSSを最小限に抑えるためのTailwindスタイルの合理化。
• コード品質：厳格なESLint構成、TypeScriptの型定義、および自己完結型のモジュール式コンポーネント。
• リンク：package.json、next.config.ts、およびapp/data.tsを参照してください。

振り返り

• 改善点：モバイルデバイスでのCPU負荷を軽減するため、3Dモデルをさらに最適化するか、背景波にカスタムシェーダーを実装する。
• 成功要因：サウンドトラック、グラフィックス、チャットボットのインタラクションがシームレスに機能する、統一されたデザインの美学を提供できたこと。
• 学んだ教訓：ストリーミングAI APIと並行して複雑なアニメーションを管理するには、React内での慎重な非同期状態の分離が必要です。

---

私の貢献

• フロントエンドアーキテクチャ：カスタムカーソル、HUD、弁当グリッド、ミュージックプロバイダーを含む、コアUIシェルの設計と実装。
• AIチャットボットの統合：音声合成、システム指示、およびロケール対応のコンテキストを備えた音声チャットボットのプログラム。
• アニメーションの調整：GSAP ScrollTriggerタイムラインエントリの編成と、キャンバスウェーブ歪み遷移との同期。

---

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

このアプリは、ローカライズされたルートフォルダーを持つ、モジュール式の機能ベースのNext.js App Routerパターンに従っています。

• 階層構造：サーバーコンポーネントがローカライズパラメータと構造的ルーティングを処理し、クライアントコンポーネントがインタラクティブなウィジェットをレンダリングします。
• 機能モジュール：
  • components/sections/：レイアウトセクション（Hero、About、Projects、Skills、Contact）。
  • components/ui/：インタラクティブなUIノード（ASCIIText, CustomCursor, MusicPlayer, VerticalHUD）。
• 状態管理：React Context APIがグローバルなオーディオ再生状態、テーマ選択、および言語状態を制御します。
• リファクタリングと改善：開発中のホットモジュール置換（HMR）をほぼ瞬時に行うため、Turbopackを使用してNext.js 16に構成をアップグレード。

コンパイル済みルート構造 (App Router)

アプリケーションは、以下の静的（○）および動的（ƒ）ルート構造にコンパイルされます（個々のポートフォリオプロジェクトパスを除く）：

• PWA＆SEOインフラストラクチャ（○ 静的）：
  • /_not-found — 静的なグローバル404ハンドラー。
  • /manifest.webmanifest — ウェブアプリマニフェスト。
  • /robots.txt ＆ /sitemap.xml — クローラーディレクトリ。
• バイリンガルルーティング（ƒ 動的）：
  • /[locale] ＆ /[locale]/[...rest] — next-intlを使用したロケール対応のレイアウトスタック。
• Model Context Protocol (MCP) ＆ AIエージェント（ƒ 動的）：
  • /.well-known/mcp.json ＆ /openapi.json — 機械読み取り可能なサーバー機能スキーマ。
  • /.well-known/agent-skills/ — AI統合のためのスキルディレクトリ（例：SKILL.md）。
  • /api/mcp ＆ /api/mcp/sse — エージェントクライアント向けのSSE（Server-Sent Events）通信エンドポイント。
• ジェネレーティブAIチャットボット＆メディアシステム（ƒ 動的）：
  • /api/chat ＆ /api/chat/health — AIチャットボットの音声プロセッサを支えるストリームルートハンドラー。
  • /api/music ＆ /api/music/health — オーディオストリームコントローラーのルーティング。
• LLMコンテキストエクスポート（ƒ 動的）：
  • /llms.txt ＆ /llms-full.txt — LLMの読み取り用に最適化された、ポートフォリオの事実、コンテキスト、および資格情報のトークン効率の良いテキストエクスポート。

---

デモプレビュー

• デジタルグリッチランディングページ：標準に準拠したタイポグラフィ、CRT走査線オーバーレイ、およびライブステータス表示を表示する没入型のホームビュー。
• インタラクティブAIチャットボット：右下に配置された会話型ボットで、レイアウトの状態を動的に更新し、音声フィードバックを再生します。
• 弁当グリッドレイアウト：スキル、タイムライン、認定資格を表示する、クリーンで高密度のダッシュボードレイアウト。

ホスティングに関する注意：
プロジェクトはライブで、Vercelの franzdomingo.dev にホストされています。このコードベース自体がポートフォリオプロジェクトであることに注意してください。現在、このプロジェクト自体を表示し、実行しています。