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

说明与用途

一个轻量级、功能完整的个人作品集操作系统，采用无框架开发，具备严格的安全性和 SEO 优化。

问题

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

结果

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.

工作流

• 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.

证据

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

来源

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

来源

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

来源