Digital Domain is a pre-built React SPA whose compiled output is committed directly to the repository root, making it deployable to any static host without an additional build step. The directory layout separates the Vite-generated bundle (Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt
Use this file to discover all available pages before exploring further.
assets/), the hand-authored ES-module UI components (components/), and shallow HTML stubs for each page (pages/) that allow GitHub Pages to serve direct URL paths without a redirect server.
Directory Tree
Top-Level Files and Directories
index.html — The HTML entry point. It contains a single <div id="root"> that React mounts into, loads assets/main.js as a standard ES module, preloads assets/proxy.js and every components/*.js file via <link rel="modulepreload">, and imports the compiled stylesheet. All React Router routes are served from this single file in production.
.nojekyll — An empty file that tells GitHub Pages to bypass its built-in Jekyll static site generator. Without it, Jekyll would interfere with the assets/ path resolution, breaking the deployed site.
README.md — The project readme.
assets/ — Contains the three compiled files that form the full SPA: the main bundle (main.js), the shared React and Framer Motion chunk (proxy.js), and the compiled stylesheet (main.css). These files are committed to the repository so the site can be deployed without a separate build step.
components/ — A collection of pre-authored ES-module files, each exporting one or more React components. Because these files are listed as modulepreload targets in index.html, the browser fetches them in parallel with the main bundle, eliminating waterfall latency on first load.
pages/ — A folder of minimal HTML stubs, one per route. Each stub loads the same assets/ files as index.html and runs a small inline script that sets window.location.hash to the correct route path so React Router renders the right page when the stub URL is loaded directly (for example, from a bookmark).
Component Reference
components/Layout.js
The app shell component. It renders the sticky Win98-style header containing the navigation bar, the div.scanlines CRT overlay, and the React Router <Outlet> where page content is injected. The navigation links are driven by the sd array:
components/Window.js
Exports the Window component (W). Wraps any children in a draggable Win98 window frame with a title bar and three Lucide-icon control buttons (minimize, maximize, close). Key props:
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Text displayed in the Win98 title bar |
children | ReactNode | — | Content rendered inside the window body |
defaultPosition | { x, y } | { x: 0, y: 0 } | Initial position of the draggable window |
defaultSize | { width, height } | { width: 400, height: "auto" } | Initial dimensions |
onClose | () => void | — | Callback fired when the close button is clicked |
icon | ReactNode | — | Optional icon rendered before the title text |
zIndex | number | 10 | CSS z-index applied to the window container |
onFocus | () => void | — | Callback fired when the window receives a mousedown event |
className | string | "" | Additional CSS classes applied to the window container |
components/Marquee.js
Exports the Marquee component (M). Scrolls a text string horizontally across its container on an infinite Framer Motion loop.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text content to scroll |
speed | number | 20 | Animation duration in seconds for one full scroll pass |
className | string | "" | Additional CSS classes applied to the outer container |
components/BeveledButton.js
Exports the BeveledButton component (B). A Win98-style button that applies an inset box-shadow on press.
| Prop | Type | Default | Description |
|---|---|---|---|
active | boolean | — | When true, applies the pressed (inset) shadow immediately |
children | ReactNode | — | Button label content |
className | string | "" | Additional CSS classes |
...rest | — | — | All other props are forwarded to the underlying motion.button element |
components/HitCounter.js
Exports the HitCounter component alongside the React Router, routing context, and hash-history utilities that power the SPA’s client-side navigation. The HitCounter itself renders an animated digit-flip display styled as a classic 2000s webpage visit counter.
How the Pre-Built Output Works
Theassets/ directory contains the compiled output of a Vite build. The original JSX source files are not committed to this repository — only the bundled result is present. The relationship between the committed files is:
components/*.js files are not produced by the build — they are hand-authored ES modules. assets/main.js imports from them at runtime using relative paths (e.g., ../components/Layout.js).
The
pages/*.html stubs are not part of the React Router route tree. React Router uses hash-based client-side routing: all navigation happens entirely in the browser by changing window.location.hash. The stubs exist solely so that a user who bookmarks or directly visits a URL like pages/About.html on GitHub Pages will still land on the correct page — the inline script in each stub sets window.location.hash to the matching route (e.g., /about) before React boots, and React Router then renders the right component.