A Master Artificer is a static GitHub Pages portfolio theme built around a clear point of view: a portfolio should show the work, but it should also show the person behind it. Instead of a generic starter layout, this theme arrives with a finished visual identity — a steampunk-grimoire aesthetic expressed through a custom color system, themed typography, and a navigation component styled as an astrolabe. The files are plain HTML, CSS, and JavaScript; no build step, package manager, or server is required to use or publish the theme.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/a-master-artificer/llms.txt
Use this file to discover all available pages before exploring further.
Purpose and Intended Audience
The theme is designed for developers, students, designers, writers, freelancers, and creative people who want a portfolio with more personality than a default landing page. It includes dedicated spaces for projects, skills, professional history, writing, case studies, and contact information, so the structure is practical even when the style is expressive. A specific goal was accessibility to beginners. Someone does not need to be an expert in React, Vite, or deployment tooling to use this theme. Because the repository is already a finished static build, the only skills required are editing text inside HTML files and uploading files to a GitHub repository. The README explains every step in plain language.This theme is a static export — the React, React Router, Framer Motion, and Tailwind CSS code has already been compiled. You do not need Node.js,
npm install, or any build command to use or deploy the theme.Design Philosophy
The design process started with the feeling a visitor should have when the page first loads, then built outward from a set of layout fundamentals: readable text, clear navigation, consistent spacing, recognizable sections, and contrast that separates content from decoration. The stronger visual pieces — the astrolabe navigation wheel, the illuminated page chrome, the grimoire-inspired typesetting — are intentionally balanced with practical structure. The design decisions tie back to usability wherever possible:- Repeated page framing supports visual consistency across routes.
- Visible navigation supports recognition over recall.
- Generous spacing improves scanability on every screen size.
- Accent colors are used to draw attention rather than compete with body text.
assets/main.css; page-level behavior lives in the per-page JavaScript modules; the three grimoire interface components live in components/grimoire/.
The Grimoire Color System
The theme’s visual identity is built on six named color tokens. Every surface, border, glow, and accent in the design is drawn from this palette.| Token | Hex | Primary Use |
|---|---|---|
grimoire-dark | #0A2A2E | Page background, deepest surfaces |
grimoire-dark-lighter | #113A40 | Elevated cards, panel backgrounds |
grimoire-glow | #2DD4BF | Accent borders, glows, interactive highlights |
grimoire-paper | #F4ECD8 | Primary text, parchment-toned surfaces |
grimoire-ink | #1A3C40 | Secondary text, subdued labels |
grimoire-accent | #9D7A96 | Decorative accents, muted highlights |
grimoire-glow) and parchment text (grimoire-paper) against the deep teal background (grimoire-dark) provide the theme’s core readability. Test any changes on both desktop and mobile-width screens.
Typography Stack
The theme imports three typefaces from Google Fonts, each assigned a specific role in the visual hierarchy.| Font | CSS Role | Use |
|---|---|---|
| Pirata One | font-title | Display headings, navigation labels, decorative lettering |
| EB Garamond | body (element default) | Body text, biographical paragraphs, long-form content |
| JetBrains Mono | font-mono | Code samples, technical labels, <code> elements |
Navigation Routes
The theme uses React Router v6 for client-side routing. Each route has a themed label that fits the grimoire concept while still communicating its practical purpose clearly.| Route | Themed Label | Purpose |
|---|---|---|
/ | Cover | Homepage and GitHub Pages entry point |
/about | The Practitioner | Biography, background, and creative influences |
/projects | Conjurings | Featured projects with descriptions and links |
/skills | Athenaeum | Languages, tools, technologies, and capabilities |
/work | Past Covens | Professional experience and work history |
/case-studies | Field Notes | In-depth project breakdowns |
/blog | Loose Pages | Writing, articles, and long-form notes |
/testimonials | Whispers | Recommendations and feedback |
/contact | Send Familiar | Contact details and external profile links |
Tech Stack
The theme was authored in the following technologies. The compiled output in this repository requires none of them to be installed in order to use or deploy the theme.| Technology | Role |
|---|---|
| React 18 | Component model and rendering |
| React Router v6 | Client-side routing between the nine pages |
| Framer Motion | Page transitions and the astrolabe navigation animation |
| Tailwind CSS | Utility-first styling compiled into assets/main.css |
| Static build | No Node.js, no npm install, no build step required |
AstrolabeNav.js, CustomCursor.js, PageChrome.js) live in components/grimoire/ and are pre-compiled into the static asset bundle.
Explore the Documentation
Getting Started
Fork the repository, edit your personal information, and publish to GitHub Pages in a few steps.
GitHub Pages Deployment
Detailed deployment guide covering the required repository structure, GitHub Pages settings, and common problems.