This project served as a high-stakes technical self challenge for ThrillX Design, a Canadian digital agency. The brief was uncompromising: take a high-fidelity design and translate it into performant, production-ready code.
The Goal: Demonstrate not just coding ability, but architectural thinking, clean file structure, maintainable CSS, and smooth motion execution.
Autoscrolling Reel
Key Value Propositions
Built for Speed and Scale
To ensure the codebase was as professional as the visual design, I established a modern environment using Vite.
Templating with Pug: I chose Pug (formerly Jade) to componentize the HTML. This allowed me to break the UI into reusable chunks (mixins for cards, buttons, and sections), mimicking a modern framework workflow without the overhead.
Modular SCSS: Styles were architected using the 7-1 pattern, ensuring that the visual system was scalable and easy to maintain.
Orchestrating the "Premium" Feel
A static luxury site feels cheap. To elevate the brand, I utilized GSAP (GreenSock) to handle complex sequencing.
The Reveal: Elements don't just appear; they stagger in. I used GSAP Timeline to synchronize the text reveals with image loads, ensuring the user is guided down the page.
Performance: All animations were optimized to run on the compositor thread where possible, maintaining a silky 60fps even during scroll events.
Project Background
Scope: Full Homepage implementation from design handover.
Design: Provided by ThrillX Design
Implementation: Jose Armando Felix – Responsible for full code implementation, logic, and animation tuning.