Lizzie Artist Website & Aletheia Archive

This began as the website for Lizzie's performance Aletheia — audience booking before the show, an archive afterwards. It later grew into Lizzie's artist website, which keeps the Aletheia archive as its own section. The two are related outcomes of one project, each described once here; the later site carries the earlier work forward rather than replacing it.

2026

A web project for the artist Lizzie with two outcomes: a booking site and post-show archive for the performance Aletheia, and a later artist website entered through an interactive 3D theatre, launched in October 2026.

Back to case studies Visit Lizzie's site

Overview

The first outcome served a real performance: work information, times and venue, directions, and a booking flow with a waitlist. The booking system opened to the public and received real audience bookings. After the show, the booking backend was removed and the site became an archive of the full recording, credits and rehearsal material. The second outcome, launched on 9 October 2026, is a website about the artist as a whole — practice, works, research, CV and contact — entered through an interactive 3D theatre, with dedicated pages for three works.

Problem

The same project had to change shape over time: a service with limited seats before the performance, a lasting record after it, and finally a site for the artist's practice as a whole. Each stage needed a clear scope without losing the earlier work, and the artistic presentation could not come at the cost of reading, playback or accessibility.

Role

I owned the Aletheia booking site and archive end to end, from design and build to deployment, and led product direction, experience design and technical delivery for the artist website. Across both stages, requirements, architecture, trade-offs, acceptance criteria, integration, review and release were my responsibility. Lizzie's artistic work, performances, thesis and career remain Lizzie's own; my contribution is the website, its content structure and its delivery.

Context and constraints

Seats were limited and two-person bookings were allowed, so seat counts and booking writes had to stay consistent.

After the performance the site no longer needed a booking backend, but the recordings and old links had to stay available.

Source material was spread across photo libraries, external drives, recordings and documents, and production video could not depend on local media paths.

Real photography, video frames and AI-generated promotional images had to be kept distinct, as did artistic credit and website credit.

Each work needed its own expression while the site stayed coherent and readable on narrow screens, on touch devices, with reduced motion and without JavaScript.

What I built

A booking and waitlist flow for the performance: one- or two-person bookings, companion-detail validation, duplicate checks, booking references and confirmed or waitlisted feedback, with a protected admin view of both lists, remaining capacity and CSV export.

A post-show archive: bookings closed, the admin and database removed, and the full recording, work description, credits and seven rehearsal videos across three phases kept as a lasting record.

An artist-level structure covering practice, works, research, CV and contact, with a complete works catalogue alongside dedicated pages for three selected works.

A 3D theatre entrance with stage materials, lighting, curtains and camera movement — a short default opening and an optional full version, with skip, replay, state preservation and reduced-motion behaviour.

A distinct interaction for each work: continuous reading across body, material, video and research for Aletheia; pullable fabric bands with recoil and text response for THE FIFTH INSTAR; a six-frame space with perspective, light and chapters for 《走在希望的田野上》.

Technical approach

Next.js, TypeScript and Tailwind CSS throughout; Prisma and PostgreSQL for the booking stage, with database transactions and locks around seat counts and writes. The booking stack was removed once the archive no longer needed it.

Three.js / React Three Fiber for the theatre entrance and the work scenes.

Web video, muted previews, covers, lightweight images and audio prepared from the source material, with originals and processing records kept; production video delivered through Cloudflare Stream.

A shared player handling readiness, slow loading, error retries, offscreen and background pauses, and mutual exclusion between background music and performance video; fixed a media-domain permission issue and asynchronous playback-state problems.

Keyboard controls, narrow-screen and touch layouts, reduced motion and a no-JavaScript reading path; fixed obscured text, cross-page scroll position and menu/player conflicts found while browsing.

Moved development from WSL to Mac with Git history intact, updated dependencies, scoped the release files, redirected old paths, added page metadata and a sitemap, and deployed on Render.

Outcomes

The booking system opened to the public and received real audience bookings.

After the performance the project became a standing archive, which the artist website still carries along with its old links.

The artist website launched on its production domain on 9 October 2026.

It is not a ticketing or payment system, and booking or attendance numbers are not reported here. The current archive no longer runs the booking database.

Reflection

Keeping the stages separate is what held the project together. The booking service, the archive and the artist website each had a clear scope, so the later site could carry the earlier work forward instead of overwriting it. The 3D entrance still had to give way to reading, playback and accessibility.