Project
Next.js ポートフォリオ Showcase
C# / .NET エンジニアとしての制作物を集約し、モダンな UI で閲覧できるポートフォリオプラットフォーム。
概要
Next.js App Router と Tailwind CSS を用いて構築したポートフォリオサイトです。プロジェクトごとの詳細ページ、技術構成図、Live Demo などを通して、設計〜実装までのプロセスを丁寧に伝えることを重視しています。
苦労した点・工夫した点
既存の職務経歴中心の構成から、制作物ベースのナビゲーションへと拡張する際に、情報量が多くなりすぎないよう UI レイアウトとアニメーションのバランスを調整しました。
得られた学び・振り返り
App Router での動的ルーティングと、型安全なデータ定義（TypeScript）を組み合わせることで、新しいプロジェクトをデータ追加だけで展開できる設計の有用性を再確認しました。
Live Demo / プレビュー
技術構成図（Mermaid）
現在は Mermaid 記法をテキストとして表示しています。必要に応じて Mermaid.js のレンダリング処理に差し替え可能です。
graph TD
A[Client] --> B[Next.js App Router]
B --> C[Showcase Projects]
C --> D[Project Detail Page]
D --> E[GitHub Repository]
D --> F[Live Demo iframe]