Skip to main content

Documentation Index

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

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

The About page presents the practitioner’s story in the language of the grimoire — biographical paragraphs set on aged parchment, framed beside an arched portrait alcove that pulses with spectral teal light. The layout is deliberately intimate, trading the portfolio’s dark void for warm paper tones and hand-lettered headings.

​
Two-Column Layout

The page is wrapped in a PageTransition component and centred with flex items-center justify-center min-h-screen. Inside sits a max-w-6xl grid with grid-cols-1 lg:grid-cols-2 and a gap-16. On mobile the portrait stacks above the text panel; on large screens they sit side by side. Both columns are wrapped in motion.div elements that slide in from opposite sides on mount: 
// Portrait column — slides from the left
<motion.div
  initial={{ opacity: 0, x: -50 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ duration: 0.8 }}
>

// Bio column — slides from the right
<motion.div
  initial={{ opacity: 0, x: 50 }}
  animate={{ opacity: 1, x: 0 }}
  transition={{ duration: 0.8, delay: 0.2 }}
>

​
Portrait Column

The left column renders a portrait placeholder styled as an arched oval alcove. It uses aspect-[3/4] and rounded-t-full to produce the characteristic pointed-arch silhouette. Three nested elements build up the frame:
1

Outer Frame Border

An absolute inset-0 div with border-8 border-midnight-darker rounded-t-full and a shadow-[0_0_30px_rgba(0,0,0,0.8)] forms the heavy outer frame. Two inner border rings at inset-[-8px] and inset-2 add layered decorative detail using border-spell/20 and border-spell/10.
2

Dark Interior Surface

A bg-midnight rounded-t-full overflow-hidden div fills the frame. A bg-gradient-to-b from-spell/10 to-transparent overlay adds a subtle top-light impression.
3

Animated Glow Orb

A motion.div with bg-spell/20 rounded-full blur-[40px] pulses using animate={{ scale: [1, 1.05, 1], opacity: [0.5, 0.8, 0.5] }} over a 4-second infinite loop — creating the impression of a contained magical light source.
An SVG moon-and-compass-rose silhouette (text-spell/30) floats over the glow, rendered with three <path> lines radiating from a central circle.
The portrait column is a placeholder. Replace the entire inner bg-midnight div with an <img> tag pointing to your own photo to swap it in. Keep the rounded-t-full overflow-hidden classes on the wrapper so your image is clipped to the arch shape.

​
Bio Panel

The right column uses the parchment-texture utility class for the aged-paper background and p-10 md:p-14 rounded-sm for padding. Decorative oversized quotation marks sit in the top-left and bottom-right corners using absolute positioning and the font-cursive typeface at text-4xl text-midnight/20.

​
Heading Structure

The bio panel opens with two headings — Know Thy Witch as the section title and A Brief Familiar History as the cursive subheading: 
<h1 className="font-cinzel text-4xl text-midnight-darker mb-2">
  Know Thy Witch
</h1>
<h2 className="font-cursive text-2xl text-blood mb-8">
  A Brief Familiar History
</h2>

​
Biography Paragraphs

The three biography paragraphs sit inside a space-y-6 font-garamond text-lg text-midnight-darker leading-relaxed container:

Paragraph 1 — Origin

“I did not choose the path of the developer; the code called to me from the glowing terminal in the dead of night. What started as simple HTML incantations soon blossomed into full-stack sorcery.”

Paragraph 2 — Career

“For over a decade, I have wandered the digital brambles, binding chaotic data streams into elegant interfaces and banishing the demons of legacy code to the void. My grimoire is filled with React components, my cauldron bubbles with Node.js, and my wards are written in strict TypeScript.”

Paragraph 3 — Personal

“When I am not weaving spells for the web, you can find me foraging for new libraries, brewing potent coffee potions, or communing with my feline familiar.”

​
Status Indicator

A border-t border-midnight/20 rule separates the bio from a footer strip showing the availability status: 
<span className="font-cinzel text-sm font-bold text-midnight-darker uppercase tracking-widest">
  Current Status:
</span>
<span className="font-garamond italic text-blood">
  Accepting new pacts & contracts
</span>

​
How to Customize

1

Replace the headings

Find Know Thy Witch and A Brief Familiar History in assets/About.js and replace them with your preferred section titles.
<h1 className="font-cinzel text-4xl text-midnight-darker mb-2">
  Know Thy Witch   {/* ← Your section title */}
</h1>
<h2 className="font-cursive text-2xl text-blood mb-8">
  A Brief Familiar History   {/* ← Your subtitle */}
</h2>
2

Update bio paragraphs

The three <p> elements inside the space-y-6 wrapper each contain one paragraph of bio copy. Replace all three with your own text. Add or remove <p> elements as needed — the space-y-6 class handles the spacing automatically.
3

Change the status line

Find the <span> with text-blood italic and update its text:
<span className="font-garamond italic text-blood">
  Accepting new pacts & contracts   {/* ← Your status */}
</span>
4

Swap in your portrait

Replace the placeholder interior with a real <img>:
<div className="absolute inset-0 bg-midnight rounded-t-full overflow-hidden z-10">
  <img
    src="/your-photo.jpg"
    alt="Your Name"
    className="w-full h-full object-cover"
  />
</div>
The parchment-texture class is defined in main.css as a repeating background image plus a warm background-color fallback. If the texture image fails to load the panel will still look correct, just without the paper grain.

Build docs developers (and LLMs) love

Get started for freeTalk to us