SkyCast is a modern, high-performance weather dashboard built with vanilla JavaScript. It offers a unique, state-of-the-art interface that goes beyond standard templates, providing a premium user experience with real-time data and fluid animations.
- Unique Design Language: A professional dashboard aesthetic using Glassmorphism and Bento Grid layouts.
- Dynamic Background System: The UI adapts its atmosphere based on the current weather conditions using deep, sophisticated gradients.
- Interactive Animations: Powered by GSAP (GreenSock Animation Platform) for smooth transitions and hover micro-interactions.
- Extended Metadata: Real-time tracking of wind speed, humidity, atmospheric pressure, and visibility (km).
- 5-Day Forecast: A quick-look horizontal preview of upcoming weather conditions.
- Location Intelligence: Use the "Locate Me" feature to get instantaneous weather updates for your current coordinates.
- Smart Search History: Saves your recently searched cities in
localStoragefor quick access. - High-Fidelity Iconography: Integrated with Lucide Icons for a crisp, modern visual style.
- Core: HTML5, CSS3, ES6+ JavaScript
- Animations: GSAP
- Icons: Lucide
- API: OpenWeatherMap API
- Typography: Outfit via Google Fonts
- Clone the repository.
- Open
index.htmlin your browser. - Search for any city to experience the dynamic transformation.
Unlike generic AI-generated templates, SkyCast focuses on visual depth and readability. We avoided aggressive neon colors in favor of a curated, professional color palette (Midnight Blue, Slate, and Sapphire) to ensure a premium feel even in challenging weather themes like "Snow".
Developed as part of a high-end JavaScript project portfolio.