╔════════════════════════════════════════════════════════════════════════════╗
║                                                                            ║
║   ██╗  ██╗██╗  ██╗   ██╗██╗  ██╗ ██████╗ ███████╗                          ║
║   ██║  ██║██║ ██╔╝  ██╔╝██║ ██╔╝██╔═══██╗██╔════╝                          ║
║   ███████║█████╔╝  ██╔╝ █████╔╝ ██║   ██║███████╗   //                     ║
║   ██╔══██║██╔═██╗ ██╔╝  ██╔═██╗ ██║   ██║╚════██║                          ║
║   ██║  ██║██║  ██╗██╔╝  ██║  ██╗╚██████╔╝███████║                          ║
║   ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝   ╚═╝  ╚═╝ ╚═════╝ ╚══════╝                          ║
║                                                                            ║
║              cosmic brutalism · futuristic operating system                ║
║                                                                            ║
╚════════════════════════════════════════════════════════════════════════════╝

An interactive developer showcase built like a secret AI lab. Pure HTML/CSS/JS. Zero frameworks. GitHub Pages ready. Designed to make you double-take, inspect the source, and copy something useful.

---

▓ DEMO

▸ live   ·  https://gaganchauhan1997.github.io/hackknow-os/
▸ status ·  ONLINE · 60fps · mobile-tuned
▸ size   ·  ~38 KB of HTML/CSS/JS · no build step

---

▓ FEATURES — what makes this not a portfolio

Cinematic loader

• 3D nested ring logo with brutal core
• Animated boot sequence with realistic AI/edge logs
• Frame-driven progress, randomized log levels
• Smooth reveal into the main interface

Cosmic background engine

• ~280 procedural stars (yellow/cyan/magenta/white) with twinkle + parallax
• ~160 cosmic dust particles with mouse repulsion physics
• 7 nebula clouds that drift on independent sine paths
• Mouse-driven radial glow blended via screen
• All on one canvas. No Three.js. No deps. GPU-friendly.

Custom cursor system

• Dual-layer cursor (snap dot + lag ring)
• Context-aware morph: links/buttons/cards all get unique sizes/colors
• Spark trail canvas — emits hue-shifted particles on movement
• Galaxy mode intensifies spark output 4×

3D tilt + magnetic hover

• data-tilt rotates cards in 3D based on mouse position
• magnetic buttons follow the cursor inside their bounds
• Each tilt sets --mx / --my CSS vars so hover glows track too

Interactive terminal

• Real keyboard input · command history · Tab autocomplete · arrow keys
• 20+ commands: help, projects, vision, matrix, ai, kernel, etc.
• ASCII boot banner, log levels (ok/warn/err), clickable virtual links
• Hidden kernel command unlocked only by the Konami code

Command palette

• VSCode-style overlay. Press / or ⌘K
• Filterable list: jump to sections, toggle modes, open external links
• Full keyboard nav (↑↓↵ESC)

Keyboard shortcuts

Key	Action
T	Open terminal
/ or ⌘K	Open command palette
M	Toggle ambient cosmic drone
G	Toggle galaxy mode
Shift+Space	Toggle cinematic letterbox
ESC	Close any open overlay
↑↑↓↓←→←→BA	Unlock developer mode

Ambient audio (WebAudio synth, no files)

