Erie Canal Bicentennial Website

Erie Canal Bicentennial Website

Sr. UX Developer · 2025

The Erie Canal Bicentennial Website serves as the hub for the canal’s 200th-anniversary celebrations and the primary booking platform for the "Waterway of Change" event. This project involved high-level collaboration between two local entities: the Buffalo History Museum and the Erie Canal Harbor Development Corporation (ECHDC).

View Website/Demo

Capacity Management & Event Awareness

The primary goal was to provide a landing for bicentennial information and manage ticketing for the “Waterway of Change” exhibit.

Ticketing Strategy: After researching various platforms, I implemented a system that supported numerous time slots. Managing venue capacity was critical, so the main CTA clearly emphasized that while the event was free, booking a specific timeslot was required.

Cross-Entity Coordination: I worked closely with the IT teams at both ECHDC and the Buffalo History Museum to ensure the site was configured properly, email routing was accurate, and various employees had specific edit access.

Compliance: All data collection processes were documented to be ISO compliant.

Craft CMS Multi-Site & Integrations

To streamline the build, I leveraged the existing Buffalo Waterfront Craft CMS setup.

Multi-Site Architecture: Instead of a new instance, I used Craft CMS’s multi-site functionality to share data and events between the Buffalo Waterfront and Bicentennial sites.

Event Calendar: To keep the management experience familiar for the client, events were managed in the CMS and pulled via the Element API. I used FullCalendar JS within Vue to display an extensive, interactive calendar on the frontend.

Mapbox Integration: I built a custom map using the Mapbox API and Vue to display venues and essential bicentennial-specific information, such as parking and shuttle stops—details often missing from default mapping services.

Narrative Animation with GSAP

Before & After Scrub: The homepage features a unique effect where scrolling “scrubs” through a transition, revealing a modern canal photograph over a historical photograph. This represents how the canal has changed over time.

Historical Parallax: On the History page—which outlines and respects the controversial history of the canal and the Haudenosaunee land—GSAP is used to parallax historical images and “draw” a map line down the page as the user reads.

Atmospheric Motion: Across the site I implemented gentle fade-ins, typewriter effects, and marquees as a nod to the old-school festival design.

Tech Stack

  • PHP
  • Craft CMS
  • Vue
  • Scroll FX