[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.

5. Latest Updates (July 2026)

Google Cloud 3-Asset Automated Generation System

Implemented a system leveraging Google Cloud free tiers to automatically generate three types of assets: High-quality AI audiobooks via Text-to-Speech (Neural2), complete English translations via Translation API, and SEO metadata via Vision API image analysis. This dramatically increases the value of case study pages at zero cost.

Instant Indexing & Advanced SEO (Silo Architecture)

Integrated Google Indexing API to push new pages instantly, eliminating crawl delays. Also implemented a Silo Architecture by auto-linking technical terms to dedicated glossary pages, boosting topical authority and E-E-A-T scores.

Geek-focused UI/UX & Easter Eggs

Added features targeting high-literacy tech clients, such as a "Dev Mode" toggle that visualizes the Server Component architecture, and hidden ASCII art/messages exclusively visible in the browser console.

Strict UI Formatting (Zero-Asterisk Rule)

Implemented a hardcoded rule to strictly prohibit the use of markdown asterisks (* or **) in text outputs to prevent ugly UI exposures during rendering. Emphasis and bullet points are handled purely with brackets and dot symbols.