Two Good Co. Clone

Year

2023

Tech & Technique

HTML, CSS, Locomotive.js, Vercel

Description

A visually rich and animation-heavy clone of the Two Good Co. website, crafted to mimic the brand’s unique aesthetic and immersive scrolling experience. Designed to demonstrate advanced animation and front-end craftsmanship.

Key Features:

🌀 Smooth Scrolling: Powered by Locomotive Scroll for parallax and inertia effects
🎞️ Scroll-Based Animations: Elements animate seamlessly as user scrolls
🌐 Pixel-Perfect Layout: Closely mirrors original brand’s design system
📱 Responsive Design: Adaptive experience across all screen sizes
🎨 Custom Interactions: Subtle hover and scroll-triggered effects enhance engagement

Technical Highlights:

Implemented Locomotive.js for buttery-smooth scroll and reveal animations
Built entirely with semantic HTML and custom CSS
Optimized performance to maintain smooth transitions even on low-end devices

My Role

Frontend Developer
Recreated the entire user interface and experience:

🖌️ Layout & Styling: Developed static structure with HTML and responsive styling with CSS
🎯 Animations: Integrated scroll-based animations with Locomotive.js
📏 Design Accuracy: Ensured fidelity to the original site’s typography, spacing and rhythm
⚙️ Deployment: Hosted on Github pages for fast load times and easy sharing