logo

HONTRAN.DEV

← All articles

[ Blog ]

July 10, 2026

6 min read

Category: Case Studies

Developer for Designers: The Hoàng Moe Build

A developer for designers breaks down the Hoàng Moe build — how a designer's personal site got its reading UX, theme system and motion, engineered at full fidelity.

Case StudyFront-End DevelopmentPortfolioDesignerGEEK UpVietnam
Developer for Designers: The Hoàng Moe Build

The hardest client to build for is a designer, because they notice everything. Spacing that's two pixels off, an ease that settles wrong, a theme toggle that flashes — a designer sees all of it instantly, on their own site, where the standard is absolute. That's the pressure I work under as a developer for designers, and Hoàng Moe — the personal site of Vietnamese designer and writer Hoàng Nguyễn — is a good example of it. Hoàng owned the design and the writing; I built the front-end. This post is the developer's-side breakdown of building a designer's personal site at the fidelity they expect.

Who he is — and why the bar is high

Hoàng Nguyễn is a Ho Chi Minh City designer, Co-Founder and Design Coach at GEEK Up, and a prolific writer whose work has drawn strong traction on Behance (hundreds of thousands of project views) and a following as a design educator. His site isn't a flashy showreel — it's a reading space: essays on designing, working and living, organised for people who actually sit and read. That makes the brief subtler and, honestly, harder than a typical portfolio.

I'll be precise about the framing, because accuracy matters: Hoàng is a respected designer and design coach with real community reach — not, to be clear, an Awwwards or FWA award winner, and I won't dress him up as one. My job was to take his design and make it real in the browser, faithfully. When I build for designers, the credit stays honest: the designer designs; I engineer. The same split held on the Minh Pham portfolio, where a Design Lead at Fantasy owned the vision and I owned the build.

The brief: a reading experience, not a showreel

A designer-writer's site has a different center of gravity than a visual portfolio. The content is long-form; the value is in comfortable, considered reading. Three constraints shaped the build:

  • Reading comfort is the product. Theme (light/dark) and adjustable font size aren't decoration here — they're the core UX. People read Hoàng's essays for a long time, and the controls have to feel native and instant.
  • Fidelity is non-negotiable. Type scale, line length, rhythm, the exact easing — every value had to match Hoàng's design. On a designer's own site, "close enough" reads as a downgrade.
  • Motion supports reading, never fights it. Transitions and reveals should make the space feel crafted without ever getting between the reader and the words.

The craft: theme system, type, and restrained motion

A theme toggle with zero flash

The single most common bug on a themed site is the flash of the wrong theme on first paint — a white flash before dark mode kicks in. On a designer's site that flash is unacceptable. The fix is to resolve the theme before the browser paints, from a tiny inline script that reads the stored preference and sets an attribute on <html> synchronously:

// Runs before paint — no flash of the wrong theme
const stored = localStorage.getItem('theme')
const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
document.documentElement.dataset.theme = stored ?? system

Everything visual then keys off [data-theme] in CSS custom properties, so switching themes is a single attribute change the whole page reacts to — no re-render, no flash:

:root[data-theme='light'] { --bg: #faf9f6; --fg: #14110f; }
:root[data-theme='dark']  { --bg: #14110f; --fg: #f2efe9; }

body { background: var(--bg); color: var(--fg); transition: background 0.4s ease; }

Reading type that holds at every size

Because the reader can change font size, the type system can't be a fixed pixel scale — it has to scale relationally so line length, rhythm and hierarchy survive at every setting. Fluid tokens derived from a base the user controls keep the whole reading column coherent:

:root {
  --reading: 1.125rem;                 /* user-adjustable base */
  --step-1: calc(var(--reading) * 1.25);
  --step-2: calc(var(--reading) * 1.6);
  --measure: 66ch;                     /* line length stays readable */
}

article { font-size: var(--reading); max-width: var(--measure); }

Matching a designer's spacing and rhythm exactly is the unglamorous half of this work — the deeper discipline is in my guide on building an award-winning portfolio site.

Motion that serves the words

The motion here is deliberately restrained. Section reveals use one shared ease and a short duration so the page feels alive but never makes you wait to read:

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

gsap.utils.toArray<HTMLElement>('[data-reveal]').forEach((el) => {
  gsap.from(el, {
    y: 24,
    opacity: 0,
    ease: 'power3.out',
    duration: 0.7,
    scrollTrigger: { trigger: el, start: 'top 88%', once: true },
  })
})

And it fully steps aside for anyone who's asked it to — prefers-reduced-motion disables the choreography so the reading experience is never held hostage to an animation.

What building for a designer actually demands

The lesson generalises past one site: when the client is a designer, the developer's job is fidelity plus restraint — render the vision exactly, add only the motion that serves it, and get out of the way of the content. It's a different discipline than a maximalist WebGL build, and just as demanding. A designer trusting you with their own site is the highest-signal referral there is, because they can see every seam.

If you're a designer who needs a developer to realise your personal site or portfolio at full fidelity, that's exactly what I do. See how I position that partnership among the designers and studios I build for.

FAQ

Who is Hoàng Nguyễn (Hoàng Moe)?

A Ho Chi Minh City designer and writer, Co-Founder and Design Coach at GEEK Up, with strong reach on Behance and a following as a design educator. hoang.moe is his personal design-and-writing site.

What was Hon Tran's role on hoang.moe?

Front-end development. Hoàng owned the design and the writing; I built the site — the theme system, the reading type, and the restrained motion — faithful to his design.

Is Hoàng Moe an award-winning site?

No, and I won't claim otherwise. Hoàng is a respected designer and design coach with real community reach; the site is a personal reading space, not an awards submission.

How do you avoid the flash of the wrong theme?

Resolve the stored/system theme before first paint with a tiny synchronous inline script that sets a data-theme attribute on <html>, then drive all colors from CSS custom properties keyed off it.

Let's build your site

If you're a designer who needs a developer to build your personal site or portfolio at the fidelity your work deserves — that's exactly what I do.

Written by Hon Tran — creative developer, founder of hontran.dev, and Awwwards jury member. 11+ years building award-winning, performance-first web experiences (GSAP, WebGL, Next.js) for clients worldwide. Twice nominated for Awwwards "Independent of the Year" and the first Vietnamese developer to win an international web award. hontran.dev · Behance.

Related posts