Systems Witch is a single-page React application compiled by Vite and served entirely as static files. There is no backend, no server-side rendering, and no redirect configuration required on the host. The entire UI is driven by a single root component that mounts a persistent shell — scanline overlay, sidebar navigation, content area, and terminal footer — and delegates the inner content slot to React Router. Every page is a self-contained component rendered inside that shell; only the content area changes as the user navigates.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/systems-witch/llms.txt
Use this file to discover all available pages before exploring further.
App Layout
The root layout component (te in the compiled bundle, exported as the Layout element in the route tree) wraps everything in a flex min-h-screen bg-black text-bone container. Four direct children compose the full viewport:
| Layer | Component | Position | z-index |
|---|---|---|---|
| CRT scanline effect | ScanlineOverlay | fixed inset-0 | 50 (mix-blend-overlay) |
| Sidebar navigation | FilesystemNav | fixed → md:sticky, w-64 | 40 |
| Page content | <main> (flex-1, max-w-5xl) | normal flow | 10 |
| Status bar | TerminalFooter | fixed bottom-0 | 30 |
<main> element carries overflow-x-hidden and pads its inner max-w-5xl mx-auto container at p-6 md:p-12 lg:p-16. The router outlet (<Outlet />) is rendered inside this container, so every page automatically receives consistent horizontal margins and maximum width constraints.
Render Tree
AnimatePresence mode="wait" ensures the outgoing page fully completes its exit animation before the entering page begins its entrance animation. Each page component wraps its content in a <PageTransition> component, which provides the per-page Framer Motion variants (a CRT-style scale + opacity sequence). Together, these two mechanisms gate every route change behind a clean transition with no overlapping frames.
Build Output
Vite compiles all application source into four static assets loaded by every HTML shell:| File | Contents |
|---|---|
assets/main.js | All React page and component code (bundled + minified) |
assets/main.css | Tailwind CSS output + all custom CSS (glitch animations, scanlines, ASCII borders) |
assets/jsx-runtime.js | React JSX transform runtime |
assets/proxy.js | Framer Motion (m, motion) + React Router re-exports |
index.html) and in pages/ (About.html, Projects.html, etc.) are thin shells: they load the four assets above, define a <div id="root">, and inject a small inline script that sets window.__STATIC_PAGE_ROUTE__ to the route string for that page, then redirects the browser to the correct hash fragment on direct load.
Components
Reference for every shared UI component — props, animations, and usage examples.
Routing
How hash-based routing works, the full route table, and how to add new routes.
Home Page
The boot animation, hero sigil, and HomeView component deep-dive.