A pixel-perfect recreation of Cuberto's award-winning design agency website
A meticulously crafted, fully responsive clone of the stunning Cuberto design agency website. Built as a comprehensive front-end development exercise, this project showcases advanced animation techniques, modern web technologies, and professional UI/UX implementation.
🎨 Pixel-Perfect Design - Faithful recreation of Cuberto's premium aesthetic
🚀 Smooth Animations - Butter-smooth transitions and micro-interactions
📱 Mobile-First - Seamlessly responsive across all devices
⚡ Performance Optimized - Fast loading with efficient animations
- Home - Captivating landing page with hero animations
- Services - Interactive service showcases
- Projects - Portfolio gallery with hover effects
- Company - About section with video integration
- Blog - Content layout with modern typography
- Contacts - Sleek contact forms and information
- 🎬 GSAP-powered animations for professional motion design
- 🔄 Smooth page transitions between sections
- 🎯 Interactive hover effects on portfolio items
- ⏳ Custom preloader with branded animation
- 📹 Video previews on hover interactions
- 🎨 Modern CSS Grid & Flexbox layouts
- 📱 Responsive breakpoints for all screen sizes
- 🖼️ Optimized image handling with lazy loading
- 🎪 Custom font integration matching original design
cuberto-website-clone/
├── 🎨 css/
│ ├── style.css # Main stylesheet
│ └── responsive.css # responsive stylesheet
├── 🔤 fonts/ # Custom font files
│ ├── AvertaCY-Bold.ttf
│ ├── AvertaCY-Light.ttf
│ ├── AvertaCY-Regular.ttf
│ ├── AvertaCY-Semibold.ttf
│ ├── matter-light.ttf
│ └── matter-regular.ttf
├── 🖼️ images/ # Organized image assets
│ ├── blog page/
│ ├── company page/
│ └── projects page/
├── ⚡ js/ # JavaScript modules
│ ├── preloader.js # Loading animations
│ └── script.js # Main functionality
├── 🎥 video/ # Video assets
│ ├── company page/
│ └── services page/
├── 📄 HTML Pages
│ ├── index.html # Homepage
│ ├── blog.html # Blog page
│ ├── company.html # Company page
│ ├── contacts.html # Contact page
│ ├── projects.html # Projects page
│ ├── services.html # Services page
│ └── trail.html # Trail page
└── README.md
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Basic knowledge of HTML/CSS/JS (for customization)
- Clone the repository
git clone https://github.com/Exoblade-dev/Cuberto-Website-Clone.git
- Navigate to project
cd Cuberto-Website-Clone
- Launch locally
# Open index.html in your browser
# Or use a local server (recommended)
npx serve .
- Start exploring! 🎉
| Technology | Purpose | Version |
|---|---|---|
 |
Structure | Latest |
 |
Styling | Latest |
 |
Interactivity | ES6+ |
- 🎬 GSAP - Professional animation library
- 🖼️ Shery.js - Advanced image effects and distortions
- 🚀 Lenis - Ultra-smooth scrolling experience
This clone focuses on:
- ✨ Micro-interactions that delight users
- 🎯 Performance optimization without sacrificing beauty
- 📐 Pixel-perfect accuracy to the original design
- 🔧 Clean, maintainable code structure
Sahil | Full-Stack Developer in Training 🚀
- 🎯 Currently mastering frontend development
- 📚 Learning backend technologies
- 💫 Passionate about creating exceptional web experiences
- 🔗 GitHub: @Exoblade-dev
📖 Educational Use Only
This project is created for learning purposes and portfolio demonstration.
All original design credits belong to Cuberto Agency.
Not intended for commercial use.
- Cuberto Agency for the incredible original design
- GSAP Team for the amazing animation library
- Web Development Community for inspiration and resources
```
