ch3n.dev personal site
A personal brand site designed and built from 0, with a W-shaped narrative and a focus on rhythm.
The thesis
A personal site is a vessel, not a brochure. It should let a stranger see how you think, in 60 seconds.
I have been writing scattered pieces on blogs, WeChat, and Xiaohongshu for years, but I never strung them into a line. This site has one job: let any HR / interviewer / partner see, in 60 seconds, what kind of W-shaped mind I am.
I am treating it as a long-term, extensible vessel — a place for my work, my thinking, my translations, and the evidence behind every claim I make. The site grows with the work, not the other way around.
The architecture
Each W-shaped dimension gets its own room. Each page has an explicit handoff to the next.
Home
One-line positioning, the W-shape visual, the data wall, capability overview, featured work, latest writing, and a single contact CTA. 60 seconds, top to bottom.
About
A long-form bio, then the timeline — each job, each era, each fold of the W. Handoff to capabilities and to the work.
Capabilities
Product, Design, Sales, Language, Marketing — five anchor sections, each one walked in turn. Handoff to the work that proves each one.
Work
Six projects. Two flagship ecosystems with full 6-chapter case studies. The other four upgraded to case studies here. Filter by category. Click into a case study, see the modules, see the metrics.
Writing
Blog posts — multi-paragraph, with side TOC and reading progress. Where a thought that has survived multiple sittings ends up.
Now
A stream of short notes — the seeds, the half-formed ideas, the field observations. Lower the bar for showing what I am currently chewing on.
The motion
Refinement comes from rhythm, not decoration.
Lenis for smooth scroll, GSAP + ScrollTrigger for scroll-in reveals, magnetic buttons for the primary CTAs, and a five-bar W-shape that subtly skews on cursor move. No parallax overload. No flashing. Just rhythm.
The design system lives in CSS variables. If the visual direction needs to shift, I change tokens, not components.
“Whitespace first. Every screen has to answer: can a first-time visitor understand the value in 5 seconds and find the entry point in 10?
The outcome
A vessel that grows with the work.
The site is currently shipped as a statically generated Nuxt 4 build, deployed to Cloudflare Pages. It is backend-ready — flipping a single flag in `useApi` switches all pages from mock data to a real API without touching the business code.
What is on the site right now is the v1. Each new piece of work, each new thought, each new system I run, drops in as a new section, a new post, a new now-entry. The vessel is the point. The work is what fills it.