🎨 Obys Agency Clone

A modern, high-performance portfolio/agency website clone featuring smooth animations, 3D elements, and an immersive user experience. Built with cutting-edge web technologies to showcase creative work in style.

✨ Features

• 🎬 Smooth Scrolling - Locomotive Scroll for buttery-smooth page navigation
• 🎯 Custom Cursor - Interactive cursor that responds to user interactions
• 🎭 Advanced Animations - GSAP and Framer Motion for fluid, professional animations
• 🎥 Video Integration - Seamless video sections with hover effects
• 🖼️ 3D Elements - Three.js and React Three Fiber for immersive 3D experiences
• 📱 Responsive Design - Fully responsive layout optimized for all devices
• ⚡ Performance Optimized - Built with Vite for lightning-fast development and builds
• 🎨 Modern UI/UX - Clean, minimalist design with attention to detail

🚀 Tech Stack

Core Framework

• React 18.2.0 - Modern UI library
• Vite 5.2.0 - Next-generation build tool

Animation & Effects

• GSAP 3.12.5 - Professional-grade animation library
• Framer Motion 11.0.28 - Production-ready motion library
• Anime.js 3.2.2 - Lightweight animation engine
• Locomotive Scroll 4.1.4 - Smooth scrolling library
• Shery.js 1.0.0-beta - Creative effects library

3D Graphics

• Three.js 0.163.0 - 3D graphics library
• React Three Fiber 8.16.2 - React renderer for Three.js

Styling

• Tailwind CSS 3.4.3 - Utility-first CSS framework
• PostCSS - CSS transformation tool
• Custom Fonts - Silk Serif and Plain fonts for typography

UI Components

• Remix Icon 4.2.0 - Icon library
• React Ripples - Ripple effect components
• Hover Effect - Advanced hover animations

📦 Installation

1. Clone the repository

   git clone https://github.com/TheNeovimmer/obys-clone.git
   cd obys-clone

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Build for production

   npm run build

5. Preview production build

   npm run preview

🏗️ Project Structure

obys-clone/
├── public/
│   └── images/          # Static images and assets
├── src/
│   ├── assets/
│   │   ├── fonts/       # Custom font files
│   │   └── image/       # Image assets
│   ├── components/
│   │   ├── About/       # About section component
│   │   ├── Cursor/      # Custom cursor component
│   │   ├── Footer/      # Footer component
│   │   ├── landing/     # Landing page component
│   │   ├── loader/      # Page loader component
│   │   ├── Marqueue/    # Marquee text component
│   │   ├── Navbar/      # Navigation bar component
│   │   ├── Project/     # Project showcase component
│   │   ├── Video/       # Video section component
│   │   ├── AnimatedLink.jsx
│   │   ├── CenterButton.jsx
│   │   └── GsapMagnetic.jsx
│   ├── App.jsx          # Main application component
│   ├── App.css          # Global application styles
│   ├── index.css        # Base styles
│   └── main.jsx         # Application entry point
├── index.html           # HTML template
├── package.json         # Project dependencies
├── tailwind.config.js  # Tailwind configuration
├── vite.config.js       # Vite configuration
└── postcss.config.js    # PostCSS configuration

🎯 Key Components

• Loader - Elegant page loading animation
• Navbar - Responsive navigation with smooth transitions
• Landing - Hero section with animated text and visuals
• Video - Video showcase with interactive elements
• Project - Project gallery with hover effects
• About - About section with engaging animations
• Marqueue - Animated marquee text component
• Footer - Footer with links and information
• Cursor - Custom cursor with magnetic effects

🛠️ Development

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Code Style

The project uses ESLint for code quality. Make sure to follow the linting rules before committing.

🎨 Customization

Fonts

Custom fonts are located in src/assets/fonts/. Update the font files and CSS to use your preferred typography.

Colors

Modify the Tailwind configuration in tailwind.config.js to customize the color scheme.

Animations

GSAP animations can be customized in individual component files. Check component files for animation configurations.

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

👤 Author

TheNeovimmer

• GitHub: @TheNeovimmer

🙏 Acknowledgments

• Inspired by Obys Agency's original design
• Built with amazing open-source libraries
• Thanks to all contributors and the open-source community

---

⭐ If you like this project, give it a star on GitHub!