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 Work page presents the developer’s employment history as a haunted hall of doors. Each job is rendered as a DoorPanel card — a stylised door that visitors can knock on to learn more about that role. The panels sit in a horizontal flex-row on medium and wider viewports and stack vertically on mobile. Each door slides in from the left with a staggered delay, creating the effect of discovering them one by one as you walk down the corridor.
Route: /work
Static HTML: pages/Work.html
Page function: O() in assets/main.js
Data array: C in assets/main.js

​
What the page displays

ElementContent
Section heading (h1)Hall of Doors
SubtitlePast lives and current hauntings. Knock if you dare.
Layoutflex-col md:flex-row justify-center gap-8 md:gap-12
Card componentDoorPanel — one per job

​
Work history data

Three roles are stored in the C array in assets/main.js.
CompanyRolePeriod
Phantom TechSenior Frontend Engineer2022 – Present
Goblin CorpFrontend Developer2020 – 2022
WebWeaversWeb Developer2018 – 2020

​
Full descriptions

Phantom Tech — Senior Frontend Engineer (2022 – Present)
“Leading a team of ghouls to build high-performance React applications. Reduced load times by 40% and implemented a spooky new design system.”
Goblin Corp — Frontend Developer (2020 – 2022)
“Maintained legacy codebases that refused to die. Migrated monolithic jQuery apps to modern React architectures.”
WebWeavers — Web Developer (2018 – 2020)
“Spun intricate webs of HTML/CSS for local businesses. Specialized in responsive design and accessibility.”

​
Raw data structure

// assets/main.js — array C
const C = [
  {
    company: "Phantom Tech",
    role: "Senior Frontend Engineer",
    period: "2022 - Present",
    description:
      "Leading a team of ghouls to build high-performance React applications. Reduced load times by 40% and implemented a spooky new design system.",
  },
  {
    company: "Goblin Corp",
    role: "Frontend Developer",
    period: "2020 - 2022",
    description:
      "Maintained legacy codebases that refused to die. Migrated monolithic jQuery apps to modern React architectures.",
  },
  {
    company: "WebWeavers",
    role: "Web Developer",
    period: "2018 - 2020",
    description:
      "Spun intricate webs of HTML/CSS for local businesses. Specialized in responsive design and accessibility.",
  },
];

​
Halloween-themed concept

A “Hall of Doors” evokes the classic haunted-house corridor where each door hides a secret room. Here, each door represents a chapter of professional history: step through and learn what lurked behind. Job descriptions are written in-character — “team of ghouls”, “codebases that refused to die”, “spun intricate webs” — while still communicating genuine achievements.

​
Framer Motion animations

Each door panel slides in from the left with a stagger of 0.2 s between panels. 
// Per-panel wrapper (motion.div)
{
  initial: { opacity: 0, x: -50 },
  animate: { opacity: 1, x: 0 },
  transition: { delay: index * 0.2 }
}
The header block (heading + subtitle) uses the standard top-drop entrance: 
// Header motion.div
{
  initial: { y: -20, opacity: 0 },
  animate: { y: 0,   opacity: 1 }
}
With three panels the last door waits 0.4 s before sliding in — long enough to feel cinematic without making the user wait.

​
How to customise

1

Add a new role

Append an object to the C array with company, role, period, and description fields. A new DoorPanel will be rendered automatically.
2

Update an existing role

Find the object by company name in the C array and edit any field. Use the description field to highlight key achievements, technologies used, or team size.
3

Reorder roles

The panels render in C’s array order, left to right. Most recent roles are conventionally first.
4

Remove a role

Delete the corresponding object from C. The flex layout will redistribute the remaining panels evenly.
The period field is a free-form string, so formats like "Jan 2022 – Present", "2022 – now", or "Q1 2020 – Q4 2021" all work fine — just keep it short enough to fit comfortably inside a DoorPanel card.

Build docs developers (and LLMs) love

Get started for freeTalk to us