dvxb.io — Devkumar Banerjee

Personal portfolio featuring a browser-based x86 virtual machine, retro terminal UI, and interactive shell with 25+ commands.

Features

• Interactive terminal — Built with xterm.js. Supports 25+ commands (whoami, neofetch, cat, ls, vm, echo, clear, history, crt, noise, weather, hn, md, about, fortune, cowsay, matrix, ai, etc.) with ANSI truecolor output, tab completion, command auto-correction, and a virtual filesystem.
• x86 VM in browser — Uses the v86 WebAssembly emulator to boot a Buildroot Linux image. Runs in the terminal with full serial console. Type vm to start.
• Neofetch-style dashboard — Displays ASCII art (pixel portrait), system info, resume highlights (education, research, work, skills, certs), and a 16-color block palette on boot and via neofetch / cv.
• Local AI assistant — Type ai <prompt> to run Transformers.js (WASM/WebGPU) models directly in-browser. No server round-trip. ai-models lists available models.
• Thought orbs — Dotted 3D marks on a plain 2D canvas, ported from thinking-orbs (MIT). A scan-sweeping globe shows while an ai model downloads, then an undulating ribbon tumbles while it generates; the mark in front of dvxb.io in the nav bar is a lattice sphere that scrambles and clicks back to solved. Both pause offscreen and fall back to a static frame under prefers-reduced-motion.
• Hacker News reader — hn fetches and displays the top 30 HN stories with scores and comment counts in a formatted ANSI table.
• Weather forecast — weather fetches your location (browser geolocation or IP fallback) and displays current conditions from Open-Meteo. -f for Fahrenheit.
• Markdown viewer — md <url> opens any markdown URL in a fullscreen rendered viewer (marked + DOMPurify, dark theme, GFM).
• CRT / noise overlays — crt toggles scanline overlay, noise toggles SVG turbulence grain texture for a retro CRT feel.
• Buildroot Linux VM — Boots a real Linux kernel inside the terminal. Networking via HTTP fetch backend (no raw TCP). 9p virtio filesystem mounts /mnt from a static rootfs.
• 3D particle background — Three.js GPU-accelerated particle system with connection lines, mouse interaction, and shader-based rendering.
• Scroll animations — Anime.js powers section reveals on scroll, social link hover effects, skill bar fill animations, and magnetic text.
• Aura orbs — Floating blurred radial gradients that drift behind content sections via CSS animations.
• Projects section — 4 spotlight cards (TheAggieMap, PCPG Analyzer, Doctor-Robot/TIDALHack, Neural-Networks-From-Scratch) with 3D tilt hover, shimmer sweep, and "View More on GitHub" links.
• Generated resume pages — /resume, /cv, and /man/ (a man-page styled resume plus the dvxb.io(7) site manual) are built in CI from the private Full-CV TeX source via a custom LaTeX→HTML parser. assets/resume.pdf and assets/cv.pdf are compiled with Tectonic — nothing resume-related is committed.
• Contact section — GitHub, LinkedIn, Keybase, resume/CV (HTML + PDF), and GPG public key download.
• Responsive design — CSS token-based design system with mobile breakpoints.

Architecture

Project Structure

