Skip to main content

Documentation Index

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

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

The About page introduces the developer behind DevHaunt with a two-column layout. The left column slides in from the left with the h1 and two paragraphs of bio copy, while the right column scales in a TrickOrTreatBag SVG illustration — a Halloween stand-in for the traditional profile photo or avatar. On smaller viewports the columns stack vertically.
Route: /about
Static HTML: pages/About.html
Page function: L() in assets/main.js

​
What the page displays

ElementContent
Section heading (h1)The Ghost Behind the Screen
Bio paragraph 1Developer intro — clean architecture, pixel-perfect execution, fast & accessible web
Bio paragraph 2Personal interests — coffee shops, side projects, horror movies
Right-column illustrationTrickOrTreatBag SVG component

​
Full bio copy

Paragraph 1: “Greetings! I’m a frontend developer who loves bringing designs back from the dead. With a passion for clean architecture and pixel-perfect execution, I build web experiences that are frighteningly fast and monstrously accessible.”
Paragraph 2: “When I’m not writing code, you can find me haunting local coffee shops, carving out new side projects, or watching classic horror movies (the cheesy ones, of course).”

​
Halloween-themed concept

Rather than a conventional headshot, the right column renders a TrickOrTreatBag SVG — a friendly Halloween bag overflowing with treats. The heading “The Ghost Behind the Screen” re-frames the typical “About Me” section as a supernatural reveal. Bio language like “bringing designs back from the dead”, “frighteningly fast”, and “monstrously accessible” keeps the theme consistent without obscuring the genuine professional content.

​
Layout

The page uses a flex-col md:flex-row wrapper (max-w-4xl) so the two columns sit side by side on medium and wider screens. Both columns have flex-1 so they share available space equally.

​
Framer Motion animations

Three separate motion elements fire in sequence on mount. 
// h1 — slides in from the left
{
  initial: { x: -20, opacity: 0 },
  animate: { x: 0,   opacity: 1 }
  // no explicit delay — fires immediately
}

// Bio text wrapper (both paragraphs)
{
  initial: { x: -20, opacity: 0 },
  animate: { x: 0,   opacity: 1 },
  transition: { delay: 0.2 }
}

// TrickOrTreatBag illustration wrapper
{
  initial: { scale: 0.8, opacity: 0 },
  animate: { scale: 1,   opacity: 1 },
  transition: { delay: 0.4 }
}
The bag scales up from 0.8 rather than sliding, giving the right column a distinct “popping into existence” feel that differentiates it from the left-column text.

​
How to customise

1

Edit the heading

Find the motion.h1 in the L() function in assets/main.js and replace "The Ghost Behind the Screen" with your preferred section title.
2

Edit bio paragraphs

Both p elements live inside the motion.div with transition: { delay: 0.2 }. Edit either string to reflect your own background and personality.
3

Replace the illustration

Swap out <TrickOrTreatBag /> for any other SVG component or image tag. Keep the outer motion.div wrapper intact to retain the scale-in entrance animation.
4

Adjust animation timing

Increase or decrease the delay values (0.2 for bio text, 0.4 for the bag) to speed up or slow down the staggered entrance.
To add a real photo, replace <TrickOrTreatBag /> with an <img> tag and give it Tailwind classes like rounded-full w-64 h-64 object-cover to match the circular avatar convention while keeping the existing motion.div wrapper.

Build docs developers (and LLMs) love

Get started for freeTalk to us