WeatherVue 2.0

Atmospheric Intelligence for the Modern Age

A next-generation weather dashboard featuring glassmorphism, WebGL visualizations, and award-winning UI/UX.

✨ Features

• 🎨 Award-Winning Design: Immersive Glassmorphic UI with dynamic, weather-reactive backgrounds (Three.js WebGL).
• ⏱️ Precision Timeline: Interactive scrubber to travel through time and see 48-hour forecasts instantly.
• 📊 Advanced Visualization: D3.js powered temperature graphs with gradient fills and interactive inspection.
• 🌍 Global Coverage: Real-time data from Open-Meteo API for any location on Earth.
• 🌗 Smart Theming: Automatically adapts to day/night cycles and weather conditions (Rain, Snow, Clear, etc.).
• ⚡ Performance First: Built with Vite + Vue 3 for blazing fast load times and smooth 60fps animations.
• 📱 Fully Responsive: Optimized experience across mobile, tablet, and desktop.
• ♿ Accessible: Full keyboard navigation, screen reader support, and "Terminal" high-contrast theme.

🛠️ Tech Stack

• Framework: Vue 3 (Composition API, Script Setup)
• State Management: Pinia
• Build Tool: Vite
• Styling: Tailwind CSS + Custom CSS Variables
• Visualizations: D3.js (Charts), Three.js (Backgrounds)
• Animations: GSAP
• Icons: Lucide Vue
• Data Source: Open-Meteo API

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

1. Clone the repository

   git clone https://github.com/tzii/WeatherVue.git
   cd WeatherVue

2. Install dependencies

   npm install

3. Start development server

   npm run dev

4. Build for production

   npm run build

⚙️ Configuration

Create a .env file in the root directory to configure optional services (like Azure Translation):

VITE_AZURE_TRANSLATOR_KEY=your_key_here
VITE_AZURE_TRANSLATOR_REGION=eastus

Note: The core weather functionality works out-of-the-box without any API keys!

📂 Project Structure

src/
├── components/        # Vue components
│   ├── canvas/        # WebGL/Three.js background effects
│   ├── weather/       # Weather visualization components (Graphs, Forecasts)
│   └── ui/            # Reusable UI elements (Cards, Buttons)
├── composables/       # Shared logic (Hooks)
├── stores/            # Pinia state stores
├── services/          # API integrations
├── styles/            # Global CSS & Tailwind config
└── utils/             # Helper functions & constants

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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