Project Overview Overview
The SARKO website was built with a clear mandate: to serve as a digital stronghold for the organization. Rejecting heavy JavaScript frameworks, the project relies entirely on semantic HTML5, modern CSS3, and Vanilla JavaScript to deliver a highly interactive user experience.
Key technical highlights include a custom-built, hardware-accelerated interactive hero grid that recalculates effortlessly on hover, a multi-step membership induction wizard with live progress tracking, and exit-intent capture mechanisms. The UI heavily utilizes CSS Grid, modern Flexbox, and native transitions to ensure fluid 60fps performance across all device viewports.
Tech Stack Stack
Vanilla HTML/CSS/JS Vanilla HTML/CSS/JS
Tech Stack
GPU Accelerated GPU Accelerated
Performance
Key Features Features
- Hardware-Accelerated Interactive Hero Grid
- Multi-step Membership Induction Wizard
- Responsive Bento-style Values Layout
- Infinite Marquee Vote Ticker
- Exit-Intent & POPIA Cookie Modals
In Motion Motion
Responsive Design Devices
A seamless experience across desktop, tablet, and mobile devices.
Visuals Gallery
Technical Challenges Core
Creating an intricate, expanding 4-card grid in the hero section that animates seamlessly on desktop but gracefully degrades to a static grid on mobile touch devices.
Leveraged CSS absolute positioning with deliberate cubic-bezier transitions on desktop, combined with translateZ(0) for GPU acceleration. Media queries strip absolute positioning on mobile in favor of a standard CSS Grid.
Managing multiple complex modals (Membership, Cookie Banner, Exit-Intent) without state management libraries like React.
Implemented a modular Vanilla JavaScript event listener system, using shared generic classes to centralize 'close' behaviors while isolating specific trigger logic.
Key Takeaways Insights
Engineered an interactive, expanding CSS Grid hero section utilizing translateZ(0) to force hardware acceleration and eliminate transition flicker.
Developed a lightweight, multi-step induction wizard in Vanilla JavaScript complete with HTML5 form validation and dynamic DOM manipulation.
Implemented an exit-intent detection system using mouseout event listeners tied to viewport coordinates to capture abandoning visitors.
Project Outcomes Impact
Delivered a robust, highly interactive platform that perfectly aligns with the 'Regal Guardian' brand identity.
Created a seamless, multi-step digital membership application process, eliminating the friction of physical paperwork.