ポートフォリオページ

AstroGlass における新機能として、ポートフォリオページはプロジェクトをリッチに紹介するための専用動的ルートページです。カテゴリフィルタリング機能、各プロジェクトの詳細表示に対応し、アクティブなテーマに適合するデザインを特徴とします。

アーキテクチャ

ポートフォリオページは /[theme]/portfolio (例: /liquid/portfolio、/glass/portfolio) から提供されます。これには主要なテーマページと同様の動的ルーティング戦略が用いられます。

ファイル構造

ルート: src/pages/[theme]/portfolio.astro - 動的ルートのハンドラーです。
コンポーネント: src/components/pages/portfolio/{theme}/ - テーマごとのそれぞれのモジュール化されたセクション実装 (例: PortfolioHeroLiquid.astroや PortfolioGridLiquid.astro)。
コンテンツ: src/locales/{lang}/portfolioPage.json - 全てのテキストコンテンツ、プロジェクトデータとカテゴリ。

カスタマイズ

ランディングページの専用セクションとは異なり、ポートフォリオページは完全にローカリゼーションファイル経由のデータ主導で動作します。これにより、コードに触れることなくプロジェクトを簡単に追加できます。

プロジェクトの管理

プロジェクトを管理するには src/locales/ja/portfolioPage.json を編集します。

{
  "projects": {
    "p1": {
      "title": "プロジェクト名",
      "description": "カード用の短い説明文。",
      "longDescription": "詳細表示用の長い文章...",
      "category": "webapp",
      "techStack": ["React", "Node.js"],
      "color": "from-violet-500 to-fuchsia-500"
    }
  }
}

カテゴリ

カテゴリは同 JSON ファイル内に定義されており、フィルタリングに使用されます。

{
  "filterAll": "すべて",
  "categoryLabels": {
    "webapp": "Web アプリ",
    "mobile": "モバイル アプリ"
  }
}

機能

動的フィルタリング: クライアント側でカテゴリ毎に滑らかなアニメーションによるフィルタリングが行われます。
詳細表示: 各プロジェクトごとに展開が可能な詳細パネルで、「課題」「解決策」「影響力」を表示します。
テーマへの適応: アクティブなテーマに対応したヘッダー、フッター、スタイルを自動的に適用します。
レスポンシブ: スマートフォン、タブレット、デスクトップにおいて機能する、完全なレスポンシブレイアウトに対応しています。

ポートフォリオ ページ