Case Study

The Gothic Cathedral

I developed an interactive kiosk application designed with native user-friendliness in mind, which provides insights into the major features and history of The National Cathedral.

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS

Overview

This began as my final-year college project in 2010 — an interactive kiosk exploring Gothic cathedral architecture. Built first in ActionScript 2.0, it earned top spot in the Student Art Show for Web Design & Interactive Media. I later ported it from Flash to React and TypeScript, rebuilding the kiosk from scratch while preserving the original drag-and-drop interactions. Custom React hooks make each architectural element (gargoyles, vaults, stained glass) independently interactive with its own detail overlay, and Next.js handles SSR.

Role
Sole developer & designer
Scope
Kiosk UX, interactions, React rebuild
Type
Interactive educational kiosk
Year
2010

Colors

Primary
Secondary
Tertiary
Accent

Interactive Kiosk

Rebuilt an ActionScript 2.0 kiosk in React/TypeScript with reusable drag-and-drop hooks, Next.js SSR, and Framer Motion gestures for exploring Gothic architectural elements.

Interactive kiosk welcome screen — Welcome to The Gothic Cathedral with intro copy and ENTER to begin
Vaulted ceilings, buttresses, and detailed stonework of the Gothic style.

Vaulted ceilings, buttresses, and detailed stonework of the Gothic style.

Distinctive gargoyles serving as both decoration and functional water spouts.

Distinctive gargoyles serving as both decoration and functional water spouts.

Drag and drop windows to display different details about each window.

Drag and drop windows to display different details about each window.

Features