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 About page presents identity through the lens of a terminal session. Rather than a conventional bio card, the main column simulates running cat bio.md in a shell — the headings are prefixed with # as raw Markdown syntax and the box is styled as graphite terminal output. The sidebar column reduces personal data to environment variables, the profile image to a missing-data placeholder, and availability to a boolean. The aesthetic signals that this developer sees configuration and code as primary expressive media.

​
Layout

The page uses a CSS Grid layout that collapses to a single column on mobile and expands to three columns at the lg breakpoint: 
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
  <div className="lg:col-span-2 ...">  {/* Bio — 2 columns */}
  <div className="...">               {/* Sidebar — 1 column */}
</div>
The page header follows the same pattern as all other routes: a SectionSigil icon followed by a GlitchHeading component displaying ~/about/profile.sys as an <h1>, separated from the content by a border-b border-graphite rule.

​
Bio section

The left/main column opens with a simulated shell prompt: 
<div className="flex items-center gap-2 text-acid mb-4">
  <span>$</span>
  <span className="text-bone">cat bio.md</span>
</div>
The bio body is a bg-graphite/30 box with a border border-graphite rounded-sm containing the following content rendered as JSX:
MarkerText
# (acid)I am a full-stack developer and digital occultist.
(paragraph)Work exists at the intersection of hard logic and creative chaos — builds robust, scalable, and visually arresting systems.
## (acid)The Philosophy
(paragraph)Code is incantation. A well-structured architecture is a protective ward. Every line of code serves the ritual.
## (acid)Background
(paragraph)Previously at [REDACTED_AGENCY] and [STARTUP_NAME], now focused on bridging design engineering and systems architecture.
The # and ## markers are rendered as <span className="text-acid">#</span> inline elements inside a <p>, not as actual heading elements — this keeps the visual appearance of raw Markdown while staying within the paragraph flow of a terminal dump. Key inline treatments within the body text:
  • Hard logic — <span className="text-bone"> (lifted to bone from the default lilac body)
  • Creative chaos — <span className="font-serif italic text-bone"> (Cinzel italic in bone)

​
Sidebar

​
Profile image placeholder

The image slot is an aspect-square container bordered in acid green with four 2×2 acid corner squares. Inside it, a full-bleed graphite div holds two layers:
  1. A radial-gradient dot grid (4px × 4px pattern, #A4FF3D at 30% opacity, mix-blend-screen) gives the empty box a surveillance-monitor texture.
  2. A centered <span className="font-mono text-acid text-xs opacity-50">[ IMAGE_DATA_MISSING ]</span> label.
An bg-acid/10 overlay fades to transparent on group-hover, making the placeholder subtly interactive.

​
Environment variables block

Below the image, a font-mono text-xs section renders key-value pairs mimicking a shell environment dump: 
ENVIRONMENT_VARIABLES
─────────────────────────────────────────
LOCATION        "Cyberia"
FOCUS           "Design_Engineering"
AVAILABILITY    true
CAFFEINE_LEVEL  0.89
Each row is a flex justify-between div. The key names use text-lilac; values use text-bone — except AVAILABILITY, whose value true is rendered in text-acid to make the only boolean stand out visually. 
<div className="flex justify-between">
  <span className="text-lilac">AVAILABILITY</span>
  <span className="text-acid">true</span>
</div>
The section header ENVIRONMENT_VARIABLES sits above the rows, separated by a border-b border-graphite rule, in text-acid.

​
Customization

The two agency placeholder strings are the most important customization targets on this page — they are the only obviously incomplete content in the default build.
Replace agency placeholders: In the Background paragraph inside main.js, find the strings [REDACTED_AGENCY] and [STARTUP_NAME] and replace them with your actual employer/client names, or leave [REDACTED_AGENCY] intentionally for the redacted-file aesthetic. Add a real profile image: Remove the entire placeholder div (from <div className="relative aspect-square ..."> to its closing tag) and replace it with: 
<img
  src="/your-photo.jpg"
  alt="Profile"
  className="w-full aspect-square object-cover border border-acid"
/>
The acid corner squares are decorative children of the placeholder div — they won’t carry over automatically, but you can add them as absolutely-positioned siblings if you want to keep the framing effect. Update environment variable values: Locate the four flex justify-between rows in the sidebar and change the <span> text content for LOCATION, FOCUS, AVAILABILITY, and CAFFEINE_LEVEL to reflect your own data. To add more rows, duplicate any row div and update the key and value strings.
The CAFFEINE_LEVEL value 0.89 is intentionally typed as a floating-point number rather than a percentage, following the convention of environment variables that accept 0–1 normalized values. You can change it to any string — "HIGH", "CRITICAL", "∞" — without breaking any logic.
Edit the bio copy: The bio content is inline JSX inside the component function. Each paragraph is a <p> element inside the bg-graphite/30 box. Add, remove, or reorder paragraphs freely — the space-y-4 class on the container handles vertical rhythm automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us