Hannah Kwakye

Accra, Ghana Portfolio — 25 sites, one thread

Hannah Kwakye

Web designer & developer. Seven years in development.
AI Certified Consultant.

I direct intelligent systems the way a couturier directs an atelier — the taste stays human.

The index

EST. seven years in GMT+0

Sec. 01 — The Work

Twenty-five sites,
one thread.

A complete collection — flagship brands, civic concepts, couture, generative art, shader poems. Every one live, every visual drawn in code. Read it as an index, or hang it as a wall.

25 projects — 04 flagship / 09 concept / 12 studio

  1. A Ghana-born AI operating system for makers — woven-loom WebGL shader hero, thread-drawn icon system, full brand identity.

    WebGL shaderbrand identitySVG icon systemflagship

    Visit the live site

  2. Cinematic headquarters of a quiet AI-adoption firm — particle intelligence field, chapter camera moves, film grain restraint.

    WebGL particlescinematic scrollbrand identityflagship

    Visit the live site

  3. A 30-day intelligent-operations framework drawn as a living technical schematic — self-assembling SVG orchestration with routed message packets.

    animated SVG systemsscroll timelineflagship

    Visit the live site

  4. An AI learning lab with a hand-rolled physics playground hero — grab-and-toss letter blocks, sticker-collage energy.

    canvas physicsplayful systemsflagship

    Visit the live site

  5. A literacy nonprofit concept where giant letterforms fill with ink as you scroll and 46 chapters pulse across a West Africa map.

    concept projectSVG mapscroll-fill type

    Visit the live site

  6. A carpool-platform concept — animated route map with merging car dots, sticky phone mock, static dashboard UI.

    concept projectanimated SVG mapproduct page

    Visit the live site

  7. A nine-branch library rebrand concept — bookspine wordmark assembly and a pull-a-spine branch shelf.

    concept projectrebrandinteractive shelf

    Visit the live site

  8. A civic services concept with AAA-grade accessibility — GOV-grade clarity, Ghanaian warmth, immaculate portal mocks.

    concept projectaccessibility AAAcivic design

    Visit the live site

  9. An early-childhood civic concept — paper-cut layers and a crayon timeline a paper doll walks from age 0 to 5.

    concept projectSVG illustrationscroll timeline

    Visit the live site

  10. An advocacy-platform concept in pure poster energy — kinetic slab type, stamped urgency, black/white/red only.

    concept projectkinetic typecampaign design

    Visit the live site

  11. An NGO network concept — member organizations as a breathing constellation with orbital working-group hubs.

    concept projectnetwork vizSVG constellation

    Visit the live site

  12. A data-dashboard concept handled with dignity — points-of-light service map, calm charts, exemplary accessibility.

    concept projectdata visualizationaccessibility

    Visit the live site

  13. A city-services concept on the Greenwich Meridian — isometric SVG harbour city, alert-banner system, service tiles.

    concept projectisometric SVGcivic tech

    Visit the live site

  14. A couture house with zero photographs — seven looks as living atelier line drawings in a horizontal editorial lookbook.

    fictional brandSVG couture sketcheseditorial type

    Visit the live site

  15. A Kumasi heritage leather studio — CSS-filter leather grain, stitch borders that sew themselves, tool-drawn process strip.

    fictional brandCSS texturemicro-interaction

    Visit the live site

  16. A modern African beauty line whose products are rendered entirely in gradients — page tint morphs per product chapter.

    fictional brandCSS product rendercolor system

    Visit the live site

  17. A luxury events house that opens like an invitation — candlelight particle canvas and drag-to-pan scene galleries.

    fictional brandparticle canvascinematic galleries

    Visit the live site

  18. An independent highlife label — every album cover is seeded generative art, and the turntable plays Web-Audio-synthesized grooves.

    fictional brandgenerative coversweb audio

    Visit the live site

  19. A top agent's personal brand — listings as architectural floor-plan plates with an interactive room explorer.

    fictional personafloor-plan explorertrust design

    Visit the live site

  20. A chef's portfolio served as a seven-course tasting menu — plates assemble themselves as each course scrolls in.

    fictional personascrollytellingSVG plating

    Visit the live site

  21. A generative art gallery where every visit hangs a different show — seeded adinkra-inspired algorithms, downloadable editions.

    generative artcanvasinteractive gallery

    Visit the live site

  22. Hannah's résumé as a pan-and-zoom transit map — ride a line stop by stop, or ⌘K to route anywhere; prints as a classic CV.

    interactive SVGcommand paletteprint stylesheet

    Visit the live site

  23. A scrollytelling data essay on West Africa's rains — a pinned year-wheel and monsoon-front map that morph scene by scene.

    scrollytellingdata visualizationSVG charts

    Visit the live site

  24. A real-time 3D stool configurator — parametric Three.js geometry, code-drawn adinkra carving textures, downloadable spec card.

    Three.js3D configuratorprocedural texture

    Visit the live site

  25. An interactive shader poem — fragment-shader dust advected by scroll and cursor, variable type gusting in the wind.

    fragment shaderskinetic variable typeexperimental

    Visit the live site

