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

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

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

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

備考:

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

---

特徴

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

---

私の貢献（役割と責任）

フロントエンドアーキテクチャ:

• React、Next.js App Router、および厳格な型安全性のための TypeScript を使用して、UI 全体を設計および実装しました。

UI/UX デザイン:

• モダンなルックアンドフィールのために、グラスモーフィズムでミニマリストなレイアウトとインタラクティブなコンポーネントを作成しました。

コンポーネントシステム:

• 迅速なカスタマイズのために、モジュール式で再利用可能なプリミティブ（カード、ダイアログ、ドック、コマンドメニュー、チャットボットなど）を開発しました。

アクセシビリティと SEO:

• Radix UI と Shadcn UI を活用し、すべてのコンポーネントがアクセシブルで SEO 最適化されていることを確認しました。

開発者体験:

• コードスタイルの規約、TypeScript ファーストなパターン、および関数型で宣言的な React コードを確立しました。

---

直面した課題

• ミニマリズムと機能の豊富さのバランス: UI をクリーンに保ちながら、コマンドメニュー、ドック、チャットボットなどの高度な機能をサポートする必要がありました。

• グラスモーフィズムデザインの実装: Tailwind CSS とカスタムユーティリティを使用して、ブラウザ間で一貫したグラスモーフィズム効果を実現しました。

• ボイラープレートなしの拡張性: 繰り返しのコードを最小限に抑え、新しいセクションやコンポーネントを簡単に追加できるようにコードベースを構造化しました。

• セキュリティとコード共有: 機密性の高いロジックやデプロイの詳細の露出を避けるため、完全なソースコードを公開しないことを決定しました。

---

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

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

• コンポーネント構成:

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

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

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

---

デモプレビュー

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

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

• 示されている機能:

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

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

---

開発リソース

• ガイド/ドキュメント:
  • コードスタイルと規約については .github/instructions/Enter.instructions.md
  • Next.js, Tailwind CSS, Framer Motion, Radix UI, Shadcn UI のドキュメント

---

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

---