Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/artisan-developer/llms.txt
Use this file to discover all available pages before exploring further.
The Work page appears as “The Long Strip” in the navigation bar. It uses the FabricStripTimeline component to present work history as a series of cards that scroll horizontally as the visitor scrolls down the page. The effect gives the timeline a deliberate, unfolding quality that fits the theme’s textile metaphor — each role revealed as the strip unreels.
File location
FabricStripTimeline entry format
Each entry in the timeline is defined as a JavaScript object with four fields. These objects are stored in the M array at the top of components/FabricStripTimeline.js:
{
year: '2023 - Present', // date range displayed in Caveat handwriting font
role: 'Frontend Engineer', // job title in Fraunces display font
company: 'Acme Corp', // company name in the teal accent style
desc: 'Brief description of responsibilities and impact.',
}
const M = [
{
year: '2023 - Present',
role: 'Senior Frontend Artisan',
company: 'Chroma Corp',
desc: 'Leading the UI architecture for next-gen creative tools.',
},
{
year: '2021 - 2023',
role: 'UI Engineer',
company: 'DyeHard Tech',
desc: 'Built the core component library used by 50+ internal teams.',
},
{
year: '2019 - 2021',
role: 'Web Developer',
company: 'Splash Digital',
desc: 'Crafted bespoke marketing sites with heavy WebGL and animations.',
},
{
year: '2017 - 2019',
role: 'Junior Dev',
company: 'Pigment Agency',
desc: 'Cut my teeth writing vanilla JS and wrestling with CSS floats.',
},
];
Updating timeline entries
Open components/FabricStripTimeline.js and replace the four default objects in the M array with your own work history. Add or remove objects as needed — the layout adapts to the number of entries:
const M = [
{
year: '2024 - Present',
role: 'Senior Engineer',
company: 'Your Company',
desc: 'Brief description of your current role and key contributions.',
},
{
year: '2022 - 2024',
role: 'Software Engineer',
company: 'Previous Company',
desc: 'What you built and the impact it had.',
},
// Add more entries following the same shape
];
Scroll behavior
The FabricStripTimeline section occupies 300vh of vertical height. This extra height creates the scroll space that drives the horizontal animation — as the visitor scrolls down through those three viewport heights, the strip translates from 0% to -75% along the horizontal axis. Do not reduce the h-[300vh] class on the section element; shortening it will cut the animation short and leave entries off-screen.
For each entry, keep desc to one or two sentences. Longer descriptions overlap with the constrained card width at desktop sizes because the cards are fixed-width and horizontally arranged. If you have more to say about a role, link from the Work page to a Case Study that goes into detail.