Skip to main content

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.

The entire visual identity of Systems Witch — the acid-green glows, pitch-black backgrounds, monospaced terminal typography, and flickering glitch effects — is controlled through a small set of Tailwind custom colors, three Google Font families, and a handful of bespoke CSS utility classes and keyframes defined in assets/main.css. Understanding where each piece lives lets you retheme the site from neon-occult to any aesthetic you choose without touching a single component.

​
Color palette

Four semantic color tokens are registered as Tailwind custom colors. They compile into utility classes like text-acid, bg-graphite, border-lilac, and so on — usable anywhere in JSX the same way as built-in Tailwind colors.
TokenHexUsage
acid#A4FF3DAccents, borders, glow, active states
bone#EDEAE2Primary text
graphite#0E0E10Dark borders, card backgrounds
lilac#7A6BA8Secondary/muted text
black#000000Page background
Tailwind also generates opacity modifier variants automatically, so classes like border-acid/30 (#A4FF3D at 30% opacity), bg-graphite/30, text-acid/50, and bg-black/80 are available throughout the codebase at no extra config cost. To change the accent color: search for every occurrence of #A4FF3D in assets/main.css — this is the compiled Tailwind output, so the color appears both in generated utility classes (e.g., border-acid) and inside the bespoke rules for .shadow-glow, .text-glow, @keyframes pulse-glow, and the glitch pseudo-element text-shadow declarations. Replace all instances with your new hex value. In the original source project, the canonical location is the extend.colors.acid entry in tailwind.config.js.

​
Typography

Three typefaces handle distinct roles across the UI:
FamilyStackApplied to
JetBrains MonomonospaceAll h1–h6 headings and font-mono elements
IBM Plex Sanssans-serifBody text, descriptions, font-sans elements
CinzelserifDecorative italic accent on skill card names and the hero site-name wordmark
All three are loaded via a single Google Fonts @import at the very top of assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=Cinzel:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,600;1,400&family=JetBrains+Mono:wght@100..800&display=swap";
The compiled CSS then wires them into Tailwind’s font stacks: h1–h6 elements receive font-family: JetBrains Mono, monospace; the html and body default to IBM Plex Sans, sans-serif; and font-serif maps to Cinzel, serif. To swap fonts: replace the @import URL with a new Google Fonts URL containing your chosen families, then update the fontFamily.mono, fontFamily.sans, and fontFamily.serif entries in the Tailwind config in the original source project (or find and replace the font-family declarations directly in assets/main.css).

​
Glow effects

Three CSS constructs combine to produce the signature acid-green glow: shadow-glow — a custom Tailwind utility class that applies a box shadow: 
.shadow-glow {
  box-shadow: 0 0 10px rgba(164, 255, 61, 0.5);
}
Used on skill card circles on hover (group-hover:shadow-glow) and on the contact form’s submit button when active. text-glow — a custom class for glowing text: 
.text-glow {
  text-shadow: 0 0 8px rgba(164, 255, 61, 0.6);
}
Applied to the boot-sequence ASCII art on the home page. animate-pulse-glow — a keyframe animation that pulses a glow between full and reduced intensity: 
@keyframes pulse-glow {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px #A4FF3D, 0 0 20px #A4FF3D;
  }
  50% {
    opacity: 0.7;
    text-shadow: 0 0 5px #A4FF3D;
  }
}
.animate-pulse-glow {
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
Used on the center dot of the rotating hero sigil and on the contact form canvas wrapper while a transmission is in progress. To change glow color: update the rgba(164, 255, 61, ...) values in .shadow-glow, .text-glow, and the @keyframes pulse-glow block in assets/main.css.

​
Scanline overlay

The ScanlineOverlay component renders a fixed full-screen div that mimics a CRT scanline effect. It sits at z-50 above all page content and uses mix-blend-overlay so it tints rather than obscures what’s beneath. The overlay has two opacity layers:
  • The outer wrapper uses opacity-[0.15] and applies a linear-gradient background — alternating transparent and semi-black stripes at a 4 px repeat — to produce horizontal scanlines.
  • The inner div uses bg-acid opacity-[0.02] animate-pulse to add a very faint pulsing acid-green wash over the entire screen.
Increase either opacity value to make the effect more prominent; decrease toward 0 to suppress it almost entirely. Both values are in components/ScanlineOverlay.js.

​
Glitch animation

The .glitch-wrapper:hover rule in assets/main.css drives the heading glitch effect seen on all page titles (via the GlitchHeading component). On hover, two ::before and ::after pseudo-elements duplicate the text and animate independently:
  • ::before — shifts 2px right, applies a red text-shadow, and clips a horizontal slice using clip-path: polygon(...), animating via @keyframes glitch-anim-1 at 2.5 s per cycle.
  • ::after — shifts 2px left, applies a blue text-shadow, clips a different slice, and animates via @keyframes glitch-anim-2 at 3 s per cycle.
Both keyframes step through a series of clip-path polygon() positions, creating the sliced-text tearing effect. To speed up or slow down the glitch: change the 2.5s and 3s duration values in these rules: 
.glitch-wrapper:hover .glitch-text::before {
  animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}
.glitch-wrapper:hover .glitch-text::after {
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

​
ASCII border decoration

The .ascii-border class adds +---+ corner markers to any element via CSS ::before and ::after pseudo-elements. The markers are only visible on md: screens (768 px and above) to avoid layout noise on mobile: 
@media (min-width: 768px) {
  .ascii-border::before {
    content: "+----------------------------------------------------------------+";
    position: absolute;
    top: -10px;
    /* ... */
  }
  .ascii-border::after {
    content: "+----------------------------------------------------------------+";
    position: absolute;
    bottom: -10px;
    /* ... */
  }
}
The class also sets border: 1px solid #0E0E10 on the element itself. It is currently applied to every project card in the Projects grid. Add or remove the ascii-border class on any element to toggle the decorative corner markers.
The distributed assets/ files are compiled outputs from the Vite + Tailwind build pipeline. To make persistent theme changes, you need access to the original source project and must run npm run build to regenerate assets/main.css and assets/main.js. Edits made directly to assets/main.css will work immediately in a deployed static site, but will be overwritten the next time the project is rebuilt from source.

Build docs developers (and LLMs) love

Get started for freeTalk to us