• 5-voice drone (A1, A2, C#3, A3, E4) with per-voice LFO
• Type sounds in terminal · UI beeps on modal open/close
• Pure synthesis. Zero asset weight.

Modes

• Default — clean, readable, fast
• Galaxy — saturated palette, 4× spark density, animated text glow
• Cinematic — 10vh letterbox bars + caption overlay

Live UI

• Animated stat counters · animated skill bars with diagonal stripes
• Scroll-driven reveals via IntersectionObserver
• Sticky scroll progress bar with yellow→magenta→cyan gradient
• Fake notification drip — products shipping, blogs posting, latency pings
• Real-time IST clock in the navbar
• FPS + mouse-coord HUD widgets in corners

---

▓ KEYBOARD-FIRST PHILOSOPHY

The site is fully navigable via keyboard. Every modal traps focus, ESC always closes, and the command palette resolves to any section or action in two keystrokes. Try the terminal — it's the fastest interface.

---

▓ STACK

Layer	Technology
Markup	Vanilla HTML5
Styling	Pure CSS · custom properties · radial-gradient
Logic	Vanilla JS · ES2020 · IIFE module pattern
Graphics	Canvas 2D API · requestAnimationFrame
Sound	Web Audio API · procedural drone
Fonts	Space Grotesk · JetBrains Mono · Bebas Neue
Deploy	GitHub Pages · zero build step

No frameworks. No bundler. No npm install. Just open index.html.

---

▓ STRUCTURE

hackknow-os/
├── index.html         all markup · semantic · accessible
├── style.css          design system + component styles
├── script.js          ~750 lines of interactive systems
├── README.md          you are here
├── LICENSE            MIT
├── .github/
│   └── workflows/
│       └── pages.yml  auto-deploy on push to main
└── assets/
    ├── icons/         decorative SVGs (optional)
    ├── textures/      noise overlays (optional)
    ├── fonts/         self-hosted fallback (optional)
    └── screenshots/   readme previews (optional)

---

▓ RUN LOCALLY

# clone
git clone https://github.com/gaganchauhan1997/hackknow-os.git
cd hackknow-os

# option A — just open it
open index.html         # macOS
xdg-open index.html     # linux
start index.html        # windows

# option B — serve it (avoids CORS edge cases with Web Audio in some browsers)
python3 -m http.server 8080
# or
npx serve .

Then visit http://localhost:8080.

---

▓ DEPLOY TO GITHUB PAGES

This repo includes .github/workflows/pages.yml — push to main and Pages auto-deploys. Manual setup:

1. Go to Settings → Pages
2. Source: GitHub Actions (or Deploy from branch → main → /)
3. Save · wait ~60s · visit https://<user>.github.io/hackknow-os/

---

▓ CUSTOMIZE

Change the brand

• Replace GAGAN CHAUHAN, HACKKNOW//OS, social links in index.html
• Swap the color tokens at the top of style.css:

  --yellow: #FFD60A;   /* primary action */
  --magenta:#FF006E;   /* accent */
  --cyan:   #00F0FF;   /* highlight */
  --violet: #B026FF;   /* cosmic */

• Swap stat targets and skill percentages — they animate in automatically

Add a new section

• Drop a new <section class="section" id="..."> into index.html
• Add it to the nav <ul class="nav-links"> and the PAL_ITEMS array in script.js
• Cards inherit the brutal style by adding class="brutal-card reveal"

Add a terminal command

• Add a function to TERM_CMDS in script.js:

  myCmd(args) {
    termPrint('key', '▸ MY OUTPUT');
    termPrint('ok', '  the command ran with: ' + args);
  }

• Add it to the help listing for discoverability

---

▓ PERFORMANCE

• Canvas draws clamp at devicePixelRatio 2 to avoid 4K thrash
• prefers-reduced-motion disables canvas + transitions
• Touch devices auto-skip cursor, tilt, magnetic, and spark trail
• IntersectionObserver gates reveal & skill bar animations
• All event listeners are passive where possible
• Heavy widgets (hud-corner) hide below 900px
• FPS counter is visible top-right of the canvas HUD

Targets: 60fps on M1 / mid-tier Android · LCP <1.5s on slow 3G.

---

▓ ACCESSIBILITY

• Fully keyboard-navigable
• Focus styles preserved on form inputs
• aria-hidden on decorative canvas / vignettes
• aria-modal + role="dialog" on terminal and palette
• aria-live="polite" on notification container
• Honors prefers-reduced-motion system setting

---

▓ CREDITS

• Type by Space Grotesk (Florian Karsten) & JetBrains Mono (JetBrains) & Bebas Neue (Dharma Type) via Google Fonts
• Headline waving banner by Capsule Render
• Typing SVG by readme-typing-svg
• Inspired by Organism · Vercel · Linear · Spline · Raycast · Stripe Press

---

▓ CONTRIBUTING

Forks welcome. PRs welcome. If you ship a remix, send it — I'll feature it.

1. Fork
2. git checkout -b feat/your-thing
3. Commit & push
4. Open a PR with a short description and a screenshot/GIF

Style: keep it vanilla. No dependencies unless they earn their bytes.

---

▓ LICENSE

MIT © 2026 Gagan Chauhan

Use it. Remix it. Ship faster. Don't claim it's yours.

---

BUILDING INTELLIGENT SYSTEMS BEYOND IMAGINATION
▸ for India 🇮🇳 ▸ in the open ▸ at edge speed

hackknow.com · yexcel · yfinder · github · x · hello@hackknow.com