Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/nightshade/llms.txt

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

Nightshade ships as a standard Vite project, so the path from zero to a running local preview is exactly what you would expect from any modern React app: clone, install, and run. The sections below walk through each step, explain the production build, and cover what you need to know before pushing to GitHub Pages.

​
Prerequisites

Before you begin, make sure the following are available on your machine:
  • Node.js 18 or later — Vite and the project’s dependencies require Node 18+. Run node -v to check your current version.
  • npm (bundled with Node) or a compatible package manager such as pnpm or yarn.

​
Installation

1

Clone the repository

Clone the Nightshade repository from GitHub and change into the project directory:
git clone https://github.com/apursley2012/nightshade.git && cd nightshade
2

Install dependencies

Install all required packages using npm:
npm install
This resolves React 18, Vite, React Router v6, Framer Motion, Tailwind CSS, and their transitive dependencies into node_modules/.
3

Start the development server

Launch the Vite dev server with hot module replacement:
npm run dev
The terminal will confirm the server is running at http://localhost:5173. Open that URL in your browser to see the Sanctum (home) page with the full animated experience — candle navigation, familiar cursor, and smoke layers — all active.
4

Build for production

When you are ready to ship, generate the optimised static output:
npm run build
Vite bundles and minifies all assets into the dist/ directory. The output is a fully self-contained set of static files ready for any static host.

​
Project Structure

The repository is organised around the compiled output rather than raw source files, since the assets/ directory contains the Vite-generated bundles: 
nightshade/
├── assets/         # Compiled JS (main.js), CSS (main.css), proxy.js, jsx-runtime.js
├── components/     # React components: Layout, Navigation, Candle, FamiliarCursor, SmokeLayer, Sigils
├── pages/          # Per-route HTML entry points for static hosting
├── index.html      # App entry point
└── .nojekyll       # GitHub Pages: disables Jekyll processing
assets/ holds the four Vite output files. main.js contains every route component and page — the Sanctum, About, Skills, Work, Projects, Case Studies, Blog, Testimonials, and Contact pages — all bundled together. main.css contains the compiled Tailwind stylesheet plus the custom witch-palette utilities and @keyframes animation definitions. components/ is preloaded by index.html as ES module chunks: Layout.js, Navigation.js, Candle.js, FamiliarCursor.js, SmokeLayer.js, and Sigils.js. These are loaded in parallel via <link rel="modulepreload"> to eliminate waterfall latency. pages/ contains one HTML file per route (About.html, Blog.html, Contact.html, etc.). Each file sets window.__STATIC_PAGE_ROUTE__ and redirects the hash so navigating directly to /pages/About.html lands on the correct route inside the SPA.

​
Deploying to GitHub Pages

Nightshade is designed for zero-configuration deployment to GitHub Pages:
  1. Run npm run build to produce the dist/ directory.
  2. Push the contents of dist/ to the gh-pages branch of your repository. Tools like gh-pages npm package or a GitHub Actions workflow can automate this step.
  3. In your repository’s Settings → Pages, set the source to the gh-pages branch.
Two built-in features make this work seamlessly:
  • Hash-redirect scripts — Each HTML file in pages/ includes an inline script that sets window.location.hash to the correct route path. This means a user navigating directly to yoursite.github.io/pages/Blog.html will land on /#/blog inside the running SPA without a 404.
  • .nojekyll file — The root-level .nojekyll file tells GitHub Pages to serve files as-is. Without it, GitHub’s Jekyll processor would ignore files and directories whose names begin with an underscore, potentially breaking asset references.
The witch color palette is defined as a Tailwind theme extension in the project configuration. To make Nightshade your own, swap out the hex values for witch-dark, witch-plum, witch-turquoise, witch-amber, witch-moonlight, and witch-teal in tailwind.config.js (present in the full source tree, not in the compiled artifact repo). Every component that uses these tokens — the candle glow, the cursor trail, the smoke tint, the text shadows — will update automatically across the entire app when you rebuild.
The files inside assets/ — main.js, main.css, proxy.js, and jsx-runtime.js — are minified build artifacts. Do not edit them directly; your changes will be overwritten the next time you run npm run build. Always make modifications to the React component source files and CSS configuration, then rebuild to regenerate the assets/ output.

Build docs developers (and LLMs) love

Get started for freeTalk to us