🏂 FROSTLINE - Snowboard Website

A visually stunning one-page snowboard website featuring beautiful animations, smooth scroll effects, and a high-energy winter sports aesthetic.

✨ Features

• 🎨 Modern Design: Ice blue, neon green, and adrenaline red color palette
• 🏔️ Parallax Effects: Smooth mountain background parallax scrolling
• ❄️ Snow Particles: Animated falling snow particles
• 🎭 Hero Animations: Staggered text reveals and glowing effects
• 🛹 Interactive Carousel: Touch-enabled gear showcase with smooth transitions
• 📱 Mobile First: Fully responsive design for all devices
• ⚡ Performance: Optimized animations and smooth 60fps effects

🚀 Tech Stack

• Vite - Lightning fast build tool and development server
• TailwindCSS - Utility-first CSS framework with custom snowboard theme
• Vanilla JavaScript - Pure JavaScript animations and interactions
• CSS3 - Custom animations, transitions, and effects
• HTML5 - Semantic markup and accessibility

🎨 Design System

Colors

• Ice Blue: #4FC3F7 - Primary brand color
• Neon Green: #39FF14 - Accent and highlight color
• Adrenaline Red: #E53935 - Call-to-action and energy
• Charcoal: #121212 - Dark text and backgrounds
• Frost: #B3E5FC - Light accent color

Typography

• Headings: Oswald (Bold, high-impact)
• Body Text: Inter (Clean, readable)

Animations

• Smooth transitions with ease-out timing
• Parallax scrolling effects
• Hover state animations
• Scroll-triggered reveals
• Particle systems

📱 Browser Support

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

🎪 Demo Features

Visit the live site to experience:

• ❄️ Falling snow particles
• 🏔️ Mountain parallax scrolling
• 🎭 Hero text animations
• 🛹 Interactive gear carousel
• 📱 Touch/swipe gestures
• ⚡ Smooth scroll effects

📄 License

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

🤝 Contributing

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

🙏 Acknowledgments

• Design inspiration from modern snowboard brands
• Color palette inspired by winter mountain aesthetics
• Typography choices for high-energy sports appeal

---

Built with ❄️ by the FROSTLINE team

• Mobile-First Responsive design
• High-Energy Aesthetic with ice blue, neon green, and crisp whites

🛠️ Tech Stack

• Vite - Lightning fast build tool and dev server
• Vanilla JavaScript - Clean, performant interactions
• GSAP - Professional animation library
• Swiper.js - Modern touch slider for gear showcase
• Custom CSS - Optimized snowboard theme with animations

🎨 Design System

Colors

• Ice Blue: #4FC3F7 (Primary)
• Neon Green: #39FF14 (Accent)
• Adrenaline Red: #E53935 (CTA)
• Charcoal: #121212 (Text)
• Frost: #B3E5FC (Backgrounds)

Typography

• Headings: Oswald (Bold, condensed)
• Body: Inter (Clean, readable)

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

📁 Project Structure

frostline/
├── src/
│   ├── main.js          # Main JavaScript entry point
│   ├── style.css        # Custom CSS with animations
│   └── assets/          # Images and media
├── public/              # Static assets
├── index.html           # Main HTML template
└── package.json         # Dependencies and scripts

✨ Key Animations

• Snow Particles - Continuously falling snow effect
• Hero Reveal - Staggered text and element animations
• Parallax Scrolling - Mountain background movement
• Carousel Transitions - Smooth gear showcase slides
• Hover Effects - Interactive button glows and transforms
• Float Animation - Gentle snowboarder movement

🎯 Performance Features

• Optimized animations with will-change properties
• Efficient particle system
• Responsive images and assets
• Smooth scrolling with hardware acceleration
• Mobile-optimized touch interactions

🔧 Customization

Adding New Gear Items

Edit the Swiper slides in index.html to add new snowboard products.

Modifying Animations

Adjust GSAP timelines in main.js for different animation speeds and effects.

Updating Colors

Change the CSS custom properties in style.css to match your brand.

📱 Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Mobile browsers with modern JavaScript support

🚀 Deployment

🤝 Contributing

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

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• GSAP for powerful animations
• Swiper.js for smooth carousels
• Vite for blazing fast development
• Mountain photography inspiration from professional snowboard communities

---

Built with love by the Futurelab team