Skip to main content

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 Skills page transforms a conventional technology list into a thematic ingredient inventory. Under the banner of "The Witch's Brew", each skill is framed as a component of an ongoing magical formula — a presentation choice that makes the technical content feel intentional and curated rather than exhaustive or boastful.

Route & Static Shell

The Skills page is served from pages/Skills.html. Its static shell sets the hash to /skills on load.
<script>
  window.__STATIC_PAGE_ROUTE__ = "/skills";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/skills";
  }
</script>

Section Headings

ElementText
Section heading"The Witch's Brew"
Subheading"Ingredients of the craft"
The heading "The Witch's Brew" is rendered in font-heading (Cinzel Decorative) with witch-teal-glow (#2dd4bf) coloring. The subheading "Ingredients of the craft" uses font-body (Cormorant Garamond) and functions as a framing caption for the skills grid or list below.

Visual Design

The page continues the midnight-base (#0a0e1a) background. Framer Motion animates skill entries into view as the page loads or as the user scrolls into the section, reinforcing the sense that the brew is being assembled in real time.
The “brew” metaphor encourages grouping skills by category — e.g., “languages,” “frameworks,” “tools” — as if different ingredients serve different alchemical purposes. This supports clear visual hierarchy without needing conventional subheadings.

Skills Presentation

Each skill item in the brew is displayed as a styled element within a grid or list layout. The visual design may use:
  • The witch-teal-bright (#5eead4) color for skill labels
  • A subtle glow or border effect that may activate on hover to simulate an ingredient “activating”
  • Framer Motion stagger animations to bring each item into view in sequence
The SigilSVG component (featuring a draw animation) may appear as a decorative background or section divider on this page. Sigil draw animations use SVG stroke-dashoffset transitions to simulate the sigil being inscribed.
In the site’s thematic navigation, the Skills page is linked as “The Witch’s Brew”, matching the section heading and maintaining the in-world chapter-title pattern used across all nav links.

Animation Details

ElementAnimation
Section headingFade in + slight upward translate on mount
SubheadingFade in with short delay after heading
Skill itemsStaggered fade-in, each item offset by a small delay
Hover stateTeal glow or border highlight may activate on individual skill items

Typography & Color Reference

TokenHexUsage on this page
midnight-base#0a0e1aPage background
witch-teal-glow#2dd4bfSection heading, accent borders
witch-teal-bright#5eead4Skill label text, highlights
witch-teal-dark#0e3a3aCard or item background tints
font-headingCinzel DecorativeSection heading
font-bodyCormorant GaramondSubheading, skill labels

Build docs developers (and LLMs) love