🚀 Frenzy Devs - Elite Development Team Landing Page

A badass anime-style landing page for Frenzy Devs, featuring dark/light mode toggle, responsive design, and interactive recruitment popup.

✨ Features

🎨 Visual Design

• Anime-inspired aesthetic with cyberpunk elements
• Gradient color schemes (cyan, pink, purple)
• Floating animations and particle effects
• Glitch effects on hover
• Smooth transitions and micro-interactions

🌓 Theme System

• Dark mode (default) with neon accents
• Light mode with clean, modern look
• Persistent theme storage using localStorage
• Smooth theme switching animations

📱 Responsive Design

• Mobile-first approach
• Responsive grid layouts
• Touch-friendly interactions
• Optimized for all screen sizes

🎭 Interactive Elements

• Recruitment popup with smooth animations
• Typing effect for code display
• Parallax scrolling effects
• Hover animations and micro-interactions
• Smooth scrolling navigation

🚀 Performance Features

• Throttled scroll events for smooth performance
• CSS animations for hardware acceleration
• Optimized particle system
• Lazy loading animations

🛠️ Technologies Used

• HTML5 - Semantic markup
• CSS3 - Advanced styling with CSS variables and animations
• Vanilla JavaScript - No frameworks, pure performance
• Font Awesome - Icon library
• Google Fonts - Orbitron & Rajdhani typography

📁 Project Structure

Frenzy-Devs.github.io/
├── index.html          # Main HTML file
├── styles/
│   └── main.css       # Complete CSS styling
├── scripts/
│   └── main.js        # JavaScript functionality
├── public/            # Public assets
└── README.md          # This file

🚀 Quick Start

1. Clone the repository

   git clone https://github.com/Frenzy-Devs/Frenzy-Devs.github.io.git
   cd Frenzy-Devs.github.io

2. Open in browser

   • Simply open index.html in your web browser
   • Or use a local server for development

3. Customize

   • Edit content in index.html
   • Modify styles in styles/main.css
   • Adjust functionality in scripts/main.js

🎯 Key Sections

🏠 Hero Section

• Animated title with glitch effects
• Interactive code window
• Call-to-action buttons
• Particle background effects

📖 About Section

• Team description
• Animated statistics
• Floating skill cards
• Responsive grid layout

👥 Team Section

• Team member profiles
• Hover animations
• Responsive grid
• Icon-based avatars

📧 Contact Section

• Contact information
• Contact form
• Social media links
• Hover effects

🎪 Recruitment Popup

• Modal overlay design
• Smooth animations
• Requirements list
• Action buttons

🎨 Customization

Colors

The color scheme is defined in CSS variables at the top of main.css:

:root {
    --accent-primary: #00d4ff;    /* Cyan */
    --accent-secondary: #ff006e;  /* Pink */
    --accent-tertiary: #7b2cbf;  /* Purple */
}

Fonts

• Orbitron - Used for headings and tech elements
• Rajdhani - Used for body text and general content

Animations

• Grid movement - Hero background animation
• Floating cards - About section animations
• Particle system - Background effects
• Scroll animations - Element reveal effects

📱 Responsive Breakpoints

• Mobile: max-width: 480px
• Tablet: max-width: 768px
• Desktop: min-width: 769px

🌟 Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

🔧 Development

Local Development Server

# Using Python 3
python3 -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

File Structure

• HTML: Semantic structure with accessibility
• CSS: Modular CSS with custom properties
• JavaScript: ES6+ with performance optimizations

📈 Performance Tips

1. Optimize images before adding to public folder
2. Minify CSS/JS for production
3. Enable gzip compression on server
4. Use CDN for external libraries
5. Optimize fonts loading

🎭 Animation System

The page uses a combination of:

• CSS animations for smooth transitions
• JavaScript animations for complex interactions
• Scroll-triggered animations
• Hover effects for user engagement

🔒 Security Features

• XSS protection through proper DOM manipulation
• Input validation on contact forms
• Secure event handling with proper event delegation

📝 License

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

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📞 Support

• GitHub Issues: Report bugs and feature requests
• Discord: Join our community
• Email: hello@frenzydevs.com

---

Built with ❤️ by the Frenzy Devs team

Elite developers who code, create, and conquer the digital realm together.