Systems Witch is a fully client-side React portfolio site with a distinct terminal-and-grimoire visual language. It ships with animated page transitions, a rotating hero sigil, a CRT scanline overlay, glitch headings, and a filesystem-style sidebar — all built on Vite, React Router, Framer Motion, and Tailwind CSS.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/systems-witch/llms.txt
Use this file to discover all available pages before exploring further.
Introduction
Understand the project’s design philosophy, technology stack, and how the pieces fit together.
Getting Started
Clone the repo, install dependencies, and run the dev server in under five minutes.
Architecture
Explore the component hierarchy, routing model, and layout structure.
Customization
Swap colors, fonts, and content to make the site your own.
What’s inside
Systems Witch is organized around a small set of purpose-built React components and seven hash-routed pages. Every visual detail — from the acid-green#A4FF3D accent to the scanline shimmer — is controlled through Tailwind utility classes and CSS custom animations defined in assets/main.css.
FilesystemNav
Collapsible sidebar that renders the site map as a Unix directory tree.
GlitchHeading
CSS glitch animation on hover using
::before/::after pseudo-elements.PageTransition
Framer Motion wrapper that fades and slides content on route change.
ScanlineOverlay
Fixed full-screen CRT effect rendered above all page content.
HeroSigil
Continuously rotating SVG sigil with a glowing acid-green center dot.
TerminalFooter
Bottom status bar displaying system metadata in monospace.
Quick orientation
Clone and install
Clone the repository and install Node dependencies. Run
git clone https://github.com/apursley2012/systems-witch.git && cd systems-witch, then npm install. The project uses Vite as its build tool — see the Getting Started guide for full details.Run the dev server
npm run dev starts Vite’s HMR dev server. Open http://localhost:5173 to see the site.Edit content
Update the data arrays in
assets/main.js — projects, skills, articles, and testimonials are all plain JavaScript objects.