├── index.html              Main page
├── css/
│   ├── tokens.css          Design tokens (colors, spacing, typography)
│   ├── base.css            Reset, global styles
│   ├── components.css      Section styles (hero, projects, contact, etc.)
│   ├── layout.css          Grid, sidebar, footer
│   ├── terminal.css        Terminal container, xterm overrides
│   ├── doc.css             Generated resume/man page styles
│   └── responsive.css      Media queries
├── js/
│   ├── main.js             Entry point — initializes all modules
│   ├── terminal.js         xterm.js setup, mode switching (local/v86)
│   ├── shell.js            Virtual filesystem, command handler, neofetch, ASCII art
│   ├── v86-launcher.js     v86 config, boot/stop VM, serial I/O
│   ├── three-particles.js  Three.js particle system
│   ├── animations.js       Anime.js scroll reveals, hover effects, skill bars
│   ├── orb.js              Dotted thought-orb marks (nav bar + AI status)
│   └── nav.js              Section navigation, scroll spy, mobile menu
├── tools/
│   ├── tex2html.mjs        Custom LaTeX → HTML parser (throws on unknown macros)
│   ├── roff2html.mjs       Man page (roff) → HTML renderer
│   ├── build.mjs           Generates resume.html, cv.html, man/ from Full-CV
│   └── build-pdf.mjs       Compiles assets/*.pdf with Tectonic
├── templates/
│   ├── shell.html          Themed page template (particles + glass nav)
│   └── man.html            Terminal-style template for man pages
├── assets/
│   ├── resume.pdf          Generated by build-pdf.mjs (not committed)
│   ├── cv.pdf              Generated by build-pdf.mjs (not committed)
│   ├── gpg.asc             GPG public key
│   └── v86/
│       ├── v86_all.js      v86 emulator library
│       ├── v86.wasm        v86 WebAssembly binary
│       ├── seabios.bin     BIOS firmware
│       ├── vgabios.bin     VGA BIOS firmware
│       ├── buildroot-bzimage.bin  Buildroot Linux kernel + initrd
│       ├── 9p-rootfs/      9p virtio shared filesystem
│       │   ├── src/        Source files for rootfs
│       │   ├── out/        Generated fs.json + .bin blobs
│       │   └── rebuild.sh  Regenerate out/ from src/
│       └── cors-proxy-worker.js  Cloudflare Worker for VM HTTP networking
└── dvxb.io.7               Man page source for /man/dvxb.io.7

Generated Pages (tools/, templates/)

resume.html, cv.html, man/index.html, and man/dvxb.io.7.html are generated from the private aptitudepi/Full-CV repo and committed nowhere — they exist only inside the Pages artifact.

• tools/tex2html.mjs parses the Full-CV macros (\resumeItem, \resumeSubheading, \section, inline math, itemize, …). It throws a TexParseError on anything it can't render, which lets CI detect content the parser has grown out of sync with.
• tools/roff2html.mjs renders dvxb.io.7 into a terminal-styled man page.
• tools/build.mjs wraps each body in templates/shell.html (particles + glass nav) or templates/man.html (terminal theme). FULL_CV_DIR points at the checkout.
• tools/build-pdf.mjs strips the pdfTeX-only lines (\pdfgentounicode, \input{glyphtounicode}) and compiles assets/resume.pdf/assets/cv.pdf with Tectonic.

Terminal Shell (js/shell.js)

• Virtual filesystem — A Map of paths to content strings (e.g., /home/devkumar/about.txt). Supports cat and ls.
• Commands (25+): whoami, hostname, date, uptime, pwd, uname, cat, ls, echo, clear, neofetch, resfetch, about, fortune, cowsay, help, history, crt, noise, weather, hn, md, cv, matrix, vm, ai, ai-models
• Neofetch — Renders ASCII art alongside system and resume info lines. The art is a 52-row pixel portrait with per-pixel ANSI true color.
• Boot sequence — On page load, prints simulated kernel messages, then runs neofetch and shows the prompt.
• Auto-correction — Mistyped commands are caught with Levenshtein distance ≤ 2 and suggest the closest match.
• Tab completion — Tab cycles through command names, VFS paths, and ./-prefixed files. Bell on no match.
• Command history — Up/down arrows cycle through previous commands. history prints the full list.

x86 VM (js/v86-launcher.js)

• Uses the V86 constructor with WASM, a 64MB heap, NE2000 network via fetch backend, 9p filesystem from a static JSON manifest, and BIOS/VGA BIOS/kernel images.
• Serial I/O: serial0-output-byte callback writes to xterm, serial0-input sends keystrokes (including control characters) from the terminal.
• Ctrl+C, Ctrl+D, and other control codes pass through to the VM's serial port.
• The 9p host9p on /mnt boot message is cosmetic — the mount succeeds despite the duplicate-attempt warning.

Networking

• The VM uses the v86 fetch network backend, which proxies HTTP/HTTPS through the browser's fetch() API.
• A Cloudflare Worker (cors-proxy-worker.js) deployed at 0.supernovadkb.workers.dev acts as a CORS proxy, restricted by origin allowlist (dvxb.io, *.dvxb.io, localhost:*).
• Only HTTP/HTTPS is supported — raw TCP (telnet, SSH) is not available due to browser fetch() limitations.

3D Particles (js/three-particles.js)

• Renders 600 particles with velocity, age, and seed attributes per vertex in a custom BufferGeometry.
• Two shader programs: update (position/velocity integration) and render (smooth circles with fading).
• Mouse hover creates a repulsion/attraction force. Connection lines drawn between nearby particles.
• Uses a GPU transformFeedback pattern for all computation on the GPU — no CPU physics loop.

Animations (js/animations.js)

• reveal elements fade up in a staggered cascade via IntersectionObserver.
• Skill bars animate from 0 to target width with Anime.js scale transforms.
• Social links spring-scale on hover.
• Magnetic text — Section headings subtly shift toward cursor with lerped spring physics via requestAnimationFrame.
• Aura orbs — Per-section ::before/::after radial gradients with filter: blur(60px) and slow CSS drift animation.
• Galaxy button circle-morph — Contact buttons morph from circle to full-width on click with Anime.js.
• MagicCard 3D tilt — Project cards rotate toward cursor with spring physics, sibling dimming, and shimmer sweep.

CSS Architecture

Token-based design: tokens.css defines color palette (slate-gray, blue, violet, green), spacing scale (4px base), font stack, and breakpoints. Component styles import these tokens via CSS custom properties.

Running Locally

python3 -m http.server 8000
# Open http://localhost:8000

No build step required for the main page — the site uses ES module <script type="module"> natively.

To regenerate the resume/CV pages locally (needs a Full-CV checkout beside this repo):

bun tools/build.mjs

This writes resume.html, cv.html, and man/ (all gitignored). The PDF build additionally needs tectonic on the PATH:

VM Filesystem

The 9p rootfs is compiled from assets/v86/9p-rootfs/src/. After modifying source files:

cd assets/v86/9p-rootfs
./rebuild.sh

This regenerates out/fs.json and out/*.bin (content-addressed blobs).

Deployment

Deployed via GitHub Pages from the main branch with a custom domain (dvxb.io) and CNAME record. The Pages artifact is built entirely in CI — static.yml checks out aptitudepi/Full-CV (needs the FULL_CV_PAT secret, a fine-grained PAT with Contents: Read on that repo only), runs the generators, and uploads the result. A daily schedule rebuilds so the resume/CV track Full-CV changes without a site push.

After each successful deploy, CI generates sitemap.xml from tools/site-urls.mjs, publishes an IndexNow key file from the INDEXNOW_KEY secret, and POSTs that same URL list to api.indexnow.org (Bing, Yandex, and other partners — not Google). Committed robots.txt points crawlers at the generated sitemap for every engine, including Google.

---

Built with v86, xterm.js, Three.js, Anime.js, and Cloudflare Workers.