A comprehensive waste analytics and sustainability dashboard designed specifically for Johannesburg, South Africa. The platform integrates CNN-based waste classification, EPA WARM v15.2 emission factors, and PETCO recycling data to provide actionable environmental insights.
# Track My Impact - Deployment Website
## Overview
This is the deployment website for Track My Impact, a comprehensive waste analytics application for Johannesburg residents. The website showcases the application's features and provides access to the interactive dashboard.
## Features
- **Responsive Design**: Works perfectly on desktop and mobile devices
- **Interactive Dashboard**: Embedded Streamlit application
- **Professional Presentation**: Clean, modern design with Tailwind CSS
- **SEO Optimized**: Meta tags and structured data for search engines
- **Performance Optimized**: Fast loading with CDN resources
## Technology Stack
- **Frontend**: HTML5, Tailwind CSS, JavaScript
- **Dashboard**: Streamlit (embedded iframe)
- **Icons**: Font Awesome 6
- **Fonts**: Google Fonts (Inter)
- **Animations**: CSS transitions and keyframes
## Deployment
The website is designed to be deployed on any static hosting service:
- GitHub Pages
- Netlify
- Vercel
- AWS S3 + CloudFront
- Azure Static Web Apps
## Local Development
1. Clone the repository
2. Open `index.html` in a web browser
3. Ensure the Streamlit dashboard is running on `localhost:8501`
## Dashboard Integration
The website includes an embedded iframe that loads the Track My Impact Streamlit dashboard. The dashboard provides:
- Waste image classification
- Environmental impact calculations
- PETCO recycling locations
- Impact analytics and comparisons
## Content Sections
1. **Hero Section**: Introduction and call-to-action
2. **Features**: Six key application features
3. **How It Works**: 4-step process explanation
4. **Impact Examples**: Real environmental impact demonstrations
5. **Dashboard**: Embedded interactive application
6. **Technical Details**: EPA WARM data and architecture
7. **Call to Action**: Final conversion section
## Customization
- Colors can be customized in the Tailwind config
- Content is easily editable in the HTML
- Animations and transitions are configurable via CSS
## Performance
- …