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 Home page is the first thing visitors see when they arrive at DevHaunt. It fills the viewport with a centred hero section built around a HauntedHouse SVG illustration whose front door opens as the user scrolls. Two Framer Motion entrance sequences — one for the headline and one for the call-to-action — fire on mount to draw the eye from top to bottom before the door begins to creak open.
Route: /
Static HTML: index.html (repo root)
Page function: I() in assets/main.js

​
What the page displays

ElementContent
Headline (h1)Welcome Foolish Mortals
Subtitle (p)I'm a frontend developer crafting scarily good user experiences. Grab some candy and take the tour.
Hero illustrationHauntedHouse SVG — door opens on scroll
CTA buttonStep Inside → links to /about
Scroll hintScroll to creak the door open...

​
Halloween-themed concept

The page leans into a haunted-house welcome. The headline borrows the classic theme-park “Welcome, foolish mortals” line, the CTA invites visitors to literally step inside, and the HauntedHouse illustration anchors the spooky atmosphere. The font-spooky typeface and pumpkin-orange glow (drop-shadow + shadow-[0_0_20px_rgba(255,122,26,0.4)]) reinforce the aesthetic throughout.

​
Interactive behaviour

  • Scroll trigger: The HauntedHouse component listens to the window scroll position and animates its front door open as the user scrolls down the page. No additional state management is needed — the animation is self-contained inside the component.
  • CTA hover: The “Step Inside” button scales up to 1.05× on hover and transitions its background from pumpkin orange to ghost white. The ArrowRight icon inside the button slides 1px to the right on hover via group-hover:translate-x-1.

​
Framer Motion animations

Both animated wrappers use motion.div with identical y-axis entrance keyframes but different delay values. 
// Headline + subtitle wrapper
{
  initial: { y: 20, opacity: 0 },
  animate: { y: 0,  opacity: 1 },
  transition: { delay: 0.2 }
}

// CTA button + scroll hint wrapper
{
  initial: { y: 20, opacity: 0 },
  animate: { y: 0,  opacity: 1 },
  transition: { delay: 0.8 }
}
The HauntedHouse SVG renders between the two animated blocks and handles its own scroll-driven animation internally.

​
How to customise

All visible text lives directly in the JSX of the I() function in assets/main.js.
1

Update the headline

Locate the h1 inside the first motion.div (transition delay 0.2) and replace "Welcome Foolish Mortals" with your preferred greeting.
2

Update the subtitle

The p tag immediately below the h1 holds the subtitle copy. Edit the string to describe your own speciality.
3

Change the CTA destination

The Link component (m imported from Navigation.js) has to="/about". Update this prop to point to any other route if needed.
4

Change the CTA label

Replace the text node "Step Inside" inside the Link with your preferred button label.
5

Adjust entrance timing

Change the delay values in the two transition objects to fine-tune how quickly each block appears after the page loads.
The pumpkin-orange headline glow is controlled by the Tailwind utility drop-shadow-[0_0_15px_rgba(255,122,26,0.5)]. Adjust the last value (the alpha channel 0.5) to make the glow more or less intense without touching any CSS files.

Build docs developers (and LLMs) love

Get started for freeTalk to us