Sec. 02 — Thinking & Writing

The work has a spine.

Two themes run through everything I make and write. They are the reason this collection looks the way it does.

Theme I

Design Thinking
in the Age of AI

Models generate options at a speed no studio can match. What they cannot do is want something for a person they've never met. Design thinking — empathise, define, decide — matters more now, not less: it's the part of the process that tells the machine which of its hundred answers was the question.

“AI is the fastest junior I have ever worked with. It still can’t tell you which of its hundred options is the one — that judgement is the job.”

“Taste is a discipline, not a gift. You practise it the way musicians practise scales — by choosing, every day, in public.”

Theme II

Keeping the
Human In

Every brief hides a person — someone whose Saturday, salary, or dignity depends on the thing we ship. Automation should widen their options, never quietly remove them. I build systems with a human hand on every decision that touches a human life, and I write about why that boundary is a design deliverable.

“A client never asks for a website. They ask to be understood at scale. The site is just where the understanding lives.”

Both themes, mapped on the interactive CV

Sec. 03 — Services

What I build
for clients.

Four ways of working, one standard: sites people screenshot, systems people trust.

  1. S.01

    Brand sites

    Identity-first marketing sites where the brand system — wordmark, palette, motion language — is designed and shipped together. Like Makers Intelligence or DUAFE Atelier.

  2. S.02

    Product sites

    Pages that explain a product well enough to sell it — schematic clarity, honest copy, interfaces drawn to the pixel. Like AI Operations Launch or Accra Commute.

  3. S.03

    AI-powered creative systems

    Generative identities, seeded artwork engines, model-assisted production pipelines — AI wired into the creative work itself, under direction. Like Sankofa Systems or High Life Records.

  4. S.04

    Consulting

    AI adoption for teams that make things: where models genuinely help, where they quietly hurt, and how to keep a human hand on the wheel. Certified, practical, vendor-neutral.

Sec. 04 — The Build

Directed by Hannah.
Engineered with Fable 5.

This is not a portfolio that hides how it was made — the making is the portfolio. All twenty-six sites in this collection, this one included, were art-directed and edited by me and engineered in collaboration with Fable 5, Anthropic’s frontier model, working as a designer-engineer under direction.

One deliberate constraint shaped everything: no photographs, no stock, no AI-generated rasters. Every visual on every page — couture sketches, shader weather, generative album covers, 3D furniture, the mini-posters in the wall above — is drawn in code and shipped as hand-authored HTML, CSS, and JavaScript. Each site documents itself: a /guide that teaches its techniques, and a /process that shows its design thinking.

“AI doesn’t replace taste — it amplifies the designer who has it.”

Sites shipped
26
Photographs used
0
Visuals drawn in code
100%
Routes per site
3

How this site was built The design-thinking case study

Sec. 05 — Contact

Bring me the brief
you care about.

Brand site, product launch, a creative system that needs both taste and machinery — write to me directly, or use the form. I reply within two working days.

kwakyehannah@gmail.com

Accra, Ghana — GMT+0 · working worldwide