ポートフォリオ：グラス

Next.js 15 App Router、TypeScript、Tailwind CSS、MDXで構築されたミニマリストでグラスモーフィズムなポートフォリオサイト

ライブデモ (V1) • [GITHUB：非公開ソース]

Overview

• 役割：ソロクリエイター、UI/UXデザイナー＆フロントエンドデベロッパー
• スタック：Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• 主な結果：PageSpeedスコア100/100/100/100の達成＆SEO最適化
• 概要：ハイエンドなミニマリズムの美学を示す、静的に生成された開発者向けポートフォリオ。フロントエンドエンジニアのインターンシップを探していた時期に構築され（この期間中にTrend Microへの採用が決定しました）。モジュール化されたUIプリミティブ、ローカライズされたコンテンツ、および完全レスポンシブなグラスモーフィズムインターフェイスを備えています。

The Problem

• 課題：最大の課題は、デザインに取り組み始めて間もないデベロッパーとして、一からまとまりのあるビジュアル言語を実装することでした。ゼロからポートフォリオサイトをデザインするのはこれがまだ2回目だったため、適切な出発点を見つけ、バランスの取れたレイアウトを構築し、既成のテンプレートを使わずに高い審美的品質を確保することが困難でした。
• ターゲット：当時インターンシップの機会に応募していた企業（Trend Microなど）のテクニカルリクルーター、エンジニアリングリード、およびチーム。
• 制約：初期のクライアントバンドルサイズを小さく抑え、ページの応答性を維持し、アクセシビリティ基準を満たしながら、複数のモバイルブラウザおよびデスクトップブラウザで一貫したすりガラス風のグラスモーフィズムUIを実現すること。

Approach & Decisions

• アーキテクチャ：多言語ページのためのNext.js App Router。静的なマークダウン（MDX）ページをレンダリングするためにReact Server Components（RSC）に依存し、インタラクティブな要素（アニメーション、ドック、コマンドメニュー）が必要な場所にのみClient Componentsを組み合わせています。
• 主な決定事項：
  • Tailwind CSS 4の採用：初期のTailwind 4ビルドを活用して、滑らかなCSSグラスモーフィズム変数、カスタムのbackdrop-filter、およびボーダーグラデーションを実装。
  • モジュール式UIプリミティブ：再利用可能なレイアウトブロック（ui/、motion-primitives/、dock/）を構築し、技術的負債を蓄積することなく異なるビューを簡単に構成。
  • next-intlによる多言語サポート：英語およびその他の対象言語の国際化を標準でサポートするようにコードベースを構築。
• トレードオフ：読み込み時間を最適化するために、動的なサーバーレンダリングではなく、クライアント側コンポーネントのハイドレーションを伴う静的生成（SSG）を選択しました。これにより、リアルタイムの動的なデータベース操作は制限されました。
• データフロー：ページリクエストは、レイアウトテンプレートにラップされた静的MDXコンパイルに直接マッピングされます。クライアントの状態は、メニュー、テーマ切り替え、およびモーダルのためにReactフックを介して管理されます。

Key Results & Impact

• 成果：読み込みが非常に速く、検索エンジンで上位にランクされる、洗練されたモダンなグラスモーフィズムインターフェイス。
• Lighthouseパフォーマンス：モバイルおよびデスクトップ向けのPageSpeed Insightsにおいて、パフォーマンス、アクセシビリティ、ベストプラクティス、およびSEOのすべてで完璧な 100 / 100 / 100 / 100 を記録。
• コンテキスト：インターンシップを積極的に探している期間に構築され、最終的に Trend Micro でのポジションを獲得しました。
• 最適化の制限：このV1プロジェクトにおける最適化は、標準的な検索エンジン最適化（SEO）のみに厳密に制限されていました。のちのV2レイアウトで対処されたAI最適化（AIO）、回答エンジン最適化（AEO）、および生成AIエンジン最適化（GEO）などの最新の最適化パラダイムは完全に欠如していました。
• 比較：これはV1レイアウトです。非常に高いパフォーマンスを発揮したものの、V2（ポートフォリオ：サイバーパンク）レイアウトに搭載されているカスタムターミナルインタラクティブ性、3D Canvas物理演算、音声起動AIチャットボットは含まれていません。
• インパクト：高精度なユーザーインターフェイスデザインを実行し、検索に最適化されたReactコードベースを構築する実証された能力。

