Skip to main content

Documentation Index

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

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

The Work page visualises employment history through a deliberate physical metaphor: candles. The CandleTimeline component renders each role as a wax candle standing on a flat baseline, with the candle’s height scaled directly to the number of years spent in that position. Longer tenures produce taller candles. Every candle has an animated flame — a looping Framer Motion sequence of scale, rotation, and opacity that mimics a real flicker. The layout is a horizontal flex row on desktop and a vertical stack on mobile.

​
Route

Nav labelPlain labelPath
Day Job SpellsWork/work

​
Page header

  • Heading (h1): Day Job Spells — Cinzel typeface, amber
  • Subheading: A history written in melting wax — teal, spaced uppercase
The CandleTimeline component enters the view on scroll (whileInView) with a y: 50 → 0 + opacity fade, staggered per candle at delay: index × 0.3 s.

​
Work history

The three positions are defined as a static data array inside CandleTimeline.js. Each entry includes a durationYears value that controls the candle height (Math.max(100, Math.min(250, durationYears × 60)) px).
1

Senior Alchemist (Frontend) — Mystic Tech Ltd

Period: 2021 – PresentDuration: 3 years → candle height: 180 pxLeading a coven of developers in building a next-generation spellcasting platform (SaaS dashboard). Reduced load times by 40%.
2

Web Sorcerer — Ethereal Agency

Period: 2018 – 2021Duration: 3 years → candle height: 180 pxCrafted bespoke digital experiences for high-profile clients. Mastered the dark arts of CSS animations and WebGL.
3

Junior Code Weaver — Startup Void

Period: 2016 – 2018Duration: 2 years → candle height: 120 pxSurvived the chaotic early days of a startup. Built REST APIs and learned that console.log is a developer’s best friend.

​
Candle height formula

The candle height is clamped to a range of 100 px – 250 px using the following formula from the source: 
const height = Math.max(100, Math.min(250, durationYears * 60));
RoledurationYearsCalculated height
Senior Alchemist3180 px
Web Sorcerer3180 px
Junior Code Weaver2120 px

​
Candle anatomy

Each candle is built from layered DOM elements: 
Candle column
├── Info block (title, company, period, description)  ← hover lifts -translate-y-2
├── Flame group
│   ├── Outer glow (amber, blur, mix-blend-screen)     ← looping scale/rotate/opacity
│   ├── Inner core (white, blur)
│   └── Ambient light (amber/20, large blur, pulsing)
├── Wick (thin void-coloured line)
├── Wax body (gradient parchment, inset shadow drip details)
└── Base shadow (void blur ellipse)

​
Visual baseline

A gradient line runs the full width at the bottom of the candle group, fading in from transparent on both ends through ink at the centre — representing the surface all candles stand on.
The candle flame animation loops infinitely with repeat: Infinity. The amber outer flame animates scale, rotate, and opacity over 0.5 s; the ambient glow pulses opacity over 2 s at a slower rhythm.

Build docs developers (and LLMs) love

Get started for freeTalk to us