All work · ordered by depth

Start with the case studies.
The archive keeps every version.

Three levels: full case studies with research and testing; client work on a real brief; and the archive — every version of every project, grouped by category, so you can see how each one got there.

01

Case studies

Problem → versions → testing → outcome

Aerial view of the solar arrays
Case Study Energy systems · Solar + storage

Solar + Storage for AI Compute (2024–26)

A 49 kWp array and 180 kWh battery bank on a rented farmhouse roof in Nanjing — powering AI pretraining and inference, with the surplus shared with the farm and the village.

49 kWp180 kWh LFPShared surplus
Read case study →
Learn Code app interface
Case Study UX/UI · Web app

Learn Code (2025)

Card-based, hierarchical learning app for beginners. Seven tested versions (v10–v17) plus an App Store page.

User interviewsResponsive10 versions
Read case study →
Snapchat data transparency prototype
Case Study UX research · Privacy

Snapchat Data Transparency (2025)

An interactive Collect → Process → Share → Control flow that makes data use legible. Seven wireframe versions.

Progressive disclosureUsability testing8 versions
Read case study →
Green Sheridan Garden Club site
Case Study UI design · Community site

Green Sheridan Garden Club (2026)

Mobile-first campus site: site map, personas, three wireframe rounds, then three built versions.

Mobile-firstIA7 versions
Read case study →
MoodPeek Pro dashboard
Case Study Full-stack · React · JWT

MoodPeek Pro (2026)

Calendar-first mood logging with Day → Week → Month continuity, multi-user accounts and iCal export.

ReactAuthLive demo
Read case study →
Comfort Lamp prototype glowing green
Case Study Physical computing · Arduino

Comfort Lamp (2025)

Sensor-driven ambient lamp in a 3D-printed scene. Temperature, humidity and light map to colour states; ProtoPie mobile UI.

DHT11NeoPixel3 modules
Read case study →
Colourful p5.js experiment
Case Study Interactive media · p5.js

Media, Motion & the Body (2025)

Copper-tape circuits, p5.js sound visualisations and a Makey Makey drum machine — three modules on physical input and digital feedback.

Makey MakeyWebGL3 modules
Read case study →
02

Client work

A real brief, three iterations

Pinzuo Design (Nanjing) Co., Ltd. · 品作设计

Corporate website — design & development (2025–26)

A faculty-led studio working across urban environment, landscape architecture, spatial design and public art. I designed and built the bilingual corporate site, refining brand expression, content hierarchy and presentation over three iterations.

Live preview — V3 (Final)
03

Archive

Every version, by category

UX & Web
Physical & Interactive
Games & Tools
  • Visual novel

    Visual Novel — WebGAL

    Interactive visual-novel prototypes built on the WebGAL engine. Iterations explore branching narrative, presentation and Chinese localisation.

    2022–26
  • Simulation

    Fast Breeder Reactor Simulator

    Manage a reactor — breeding rate, coolant, fuel input and time scale — while random events push it toward meltdown.

    2026
  • Educational

    Hand Surgery Quiz Portal

    Quiz / assessment tool with dark-light mode, custom typography and responsive layout.

    2026
  • Calculators

    Power · Rocket · Milk calculators

    Small utility sites: estimate device power consumption and cost, rocket parameters, and milk quantities.

    2025
  • Experiments

    Web experiments

    One-off pages: an interactive “Never Gonna Give You Up”, Lak-crest, and a text-based escape.

    2025–26
Typography
  • Letterforms

    P1 — Letterform Construction, Classification and Use

    Letterform construction, paragraph typesetting and type-classification logic on the web.

    2025
  • Grid systems

    P2 — Grid Layout Exercises

    Packaging text and layout hierarchy built around grid systems and bilingual content.

    2025
  • Web typography

    P3 — Typography on the Web

    Designer research and typeface analysis translated into a web experience. Six variants.

    2025
Antirender

Looking for the music?

Original tracks, discography and process live on their own page.