【ケーススタディ】当ポートフォリオLPの裏側

1. プロジェクト概要

このポートフォリオサイト自体が、私のエンジニアリング能力を示す最良のサンプルです。単なる静的なプロフィールページではなく、最新のエッジテクノロジーを活用した高性能でダイナミックなアプリケーションとして構築しました。

2. 技術スタック（Technology Stack）

• Framework: Next.js 14 (App Router)
• Deployment & Edge: Vercel Edge Network
• Styling: Vanilla CSS (Glassmorphism design) + React Inline Styles
• Backend API: Vercel Serverless Functions (Nodemailer)
• AI Integration: Built through pair-programming with Google Antigravity (Gemini API)

3. アーキテクチャのハイライト

摩擦ゼロのコンタクトフォーム（サーバーレス）

クライアントにバックエンドサーバーの構築や管理をさせない「摩擦ゼロ」を実現するため、Next.jsのAPI Routes（サーバーレス関数）とNodemailerを採用。Vercelの環境変数にセキュアに保存したGmailアプリパスワードを利用し、完全無料で安全にお問い合わせを処理しています。

App-levelの多言語対応（i18n）

Next.jsのダイナミックルーティング（`[lang]`）を活用し、日本語と英語の多言語対応を実装。言語コンテキストをサーバーコンポーネント間でシームレスに受け渡すことで、クライアントサイドのレンダリング負荷をかけずに瞬時に言語を切り替えることが可能です。

Lighthouse オール100点のパフォーマンス

React Server Components (RSC) を活用し、不要なクライアントサイドJavaScriptを排除することで、Google Lighthouseのパフォーマンス・アクセシビリティ・ベストプラクティス・SEOの全項目において「100点満点」を達成しています。

4. AIとのペアプログラミング

このプロジェクトは、自律型AIエージェント（Google Antigravity）とのペアプログラミングによって超高速で計画・実装されました。AIにビジネスコンテキストや厳格なルールをインプットすることで、従来の大規模なエンジニアチームを凌駕する圧倒的な開発スピードを実現しています。