[Case Study] Behind the Scenes of this Portfolio LP

1. Project Overview

This portfolio site itself is a prime example of my engineering capabilities. Instead of just a static profile, I built it as a high-performance, dynamic application using the latest edge technologies.

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. Architectural Highlights

Zero-friction Contact Form

To eliminate the need for clients to manage a backend server, I implemented a "Zero-friction" contact form. It uses a Next.js API Route to securely send emails directly to my inbox via Nodemailer, using a Gmail App Password securely stored in Vercel Environment Variables.

App-level i18n (Internationalization)

The site supports both Japanese and English. Using Next.js dynamic routing (`[lang]`), the language context is passed seamlessly across Server Components, allowing for instant localization without client-side rendering overhead.

Perfect Lighthouse Scores

By leveraging React Server Components (RSC) and avoiding unnecessary client-side JavaScript, this site achieves a perfect 100/100/100/100 Lighthouse score for Performance, Accessibility, Best Practices, and SEO.

4. Development Process with AI

This entire project was planned and executed rapidly in collaboration with Google Antigravity (an autonomous AI agent). By defining strict rules and sharing business context with the AI, we achieved a development speed that surpasses a team of dozens of traditional engineers.