CritHit Robotics Website

A modern, responsive website for CritHit Robotics - an FRC (FIRST Robotics Competition) team dedicated to building championship robots and inspiring the next generation of engineers.

🚀 Features

• Responsive Design: Works seamlessly across desktop, tablet, and mobile devices
• Modern UI/UX: Clean, professional design with smooth animations suitable for STEM education
• Interactive Elements: Mobile navigation, smooth scrolling, and team application form
• Performance Optimized: Lightweight code with lazy loading support
• Accessibility Focused: Semantic HTML and keyboard-friendly navigation
• FRC Focused: Specifically designed for robotics teams with relevant sections and content

🛠️ Technologies Used

• HTML5: Semantic markup and modern web standards
• CSS3: Flexbox, Grid, animations, and responsive design
• JavaScript (ES6+): Modern JavaScript with DOM manipulation
• Google Fonts: Inter font family for clean typography

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• VS Code (recommended) with Live Server extension

Installation

1. Clone or download this repository
2. Open the project folder in VS Code
3. Right-click on index.html and select "Open with Live Server"
4. Your default browser will open with the website

Alternative Setup

Simply open index.html in any modern web browser to view the website.

📱 Features Overview

Navigation

• Responsive mobile-first navigation
• Smooth scrolling to sections
• Sticky header with scroll effects

Sections

• About: Overview of the robotics team with core values and focus areas
• Our Robot: Showcase of the current competition robot with specifications
• Team: Team member information, roles, and statistics
• Achievements: Awards and recognition received by the team
• Contact: Team application form and meeting information

Interactive Elements

• Mobile hamburger menu
• Form validation and submission handling
• Scroll-based animations
• Notification system for user feedback

🎨 Customization

Colors

The main color scheme uses:

• Primary: #6366f1 (Indigo)
• Accent: #fbbf24 (Amber)
• Text: #1f2937 (Gray-800)
• Background: #ffffff (White)

Fonts

• Primary font: Inter (Google Fonts)
• Fallbacks: system fonts for optimal performance

Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

📝 Development Notes

Adding Images

Replace the image placeholders in the HTML with actual images:

1. Add image files to the images/ folder
2. Update the HTML to reference the actual image paths
3. Consider using the lazy loading data attributes for performance

Extending Functionality

The JavaScript is modular and easy to extend:

• Add new form handlers in main.js
• Create additional animations using the Intersection Observer pattern
• Extend the notification system for different message types

Performance Optimization

• Images use lazy loading (when implemented)
• CSS and JS are minified for production
• Modern CSS features reduce JavaScript dependencies

🔧 VS Code Extensions

Recommended extensions for development:

• Live Server: For local development server
• Prettier: Code formatting
• Auto Rename Tag: HTML tag management
• Bracket Pair Colorizer: Code readability

📄 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test across different browsers and devices
5. Submit a pull request

📄 License

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

📞 Contact

For questions or feedback about this project, please use the contact form on the website or reach out through the social links provided.

---