Design Engineer Portfolio: A fully hand-coded personal portfolio, built without a page builder.

A self-directed build that traded Framer’s page builder for hand-written Next.js, proving full-stack execution range beyond no-code tooling.

Chevis Zhou needed a portfolio that proved design-engineering range beyond no-code tooling. We designed and hand-coded a fluid, mathematically-tuned typographic system in Next.js and Tailwind — shipping a fully custom site with zero page-builder dependencies.

Year

2026

Services

Web design

Web development

Branding & identity

Motion Design

A design agency needing visible proof of full-stack coding range.

AethrDesign’s custom tier is built in Framer — fast, visual, and client-friendly. But it doesn’t demonstrate the team’s ability to hand-write production code: fluid type systems, custom MDX content pipelines, or a design system built from first principles rather than a page-builder’s constraints. Chevis needed a project that closed that gap — proof, not just a claim.

Work hosted on cheviszhou.com has also been featured in Case Study Club and UX Design Weekly.

Homepage

Project Detail Page

Execution overview

Hand-coding a fluid typographic system to prove full-stack range.

The build ports and extends an existing case-study-driven design language in Next.js, Tailwind v4, and MDX — not a template, not a page builder. Every type size is derived from a mathematically consistent Perfect Fourth scale, fluid across breakpoints via CSS clamp(), with layout, spacing, and color systems documented and versioned like production code. The result: a personal site that reads as a design artifact and a working demonstration of the same code discipline AethrDesign brings to client builds.

Chevis Zhou Live Project

Lab page with heavy motion design