Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/sys-witch/llms.txt

Use this file to discover all available pages before exploring further.

The About page (about.html) is the personal storytelling hub of Sys.Witch V2. It brings together three distinct content layers: a free-form biography block where you describe your background and goals, a five-sigil TraitSigilGrid that communicates personality at a glance, and a vertical TimelineEntry history that traces your professional and educational milestones. Each layer uses animated React components from components/about/ to deliver the cyber-occult atmosphere of the wider theme.

​
What the About Page Contains

The page is structured into three major sections, rendered top to bottom inside the shared Layout wrapper:

Biography Block

Free-form prose about the portfolio owner. Edit the text content directly in about.html. There are no character limits or structured fields — write a paragraph, a timeline of influences, or a career origin story.

TraitSigilGrid

A responsive grid of five animated personality sigils rendered by components/about/TraitSigilGrid.js. Each sigil has a label, a neon accent color, and a hover animation. The grid adapts from 2 columns on mobile to 5 columns on large screens.

TimelineEntry History

A vertical timeline rendered by components/about/TimelineEntry.js. Each milestone has a year, a title, and a description. A neon cyan connector line flows between entries, and each entry animates into view as it scrolls into the viewport.

RuneDivider Separators

Decorative RuneDivider components separate the three content sections. These are purely visual and do not need to be edited when customizing content.

​
TraitSigilGrid

The TraitSigilGrid component renders five personality trait sigils in a responsive grid. The traits are hardcoded in components/about/TraitSigilGrid.js as a static array and are not sourced from a data file. 
// components/about/TraitSigilGrid.js — trait definitions
const traits = [
  { name: "Detail-Oriented", sigilId: "trait-detail",   color: "cyan"    },
  { name: "Creative",        sigilId: "trait-creative",  color: "magenta" },
  { name: "Sarcastic",       sigilId: "trait-sarcastic", color: "purple"  },
  { name: "Practical",       sigilId: "trait-practical", color: "lime"    },
  { name: "Pattern-Spotter", sigilId: "trait-pattern",   color: "cyan"    },
];
Each entry maps to a sigil SVG path registered in data/sigils.js by its ID. The five trait sigils and what they represent are:
Sigil IDLabelAccent ColorSVG Motif
trait-detailDetail-OrientedNeon cyanConcentric circles with crosshairs — a precision targeting reticle
trait-creativeCreativeNeon magentaEight-pointed star burst — radiant outward energy
trait-sarcasticSarcasticNeon purpleCrossing diagonal lines through a circle — contradiction and irony
trait-practicalPracticalNeon limeNested squares with axis lines — grounded geometric structure
trait-patternPattern-SpotterNeon cyanConcentric rings with crossed axes — signal detection and resonance
Each sigil tile lifts upward on hover (-translate-y-2) and its border brightens to the full neon accent color with a matching box-shadow glow. The sigil icon itself rotates 180 degrees on hover over a 500ms transition. These animations are defined entirely with Tailwind utility classes inside TraitSigilGrid.js and do not require CSS edits.
The grid uses a responsive column layout managed by Tailwind: 
Mobile:  grid-cols-2   (2 columns)
Tablet:  grid-cols-3   (3 columns)
Desktop: grid-cols-5   (5 columns, all traits in one row)
Each tile enters the viewport with a Framer Motion staggered reveal — a 100ms delay between each tile, fading in and sliding up from y: 20.

​
TimelineEntry

The TimelineEntry component renders a single professional or educational milestone. The About page calls it once per entry, passing four props. 
// TimelineEntry prop signature
TimelineEntry({
  year:        string,   // Displayed in neon cyan monospace above the title
  title:       string,   // The role, degree, or milestone name (display font)
  description: string,   // Body text describing what happened (body font)
  isLast:      boolean,  // Omits the connector line below the final entry
})

​
Visual Anatomy

