Sys.Witch V2 is a single-page application portfolio template built with React 18 and React Router v6, styled through a dark cyber-occult design language of neon glows, animated sigils, and particle fields. It is deployable as a fully static site to GitHub Pages — no server, no CMS, no database. All content lives in plain JavaScript data files you edit directly.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys.witch-v2/llms.txt
Use this file to discover all available pages before exploring further.
Quickstart
Fork the repo, install dependencies, and have a live dev server running in under five minutes.
Project Structure
Understand how components, data files, and HTML shells are organized at the root level.
Design System
Explore the neon color tokens, typography stack, and glow utilities that define the aesthetic.
Components
Browse the Layout, PortalNav, ParticleField, Sigil, and all other reusable UI components.
Key Features
- Animated Canvas particle field — a continuous background of drifting particles rendered on an HTML5
<canvas>viaParticleField.js, giving every page a living, electric atmosphere - SVG sigil system — a data-driven sigil renderer (
Sigil.js) that maps string IDs to SVG path data, used as iconography throughout navigation, section headers, and decorative elements - Neon glow effects — four accent colors (purple
#b026ff, magenta#ff00ff, cyan#00f3ff, lime#39ff14) applied as Tailwind utility classes with matching CSStext-shadowandbox-shadowglow variants - Framer Motion page transitions and scroll animations —
AnimatePresencewraps every route change with a blur-and-scale entrance/exit; individual components animate in on mount with staggered delays - React Router v6 SPA — client-side routing across seven sections (Portal, Origin, Conjured Works, Arcana, Tomes, Ritual Reports, Cast Message) with a persistent
PortalNavandLayoutshell - Data-driven content model — all portfolio content (projects, skills, writing entries, case studies, sigil paths) lives in five files under
data/; no component changes required for routine content updates - Responsive Tailwind layout — mobile-first grid and flex layouts with a collapsible full-screen hamburger nav on small viewports and a fixed top bar on
mdand above
Tech Stack
| Technology | Purpose | Package |
|---|---|---|
| React 18 | UI rendering and component model | react / react-dom |
| React Router v6.30.4 | Client-side SPA routing | react-router-dom |
| Framer Motion | Page transitions and scroll animations | framer-motion |
| Tailwind CSS | Utility-first styling and responsive layout | tailwindcss |
| Lucide React v0.522.0 | SVG icon set (GitHub, LinkedIn, Mail, Menu, X) | lucide-react |
| Vite | Development server and production build tool | vite |
This template is intentionally opinionated — its dark cyber-occult aesthetic is the whole point. Customization guidance is in the Customization section.