Hosting cost
-¥10K+/yr-¥10K+/yr
No-code subscription eliminated
Loading...
Project Context
Role
Owner, Designer & Developer
Team
Solo, with an AI-native development workflow
Duration
Migration project, then continuous evolution
Tools
Next.jsVercelPlaywright
The site you are reading is itself a production system: migrated from a no-code builder to Next.js on Vercel, cutting hosting costs while gaining full control — then hardened with 6 automated test suites, visual regression, and CI. Maintained through the same AI-native workflow I use at work.
Challenge
The original site was built on a no-code platform during my UX training — great for shipping fast then, but it locked content behind a subscription, capped performance, and made every structural change a manual chore. As my work shifted toward engineering, the site also became a credibility question: can someone claiming 'strategy to code' really not own their own stack?
Solution
A full rebuild on Next.js 15 (App Router) + TypeScript + Tailwind, deployed on Vercel: hosting costs dropped by over ¥10,000/year while gaining i18n (en/ja), dark editorial design with motion, and content as version-controlled Markdown. Quality is enforced by machines: Playwright suites for smoke, accessibility (axe), SEO, performance, and cross-browser testing, plus visual regression baselines — the same engineering discipline I apply to enterprise systems, at personal-site scale.
Challenge & Solution
Challenge
The original site was built on a no-code platform during my UX training — great for shipping fast then, but it locked content behind a subscription, capped performance, and made every structural change a manual chore. As my work shifted toward engineering, the site also became a credibility question: can someone claiming 'strategy to code' really not own their own stack?
Solution
A full rebuild on Next.js 15 (App Router) + TypeScript + Tailwind, deployed on Vercel: hosting costs dropped by over ¥10,000/year while gaining i18n (en/ja), dark editorial design with motion, and content as version-controlled Markdown. Quality is enforced by machines: Playwright suites for smoke, accessibility (axe), SEO, performance, and cross-browser testing, plus visual regression baselines — the same engineering discipline I apply to enterprise systems, at personal-site scale.
Design Philosophy
Eat your own cooking: if I advocate AI-native, test-first, evidence-driven development at work, my own site should be built the same way — and be inspectable proof of it. Dark, editorial, motion-driven design signals the shift from 'designer with a portfolio' to 'builder whose portfolio is itself a build'.
Key Features
6 automated test suites
Smoke, accessibility (axe), SEO, performance (Lighthouse), cross-browser, and visual regression — on a personal site.
Bilingual by architecture
next-intl with locale routing; every string, project, and metadata exists in English and Japanese.
Content as code
Projects and profile live in version-controlled Markdown — every wording change is a reviewable diff.
AI-native maintenance
Built and evolved with the same AI-assisted, guardrailed workflow used for enterprise work — this content overhaul included.
Technology Stack
Frontend
Next.js 15 (App Router)React 19TypeScriptTailwind CSSFramer Motion
Backend
VercelResendUpstash Redis
Tools
PlaywrightLost PixelGitHub Actions
Development Process
Rebuilt route by route with tests as the safety net: each page shipped with its Playwright coverage, and visual baselines catch unintended changes on every run. The dark editorial redesign and this Strategy-to-Code content overhaul were both executed as reviewable, test-verified changes — the site's git history is the case study.
Results & Metrics
Test suites
0
Smoke / a11y / SEO / perf / cross-browser / visual
Languages
0
Full English / Japanese parity
Ownership
0%
Code, content, and pipeline — all version-controlled