Back to Portfolio
UTK Turfgrass FIFA World Cup 26
Enhanced WordPress platform showcasing UT's groundbreaking turfgrass research for FIFA World Cup 26.
The Brief
- Deliver hero animation for engaging homepage introduction
- Make stadium map pins interactive and connected to modal information
- Synchronize subnav active states with visible page sections on Impact page
- Replace GeneratePress SVG elements with shortcode for multi-site production compatibility
- Fix layout shift problems and identify UX/UI issues
The Solution
- Implemented pure CSS hero navigation with CSS variables for easy configuration
- Connected map pins to existing modal solution using proper HTML attributes and event handling
- Built JavaScript Intersection Observer for real-time subnav synchronization with page sections
- Replaced SVG elements with shortcode implementation for proper multi-site environment handling
- Resolved layout shift issues and optimized performance while maintaining code quality
The Final Product
Homepage: Hero
Homepage: Stadium Map
Homepage: Stadium Overlay
Research Page
Experts Page
Impact Page
Technical Implementation
Tech Stack
WordPress
GeneratePress
PHP
JavaScript
CSS
Figma
Key Challenges & Solutions
Rapid Project Onboarding Under Tight Deadline
Joining an in-progress project with only 2 weeks to delivery required quickly understanding existing code architecture, design patterns, and team workflows while maintaining high code quality and meeting aggressive timelines.
Solution:
Prioritized tasks strategically, focusing on high-impact items first while learning the codebase in parallel. Used time management techniques to balance speed with quality, avoiding unnecessary complexity and making efficient decisions about implementation approaches.
Integrating Interactive Map Functionality
The stadium map required clickable pins that would open corresponding modals with detailed information. The list view already had working modal functionality, but connecting the map pins required understanding the existing JavaScript implementation and properly configuring HTML attributes.
Solution:
Analyzed the existing list view JavaScript to understand the modal triggering mechanism, then applied the same logic to map pins by setting proper data attributes and event listeners. This approach reused existing code and avoided duplicating functionality.
Synchronizing Navigation with Dynamic Content
The Impact page required subnav items to automatically highlight based on which section was currently visible in the viewport. This needed to work smoothly as users scrolled through multiple sections without manual interaction.
Solution:
Implemented JavaScript Intersection Observer API to detect which sections are in the viewport and automatically update the active subnav state. This approach is performant, doesn’t require scroll event listeners, and provides smooth, real-time synchronization.
Multi-Site Environment Compatibility
GeneratePress SVG elements weren’t rendering properly in the multi-site production environment, requiring a solution that would work consistently across different site configurations and WordPress installations.
Solution:
Replaced inline SVG elements with a shortcode-based approach that was already written but not yet implemented. This centralized SVG management and ensured consistent rendering across all sites in the multi-site network.
Ready to Bring Your Vision to Life?
Let's collaborate to create a high-performance web solution that drives your business growth with clean, scalable code.