Behind the scenes · This website · Design engineering

I designed it and made the calls. Claude Code wrote the code.

This portfolio is hand-built HTML, CSS and JavaScript, with no website builder and no framework. I directed every change by leaving comments on the live page. Claude Code turned each comment into code and checked it in a browser, and I reviewed the result before the next comment.

1I comment on the live page
2Claude Code changes the code
3It checks desktop and phone
4I review, then comment again

TL;DR

Stack
Plain HTML, CSS and JavaScript. Matter.js, three.js and Lottie for the playful parts. Hosted on Cloudflare.
My part
The concept, the desk, every visual and content decision, the honesty rules, and reviewing every change.
Claude Code’s part
Writing and refactoring the code, encoding the videos, running accessibility checks and fixing what they found.
Evidence
Measuredaxe checks on every page, at desktop and phone width.
15pages, all hand-built, no website builderMeasured
0axe accessibility violations at rest, desktop and phoneMeasured
0AI calls at runtime: Chutku answers from a written memoryConcept
0frameworks or build stepsConcept

01 · The stack

Small tools, each with one job.

ToolWhat it does here
HTML, CSS, JavaScriptEvery page, written by hand. No framework, no build step, so any page can be opened and read directly.
Matter.jsReal physics for the category capsules that fall and stack on the homepage.
three.jsThe swaying grass in the garden, and the memory ball in Tend.
LottiePicnic’s own animated character on the Picnic cover.
ffmpegEvery cover video, encoded twice (H.264 and VP9) so it plays in every browser.
CloudflareHosting and the hamdadesign.cc domain.

02 · What I decided

The calls that shape how it feels.

  1. 1
    A desk you can play with.My workspace as the metaphor: drag the objects, flip the ID card, open the sketchbook. It shows interaction design instead of describing it.
  2. 2
    One accent, used with discipline.Yellow #FFD60A, one type family, the same sizes and spacing on every page.
  3. 3
    No invented numbers.Every number carries an evidence label: Measured, Modelled, Observed or Concept. If I don’t have the data, the page says so.
  4. 4
    A cat that never makes things up.Chutku answers only from facts on this site, with no AI behind her. When she doesn’t know, she sends you to me.
  5. 5
    Work first, play second.Pinned work sits right under the headline so a recruiter reaches a case study in one scroll. The desk comes after.
  6. 6
    Calm by default.Sound is off until you turn it on, and the whole site respects your reduced motion setting.

03 · What Claude Code did

Fast hands, checked every time.

Built

  • Turned my comments into code changes across the site.
  • Converted my case study write-ups into pages that share one layout.
  • Encoded and compressed the cover videos.
  • Wrote Chutku’s memory from my case studies, and the matcher that picks her answer.
  • Prepared the launch files: sitemap, robots.txt, the 404 page, the favicon and link previews.

Checked

  • Opened every change in a browser at desktop and phone width before handing it back.
  • Ran axe on every page and fixed contrast, landmarks, headings and keyboard access.
  • Flagged gaps instead of filling them, such as missing participant counts.

04 · Accessibility

Playful, and still usable by everyone.

CheckResult
axe (WCAG 2.1 AA and best practices), every page0 violations at desktop and at 390 px phone width
KeyboardSkip link, visible focus ring, desk objects open with Enter and move with arrow keys, the garden plants with Enter
Reduced motionAnimations settle in their final state and cover videos pause
TouchDesk objects and capsules are tap only on phones, so they never block scrolling
SoundOff by default
Not done yetA screen reader walkthrough with VoiceOver and NVDA. Spot a barrier? Tell me.

05 · Shipping it

From a comment to hamdadesign.cc.

Changes are reviewed on a private preview first. When a batch is ready, the whole folder is uploaded to Cloudflare as a new version, and the domain, sitemap and link previews stay the same.