King Tan Case Study · 2026
01Case study · 2026

Designing my
portfolio with AI.

How I learned to build with Claude Code by giving myself the one brief I knew best — design and ship a motion-led portfolio from scratch.

King Tan — Designer × Claude Code kingtan.com.au 0 → live in 11 days
196 commitsAstroSveltia CMSGSAP · Lenis25 projectsstatic → motionlive HTML5 bannersEDMFTPS CI/CDkingtan.com.au 196 commitsAstroSveltia CMSGSAP · Lenis25 projectsstatic → motionlive HTML5 bannersEDMFTPS CI/CDkingtan.com.au 196 commitsAstroSveltia CMSGSAP · Lenis25 projectsstatic → motionlive HTML5 bannersEDMFTPS CI/CDkingtan.com.au 196 commitsAstroSveltia CMSGSAP · Lenis25 projectsstatic → motionlive HTML5 bannersEDMFTPS CI/CDkingtan.com.au
02The premise

Learn AI by
pointing it at
what I know best.

I wanted to understand AI properly — not as a buzzword, but as a tool that could earn a place in my daily work. The fastest way to learn something is to build something real with it.

So I set the brief myself: take what I do best — design — and use Claude Code to take it the whole way, from blank repo to a portfolio live on my own domain. If AI could help me ship this, I'd trust it with the rest.

Building kingtan.com.au with Claude Code02 / 12
03The self-set brief

One portfolio. Static to motion.
Built end-to-end with AI.

REQ 01

Show the full range

Static design, motion & animation, live HTML5 banners and email — the breadth of real client work in one place.

REQ 02

Feel designed, not templated

A distinct art direction with motion baked in — something that reads as a craft piece, not a theme.

REQ 03

Own it after launch

Edit every project in the browser, no code — and ship updates to a real domain on a real pipeline.

Building kingtan.com.au with Claude Code03 / 12
04How we worked

I directed.
Claude Code built.

I stayed in the seat I'm strongest in — art direction and decisions. Claude Code handled the engineering: scaffolding, components, motion wiring, and the deploy plumbing I'd never touched before.

  • 01
    Conversation → code. I described intent in plain language; it returned working components and explained the trade-offs.
  • 02
    Tight iteration loops. Preview, react, refine — design feedback turned into commits in minutes.
  • 03
    It taught as it built. Astro, GSAP, CI/CD — I came out understanding the stack, not just owning it.
Building kingtan.com.au with Claude Code04 / 12
05The stack we landed on

Fast, static, and fully self-serve.

FRAMEWORK

Astro

Static-site generation — ships as plain HTML for speed, with content modelled as JSON per project.

CONTENT

Sveltia CMS

Decap-compatible. Every project editable in the browser at /admin — no code required.

MOTION

GSAP · Lenis

ScrollTrigger + Flip for choreography, Lenis for smooth scroll. Respects reduced-motion.

DELIVERY

GitHub → FTPS

Push to main auto-deploys to staging and production with failure alerts.

Archivo + Space Mono JSON content model Lazy-loaded video tiles No build break ships unnoticed
Building kingtan.com.au with Claude Code05 / 12
06The design system

"Dark canvas,
loud work."

A near-black stage so the work carries the colour. One acid accent. A "format language" running throughout — ratio chips, crop-mark corners, a marquee strip — turning the mechanics of design into the brand itself.

9:164:51:1728×90
CANVAS

#0a0a0b

Near-black stage · off-white ink #f2f0ea

ACCENT

#e8ca2c

One acid note — used with restraint

DISPLAY

Archivo

Variable width — expanded caps for display

VOICE

Space Mono

Labels, ratios & indices

Building kingtan.com.au with Claude Code06 / 12
07Motion & interaction

The work doesn't sit still — it performs.

IN VIEW

Tiles come alive

Project tiles autoplay muted video as they enter the viewport, and lazy-load so nothing bloats the page.

SCROLL

Choreographed scroll

GSAP ScrollTrigger + Flip drive transitions; Lenis smooths the whole journey down the page.

CARE

Respectful by default

Honours prefers-reduced-motion — motion is a layer of delight, never a barrier.

Hover reveals crop-mark corners; a client-logo grid and marquee anchor the lower page. Every detail came out of a design call I made and Claude Code implemented — including the late fixes for scroll stutter and mobile marquee jank.

Building kingtan.com.au with Claude Code07 / 12
08Own it after launch

Edit everything
in the browser. No code.

The hardest part of any portfolio is keeping it current. So the build put me in control: log in at /admin with GitHub and edit any project, reorder the homepage by drag, or rewrite the hero copy — and it's live in a minute or two.

  • →
    Projects as content. Title, client, year, categories, galleries, videos and banners — all editable fields.
  • →
    Drag-to-order homepage. New work auto-slots to the top; reorder visually in Site settings.
  • →
    CMS-editable copy. Even the homepage hero and capabilities text became editable — no redeploy needed.
Building kingtan.com.au with Claude Code08 / 12
09The work on show

25 projects. Every format.

STATIC

Design

Brand & campaign stills across galleries — true to ratio, full-bleed.

MOTION

Animation

Video in any aspect — 9:16, 4:5, 1:1 — with section dividers and replay.

LIVE

HTML5 banners

Real index.html ads rendered live at true pixel size, with a Replay button.

EMAIL

EDM showcase

Email campaigns shown live and as image — the full deliverable range.

ANZAudiAECKoalaSydney MetroTALTourism TasmaniaOsko by BPayDan Murphy'sRest SuperMetcash+ more
Building kingtan.com.au with Claude Code09 / 12
10From commit to live

A real pipeline — staging, prod, alerts.

push → main
Auto-build & deployEvery push that touches the portfolio builds with Astro and FTPS-deploys to staging and production together.
staging
staging.kingtan.com.auPreview environment to sanity-check content and motion before it hits the public domain.
production
kingtan.com.auCanonical domain, guarded deploy — went live on June 18 with a corrected production path.
on failure
Self-reporting safety netA broken build (usually a CMS edit) opens a GitHub issue, writes a run summary, and pushes a Telegram alert to my phone — then auto-closes on the next green deploy.
Building kingtan.com.au with Claude Code10 / 12
11By the numbers

From blank repo to live domain.

196
Commits
11days
Jun 8 → 18, 2026
25
Projects live
2
Environments shipped
Commits / dayJun 10 → 21 · peak 40
Jun 10Jun 21

An unfamiliar stack and a domain I now deploy to on a single push — built by directing AI rather than fighting code. The number that matters isn't the commits; it's that I went from "can AI really help me?" to "I just shipped this."

Building kingtan.com.au with Claude Code11 / 12
12What I took away

AI didn't replace the designer. It removed the distance between an idea and a shipped thing.

  • 01
    Taste still leads. The art direction was mine; AI made executing it cheap enough to iterate fearlessly.
  • 02
    Learning by shipping works. I now understand Astro, motion and CI/CD because I built with them, not around them.
  • 03
    It scales beyond this. If AI can ship my portfolio, it earns a place in the rest of my daily work.
See it live · kingtan.com.au
King Tan × Claude Code · 202612 / 12
01 / 12