Homepage Intro Sequence

The homepage creates an immersive arrival moment through a full-screen hero slideshow that introduces the Museum as a cultural and academic hub—welcoming, active, and open to all. Built as a Single Directory Component (SDC) for Drupal, this modular component combines sophisticated animations, intuitive multi-modal navigation, and comprehensive accessibility features to establish an engaging and inclusive first impression.

Key Features & Technology

Supports multiple input methods: mouse wheel, keyboard (arrow keys, Home/End), touch gestures, and clickable vertical line pagination. Built with vanilla JavaScript and Drupal behaviors using requestAnimationFrame for smooth performance. Body scroll locking keeps users focused until the final slide.

Visual Progress Indicators: Vertical line pagination displays real-time slide duration and progress. Each segment fills bottom-to-top using CSS transitions (linear, 4 seconds), freezing when users manually navigate. Pagination fades in on load and out on the final slide.

Adaptive Controls: “Skip” appears on all slides except the last for quick navigation to the end, while “Scroll Down” appears only on the final slide. Both use CSS transitions and ARIA attributes for smooth, accessible interactions.

Accessibility: WCAG-compliant with ARIA live regions for slide announcements, proper role attributes, dynamic tabindex management, and full keyboard navigation. All interactive elements include descriptive aria-labels with automatic focus management.

Performance & Media: Preloads images before advancing, uses debounced handlers and IntersectionObserver for efficiency. Supports responsive images and Vimeo videos with play/pause controls. Features Ken Burns effect on images and parallax scrolling on exit.

Tech Stack

• Architecture: Drupal Single Directory Components (SDC)
• JavaScript: Vanilla JS, Drupal behaviors, IntersectionObserver
• HTML/CSS: BEM methodology, CSS custom properties, CSS transitions
• Accessibility: ARIA live regions, semantic roles, keyboard navigation
• Media: Responsive images (picture/source), Vimeo iframe API

Collection Search using React

The centerpiece of the user experience is a sophisticated collection search tool that makes exploring over 117,000 artworks both intuitive and delightful. Designed and built in close collaboration with the Museum's development team, the search interface offers helpful suggestions, intelligent filters for year, culture, and place made, plus a playful “surprise me” feature that encourages serendipitous discovery. For scholars and researchers, an advanced search mode enables granular queries across specific fields with Boolean logic support for precise research needs.

In close collaboration with the PUAM Dev team, I transformed the beta version of the React app to align with the new branding, ensuring a cohesive experience across the entire website. The app is maintained as a standalone repository, packaged via npm, and integrated into the Drupal 11+ site through a custom module that seamlessly loads all build assets.

Saving Objects

Another standout feature of the site is the “Saving Objects” feature, which leverages Drupal's Flag module to enable museum visitors to curate personal collections of artworks when browsing the site. When users authenticate through Princeton ID CAS Login, they gain access to “My Collection” — a Views page that displays all their saved items in an organized list. For non-authenticated visitors, attempting to save an object triggers a dialog that encourages them to sign in, creating a clear pathway to engagement while respecting the feature's authenticated nature.

When logged-in users flag an object, a heart icon in the site header provides immediate visual feedback through a carefully timed animation sequence. This real-time response was achieved through a MutationObserver-based behavior that monitors DOM changes and manages animation states, ensuring consistent feedback across AJAX interactions without requiring page reloads. In addition, we exposed the flagged data via custom REST API endpoints, making user collections accessible to the Collection Search React app.