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.

Источник