J.A.R.V.I.S. — Iron Man-Inspired Live Intelligence Dashboard for Students

Project Title

J.A.R.V.I.S. — Iron Man-Inspired Live Intelligence Dashboard for Students

Overview

A fully interactive, real-time student productivity dashboard styled after Tony Stark's J.A.R.V.I.S. AI interface from the Iron Man films. The project combines a futuristic "hacker HUD" aesthetic with genuinely useful live data feeds, AI-powered features, and voice interaction — built first as a web app, then packaged as a Chrome browser extension.

Key Features

Visual Design

  • Dark, cyan-on-black "command center" theme with animated scan lines, grid overlays, glowing borders, and flickering text effects

  • A custom animated central orb (canvas-based) representing JARVIS — with rotating arc segments, pulsing plasma tendrils, and orbiting energy particles that react dynamically to whether JARVIS is speaking, listening, or idle

  • Real-time digital clock, system status indicators (ARC reactor, shield, network), and circular progress gauges styled like sci-fi HUD readouts

Live Information Panels

  • Auto-refreshing world news ticker and headline feed

  • Live weather lookup for any city worldwide, with temperature, humidity, wind, and "feels like" data

  • Tech & AI news feed

  • Science & space discovery feed

  • "On This Day in History" panel

  • Rotating exam/study tips panel with study-method tags (Pomodoro, Active Recall, Feynman Technique, etc.)

Interactive AI Assistant

  • A conversational AI chat agent (styled as JARVIS) that could answer questions using live web search

  • Text-to-speech voice output so JARVIS could "speak" summaries and responses aloud, with voice tuned for a calmer, more human-like tone

  • Speech-to-text voice input, so the orb could be tapped to talk to JARVIS hands-free

Productivity Tools

  • A built-in Pomodoro-style study timer with Focus/Short Break/Long Break modes, animated circular countdown, and session tracking

Browser Extension Packaging

  • Converted the dashboard into a Chrome extension structure (manifest, popup, background script) so it could be launched directly from the browser toolbar as a standalone "app-like" window

My Role

Designed the full UI/UX concept and visual theme, built all interactive components (timer, chat, voice, live data panels), implemented the animated canvas graphics for the JARVIS orb and waveform visualizer, and structured the project for browser-extension deployment.

Tech Stack

React, HTML5 Canvas, Web Speech API (speech synthesis & recognition), CSS animations, Chrome Extension (Manifest V3) architecture, AI/LLM integration with web search capability.