🖥️ WebOS – Browser-Based OS Portfolio

A full desktop operating system experience — right inside your browser. Built by Avinash Walton

---

✨ What Is WebOS?

WebOS is an interactive portfolio website designed to look and feel like a real desktop operating system. Instead of a boring scrollable page, visitors get a full desktop experience with:

• 🖱️ Draggable, resizable, minimizable & maximizable windows
• 📂 A Start Menu with app launcher
• 🖥️ Animated Boot Screen → Lock Screen → Desktop flow
• 🔔 Live clock, taskbar, notifications & right-click context menu
• 🎨 Wallpaper switcher, Notepad, Terminal, Music Player and more

---

🚀 Features

Feature	Description
🟢 Boot Screen	Animated OS boot sequence on every visit
🔒 Lock Screen	Live clock lock screen — click to unlock
🪟 Window System	Open, drag, resize, minimize, maximize, close windows
📌 Taskbar	App buttons, system tray, live clock
⊞ Start Menu	Searchable app launcher
💻 Terminal	Working command-line with real commands
🚀 Projects	Project cards with live & GitHub links
⚡ Skills	Animated skill progress bars
📬 Contact	All social media links in one window
📝 Notepad	Persistent notepad (saved to localStorage)
🎵 Vibes Player	Fake music player with track switching
🎨 Wallpaper	6 built-in wallpapers to switch
🔔 Notifications	Toast notifications for system events
📱 Responsive	Works on mobile (touch drag supported)
🔍 SEO Optimized	Meta tags, OG tags, JSON-LD structured data
⌨️ Keyboard Shortcuts	F1 (About), F2 (Terminal), Ctrl+Esc (Lock)

---

🗂️ Terminal Commands

Open the Terminal window and type:

help        → Show all commands
about       → About Avinash Walton
projects    → List all projects
skills      → Show skill set
social      → Social media links
open [app]  → Open any app window
date        → Current date & time
whoami      → Who is this?
github      → Open GitHub profile
matrix      → 🤫 Easter egg
clear       → Clear terminal

---

🛠️ Tech Stack

• HTML5 – Structure
• CSS3 – Glassmorphism, animations, CSS variables, responsive design
• Vanilla JavaScript – Window management, drag/resize, terminal, all logic
• Google Fonts – Space Mono + Syne
• Zero dependencies – No frameworks, no libraries, pure web

---

📁 File Structure

webos/
│
├── index.html       ← Everything in one file (HTML + CSS + JS)
├── README.md        ← This file
├── LICENSE          ← MIT License
└── og-image.png     ← (Optional) Open Graph preview image

---

🔧 Customization Guide

Add Your Projects

Edit the PROJECTS array inside <script> in index.html:

const PROJECTS = [
  {
    ico: '🌐',
    name: 'Your Project Name',
    tech: 'HTML · CSS · JS',
    desc: 'Short description of your project.',
    live: 'https://your-live-link.com',
    github: 'https://github.com/YourUsername/repo'
  },
  // Add more...
];

Add New App Windows

APPS['myapp'] = {
  title: 'My App',
  ico: '🎯',
  w: 500, h: 400,
  build: (body) => {
    body.innerHTML = `<div class="win-content">Hello World!</div>`;
  }
};

Add Terminal Commands

termCommands['mycommand'] = () => `This is my custom command output!`;

---

🚀 Deployment (GitHub Pages)

1. Fork or clone this repository
2. Customize index.html with your own info
3. Push to GitHub
4. Go to Settings → Pages → Source: main branch / root
5. Your WebOS is live at https://yourusername.github.io/webos/

---

📸 Screenshots

(Add screenshots of Boot Screen, Desktop, Start Menu, Terminal here)

---

🔗 Connect With Me

Platform	Link
▶ YouTube	@AvinashWalton
📸 Instagram	@AvinashWalton
✕ Twitter/X	@AvinashWalton
🧵 Threads	@AvinashWalton
📘 Facebook	@AvinashWalton
💼 LinkedIn	Sonu Kumar Suman
🐙 GitHub	AvinashWalton

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

Made with ❤️ in India by Avinash Walton