VS Code Portfolio

A developer portfolio that is a working recreation of VS Code, and the twist is that every file in the Explorer is the site's own source code. Visitors can browse the real components that render the page around them, read your blog, see your latest GitHub activity, and sign a guestbook with their GitHub account.

Built with React, Vite, and the real Monaco editor. Deploys to Cloudflare.

Features

• Self-referential file tree. The Explorer shows this repo's actual source, loaded at build time with Vite's ?raw glob. Open a file and you are reading the component that drew it, in a real Monaco editor.
• Welcome page in markdown. src/content/welcome.md renders through the markdown pipeline with custom widgets (<profile>, <cards>).
• Blog. Drop a markdown file into src/content/blog/ and it becomes a post, with a Blog panel and a Welcome card that appear automatically.
• GitHub activity panel. The Source Control tab shows your recent public activity and repositories (no token, uses the public API).
• Credits panel. The Extensions tab lists the open-source projects the site is built on, plus contributors.
• Guestbook. A Sign tab where visitors sign in with GitHub and leave a message. Runs on a Cloudflare Worker + D1 (optional, off until configured).
• SEO + social image. Meta tags, robots.txt, sitemap.xml, and an Open Graph image generated from your config (npm run seo:build).
• Command palette (Ctrl/Cmd + P), a fake integrated terminal, image viewer, and the usual VS Code chrome.

Quick start

npm install
npm run dev

Then open the printed local URL.

Make it yours

What	Where
Name, tagline, GitHub handle	src/config.ts
Enable or disable features	src/config.ts (the FEATURES object)
About, Projects, Résumé, Contact	src/content/*.md
Welcome page	src/content/welcome.md
Blog posts	src/content/blog/*.md
Page title and social meta	index.html
Theme colors	src/theme.css (CSS variables at the top)
Social preview image	run npm run seo:build after editing config

Set GITHUB_USERNAME in src/config.ts to light up the avatar and the Source Control panel.

Deploying

The site deploys to Cloudflare (Workers static assets or Pages). The guestbook needs a GitHub OAuth app, a D1 database, and two secrets. Full steps, including the custom domain and guestbook setup, are in DEPLOY.md.

npm run deploy   # after `wrangler login`

How the self-reference works

src/fileSystem.ts uses import.meta.glob(..., { query: "?raw" }) to inline the text of every source file at build time, then builds a tree the Explorer and Monaco render. Images use ?url instead. That is the whole trick.

License

MIT. Use it, fork it, make it yours.