The Craft is a developer portfolio template that trades the typical clean-white agency aesthetic for something far more arcane. Every page is designed to feel like a page torn from a wizard’s grimoire — complete with parchment textures, candlelit glows, and navigation landmarks drawn from occult tradition. It is built for developers who want their work to speak through atmosphere as much as through code, and who are willing to embrace a dark-fantasy identity rather than a generic résumé site.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/the-craft/llms.txt
Use this file to discover all available pages before exploring further.
What The Craft Is
The Craft is a single-page application (SPA) built with React 18 and Vite. It presents a complete personal portfolio — projects, skills, work history, case studies, a blog, testimonials, and a contact form — all wrapped in a coherent dark-fantasy narrative. Rather than labelling its pages with dry functional names, The Craft assigns each one a thematic title that reinforces the grimoire metaphor, creating an immersive reading experience for any visitor who arrives.The Craft is a static SPA with no backend — all data is stored directly in the component files as JavaScript arrays. Customization means editing those arrays.
Tech Stack
The Craft is assembled from a focused set of modern frontend tools, each chosen for speed and expressiveness.| Technology | Version | Role |
|---|---|---|
| React | 18 | Component model and rendering |
| Vite | Latest | Dev server, bundler, and build tool |
| React Router | v6 | Client-side SPA routing |
| Framer Motion | Latest | Page transitions and ambient animations |
| Tailwind CSS | Latest | Utility-first styling with custom design tokens |
| GitHub Pages | — | Static hosting target |
- Cinzel — a serif display face used for headings, page titles, and navigation labels; evokes classical Roman inscriptions
- EB Garamond — a refined humanist serif used for body copy and italic flourishes
- Pinyon Script — a flowing cursive used for decorative callouts and the loading fallback message
Design Language
The visual identity of The Craft is built on four core color tokens defined in Tailwind’s configuration:| Token | Hex | Use |
|---|---|---|
midnight | #0a0d14 | Primary page background — deep, near-black navy |
parchment | #e8dcc4 | Primary text and surface color — aged paper warmth |
spell | #2dd4bf | Teal glow used for interactive highlights, borders, and animated shimmer |
blood | #7f1d1d | Deep crimson used for destructive accents, borders, and dramatic dividers |
Pages
The Craft ships with nine built-in pages, each with a functional route and a thematic display name:| Route | Thematic Name | Purpose |
|---|---|---|
/ | The Cover | Hero / landing page |
/about | Know Thy Witch | Personal bio and background |
/projects | Spellwork | Project showcase grid |
/skills | Arcane Arts | Technical skills and proficiencies |
/work | Coven Records | Work history and employment timeline |
/case-studies | Tome of Workings | Long-form project deep-dives |
/blog | Whispers | Blog post listing |
/contact | Summoning Circle | Contact form |
/testimonials | Sworn Word | Testimonials and endorsements |
React.lazy and Suspense, so only the code for the current page is fetched on first visit.
Reusable Components
The Craft provides six reusable components that handle the site’s chrome, ambient effects, and shared UI patterns:| Component | Description |
|---|---|
Layout | Root shell that wraps every page; provides the background, scroll container, and slot for child routes |
MoonPhaseNav | Persistent navigation bar styled as a row of moon-phase glyphs, one per page |
CursorTrail | Canvas-based particle effect that follows the mouse cursor with a fading teal trail |
PageTransition | Framer Motion wrapper that fades and slides pages in and out on route change |
Sigil | Decorative SVG component rendering a rotating hexagonal sigil, used on the Home and Contact pages |
Candle | Animated SVG candle flame component used as an ambient decoration on the Work page |
Next Steps
Getting Started
Clone the repo, install dependencies, and have a dev server running in under ten minutes.
Architecture
Understand how routes, components, and data arrays fit together inside The Craft’s source tree.