Technical Deep Dive

• 注目すべき詳細：インタラクティブでアニメーション化されたドックナビゲーション、背景ユーティリティを使用したカスタムすりガラス効果、CMD+Kコマンド検索メニュー。
• 検証：next build を使用してローカルでビルドおよびテストし、Lighthouse、Vercel Analyticsによるランタイムプロファイリング、およびSafari、Chrome、Firefoxでの手動レイアウトチェックを実行。
• 最適化：すべてのMDXページの静的ページ生成（SSG）、重いインタラクティブクライアントコンポーネントの遅延読み込み、および標準のNext.js画像設定を使用した画像最適化。
• コード品質：厳格なTypeScriptチェック、コードフォーマット、およびlinterルールを適用。
• リンク：package.json および components/ のフォルダ構造をご確認ください。

Reflections

• 改善点：事前にFigmaでデザインシステムやビジュアルガイドラインを確立しておくべきでした。デザインの経験が浅い段階でコード上で直接デザインを進めたため、最終的なまとまりのあるグラスモーフィズムの審美性に到達するまでに、複数のレイアウト反復サイクルが発生しました。
• 成功点：完璧な100/100のPageSpeedスコアを達成し、エレガントでクリーンなすりガラスの審美性を提供できたこと。
• 教訓：ミニマリストデザインはシンプルに見えますが、プロフェッショナルに見せるためには正確な間隔、タイポグラフィの階層、およびパディングが必要です。また、グラスモーフィズムな表面を実装するには、ブラウザ互換性のための注意深いbackdrop-filterのフォールバックが必要です。

---

My Contributions

• 完全な所有権：UIデザイン、レイアウトシステム、コンポーネント構造、アニメーション、および多言語化設定を含む、プロジェクトの100%を一から独立して設計、設計構築、および実装しました。

---

Project Architecture

このアプリケーションは、静的なクライアント側生成用に構成された構造化Next.js App Routerパターンを利用しています。

• レイヤード構造：グローバル設定とコアレイアウトのラッパーがテーマプロバイダーとベースのスタイリングを管理し、MDXローダーが生のマークダウンファイルを解析します。
• 機能モジュール：
  • components/ui/ - レイアウトモジュールとコアビジュアルコンポーネント。
  • components/motion-primitives/ - スムーズな遷移のためのアニメーションラッパー。
  • components/dock/ - カスタマイズ可能なフローティングナビゲーションユーティリティ。
• 状態管理：クライアント側の状態を個々のラッパー内にローカルに保持します（例：アクティブなアイテムのインデックス、オーバーレイの表示状態）。

ルート＆リソースマッピング

V2（サイバーパンク）アーキテクチャとは異なり、V1は軽量なクライアント専用ビルドです。

• 含まれているもの：
  • 静的ルート＆アンカー：フラグメントルーティング（#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect）を利用したシングルページ構造。
  • メタデータと検出：ローカライズされたマニフェストファイル（/site.webmanifest, /browserconfig.xml）。
  • ハイドレートされたハイドレーションバンドル：レイアウト、ページ要素、および遅延読み込み状態のための静的next-chunks。
• 欠けているもの：
  • バックエンドAPIなし：ストリームエンドポイント、音楽ルート、またはチャットボットハンドラー（/api/chat, /api/music）がありません。
  • AI / エージェント統合なし：モデルコンテキストプロトコル（MCP）エンドポイント（/api/mcp）やLLM検出テキストスキーマ（/llms.txt, /llms-full.txt）が完全に欠如しています。

---

Demo Preview

• グラスモーフィズムランディングページ：すりガラス調のパネル、繊細なカラーバックドロップ、および正確なタイポグラフィの配置。
• アニメーションドックナビゲーション：スムーズなマウス追跡によるドックアイコンの拡大とセクションのターゲット指定。
• コマンドメニュー（CMD+K）：直接的なページナビゲーションとショートカットのためのインスタントオーバーレイメニュー。
• ライブデモリンク：ライブプロジェクトは franzdomingov1.vercel.app で確認できます。

ホスティングに関する注意：
V1グラスポートフォリオはVercelにデプロイされており、上記のライブデモリンクからアクセスできます。なお、メインのポートフォリオはその後サイバーパンク（V2）レイアウトにアップグレードされています。