Skip to main content

Documentation Index

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

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

The Work History page (/work) presents a mystical vertical timeline of past roles under the heading “Spells Cast” with the subtitle “A history of my magical employ”. As the visitor scrolls, the timeline line grows from top to bottom using Framer Motion’s useScroll and useTransform hooks, and each role card animates into view with a staggered reveal of its bullet-point details.

​
Timeline Design

The central vertical line is the page’s most distinctive visual element. It uses a bg-gradient-to-b from-turquoise-glow to-velvet-purple class and carries a turquoise box-shadow (0 0 10px #2dd4bf) to produce a glowing neon effect. The line’s height is driven by a Framer Motion MotionValue derived from the scroll position of the timeline container: 
const { scrollYProgress } = useScroll({
  target: timelineRef,
  offset: ["start end", "end start"],
});
const lineHeight = useTransform(scrollYProgress, [0, 0.8], ["0%", "100%"]);
At the left edge of each timeline entry sits a purple circle marker containing the glyph “W” and a smaller turquoise dot in its centre, visually anchoring the card to the animated line. Each role card animates in with Framer Motion’s useInView. Before it enters the viewport, the card is invisible and collapsed (opacity: 0, height: 0, padding: 0). Once it crosses into view, it expands to its natural height (opacity: 1, height: "auto", padding: "2rem"). The individual detail bullet points inside the card stagger in from the left:
  • Initial state: opacity: 0, x: -20
  • Animate state: opacity: 1, x: 0
  • Delay formula: 0.5 + index * 0.1 seconds per bullet

​
Work History Data

The three work entries are stored in the wt array inside assets/main.js. Each object contains a role, coven (employer), years, and a details array of achievement strings. 
const wt = [
  {
    role: "Senior Alchemist (Frontend)",
    coven: "TechCorp Inc.",
    years: "2022 - Present",
    details: [
      "Transmuted legacy jQuery monoliths into pristine React applications.",
      "Conjured a design system used by 40+ developers across 5 covens.",
      "Reduced load times by 40% through dark arts (code splitting and lazy loading).",
    ],
  },
  {
    role: "Spellweaver (Full Stack)",
    coven: "Startup.io",
    years: "2019 - 2022",
    details: [
      "Architected serverless rituals on AWS using Node.js and DynamoDB.",
      "Summoned real-time collaboration features using WebSockets.",
      "Mentored junior apprentices in the ways of clean code.",
    ],
  },
  {
    role: "Apprentice Sorcerer",
    coven: "Digital Agency",
    years: "2017 - 2019",
    details: [
      "Crafted responsive incantations for e-commerce clients.",
      "Maintained WordPress grimoires and custom PHP plugins.",
      "Mastered the foundational runes of HTML, CSS, and JavaScript.",
    ],
  },
];

​
Adding a New Role

1

Locate the wt array

Open assets/main.js and search for the wt array declaration. It is defined near the top of the WorkHistoryPage component. You will see the three existing entries for TechCorp Inc., Startup.io, and Digital Agency.
2

Append a new entry object

Add a new object to the end of the wt array (or insert it at the desired chronological position). Provide values for all four keys — role, coven, years, and details:
{
  role: "Your Job Title",
  coven: "Your Employer",
  years: "YYYY - YYYY",
  details: [
    "First achievement or responsibility.",
    "Second achievement or responsibility.",
    "Third achievement or responsibility.",
  ],
}
The timeline renders entries in array order (newest first by convention). Save the file and the new card will appear automatically with the same scroll-driven reveal animation as the existing entries.

Build docs developers (and LLMs) love

Get started for freeTalk to us