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 Skills page presents the developer’s technology toolkit as a pumpkin patch. Each skill is rendered as a JackOLantern card — a carved pumpkin whose face reflects the developer’s proficiency with that technology. The grid is responsive: two columns on small screens and four columns on medium and larger screens. Cards spring onto the page with a staggered scale animation sourced from Framer Motion’s spring physics.
Route: /skills
Static HTML: pages/Skills.html
Page function: A() in assets/main.js
Data array: R in assets/main.js

​
What the page displays

ElementContent
Section heading (h1)The Pumpkin Patch
SubtitleCarved with care. The scarier the face, the sharper the skill.
Layoutgrid-cols-2 md:grid-cols-4 — 4-column responsive grid
Card componentJackOLantern — one per skill

​
Skills data

Eight skills are stored in the R array in assets/main.js, spread across three proficiency levels.
NameLevelAnimation delay
Reactexpert0.1 s
TypeScriptexpert0.5 s
Tailwindexpert0.2 s
Next.jsintermediate0.8 s
Node.jsintermediate0.4 s
Framer Motionintermediate0.7 s
GraphQLfamiliar0.3 s
Pythonfamiliar0.9 s

​
Proficiency levels

LevelMeaning
expertPrimary tools used daily in production
intermediateRegularly used; confident in most scenarios
familiarSolid foundational knowledge; used in selected projects

​
Raw data structure

// assets/main.js — array R
const R = [
  { name: "React",         level: "expert",       delay: 0.1 },
  { name: "TypeScript",    level: "expert",       delay: 0.5 },
  { name: "Tailwind",      level: "expert",       delay: 0.2 },
  { name: "Next.js",       level: "intermediate", delay: 0.8 },
  { name: "Node.js",       level: "intermediate", delay: 0.4 },
  { name: "Framer Motion", level: "intermediate", delay: 0.7 },
  { name: "GraphQL",       level: "familiar",     delay: 0.3 },
  { name: "Python",        level: "familiar",     delay: 0.9 },
];

​
Halloween-themed concept

The pumpkin patch frames skills as seasonal produce — each technology has been “carved with care”, and the quality of the carving reflects the depth of expertise. The JackOLantern SVG component likely renders different face expressions per proficiency level, making the visual metaphor immediately legible: a grinning expert-level pumpkin versus a simpler familiar-level face.

​
Framer Motion animations

Each pumpkin card uses a spring-based scale entrance, making them bounce into place rather than sliding in linearly. 
// Per-card wrapper (motion.div)
{
  initial: { opacity: 0, scale: 0.5 },
  animate: { opacity: 1, scale: 1 },
  transition: {
    delay: index * 0.1,
    type: "spring"
  }
}
The header block drops in from above without a delay: 
// Header motion.div
{
  initial: { y: -20, opacity: 0 },
  animate: { y: 0,   opacity: 1 }
}
Note that the delay property in each skill object in the R array is available to the JackOLantern component for internal animations (e.g. a glow pulse), while the outer motion.div wrapper uses index * 0.1 for the grid-entrance stagger.

​
How to customise

1

Add a new skill

Append an object to the R array with name, level (one of "expert", "intermediate", or "familiar"), and a delay value (used internally by the JackOLantern component for its idle animation).
2

Change a proficiency level

Update the level field on the relevant object. The JackOLantern component reads this prop to determine which face expression to render.
3

Reorder skills

The grid renders in R’s array order. Move objects within the array to control which skills appear in which positions. The grid fills left-to-right, top-to-bottom.
4

Remove a skill

Delete the corresponding object from the R array. The grid will reflow automatically.
The delay field on each skill object is separate from the entrance stagger — it controls the pumpkin’s idle animation cadence once it has appeared on screen. Spreading the values across 0.1–0.9 gives each pumpkin a slightly different rhythm, avoiding a synchronised “blinking” effect across the whole grid.

Build docs developers (and LLMs) love

Get started for freeTalk to us