Each entry is composed of two columns laid out with flexbox:
  • Left column: A 40×40px circular node bordered in neon cyan (#00F3FF) with a glow shadow, containing the rune-4 sigil icon at 16px. Below the node, a 2px vertical gradient line flows downward in cyan, fading to transparent — this is hidden on the last entry when isLast={true}.
  • Right column: A Framer Motion div that slides in from the right (x: 20 → x: 0) when scrolled into view. The year is rendered in font-mono at 14px in neon cyan. The title uses the display font (Tektur) at 20px in the primary text color. The description uses the body font (Inter) at the secondary text color with relaxed line height.
<!-- Example TimelineEntry usage in about.html -->
<TimelineEntry
  year="2023"
  title="Junior Front-End Developer"
  description="Joined a small product team building internal tooling. Primary focus on React component architecture and TypeScript migration."
/>
<TimelineEntry
  year="2021"
  title="B.S. Computer Science"
  description="Graduated with a focus on human-computer interaction and web technologies."
  isLast={true}
/>
The viewport option on the Framer Motion animation uses once: true with a -100px margin. Each entry only animates in once — it will not re-animate if the user scrolls back up past it.

​
How to Update the About Page

1

Edit the biography text

Open about.html in a text editor. Find the biography prose block near the top of the page body — it is plain HTML text content inside the React component tree. Replace the placeholder copy with your own background, goals, or career narrative. This content is not sourced from any data file.
2

Add or replace timeline entries

Locate each TimelineEntry usage in about.html. Add a new entry by duplicating an existing one and updating the year, title, and description props. Set isLast={true} only on the bottommost entry in the list to suppress the dangling connector line.
<!-- Add entries in reverse chronological order (newest first) -->
<TimelineEntry year="2025" title="Senior Developer" description="..." />
<TimelineEntry year="2023" title="Junior Developer" description="..." />
<TimelineEntry year="2021" title="Degree" description="..." isLast={true} />
3

Update trait labels in TraitSigilGrid.js

Open components/about/TraitSigilGrid.js. Edit the name field in each object inside the traits array to relabel any sigil. To change the accent color, update the color value to one of the four available options: "cyan", "magenta", "purple", or "lime".
// Rename a trait and change its accent color
{ name: "Empathetic",  sigilId: "trait-creative", color: "magenta" },
{ name: "Data-Driven", sigilId: "trait-detail",   color: "lime"    },
The sigilId value controls which SVG path is drawn from data/sigils.js. You can swap sigil shapes independently of the label — for example, use "trait-pattern" with a label of “Systematic” if the concentric-rings shape better matches the trait you want to express.
4

Verify responsive layout on mobile

After editing, open the About page on a narrow viewport (or use browser DevTools). The TraitSigilGrid should collapse to 2 columns and the timeline entries should remain readable. The Framer Motion scroll animations trigger at a -100px threshold, so entries near the top of the page on mobile may already be visible on load.

​
Default Trait Reference

The five default traits shipped with Sys.Witch V2 are:
Represented by a precision targeting reticle: concentric circles bisected by four crosshair lines extending to the outer ring. The neon cyan accent color reinforces analytical precision. Use this sigil for traits like accuracy, thoroughness, or quality focus.
Represented by an eight-pointed star burst with points radiating outward from the center. The neon magenta accent color signals energy and imagination. Use this sigil for traits like originality, artistic sensibility, or generative thinking.
Represented by two diagonal crossing lines passing through a central circle — a shape that visually implies contradiction and layered meaning. The neon purple accent color adds an edge. Relabel this sigil freely; “Witty,” “Dry Humor,” or “Critical Thinker” all fit the shape.
Represented by nested squares with axis lines connecting the inner and outer frames — a grounded, structured composition. The neon lime accent color signals pragmatism. Use this sigil for traits like efficiency, resourcefulness, or delivery focus.
Represented by concentric rings bisected by crossed horizontal and vertical axes — a signal-detection diagram. The neon cyan accent color matches the Detail-Oriented sigil, creating a visual pair. Use this sigil for traits like systems thinking, analytical reasoning, or pattern recognition.

Build docs developers (and LLMs) love

Get started for freeTalk to us