Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/nightshade/llms.txt

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

The Sanctum is the first page a visitor encounters when they open the Nightshade portfolio. It renders at route / and is driven by the SanctumPage component (minified export Re). Its job is atmospheric: establish the witch aesthetic, display the portfolio owner’s name, and invite the visitor to navigate deeper by choosing a candle.

​
Visual Structure

The layout stacks two sections vertically inside a full-height flex column:
  1. Orbital sigil — a 384×384px (w-96 h-96) centered container that houses the rotating rings and the hero text.
  2. Candle selection bar — a prompt and a row of four candles docked at the bottom of the container.

​
Orbital Rings

The sigil uses two concentric motion.div rings that rotate continuously in opposite directions:
  • Outer ring — contains an SVG hexagram built from two overlapping <polygon> elements, plus two <circle> rings (one solid at r=35, one dashed at r=45). It rotates 0 → 360° over 40 seconds on a linear infinite loop.
  • Inner ring — a plain border circle inset by 1rem (inset-4). It counter-rotates 0 → -360° over 30 seconds.
The SVG hexagram polygon coordinates as they appear in source: 
// Outer ring SVG — two triangles form a Star of David / hexagram hybrid
<polygon points="50,5 95,75 5,75" />   // pointing up
<polygon points="50,95 95,25 5,25" />  // pointing down
<circle cx="50" cy="50" r="35" />
<circle cx="50" cy="50" r="45" strokeDasharray="2 4" />

​
Hero Text Block

Centered inside the sigil (z-10 text-center) are two text elements:
ElementContentFontClass
<h1>Aria NightshadeCormorant Unicase (font-heading)text-5xl md:text-7xl text-witch-moonlight mb-2 text-glow-teal
<p>Master of the Digital ArtsJetBrains Mono (font-code)text-witch-turquoise/70 text-sm tracking-widest uppercase
The hero name is split across two lines by an explicit <br /> between “Aria” and “Nightshade” in the JSX. On mobile (text-5xl) it fits cleanly; on medium screens and above it scales to text-7xl.

​
Candle Selection Menu

Below the sigil, under the italic prompt "Choose your incantation...", sits a horizontal bar of four candles. The bar is bounded by a bottom border (border-b border-witch-moonlight/10) and a fixed height of 160px (h-40), so taller candles visually reach higher. The data array powering the menu is defined inline inside SanctumPage: 
const candleMenuItems = [
  { path: "/projects", label: "Summonings", height: 80,  delay: 1 },
  { path: "/skills",   label: "Arcana",     height: 120, delay: 2 },
  { path: "/work",     label: "Pacts",      height: 60,  delay: 3 },
  { path: "/about",    label: "The Witch",  height: 100, delay: 4 },
];
Each candle item renders three things:
  • Label — a motion.div absolutely positioned 8px above the candle (-top-8), initially at y: 10 (slightly below its resting spot). When the item is hovered, it animates to y: 0 and becomes fully opaque via group-hover:opacity-100. Font is font-heading text-witch-amber text-glow-amber.
  • <Candle> component — receives height, delayIndex, and isLit props. A candle is lit when the user hovers it or when no candle is currently hovered (all candles start lit, a single hover dims the others implicitly through the isLit={s === r.path || s === null} logic).
  • Click handler — calls useNavigate()(r.path) to perform a client-side route transition.

​
Candle Behavior at a Glance

Hover

The label appears above the candle with a teal glow. The candle scales up 5% (group-hover:scale-105). All other candles go dim (unlit) — only the hovered candle stays lit and its label is shown.

Click

Calls navigate(path) via React Router’s useNavigate. The AnimatePresence wrapper in the root router produces a crossfade between pages.

​
Status Line

At the very bottom of the page, beneath the candle bar, a single line of monospaced text reads: 
Last spell cast: 12 minutes ago. Currently brewing: a side project.
It uses class font-code text-xs text-witch-plum/60 and sits in an mt-8 paragraph.

​
Customization

1

Change the hero name and subtitle

Open src/pages/SanctumPage.jsx (or the equivalent component in your project). Find the <h1> tag inside the z-10 text-center div and update the text between the <br /> split. Change the <p> below it to update the subtitle.
// Before
<h1>Aria <br /> Nightshade</h1>
<p>Master of the Digital Arts</p>

// After
<h1>Your <br /> Name</h1>
<p>Your tagline here</p>
2

Add or remove a candle menu item

Locate the candleMenuItems array inside SanctumPage. Append a new object or delete an existing one. The candle bar uses flex justify-center items-end gap-8 md:gap-16, so new items space themselves automatically.
// Add a fifth candle
{ path: "/contact", label: "Commune", height: 90, delay: 5 },
Choose a height between 40 and 140 to keep candles within the 160px bar. The delay value controls the flicker animation offset (supplied as delayIndex to <Candle>).
3

Change the status text

Find the <p> tag with class font-code text-xs text-witch-plum/60 and update its children string. This is purely decorative copy — no logic depends on it.
The outer ring’s rotation speed is controlled by transition={{ duration: 40 }} on the outer motion.div, and duration: 30 on the inner ring. Lower numbers spin faster. Keep them on different speeds to preserve the counter-rotation effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us