An immersive, interactive gallery dedicated to the raw aesthetic of urban subway art.
Jacqueline
Check out my GitHub Profile
🎨 Experience the Subway Art Project
- Atmospheric Audio Integration: Interactive
<audio>triggers synced to user hover-states, creating a multi-sensory "Subway" environment. - Dynamic Text Animation: A custom JavaScript-driven
animated-textengine for the hero section to simulate the movement of a passing train. - Bespoke Navigation: Custom CSS
hover-effectspans with a focus on high-contrast "Street Aesthetic" and distinct urban typography. - Typeface Strategy: Strategic use of the
Vast ShadowGoogle Font to evoke the depth and weight of vintage subway signage.
| Browser / Device | Status | Performance Notes |
|---|---|---|
| Google Chrome/Microsoft Edge | ✅ Optimized | Full support for hover-triggered animations. Audio blocked: syncing after 1st click due to autoplay security policies.* |
| Safari | Functional only when you refresh between pages. Remains "glitchy" | |
| Firefox | Audio does not initialize." | |
| iPad / Tablets | Functional, but remains "glitchy" when switching between Portrait and Landscape modes. | |
| iPhone (iOS) | ❌ Not Supported | Mobile handset viewports are not currently optimized for this experience. |
To comply with modern browser Autoplay Policies, the audio engine requires an initial user interaction.
- Initial Entry: Music will not trigger on the first hover immediately upon arrival.
- Activation: Once a user clicks any link on the page, the audio system "unlocks," and all subsequent animations will respond perfectly to hover states.
Tip
iPhone Setup: For the best visual experience, use the browser's "AA" menu to zoom out to 50%.
Warning
iPad Sync Issue: Rotating between Portrait and Landscape may trigger audio, but selecting links in the Navigation Bar will cause the sound to cut out. For a stable experience, we recommend using a desktop browser.
-Compatibility: iPad/Tablet
- Frontend: Vanilla JavaScript (ES6+), Semantic HTML5
- Styling: CSS3 (Custom Navigation Effects, Hero Grid, and Typography)
- Multimedia: Audio API manipulation for environmental immersion.
The Subway Art Project explores the intersection of street culture and modern web architecture; it serves as a technical case study for a transition into Software Engineering, focusing on how event-driven sound and motion can transform a static interface into an immersive urban landscape.