yuzhe.dev: a $0 bilingual portfolio, built fast with AI and kept honest with specs and tests

Overview

• Challenge: a decade of backend work is invisible to an overseas founder skimming a profile for thirty seconds.
• Solution: a bilingual site with services, case studies, a searchable blog and a project-brief builder — on zero paid infrastructure.
• Results: live since May 2026; Lighthouse 100 / 100 / 100 / 100 on desktop and 96 / 100 / 100 / 100 on mobile; content rules enforced by automated tests.

The challenge

The site has four jobs at once: proof for freelance clients, a public log of building a one-person business, search traffic, and an entry point to future products. Two constraints shaped everything — near-zero cost until it earns money, and a strict truth standard: no invented clients, numbers or links, and nothing labelled Live unless it verifiably is.

What I built

• One clear path: Home → Selected Work → case study → Project Brief → WeChat / X / email. Every page has one primary call to action.
• Case studies like this one, each with screenshots, wireframes, architecture and test evidence.
• A Project Brief builder that turns a vague idea into a structured inquiry in the browser and never shows a fake "submitted" message.
• A searchable MDX blog in English and Chinese.

Case study page: wireframe

Technical highlights

yuzhe.dev architecture

• Static-first Next.js on Vercel: content is MDX in Git, compiled at build time; no database, no form backend, nothing to pay for.
• Bilingual by structure: one JSON dictionary and one content folder per language, so adding a language is a locale, a dictionary and a folder.
• Client-side search with Fuse.js, including Chinese-numeral normalization.
• SEO foundation: canonical URLs, hreflang pairs, sitemap, generated Open Graph images and honest structured data.

Built fast, then brought under control

V1 went from create-next-app to a live bilingual site in three days (May 27–29, 2026) with Codex as the coding agent. The follow-up audit found what AI-generated code often hides: placeholder contacts and dead links, garbled characters, a mobile layout that overflowed at 360 px, a missing Open Graph image, inaccessible interactions, and style changes that broke other components.

The fix wasn't patching. I wrote down the rules the AI must follow — a product brief with a content lock, a design brief, a spec per module — and added tests that enforce them: placeholders fail the build, status labels must be truthful, contact links must be real, every page needs one H1. When an AI edit drifts now, a test fails before a visitor notices. That is how I use AI on client work too.

Quality & testing

How I delivered it