07 / Experience design · Creative development / 2026
A workshop you can walk through.
This site: a small 3D workshop you explore by scrolling, with a full written case study behind every project. I directed and reviewed it; AI coding assistants wrote most of the code. Live since September 2026.
I wanted the portfolio to feel like a place rather than a list, because a list of projects cannot show how carefully something was made. So the site is a small workshop: scroll, and the camera moves from one project to the next; click an object, and it flies straight there. Every project then opens into a written case study like this one. Designing that experience, and getting it built and online, became a project of its own. It has been public at alakrami.io since 23 September 2026.
WORK
Art direction · interaction design · frontend architecture
The earlier Macro to Machine motion study from early September 2026. Design direction at the time, not the current page opening and not a deployed website.
01 / A workshop to walk through
Built, building, and what comes next.
The lab is a warm workshop inside a cooler, darker room, with a cartoon version of me in the middle who follows the cursor. Three objects carry the work: the knife sharpener for the mechatronics I have built, the rover for embedded AI and robotics, and the computer at the back for software and simulation. A blueprint of the room is the loading screen, and it turns into the lab when everything is ready.
The order tells a short story: what I have built, what I am building, and the future I want to help build. The last stop looks through the avatar’s eyes at that future: green energy, automated food production, robots taking over the repetitive work, and people with more time for family and creative work. The film above is an early motion study from September; it set the qualities I wanted, warm light, quiet type and calm pacing, though the opening that plays today is different.
What is still changing+
The phone layout, the lab’s lighting and the project footage are still being refined. Each change is reviewed in a private preview before I decide whether it goes live.
Source: the early motion study; the lab’s scene and route definitions.
02 / Two entrances, one destination
Two ways in, one place to land.
Scrolling to a project and clicking on it must not produce two different versions of the same moment. So the site treats travelling and arriving as separate states: whichever way a visitor comes, the camera settles in the same place, with the same text and the same link to the case study.
The small diagram below shows that idea: a click route and a scroll route meeting at one settled view.
HubClick flightProject settled
Direct selection travels to the chosen project’s canonical state.
A schematic of the navigation states, not the live scene.
Evidence in the implementation+
The states live in one state machine (machine.ts): hub, click flight, scroll travel and settled, plus a failure state that hands the visitor to the plain project pages if the 3D scene cannot run.
Source: site/lib/experience/machine.ts; recorded discovery decisions.
03 / Design for a closer look
Earn the atmosphere with substance.
The lab gives a project its character; the article has to carry the substance: the problem, the decisions, what was done and what came of it. I asked each film, render and plot to carry one specific part of that explanation.
The pages share one visual language with different layouts. A mechanical assembly needs room; a price comparison needs the same product on both sides; technical detail sits close to the evidence and opens on demand, so the surface stays light.
ORIENT
What the project is and why it matters
SHOW
A mechanism, a result or a real interaction
EXPLAIN
Decisions and contribution
OPEN UP
Technical detail and source notes
A maintainable content structure+
Every image and film is listed in a media register with its origin and any treatment, so a decorative image cannot quietly become project evidence. The seven case studies are integrated as independent, shareable HTML pages. Their content remains available without WebGL or client-side JavaScript.
Source: Project-page editorial records, media registry and generated review pages.
04 / How it was made
Directed by me, built with AI.
I set the direction and made the decisions: the room, the avatar, the order of the story, how the camera moves, what each page says. Most of the code was then written by AI coding assistants, Codex in ChatGPT Desktop and Claude Code, each working on its own branch from my decisions and my reviews. Between 26 August and 30 September that came to 435 commits on the main branch.
Nothing reaches the public site without passing the same checks: every change runs more than 900 automated tests and a full build, and a private preview has to look right to me. Only I can publish, and the previous version is kept so it can be restored. I am still learning how to work this way. So far, the useful skill has been deciding exactly what to ask for, and checking what comes back.
Guided scroll · scroll or press Escape to take over
