Skip to main content

Documentation Index

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

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

Lineage is the work history page of the Digital Alchemy portfolio, rendered at route /work. It presents a chronological record of professional experience as a candlelit timeline — a vertical wax column that slowly illuminates as the visitor scrolls down the page, burning brighter as each new role is revealed.

​
What Renders on This Page

The page opens with the site-standard heading block:
  • Heading: “Lineage” in large parchment serif
  • Subheading: “A history of magical endeavors” in uppercase turquoise
Below the heading, the CandleTimeline component takes over the full remaining content area.

CandleTimeline Component

A scroll-driven timeline where a glowing turquoise gradient fills a vertical track in sync with scroll progress. Work history entries animate in from alternating sides as they enter the viewport.

​
Timeline Entries

The CandleTimeline contains three work history entries drawn directly from the source data. Entries alternate left and right on the timeline for visual rhythm, and each entry springs into view when it enters the viewport (whileInView, once: true, margin: -100px).
Role: Senior Alchemist (Frontend)
Company: Mystic Tech Corp
Years: 2023 – Present
Side: Left (entry 0, even index)
“Leading a coven of 5 developers to rebuild the core spellbook (dashboard) using React and Framer Motion. Reduced load times by 40%.”
This is the current position. The entry slides in from the left with a spring animation and connects to the timeline track via a horizontal turquoise connector line with a glowing dot endpoint.
Role: UI Sorcerer
Company: Ethereal Agency
Years: 2020 – 2023
Side: Right (entry 1, odd index)
“Crafted bespoke, highly animated landing pages for arcane clients. Mastered the arts of CSS animations and SVG manipulation.”
A three-year agency role focused on motion-rich marketing pages. The entry slides in from the right.
Role: Apprentice Developer
Company: The Guild
Years: 2018 – 2020
Side: Left (entry 2, even index)
“Learned the ancient rites of JavaScript and responsive design. Maintained legacy jQuery scrolls and gradually migrated them to modern React.”
The earliest role, representing the beginning of the developer’s professional journey. Slides in from the left.

​
Scroll-Driven Animation

The CandleTimeline implements a sophisticated scroll-progress system:
The component uses Framer Motion’s useScroll with target and offset: ['start center', 'end center'] to track how far the timeline container has scrolled through the viewport. The resulting scrollYProgress value (0 → 1) drives the candle fill height.
A vertical track runs down the center of the timeline. A motion.div inside the track uses useTransform to map scrollYProgress from [0, 1] to ['0%', '100%'], producing a height value that grows as you scroll. The fill uses a bg-gradient-to-b from-turquoise/80 to-teal/40 with a bottom glow shadow (shadow-[0_5px_15px_rgba(64,224,208,0.5)]).
A decorative animated flame sits at the very top of the timeline track, composed of two layered divs — an outer amber blur (the warm glow) and an inner white blur (the bright core) — both running the animate-flicker CSS keyframe. This is the same flame aesthetic used in the ambient Candle components on the home page.
Each timeline entry uses whileInView with once: true, meaning the slide-in animation plays exactly once as the entry enters the visible area and does not replay on scroll-back. Entries on even indices slide from x: -50 (left), odd indices from x: 50 (right).

​
Route Information

PropertyValue
Route path/work
React componentWork (internal name L)
Key componentsCandleTimeline
Animation libraryFramer Motion (useScroll, useTransform, whileInView)
The timeline is designed to be scrolled slowly. Rushing through the page will cause the candle to illuminate too quickly and the per-entry animations to collapse into one another. The margin: -100px viewport offset helps entries trigger slightly before they reach the exact center of the screen, giving the impression of the flame “calling them into being.”

Build docs developers (and LLMs) love

Get started for freeTalk to us