This project is a high-fidelity, performance-optimized clone of the prestigious k72.ca website. It serves as a technical showcase of advanced frontend engineering, architectural typography, and seamless cinematic transitions.
Built with a focus on precision and digital excellence by Muhammad Ali Husnain.
I am a Full Stack Developer and the Founder of DevDoz. My mission is to help ambitious brands bridge the gap between complex software engineering and high-impact digital growth through intelligent automation and superior user experiences.
- Portfolio & Company: devdoz.com
- LinkedIn: linkedin.com/in/alihusnain-dev
- GitHub: @alihusnain-dev
- Instagram: @alihusnain_dev
- YouTube: @alihusnain-dev
This clone isn't just about visuals; it's about motion performance and fluid interactivity.
- Framework: React + Vite (Lightning-fast HMR and build times)
- Animation Engine: GSAP (GreenSock)
- ScrollTrigger: Custom complex scroll behaviors.
- Custom Easing: Architectural, smooth motion curves.
- Flip / Pinning: Advanced element state transitions.
- Styling: Tailwind CSS (Atomic CSS for rapid, scalable UI development).
- Navigation: React Router Dom (For persistent layout-wide animations during transitions).
A custom-built GSAP transition sequence that orchestrates a "staircase" overlay on every route change. It features staggered entries/exits and automatic state resets to ensure a polished app-like feel.
A scroll-bound image sequencer on the Agency page. As the user descends, the hero image dynamically swaps through an array of team portraits synchronized with the scroll position, creating a stop-motion cinematic effect.
In the team section, we implemented a sophisticated multi-layered pinning system. Individual member portraits remain pinned in the viewport while names and roles scroll independently. Subsequent sections "stack" on top with calculated z-index depth, mimicking physical architectural layers.
Moved beyond the limitations of standard HTML markers. These are buttery-smooth, horizontally looping GSAP timelines that maintain performance even with large-scale typography and high-density rendering.
This project adheres to modern web standards focusing on:
- Zero Layout Shifts: Optimized for Core Web Vitals.
- Micro-Animations: Subtle hover and interactive states for enhanced UX.
- Responsive Fluidity: Fully adaptive layouts from mobile to ultra-wide displays.
This project is open-source for educational and portfolio purposes. The original brand identity and design system reside with K72. Code implementation and animation engineering by Muhammad Ali Husnain / DevDoz.