Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/witch-dev/llms.txt

Use this file to discover all available pages before exploring further.

witch-dev is a fully static React application. Vite compiles the entire site — React components, Framer Motion animations, Tailwind utility classes, and React Router hash-routing — into a self-contained directory of plain HTML, CSS, and JavaScript. No server-side rendering, no serverless functions, just files you can drop onto any static host.
The witch-dev repository hosted on GitHub is the compiled output — it is what Vite’s build produces, pushed directly to GitHub Pages. If you are using witch-dev as a portfolio template, you would work from the original Vite source project (which contains package.json, vite.config.js, src/, etc.) and push only the build output to your deployment branch. The commands below (npm run build, npm run preview) apply to that source project.

​
Prerequisites

Before running a production build, ensure you have:
  • Node.js 18+ — node --version should return v18.x or higher
  • npm 9+ — npm --version should return 9.x or higher
  • All dependencies installed (npm install)

​
Build command

1

Run the production build

From the project root, execute:
npm run build
Vite reads your source files, bundles all JavaScript modules, processes Tailwind CSS, and writes the optimized output to dist/.A successful build prints the output file sizes and finishes in a few seconds:
vite v5.x.x building for production...
✓ 42 modules transformed.
dist/index.html                   0.46 kB
dist/assets/main.css             28.31 kB │ gzip: 5.42 kB
dist/assets/main.js             312.54 kB │ gzip: 98.11 kB
dist/assets/proxy.js             88.22 kB │ gzip: 29.46 kB
✓ built in 3.21s
2

Inspect the dist/ output

After the build completes, your dist/ directory will look like this:
dist/
├── index.html                        # Root entry point
├── .nojekyll                         # Prevents Jekyll processing on GitHub Pages
├── pages/
│   ├── About.html
│   ├── CaseStudies.html
│   ├── Contact.html
│   ├── Home.html
│   ├── Projects.html
│   ├── Skills.html
│   └── Writing.html
├── assets/
│   ├── main.js                      # React app bundle (components + page logic)
│   ├── proxy.js                     # Framer Motion + React Router bundle
│   └── main.css                     # Tailwind CSS output + custom animations
├── components/
│   ├── Navigation.js
│   ├── BackgroundEffects.js
│   └── CursorTrail.js
├── useScreenInit.js
└── canvas.manifest.js
Asset filenames in the witch-dev build do not carry hash suffixes. The names are stable across builds: main.js, proxy.js, main.css, and so on.
3

Preview the build locally

Before deploying, verify that the built site works correctly using Vite’s built-in preview server:
npm run preview
This serves dist/ at http://localhost:4173 using a lightweight static server that closely mimics a production static host. Navigate through all routes (/#/about, /#/projects, /#/skills, /#/writing, /#/contact) to confirm everything renders as expected.
The preview server is not a dev server — it serves the compiled, minified output. Hot-reload is not available. Use npm run dev for active development.

​
What Vite does during the build

When you run npm run build, Vite performs several optimizations automatically:
  • Tree-shaking — dead code is eliminated. Only the React, Framer Motion, and React Router code paths that witch-dev actually uses are included in the final bundle.
  • ES module chunking — the bundle is split across multiple files (main, proxy, individual component files) so the browser can load them in parallel. Each HTML shell uses <link rel="modulepreload"> tags to prefetch the chunks it needs before the script executes.
  • Stable asset names — witch-dev’s build output uses fixed filenames (main.js, proxy.js, main.css) without hash suffixes. This keeps deployment simple: the same filenames are always in the same places, and each HTML shell references them with relative paths.
  • Tailwind CSS purging — the CSS output only contains utility classes that appear in your source. The full Tailwind library is never shipped; only what is actually used ends up in main.css.
  • Inline critical metadata — each HTML shell embeds window.__STATIC_PAGE_ROUTE__ and an immediate redirect script, so direct URL visits work correctly before React boots.

​
Build output reference

PathDescription
dist/index.htmlRoot entry point. Loads main.js, preloads all component chunks, and links main.css. This is the file served at /.
dist/pages/*.htmlPer-route HTML shells. Each one sets window.__STATIC_PAGE_ROUTE__ and immediately redirects to the hash URL (e.g., #/about) if no hash is present.
dist/assets/main.jsThe primary React application bundle. Contains all page components, inline content arrays, and Lucide icon data.
dist/assets/proxy.jsThe Framer Motion + React Router bundle, split from the main bundle for parallel loading.
dist/assets/main.cssThe complete Tailwind CSS output, including custom glow/glass animation utilities (box-glow-green, box-glow-purple, glass-panel, text-glow-green, text-glow-purple, animate-fog-drift).
dist/components/*.jsIndividually chunked component modules: Navigation.js, BackgroundEffects.js, CursorTrail.js. Preloaded by every HTML shell.
dist/useScreenInit.jsReact bootstrapping helper used by every HTML shell.
dist/canvas.manifest.jsScreen manifest that maps screen IDs to route paths.
dist/.nojekyllEmpty file that tells GitHub Pages to skip Jekyll processing so files beginning with _ and directories like assets/ are served as-is.

​
Verifying the build

After running npm run build, do a quick sanity check before deploying: Check dist/index.html — open it in a text editor and confirm it references the asset paths correctly: 
<script type="module" crossorigin src="./assets/main.js"></script>
<link rel="stylesheet" crossorigin href="./assets/main.css">
Check a page shell — open dist/pages/About.html and confirm the redirect script is present: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/about";
  (function () {
    if (!window.location.hash || window.location.hash === "#") {
      window.location.replace(
        window.location.pathname +
        window.location.search +
        "#/about"
      );
    }
  })();
</script>
Note that asset references inside pages/*.html use relative paths that step up one directory (e.g., ../assets/main.js), while index.html at the root uses ./assets/main.js. Run the preview — npm run preview and visit http://localhost:4173/pages/About.html directly. You should be redirected to http://localhost:4173/pages/About.html#/about and see the About page render.

​
pages/CaseStudies.html

The build output includes pages/CaseStudies.html, which sets window.__STATIC_PAGE_ROUTE__ = "/case-studies" and redirects to #/case-studies. This shell exists in the repository but the /case-studies route is not present in the default navigation array. It is scaffolded and ready to activate — add it to the ua array in Navigation.js and register the route in your React Router configuration to make it live.
The .nojekyll file in dist/ (and in the repo root) is critical for GitHub Pages deployments. Without it, GitHub Pages runs Jekyll on your output, which strips files and directories whose names start with an underscore — potentially breaking asset paths. The .nojekyll file is already committed to the repository root and will be included in dist/ as part of the build output.

Build docs developers (and LLMs) love

Get started for freeTalk to us