River Warrior Documentary Website

Official website for the River Warrior documentary film following Ann Rose's 1,895-mile solo kayak journey from Appalachia to the Gulf of Mexico to raise awareness about water quality and environmental activism.

🌊 About the Project

River Warrior is a documentary film that chronicles Ann Rose's extraordinary journey down America's waterways, testing water quality and documenting the hidden crisis in our rivers. This website serves as the official online presence for the film, featuring the trailer, crew information, press coverage, and educational content about water quality testing.

Key Features

• Hero Video Section - Immersive video experience showcasing the journey
• Interactive Storytelling - Scrolling narrative that brings the adventure to life
• Water Quality Education - Detailed information about testing equipment and measurements
• Crew Profiles - Meet the filmmakers behind the documentary
• Press Gallery - Media coverage and high-resolution stills
• Call-to-Action - GoFundMe integration and environmental organization links

🛠️ Tech Stack

• Framework: Nuxt 3 with Vue 3
• Language: TypeScript
• Styling: CSS3 with custom properties
• Images: WebP optimization with fallbacks
• Fonts: Google Fonts (Libre Franklin)
• Deployment: Netlify (Static Site Generation)
• Analytics: Google Analytics integration

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/keeganhanesboise/river-warrior-site.git
   cd river-warrior-site

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run generate     # Generate static site
npm run preview      # Preview production build

# Code Quality
npm run format       # Format code with Prettier

🎨 Design Features

• Responsive Design - Mobile-first approach with breakpoints for all devices
• Performance Optimized - WebP images, lazy loading, and efficient bundling
• SEO Ready - Comprehensive meta tags, Open Graph, and structured data
• Accessibility - WCAG compliant with proper semantic HTML
• Modern UI - Clean, professional design with smooth animations

📊 Performance

The site is optimized for performance with:

• Static site generation for fast loading
• WebP image format with JPEG fallbacks
• Lazy loading for images and videos
• Optimized font loading with font-display: swap
• Minimal JavaScript bundle size

📝 License

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