mroot.co
This site. It runs as a normal marketing website and as a working IDE — same content, two presentations, switchable from the nav. Projects, writing, and profile data are authored as Markdown and YAML under a content folder, compiled to a typed data module by a small Vite plugin, and prerendered to static HTML with vite-react-ssg. IDE mode layers an explorer, tabs, a terminal, and a command palette over the same data. Built with React and TypeScript, deployed on Cloudflare Pages.
Case study: One content source, two sites: how mroot.co worksread →
01 — PROBLEM
A portfolio has to speak to two audiences at once — business owners who want plain outcomes, and developers who want to see how it's built.
02 — APPROACH
Built one site that renders in two modes from a single content source. The regular view is a clean marketing site; IDE mode is a working editor with an explorer, tabs, a terminal, and a command palette. Projects and writing are Markdown files compiled at build time.
03 — OUTCOME
Every project page works in both modes with no duplicated content. Adding a project is one Markdown file. The whole site is prerendered to static HTML and served from the edge.