Skip to main content

Documentation Index

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

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

The Home page (he component) is the visual centrepiece of witch-dev. It combines a typewriter name animation, two counter-rotating SVG sigil rings, and four radial navigation buttons that orbit the hero in a perfect circle — all wrapped in a dark, arcane aesthetic.

​
Hero Section

When the page mounts, the developer’s name is revealed one character at a time using a setInterval loop. Each tick appends the next character of the string "Alysha" until the full name is displayed, with a 150 ms delay between characters. 
const s = "Alysha";

useEffect(() => {
  let t = 0;
  const a = setInterval(() => {
    setName(s.slice(0, t));
    t++;
    if (t > s.length) clearInterval(a);
  }, 150);
  return () => clearInterval(a);
}, []);
Beneath the name sits the tagline “Source Code, Summoned”, rendered in a monospace font, all uppercase, with a letter-spacing of 0.3em. Together, the two elements form a compact hero unit at the centre of the viewport.

​
Rotating SVG Sigils

Two concentric SVG rings are layered behind the hero text. They rotate in opposite directions via CSS animations, creating a perpetually shifting magical diagram.

Outer Ring — 40 s Clockwise

Composed of a full circle, a regular pentagon, and two overlapping triangles that trace the outline of a pentagram. Rotates clockwise over 40 seconds.

Inner Ring — 30 s Counter-clockwise

Composed of a full circle, a rotated square (diamond), and a dashed circle. Rotates counter-clockwise over 30 seconds, creating visual contrast with the outer ring.
The rings are purely decorative SVG elements and do not interact with pointer events, so they never interfere with the navigation buttons layered above them.

​
Radial Navigation

Four navigation buttons are positioned around the hero using trigonometry. Each button is assigned a cardinal angle (0°, 90°, 180°, 270°), and its (x, y) offset from the centre is calculated with Math.cos / Math.sin:
  • Mobile orbit radius: 140px
  • Desktop orbit radius: 240px
The four buttons are defined in the me array: 
const me = [
  { path: "/projects", label: "Grimoire of Builds",  icon: D /* CodeXml */,   angle: 0   },
  { path: "/about",    label: "Origins",              icon: R /* Sparkles */,  angle: 90  },
  { path: "/skills",   label: "Spell Affinities",     icon: f /* Terminal */,  angle: 180 },
  { path: "/writing",  label: "Scrolls",              icon: M /* BookOpen */,  angle: 270 },
];
Each entry maps to a <Link> that wraps an icon and a short label. Clicking any button navigates to the corresponding route using React Router.
The angles follow standard CSS/SVG convention: 0° is the right (3 o’clock) position, 90° is bottom, 180° is left, and 270° is top.

​
Status Bar

A thin status strip is fixed at the bottom of the hero section. It displays:
Status: Currently Debugging Reality
A small circle to the left of the text pulses with a green glow using a ping animation, mimicking an activity indicator. The bar serves as a subtle personality touch and requires no interactivity.

​
Customization

Update the string assigned to s inside the he component. The typewriter effect will automatically adapt to the new length — no further changes needed.
const s = "YourName"; // was "Alysha"
Locate the element that renders "Source Code, Summoned" in the he component’s JSX and replace the string literal. Keep the surrounding font-mono uppercase tracking-[0.3em] classes to preserve the sigil-inscription style.
Modify the me array directly. Each object accepts four fields:
FieldTypePurpose
pathstringReact Router route to navigate to
labelstringText displayed beneath the icon
iconComponentLucide (or custom) icon component
anglenumberDegrees clockwise from the 3 o’clock position
To add a fifth button, append a new object and choose an angle that doesn’t clash with the existing four (e.g. 45 for top-right).
The radii are defined as inline constants (or Tailwind arbitrary values) near the trigonometry logic. Change 140 (mobile) and 240 (desktop) to your preferred pixel values. Larger values push the buttons further from the sigil; smaller values bring them closer.

Build docs developers (and LLMs) love

Get started for freeTalk to us