Design system
Patterns

10 — Patterns

Patterns

Whole compositions, not parts. These are the page shapes running on cv.tanghoong.com — copy the composition, then swap the copy.

Hero

Eyebrow, name, role, lead, actions, then a quiet qualifying line. The hero says who, what and what next in about six seconds — everything after it is elaboration.

Hero

Selangor, Malaysia · Available Q2

Charlie Tang Hoong

Forward Deployed AI & Automation Engineer

Fifteen years turning ambiguous business problems into production systems.

View selected work Contact me

Not an AI researcher. I ship the integration layer between a model and the business process that has to survive it.

The sharpening line matters: saying what you are not filters harder than another sentence saying what you are.

Proof band

Numbers immediately under the hero. Each figure carries a note giving it a denominator — a number without one is decoration.

Proof

12.4k

Peak req/s

Sustained, single region

38 ms

p95 latency

Down from 240 ms

40+

Pipelines

Running in production

AI engagements

Discovery to handover

Work index

Cards for up to six items, rows beyond that. Each card leads with the outcome, not the client name — the reader is scanning for a problem that looks like theirs.

Work section

Selected work

Five projects, each with the constraint that made it hard.

All work

Six-hour batch to sub-second Route allocation had started overlapping the dispatch window. Replaced with an event-driven allocator. Delivered and merged · 2025 LogisticsGo 40k invoices, one review queue Retrieval over scanned documents with a confidence floor routing the uncertain cases to a human. In production · 2024 Applied AIPython 240 ms to 38 ms at the edge Moved bid scoring to the edge with a pre-warmed model cache and a hard timeout budget. Delivered · 2024 AdTechWorkers

Case study

The full shape: status badges, a facts block, the problem, the constraint, what shipped, and an honest note on scope. The role note is what stops a case study reading as a claim to have done everything.

Case study head and body

Case study — Logistics

A nightly batch that could not finish before morning

Delivered and merged
Sole implementer
11 weeks

Sector: Third-party logistics, 400 vehicles
Constraint: No downtime; the old batch had to keep running until cutover
Stack: Go, Postgres, NATS, Cloudflare Workers
Outcome: Six-hour batch replaced by continuous sub-second assignment

The problem

Route allocation ran overnight and took six hours. As volume grew it started overlapping the dispatch window, which meant drivers were being handed routes that were already stale.

What shipped

An event-driven allocator that assigns on order receipt rather than on a schedule, running alongside the batch for three weeks before cutover.

We stopped planning the day around the batch. That changed more than the latency number did.

Head of Operations

Scope note: I built the allocator and the cutover tooling. The dispatch UI and the driver app were the client's team.

The scope note is not modesty — it is the detail that makes the rest of the page credible to another engineer reading it.

Methodology list

How-I-work sections read better as numbered steps than as cards. The sequence is the content.

Method

How I work

The same seven steps on every engagement, adjusted for how much is already known.

Understand the business process, not the ticket
The ticket describes a symptom. The process explains why the symptom is expensive.
Write the architecture down
One page. If it cannot be explained on one page it is not understood yet.
Ship a thin slice into production
One real record, end to end, week one or two.
Instrument before widening
You cannot debug the tenth path if you could not see the first.
Widen against real load
Synthetic load finds the bugs you predicted. Real load finds the others.
Harden the failure paths
Retries, dead letters, and an alert that names a person.
Hand over continuously
Documentation written at the end is documentation nobody trusts.

Closing band

The last section on every page. Centred, on a sunken rounded band, with one primary action and one quiet alternative for people who are not ready to email.

CTA band

Let's talk

If you have an ambiguous problem and a real deadline, that is the interesting case. Fifteen minutes is usually enough to tell whether I am the right person.

charlie@tanghoong.com Read a case study first

FAQ

FAQ — exclusive accordion

What does an engagement cost?

Discovery is fixed-price. The build phase is scoped against what discovery found, so the number is real rather than a guess made before anyone looked.

Do you take over an existing codebase?

Often. The first week is reading and instrumenting, not rewriting — most of what looks broken is load-bearing.

What if the thing turns out not to need AI?

Then it does not, and I will say so in the discovery write-up. A lookup table that works beats a model that mostly works.

The shared name="pfaq" makes the group exclusive — opening one closes the rest, with no JavaScript at all.

Page shape

The default order for a marketing or portfolio page. Alternate the banding and the eye finds the joins on its own.

#	Section	Surface	Container
1	Hero	`.s-page`	wide
2	Proof band	`.s-sunken`	wide
3	Selected work	`.s-page`	wide
4	How I work	`.s-sunken`	default
5	Capabilities	`.s-page`	default
6	FAQ	`.s-sunken`	prose
7	Closing band	`.s-page`	default

Do Lead each work item with the outcome. "Six-hour batch to sub-second" tells a reader more in five words than the client's name does in one.

Don't Put two filled buttons in the same band. If both are primary, neither is, and the reader picks whichever is closer to their thumb.