Skip to main content

Documentation Index

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

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

The Work page presents the developer’s career history through an unusual interactive mechanic: a vertical column of candle icons on the left side of the layout acts as the navigation control. Clicking a candle “lights” it and simultaneously reveals the corresponding work entry in the detail panel on the right. This replaces the conventional tab or accordion pattern with something thematically cohesive and visually memorable.

​
Route

#/work
Navigate to #/work or click the Work link in the site navigation.

​
Visual Layout

Candle Column (Left)

Three Candle component instances stacked vertically. Each candle corresponds to one work entry. The currently active candle appears lit (flame visible, brighter colours); the others appear unlit (no flame, muted colours).

Detail Panel (Right)

Displays the full details of the selected work entry: job title, company name, employment period, and a prose description. Transitions smoothly between entries when a different candle is clicked.

Active State

Only one candle is lit at a time. The initial active entry is the most recent role (isLit: true in the data). Clicking any candle deactivates the current one and activates the selected one.

Responsive Stacking

On narrow viewports the candle column moves above the detail panel, stacking the layout vertically. The candles remain tappable and the detail panel sits below them.

​
Data & Configuration

Work entries are stored in the x array inside assets/main.js: 
// assets/main.js — Work experience data (array x)
const x = [
  {
    id: 1,
    title: 'Lead Sorcerer (Frontend)',
    company: 'Mystic Tech Corp',
    period: '2022 - Present',
    description:
      'Leading a coven of developers in building a massive React application. ' +
      'Conjured a new design system from the void.',
    isLit: true,
  },
  {
    id: 2,
    title: 'Senior Alchemist',
    company: 'Potion Web Services',
    period: '2019 - 2022',
    description:
      'Transmuted legacy jQuery into modern React. ' +
      'Optimized build times by 40% through dark webpack magic.',
    isLit: false,
  },
  {
    id: 3,
    title: 'Apprentice Developer',
    company: 'Scroll & Ink Agency',
    period: '2016 - 2019',
    description:
      'Learned the ancient arts of HTML, CSS, and vanilla JavaScript. ' +
      'Built responsive scrolls for various clients.',
    isLit: false,
  },
];

​
Field reference

FieldTypePurpose
idnumberUnique identifier; used as the React list key
titlestringJob title shown in the detail panel heading
companystringEmployer name shown beneath the title
periodstringEmployment date range (free-form text)
descriptionstringProse description of responsibilities and achievements
isLitbooleanSets which entry is active on initial render; exactly one should be true

​
Customisation

1

Edit an existing role

Find the relevant object in the x array and update title, company, period, or description in place. Changes appear immediately after the build.
2

Add a new role

Append a new object to the x array with a unique id and isLit: false. A new candle will appear in the column automatically. The most recent role is conventionally placed first (index 0).
3

Change the default active entry

Set isLit: true on the entry you want highlighted when the page first loads. Set all other entries to isLit: false. Only one entry should have isLit: true — the component reads this value to initialise its state.
4

Remove an old role

Delete the corresponding object from the x array. The candle column will shrink accordingly.
5

Add a URL or project link

Extend the object schema with a url field and update the WorkDetail component to render a link alongside the description. This is useful for linking to case studies or live projects related to a role.

​
Key Components

ComponentDescriptionDocs
CandleRenders a single candle SVG; accepts isLit prop to toggle flame visibility and brightness/components/candle
WorkDetailDisplays the selected entry’s title, company, period, and description in the right panelInternal
WorkPageParent component that holds active-state logic and wires candle clicks to panel updatesInternal

​
Interactive Behaviour

Each Candle component receives an onClick handler from the parent WorkPage. When clicked, the handler updates a useState variable holding the currently selected id. The Candle components re-render with the appropriate isLit value, and the WorkDetail panel re-renders with the new entry’s data.
The Candle component renders differently based on the isLit prop:
  • Lit — flame SVG visible, stroke colour at full opacity, warm amber glow applied via a CSS filter.
  • Unlit — flame SVG hidden or replaced with a wisp of smoke, stroke colour reduced to ~30% opacity, no glow filter.
The transition between states is animated with a short Framer Motion opacity and filter tween.
When the active entry changes, the WorkDetail panel fades out the previous content and fades in the new content using Framer Motion’s AnimatePresence keyed on the entry id. This prevents a jarring hard-cut when switching between roles.
The isLit field in the data array is only used to determine the initial active state. Once the page mounts, all subsequent state changes are handled by the component’s internal useState. Updating isLit in the data only affects what is shown on first render — it does not persist user selections across navigations.
If you have more than four or five roles, consider splitting the page into two time periods (e.g. “Recent Spells” and “Ancestral Learnings”) with a section divider between them. A very tall candle column can feel unwieldy on smaller screens.

Build docs developers (and LLMs) love

Get started for freeTalk to us