Why draw a résumé as a metro map?

The client is the designer: Hannah Kwakye, a designer-developer in Accra with seven years of shipped work, an AI consulting certification, and two recurring writing themes. The brief, written before any sketching: build the CV that a CV can't be. It had three requirements. It must carry the real facts a recruiter needs. It must demonstrate — not claim — interaction craft, information design and accessibility rigour. And it must still produce a beautiful, boring, one-page paper CV, because the interactive version is worthless the moment someone says "just send me a PDF".

One constraint was inherited from the wider 26-site collection this belongs to: every visual must be drawn in code. No photography, no stock, no rendered images. For a résumé that constraint is clarifying — there is nothing to hide behind.

Résumés flatten. A career is concurrent — you are learning one thing while being paid for another while writing about a third — but a document forces it into a single column sorted by date. The interesting truths are relational: the accessibility obsession came from a specific job; the book chapter exists because the AI practice and the writing habit collided. A list can state those connections; it cannot make you feel them.

The second problem is positional. For a designer-developer, a CV's form is evidence. A default-template résumé from someone claiming interaction design taste undermines its own first line. The medium had to do some of the arguing.

Hand-placed geometry over auto-layout

A force-directed or programmatic layout would scale to any dataset; this map will only ever hold one career. Hand-placing twenty-four stations on an octilinear grid took an afternoon and buys the thing algorithms can't: labels that never collide, interchanges that land where the eye wants them, a composition. Trade-off accepted: editing the CV means editing coordinates.

A full-viewport app, with escape hatches

The map fills the screen like a tool, which risks trapping users who just want to read. Three escape hatches: the departure board reads as continuous prose station by station; the Classic CV overlay is the whole document as one page; and print produces paper. The fallback isn't an apology — it's the same content in its native format.

One dark surface

Everything is near-white paper except the departure board, which goes full night-navy with amber signage type. The contrast earns the metaphor (departure boards glow) and gives the layout a strong figure-ground axis: map = space, board = text. Both surfaces hold WCAG AA.

Keyboard model designed first

Tab reads chronologically; arrows follow track; ↑/↓ change lines at interchanges. Deciding this before styling forced the right DOM (focusable station groups in curated order) instead of bolting tabindex onto decoration later. The train's reduced-motion behaviour — same journey, zero glide — was specified in the same sitting.

Modesty as a spec line

Transit maps have a rhetoric of grandeur; a personal CV must not. The counterweights are deliberate: stations are described in plain sentences ("small builds for a bakery, an NGO literacy programme and a church"), no metrics are invented, and the biggest station on the map is simply now.

Framed as design goals, since a CV's "conversion rate" is mercifully unmeasurable:

• Memorability — be the candidate whose résumé you describe to a colleague. A metro map is retellable in one sentence.
• Demonstrated capability — the piece is its own portfolio entry: data-driven SVG systems, a hand-rolled camera, palette UX, print design and a keyboard model, all inspectable in ~1,500 lines of vanilla code documented in the build guide.
• A thesis in miniature — the collection argues that AI amplifies the designer who has taste; this site was engineered with Fable 5 under Hannah's direction and finished to hand-made standards. The AI Practice Line ends at the same terminus as the Career Line. That's the argument, drawn.

Next stop: the map itself — or the portfolio hub for the other twenty-five sites.