Where most portfolios compete on polish, Systems Witch competes on atmosphere. It is a fully functional single-page application built for developers who want their personal site to feel like a terminal session inside a haunted server rack — acid-green glows, rotating SVG sigils, scanline overlays, and a navigation sidebar styled after a Unix filesystem. It is not a theme or a template kit; it is a complete, deployable React application with its own design language, component architecture, and routing conventions.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.
Systems Witch is built for developers who already know React. The framework assumes familiarity with JSX, component composition, and modern JavaScript tooling. No framework-specific abstractions are introduced on top of React itself.
Design Philosophy
The guiding principle of Systems Witch is distilled in a single line from the About page source: “Code is incantation.” Every architectural decision is treated as a deliberate act. A well-structured component tree is a protective ward. A thoughtfully named CSS custom property is a glyph in a digital grimoire. This philosophy manifests in two parallel commitments that run through the entire codebase:- Engineering rigour — hash-based routing that requires no server configuration, Framer Motion transitions that respect reduced-motion preferences, a Tailwind build that produces only the CSS actually used, and Vite’s native ESM pipeline keeping development iteration near-instant.
- Creative chaos — a glitch animation that triggers only on hover (preserving readability at rest), a hero section that runs a 2.5-second ASCII boot sequence before revealing the sigil, a contact form whose canvas sigil is generated in real time from the characters the user types.
Technology Stack
| Layer | Technology |
|---|---|
| UI library | React 18 (via jsx-runtime.js) |
| Build tool | Vite (ESM-native, outputs hashed static assets) |
| Routing | React Router v6 — hash-based (HashRouter) |
| Animation | Framer Motion (motion.div, AnimatePresence) |
| Styling | Tailwind CSS (utility-first, custom config) |
| Heading font | Cinzel (serif, used for the italic “Witch” wordmark) |
| Body font | IBM Plex Sans (sans-serif, all body copy) |
| Code font | JetBrains Mono (monospace, all UI chrome and labels) |
assets/main.css. Headings (h1–h6) are globally overridden to use JetBrains Mono, giving every page a consistent terminal readout character. The Cinzel serif appears only as a deliberate accent — in the hero wordmark and skill card labels — to create a contrast between the industrial and the arcane.
Brand Palette
The entire colour system is expressed through four named Tailwind tokens. Every component uses only these values; no one-off hex codes appear in the JSX. Theacid colour also drives every glow effect in the system: the text-glow utility class applies text-shadow: 0 0 8px rgba(164, 255, 61, 0.6), the shadow-glow utility applies a matching box-shadow, and the animate-pulse-glow keyframe animation alternates the glow between full intensity and a dimmer state over a two-second cycle.
Pages and Routes
Systems Witch ships with seven pages registered under the rootHashRouter. All URLs use the #/ prefix, so the site works on any static file server without redirect rules.
| Route | Component | Content |
|---|---|---|
#/ | Home | ASCII boot animation → rotating HeroSigil + identity tagline |
#/about | About | Two-column bio layout with terminal cat bio.md styling |
#/projects | Projects | Filterable project grid with animated card entries |
#/skills | Skills | Tarot-card-style skill cards with animated proficiency bars |
#/articles | Articles | ls -la file listing with live grep filtering |
#/contact | Contact | Contact form with real-time canvas sigil generation |
#/testimonials | Testimonials | Encrypted-transmission-style testimonial log |
Key Visual Features
ASCII Boot Sequence — TheHome component renders a pre-formatted ASCII art block for 2,500 ms before fading to the main hero content. The text [ SYSTEM BOOTING... ] appears beneath it after a one-second delay, handled by a setTimeout inside useEffect.
Rotating HeroSigil — After the boot sequence completes, the HeroSigil SVG component renders inside a motion.div with animate={{ rotate: 360 }} and a 40-second infinite linear transition. A pulsing acid-coloured dot sits at its centre. The sigil container is w-48 h-48 on mobile, scaling up to w-64 h-64 on desktop.
GlitchHeading — Every page header uses the GlitchHeading component, which wraps the heading text in a .glitch-wrapper div. On hover, CSS pseudo-elements clone the text with offset red and blue channel shadows, animated with alternating clip-path keyframes to simulate a CRT signal break.
ScanlineOverlay — A fixed-position overlay component (z-index: 30) that renders repeating semi-transparent horizontal lines across the entire viewport at all times, simulating a CRT monitor scanline pattern. It has pointer-events: none so it never blocks interaction.
PageTransition — Every page is wrapped in the PageTransition component, which uses Framer Motion’s AnimatePresence with mode="wait". The router mounts this at the HashRouter level so page exits complete before the next page enters.
FilesystemNav — The persistent left sidebar renders a tree of navigation links styled as Unix filesystem paths: /, ~/about/profile.sys, ~/projects/*, ~/skills, ~/articles, ~/contact, ~/testimonials. On mobile it collapses off-screen and is toggled by a hamburger-style control.
TerminalFooter — A footer rendered at the bottom of every page showing system status metadata in monospace — matching the terminal aesthetic of the navigation sidebar.
Contact Sigil Canvas — The contact page includes a <canvas> element that reads each character of the message textarea in real time. It converts each character’s char code to an angle and radius, then strokes a connecting path between all points, generating a unique geometric sigil that reflects the content of the message being typed.
Project Structure
assets/ directory contains the compiled output from Vite’s build pipeline. The components/ directory holds the reusable UI primitives that are imported into page components. The pages/ directory contains the static HTML shells for each route, used by the production build for initial page load performance.
Get Started
Clone the repo, install dependencies, and run the Vite dev server in under five minutes.
Architecture Overview
Deep-dive into the component hierarchy, routing model, animation system, and Tailwind configuration.