Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/full-moon/llms.txt
Use this file to discover all available pages before exploring further.
The Projects page is a gallery of independent work — side projects, open-source contributions, and experiments — framed as spells the developer has cast. Each project is a unique incantation: a specific combination of technologies and intent brought into existence through code. The "Inspect Spell →" call-to-action on each card invites visitors to examine the work more closely.
Route & Static Shell
The Projects page is served from pages/Projects.html. Its static shell sets the hash to /projects on load.
<script>
window.__STATIC_PAGE_ROUTE__ = "/projects";
if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
window.location.hash = "/projects";
}
</script>
Section Headings
| Element | Text |
|---|
| Section heading | "Spells I've Cast" |
| Subheading | "Incantations of code and logic" |
"Spells I've Cast" is rendered in font-heading (Cinzel Decorative) and colored with witch-teal-glow (#2dd4bf). The subheading "Incantations of code and logic" uses font-body (Cormorant Garamond) and frames the projects below as deliberate, purposeful acts — not accidents, but crafted outcomes.
Visual Design
Project entries are displayed as cards against the midnight-base (#0a0e1a) background. Each card is styled with a witch-teal-dark (#0e3a3a) background or border treatment, with witch-teal-bright (#5eead4) used for headings and the "Inspect Spell →" action link.
The arrow in "Inspect Spell →" is a deliberate directional cue. It signals forward motion — following the spell to its source or live deployment — without using generic labels like “View” or “Open.”
Project Card
Each project card in the gallery follows a consistent structure.
| Field | Description |
|---|
| Project title | Name of the spell / project |
| Description | What the incantation does; what problem it solves |
| Technologies | The ingredients used (tech stack) |
| CTA | "Inspect Spell →" — links to live demo, repo, or case study |
The SigilSVG component may be used as a visual identifier or decorative background element within individual project cards. The sigil draw animation (SVG stroke-dashoffset transition) may trigger on card hover or on page mount.
Card Interactions
| Interaction | Behavior |
|---|
| Page mount | Cards animate in with staggered Framer Motion fade + scale |
| Card hover | Glow border may activate; witch-teal-glow color used for border highlight |
"Inspect Spell →" click | Navigates to external link (live demo, GitHub) or internal case study |
Animation Details
| Element | Animation |
|---|
| Section heading | Fade in + upward translate on mount |
| Subheading | Short delayed fade-in |
| Project cards | Staggered fade-in with slight scale-up (scale: 0.95 → 1) |
| Card hover | Box shadow / border glow may activate via CSS transition |
Navigation Context
In the site’s thematic navigation, the Projects page is linked as “Spells I’ve Cast”, matching the section heading and preserving the arcane chapter structure used across all navigation links.
Typography & Color Reference
| Token | Hex | Usage on this page |
|---|
midnight-base | #0a0e1a | Page background |
witch-teal-glow | #2dd4bf | Section heading, card borders on hover |
witch-teal-bright | #5eead4 | Card titles, "Inspect Spell →" link text |
witch-teal-dark | #0e3a3a | Card background fill |
font-heading | Cinzel Decorative | Section heading, card titles |
font-body | Cormorant Garamond | Subheading, card description text |