🖥️ SUDHI OS v4.1 Pro

An interactive virtual desktop operating system — built as a developer portfolio

🌐 Live Demo · 👤 GitHub Profile · 📚 Documentation

---

🌟 Overview

SUDHI OS is a fully interactive, browser-based desktop operating system built with React 19 + TypeScript + Vite. It ships 32 functional applications, a Windows-grade window manager, live public-API integrations, and a neon cyberpunk design language — all running entirely client-side with zero backend.

It is the portfolio of Sudhir Singh (@SudhirDevOps1) — BCA student, DevOps & Full-Stack developer from Bihar, India.

Everything you see works. No fake placeholders, no dead buttons — every app responds, every toggle changes the system, every API is real, and the browser/YouTube/Games apps are genuinely functional (no API keys, no broken embeds).

---

✨ Feature Highlights

Domain	What you get
🪟 Window Management	Drag, resize (8 handles), minimize, maximize, always-on-top pin, premium custom window controls, Snap Layouts flyout, edge & corner quarter-snapping with live previews, Alt+Tab switcher
🚀 32 Applications	Terminal, AI Assistant, Browser (real embeddable web view), YouTube (plays any link, no API key), Games Arcade (unbeatable minimax Tic-Tac-Toe), Dev Toolbox, Typing Test, Focus Timer, News, Crypto, Weather, Space tracker, Maps, Countries, Paint, Music & Video players, Gallery, File Explorer, Notepad, Calculator, Calendar, Converter, and more — full list
⚡ Shell	Boot sequence, lock screen, sleep/shutdown states, Quick Settings panel, Notification Center with calendar, Command Palette with inline calculator, Start Menu with search + all apps
🎨 Premium Look	Real-OS gradient app icons, macOS-style dock with magnification, Liquid Glass widget panel, vector system tray, custom vector Start logo, animated aurora backdrop, Matrix rain, 7 accent themes, 8 gradient wallpaper presets, night light, real brightness dimmer, glassmorphism
🔊 Sound	Zero-asset WebAudio sound engine — window open/close/minimize/maximize, snaps, notifications, boot chime, master volume
🔌 Live APIs	GitHub, Hacker News, CoinGecko, Open-Meteo, REST Countries, USGS Earthquakes, ISS position, AdviceSlip — all with silent offline fallbacks
🕹️ Easter Eggs	Konami party mode, secret logo clicks, terminal hack animation, and more

---

🛠️ Tech Stack

React 19 · TypeScript 5.9 (strict) · Vite 7 · Tailwind CSS 4 · Framer Motion · Lucide Icons

• Package manager: pnpm (fast, disk-efficient)
• Build: vite-plugin-singlefile → one self-contained dist/index.html (~750 kB, deployable anywhere)
• State: React Context + hooks, localStorage persistence, reactive settings store
• No backend required — static hosting ready (GitHub Pages, Netlify, Vercel)

---

🚀 Quick Start

# 1. Clone
git clone https://github.com/SudhirDevOps1/SudhirDevOpsv1.github.io.git
cd SudhirDevOpsv1.github.io

# 2. Install dependencies (pnpm required — https://pnpm.io)
pnpm install

# 3. Start dev server → http://localhost:5173
pnpm dev

# 4. Production build → dist/index.html (single file)
pnpm run build

Full setup, configuration & deployment guide: docs/GETTING_STARTED.md

---

⌨️ Essential Shortcuts

Shortcut	Action
Ctrl + P or /	Command Palette (apps, math, system commands)
Alt + Tab	Switch windows
F1	Keyboard shortcuts & gestures overlay
Ctrl + Alt + Q	Quick Settings panel
Ctrl + Alt + N	Notification Center
Ctrl + L	Lock screen
Drag window → edge / corner	Snap half / quarter
Hover the maximize button	Snap Layouts menu
↑ ↑ ↓ ↓ ← → ← → B A	Konami party mode 🎉

---

📂 Project Structure

SudhirDevOpsv1.github.io/
├── src/
│   ├── App.tsx                  # Desktop shell, overlays, shortcuts
│   ├── main.tsx                 # Entry point
│   ├── data.ts                  # Static data, themes, wallpapers, icons
│   ├── iconMeta.tsx             # Real-OS per-app gradient icon registry
│   ├── index.css                # Design system + premium CSS layer
│   ├── context/OSContext.tsx    # Window manager, notifications, power state
│   ├── hooks/                   # useSystemSettings (reactive store hook)
│   ├── lib/                     # sysSettings store, sfx sound engine, storage
│   ├── types/os.ts              # Shared TypeScript contracts
│   └── components/
│       ├── common/              # Taskbar, StartMenu, WindowFrame, QuickSettings,
│       │                        # NotificationCenter, ToastStack, LockScreen, widgets
│       └── windows/             # 32 application components (lazy-loaded)
├── public/
│   ├── data/                    # 11 editable JSON data files
│   ├── image/                   # Logo & profile assets
│   ├── resume/                  # Resume PDF
│   └── wallpaper/               # Local wallpaper assets
├── docs/                        # 📚 All documentation
├── index.html                   # CSP, SEO, analytics
├── vite.config.ts               # React + Tailwind + singlefile
└── package.json                 # pnpm scripts & config

---

📚 Documentation

Document	Contents
FEATURES.md	Complete feature catalog — all 32 apps, 35+ terminal commands, shortcuts, easter eggs
GETTING_STARTED.md	Setup, development, build, deployment & troubleshooting
DATA_CONFIG.md	Edit the JSON data files — which ones are live-loaded and which are editable references
CHANGELOG.md	Version history — v2 → v3 → v4 → v4.1

---

📊 Live Data Integrations

Service	Used by	Failure mode
GitHub API	About, Projects	Cached fallback
Hacker News Firebase	DEV.WIRE news	Offline edition
CoinGecko	Crypto tracker, widget	Baked prices
Open-Meteo	Weather, widget	Static state
REST Countries	Globe explorer	Cached set
USGS Earthquakes	Space tracker	Last-known data
AdviceSlip	Wisdom generator	Local quotes

All network calls fail silently with catch(() => {}) — the console stays clean and the apps keep working offline.

---

👤 About the Author

Sudhir Singh — DevOps & Full-Stack Developer, Bihar, India

• 🐙 GitHub: @SudhirDevOps1
• ✉️ Email: SudhirDevOps100@gmail.com
• 🌐 Portfolio: sudhirdevopsv1.github.io

---

Built with ❤️, React, and far too much neon green

SUDHI OS v4.1 • 32 apps • 100% client-side • MIT License