Nightshade is a React single-page application built with Vite that serves as a fully-themed portfolio template. Every design choice leans into a dark witch aesthetic — deep purples, teal glows, amber candlelight, and hand-crafted animations — while remaining a practical, deployable portfolio you can make your own. The template is built around the fictional persona of Aria Nightshade, Master of the Digital Arts, whose story gives each page its unique flavour: a résumé becomes The Book of Pacts, a skills section becomes Arcana & Expertise, and a contact form becomes Commune.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.
Key Features
Candle Navigation
The navigation bar renders animated candle components for each route. The active page’s candle displays a lit amber flame, giving users an ambient visual indicator of their current location.
Familiar Cursor
A custom cursor replaces the system pointer. It tracks mouse movement with spring physics via Framer Motion’s
useSpring, smoothly enlarging when hovering over interactive elements.Smoke-Layer Background
Atmospheric smoke is rendered using layered SVG elements with
feTurbulence fractal noise filters. Multiple layers drift at different speeds, creating a living, breathing background without any video assets.Nine Themed Route Pages
The router covers nine distinct pages: Sanctum (home), About, Skills, Work, Projects, Case Studies, Blog, Testimonials, and Contact — each with its own layout, animations, and thematic identity.
Framer Motion Transitions
Every route change is wrapped in an
AnimatePresence block with mode="wait", so pages fade and slide in sequence rather than cutting abruptly between views.Tailwind CSS + Witch Palette
Tailwind is extended with a custom
witch color palette: witch-dark (#0b0d10), witch-plum (#581c87), witch-turquoise (#14b8a6), witch-amber (#f59e0b), witch-moonlight (#e2e8f0), and witch-teal (#0d9488).Static GitHub Pages Deploy
Because the app uses React Router’s
HashRouter, all navigation lives in the URL hash (/#/about, /#/projects). This makes the build output in dist/ fully compatible with static hosts like GitHub Pages.Per-Route HTML Entry Points
The
pages/ directory contains individual HTML files for each route. Each file sets window.__STATIC_PAGE_ROUTE__ and corrects the hash so deep-links work correctly on a static host.Tech Stack
Nightshade is assembled from a focused set of modern frontend tools:| Layer | Library / Tool | Version |
|---|---|---|
| Framework | React | 18 |
| Build tool | Vite | latest |
| Routing | React Router (HashRouter) | v6 |
| Animation | Framer Motion | latest |
| Styling | Tailwind CSS | latest |
Font Stack
Three typefaces work together to reinforce the aesthetic:- Cormorant Unicase — headings (
font-heading). A high-contrast serif with an archaic feel, used for allh1–h6elements and major display text. - Lora — body copy (
font-body). A contemporary serif optimised for reading comfort at paragraph sizes. - JetBrains Mono — code and UI labels (
font-code). Used for meta text, category tags, timestamps, and any element that benefits from a technical, monospaced look.
@import in main.css.
Nightshade uses React Router’s
HashRouter rather than BrowserRouter. This is intentional — GitHub Pages serves static files and cannot rewrite arbitrary URL paths to index.html. The hash-based routing (/#/about, /#/skills, etc.) ensures every navigation event is handled entirely in the browser without requiring server-side configuration. If you deploy to a host that supports URL rewriting (Vercel, Netlify, Cloudflare Pages), you can switch to BrowserRouter by updating the router import in main.js and adding the appropriate redirect rules.