For the University of Chicago Oriental Institute’s 100th anniversary, we built a Drupal 8 micro-site to celebrate the OI and invite the public in to explore its work. It won a Gold MARCOM Award.
The star of the show is an interactive map of the region, and I got to build it.
Retired around 2023. The archived site and a CodePen of the map live on.
The map starts with a topographical image of the region. On top of it sits an SVG layer where I hand-traced each country’s region as its own clickable shape. Every shape has proper ARIA labeling, so the map works for screen-reader users too, not just people with a mouse. Each one links through to a dedicated page about the discoveries made there.
Those region pages each got their own PHP/Twig templates and Sass/JavaScript front ends, so every country could have its own character instead of a one-size-fits-all layout. The rest of the site uses Drupal Paragraphs, so editors can build pages out of modular pieces.
The site was retired around 2023, but you can still explore it on the Wayback Machine, and the map lives on as a CodePen demo.
With a QA analyst, I built automated browser tests using Nightmare JS and headless Chromium that walked through the interactive sequences and checked the content was right. It was the seed of the testing approach later formalized at Sandstorm.