I built my portfolio as an operating system, with no framework

Description and use

A lightweight, fully functional portfolio OS built without frameworks, featuring strict security and SEO optimizations.

Problem

Showcase skills in a functional, framework‑free web app while keeping the site lightweight, secure, and SEO‑friendly.

Outcome

A lightweight, fully functional portfolio OS that runs in a single browser tab, offers real applications, and adheres to strict security and SEO best practices.

Workflow

• 1. Write portfolio content as plain HTML/CSS/JS modules.
• 2. Bundle with esbuild into one file, keeping only build‑time dependencies.
• 3. Implement custom window system using <template> cloning and CSS state classes.
• 4. Use Pointer Events for drag/resize/swipe across input types.
• 5. Create a shared virtual filesystem for terminal, explorer, and notes apps.
• 6. Add a service worker that serves bundles with content‑hashed URLs to avoid stale cache bugs.
• 7. Enforce same‑origin policy with a strict Content‑Security‑Policy header; pin inline scripts with SHA‑256 hashes and test for hash changes.
• 8. Implement a public chat room with server‑side sanitization and rate limiting.
• 9. Add SEO and GEO optimizations: FAQPage JSON‑LD, AI‑specific files, linked JSON‑LD graph, dateModified from git log, and remove noindex/nofollow tags.
• 10. Deploy to Vercel and host source on GitHub.
• 11. Verify functionality and security through manual testing and automated build checks.

Evidence

Vanilla JavaScript in ES modules, bundled by esbuild into a single file.

Source

A service worker with content‑hashed bundle URLs… makes that specific class of bug structurally impossible.

Source

Only two things call out to anything else… the API key never reaches the browser.

Source