The Artisan Developer theme ships ten JavaScript components as compiled ES modules inside theDocumentation 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.
components/ folder. Each module is loaded by the HTML pages via <link rel="modulepreload"> and rendered by React into the <div id="root"> element at the bottom of every page — no npm install, no build step, and no Node server required at runtime.
Component catalog
SwirlNav
Pill navigation bar with spring-animated route highlighting across all nine portfolio routes.
DyeCursor
Color-cycling dye-drop cursor trail that fades and expands as you move the mouse.
KineticHeadline
Per-letter animated heading that springs each character in from below with a rotation effect.
MarbledCard
Marbled paper content card with scroll-triggered entry animation and hover lift effect.
FabricStripTimeline
Horizontal scroll timeline that converts vertical scroll into sideways movement across a fabric strip.
TieDyeSwirl
Background swirl decoration that provides the signature tie-dye radial gradient behind page content.
PaintTube
Decorative paint tube illustration placed at section edges for visual texture.
SoapBubble
Floating soap bubble decoration with iridescent gradient styling.
ColorWheel
Rotating color wheel decoration used on the Skills and About pages.
PageTransition
Page entry and exit wrapper that fades new route content in after React Router navigation.
How components are loaded
Each HTML page in the theme references a compiled entry point and preloads the component modules it needs so the browser fetches them in parallel before they are first imported:assets/main.js imports each component and mounts the React application. Preloading the individual component files eliminates waterfall fetches on first render.
The components are compiled ES modules — they import from each other and from
../assets/ using relative paths. Do not move files between folders or rename the assets/ and components/ directories; doing so will break the relative import chains at runtime.Motion library
Animation effects throughout the theme use Framer Motion, which is compiled intoassets/proxy.js as a re-export shim. The motion.div, motion.h1, motion.span, useScroll, useTransform, and AnimatePresence patterns are used across multiple components. Because Framer Motion is bundled into the shared asset file rather than duplicated, all components share a single animation runtime instance — this keeps the total payload small and ensures coordinated layout animations such as the layoutId pill in SwirlNav work correctly across route changes.