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 About page (fe component) narrates Alysha’s journey from the “mortal realm” of healthcare and retail into software engineering. It is split into two visual zones: a vertically scrolling timeline on the left and a sticky sidebar of micro-UX observations on the right.

​
Timeline Section

The timeline is driven by the ue array — three chronological entries, each representing a phase in the developer’s story. The entries are rendered along a dotted left border, with each entry’s icon button serving as the timeline node.

​
Interaction model

Clicking a timeline node expands or collapses its content panel (accordion-style). Only one entry needs to be open at a time; the content area fades in with a smooth height transition. When collapsed, only the icon and title are visible.

​
Timeline data

Each entry in ue carries an icon component, a thematic colour class, and a prose content string: 
[
  {
    id: "past",
    title: "Before the Cauldron",
    icon: Skull,
    content:
      "I didn't start in the dark arts of code. I spent years in the mortal realm (healthcare & retail), learning how to decipher human panic and untangle chaotic systems. Turns out, calming an angry customer is exactly like handling an unhandled promise rejection.",
    color: "text-coven-purple-400",
  },
  {
    id: "transition",
    title: "The Curiosity Curse",
    icon: Zap,
    content:
      "One day I inspected an element. That was the beginning of the end. I fell down the rabbit hole of HTML, CSS, and JavaScript. I realized I could bend the digital world to my will. The curse had taken hold, and I traded my mortal tools for a mechanical keyboard.",
    color: "text-coven-magenta",
  },
  {
    id: "present",
    title: "Current Incantations",
    icon: Flame,
    content:
      "Now I weave React components, summon APIs, and banish bugs to the shadow realm. I'm actively seeking a coven (read: engineering team) where I can contribute my dark magic to production-level spells.",
    color: "text-coven-green-400",
  },
]

​
Visual anatomy of a timeline entry

ElementDescription
Dotted left borderA vertical dashed line runs the full height of the timeline, connecting all nodes
Icon nodeA circular button rendered in the entry’s color class with a matching glow on focus/hover
TitleBold heading displayed inline with the node; always visible
Content panelProse paragraph revealed on click; transitions in with a height animation
The three icons — Skull (past), Zap (transition), and Flame (present) — are imported from the Lucide React icon library. Swap them for any other Lucide icon by updating the icon field in the ue array.

​
Sticky Sidebar

The right column contains a sticky card titled “Things I notice that other people don’t” — a list of micro-UX pet peeves rendered as virtual sticky notes.

​
Sidebar data

const ge = [
  "Buttons with 1px off-center text",
  "Forms that don't submit on Enter",
  "Unnecessary scrollbars",
  "Modals without backdrop blur",
  "Z-index wars (the 9999 curse)",
];
Each string in ge is displayed on its own card. A small amount of random rotation (a few degrees either way) is applied to each card via an inline transform: rotate(Xdeg) to mimic physical sticky notes pinned to a board. Hovering a card flattens the rotation back to 0deg with a smooth CSS transition.
The sidebar is sticky top-8 so it stays in view while the user scrolls through the longer timeline column on the left. On narrow viewports the layout stacks vertically and the sidebar appears below the timeline.

​
Customization

Push a new object into the ue array (or edit an existing one). Every entry requires the following fields:
FieldTypeRequiredNotes
idstring✅Unique key used by React
titlestring✅Displayed as the entry heading
iconComponent✅Lucide icon component (not a string)
contentstring✅Prose displayed when the entry is expanded
colorstring✅Tailwind text-colour class for the icon
The dotted border and accordion animation are applied automatically — no additional JSX changes are needed.
Delete the corresponding object from the ue array. The dotted border will automatically span only the remaining entries.
Update the ge array with new strings. Each string becomes its own sticky-note card. There is no hard limit on the number of items, but more than seven or eight cards may overflow the sidebar’s sticky area on shorter viewports.
Remove the inline rotate style (or set it to 0deg) in the JSX that maps over ge. The hover-flatten transition can also be removed by deleting the transition-transform and hover:rotate-0 classes from the card element.

Build docs developers (and LLMs) love

Get started for freeTalk to us