// このコードベース: ミニマリスト・グラスポートフォリオ

ミニマリスト・グラスポートフォリオ

ミニマリスト、グラスモーフィズム・ポートフォリオ / 個人ウェブサイト / Next.js App Router プロジェクト

一言サマリー： Next.js 15 App Router、TypeScript、Tailwind CSS 4、MDX で構築された静的生成ポートフォリオサイト。グラスモーフィズムな UI、モジュール式アーキテクチャ、迅速なカスタマイズ（CMS 不要）を特徴としています。

開発期間: 2025年6月 - 2025年7月

備考:

• ホスティング/コードの利用に関する免責事項: 完全なソースコードはリクエストに応じて提供可能です。プロジェクトは公開されていますが、潜在的な脆弱性の露出を避けるため、ソースコードは公開していません。
• 詳細情報やデモに関するお問い合わせ: franzdomingo.dev を通じて Franz Phillip G. Domingo までご連絡ください。
• ナビゲーションについて: ブログとプロジェクトのページは、サイトのナビゲーションからアクセスできます。

特徴

• ミニマリスト、グラスモーフィズムな UI
• レスポンシブ、モバイルファーストなレイアウト
• MDX によるブログおよびプロジェクトページ
• モジュール式コンポーネントシステム (ui/, motion-primitives/, dock/)
• CMD+K コマンドメニュー、アニメーションドック、チャットボット
• SEO 最適化、アクセシビリティ対応、高パフォーマンス
• Vercel へのデプロイ（SSL + CDN 対応）
• ダークモード切り替え
• トースト通知システム
• 新しいセクションやコンポーネントの容易な拡張性

私の貢献（役割と責任）

Frontend Architecture:

• Developed physics-based canvas transitions and custom scroll snap engines.
• Integrated an AI chatbot with vocal synthesis and local storage persistence.

Multi-Agent Orchestration:

• Orchestrated a pipeline of specialized agents (Coder, Front-End, QA, Tech Writer, Infra).

Performance & DevOps:

• Configured Vercel Edge Runtime and DNS routing for optimal performance.
• Ensured accessibility with reduced-motion fallbacks and Core Web Vitals audits.

直面した課題

• Synchronizing complex animations:
  Coordinating canvas-based wave physics with React state and GSAP ScrollTrigger.
• AI Chatbot Performance:
  Optimizing TTS vocal synthesis and LLM streaming within a Next.js Edge environment.
• Agent Orchestration:
  Managing a complex multi-agent orchestration pipeline for feature delivery.
• Accessibility:
  Balancing high-performance visual glitch effects with strict reduced-motion accessibility standards.

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

• アーキテクチャスタイル: Next.js App Router を備えたモジュール式、関数型 React。 関心の明確な分離：UI プリミティブ、機能モジュール、フック、およびユーティリティ。

• コンポーネント構成:

  • app/: ルーティング、レイアウト、グローバルスタイル
  • components/: UI プリミティブ、ドック、チャットボット、モーションエフェクト
  • hooks/: カスタム React フック
  • lib/: 共有ユーティリティと定数
  • types/: TypeScript インターフェース

• 状態管理: 最小限のローカル状態。React Server Components と必要に応じたコンテキストを優先。

• 統合: アニメーションに Framer Motion、アクセシビリティに Radix UI、デザインプリミティブに Shadcn UI。

デモプレビュー

• スクリーンショット/ビデオ: ミニマリスト・グラスポートフォリオのライブデモは franzdomingo.dev でご覧いただけます。すべての UI 機能、レイアウト、インタラクションを直接探索できます。

• プラットフォームビュー: Web（レスポンシブ、モバイルファースト）

• 示されている機能:

  • グラスモーフィズムなランディングページ
  • アニメーションドックナビゲーション
  • コマンドメニュー (CMD+K)
  • ブログおよびプロジェクトページ
  • チャットボットとトースト通知

• デモの手順: ライブサイト franzdomingo.dev にアクセスしてください。 フルソースまたはプライベートデモについては、著者にお問い合わせください。

詳細情報が必要な場合やコードベースをご覧になりたい場合は、著者に直接お問い合わせください。