KLzc: A Cinematic Mechanical Memory

Inspiration

Traditional portfolios often reduce a person to a list of links. I wanted mine to feel closer to opening a machine and discovering the memories inside it: the places that shaped me, the robots I built, the competitions I entered, and the projects I am proud of.

What it does

KLzc is an interactive, bilingual portfolio experience built around a cinematic "mechanical memory archive."

A real-time WebGL home sequence introduces the story through an animated mechanical scene.
An interactive atlas connects Shanghai and Auckland to the personal journey behind the work.
A robotics timeline documents VEX experience, responsibilities, and growth.
Awards open into focused certificate views instead of static thumbnails.
Project cards lead to structured case studies with context, decisions, and outcomes.
Responsive navigation, touch controls, reduced-motion behavior, SEO metadata, and deep-link routing make the experience usable beyond the visual demo.

The result is a working public website that judges can explore immediately without an account.

How I built it

The frontend uses React 19, TypeScript, Vite, Three.js/WebGL, Framer Motion, and MapLibre GL. Content is driven from typed portfolio data so the same facts remain consistent across the home narrative, timeline, awards, and project pages. The production build is deployed on Vercel with SPA routing fallbacks.

This project existed as a personal portfolio before Build Week. During the event, I used Codex with GPT-5.6 to substantially extend and harden it: reorganizing the Three.js/GLB narrative, unifying the cinematic design system, improving mobile WebGL behavior, adding responsive navigation and deep links, strengthening SEO and deployment configuration, and repeatedly testing the real site in desktop and mobile browsers.

I set the product direction, supplied and verified the personal source material, chose the visual tradeoffs, and made the final decisions. Codex and GPT-5.6 helped inspect the existing codebase, propose implementation plans, edit React/TypeScript/CSS/Three.js code, run lint and production builds, perform visual QA, and iterate from my feedback.

Challenges

The biggest challenge was balancing atmosphere with usability. The 3D scene needed to feel cinematic without making mobile devices struggle or obscuring navigation. Another challenge was turning very different source material—maps, certificates, robot images, project case studies, and bilingual text—into one coherent system.

Accomplishments

A complete, deployed experience rather than a static mockup
A distinctive real-time 3D opening that still has lighter mobile and reduced-motion behavior
Consistent storytelling across six interconnected sections
Public source code, setup instructions, and a clear record of how Codex and GPT-5.6 accelerated the work
Desktop and mobile QA across the production site

What I learned

The most useful AI-assisted workflow was not one-shot generation. It was a tight loop: inspect the real code, define constraints, implement a small change, build, test in the browser, compare the result with the intended experience, and repeat. Codex made that loop fast enough to apply consistently across the whole site.

What's next

I want to add optional audio-reactive details, richer project media, and an editor-friendly content workflow while keeping the site fast and accessible.