Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/witch-dev/llms.txt

Use this file to discover all available pages before exploring further.

witch-dev uses a three-font system: Creepster for anything that should feel theatrical and arcane, JetBrains Mono for anything that should feel precise and terminal-like, and Space Grotesk as the default body font that grounds the UI in a contemporary sans-serif. The contrast between dripping display type, cold fixed-width output, and clean body text is central to the portfolio’s hacker-occultist aesthetic.

​
Font Roles

ClassFontUsage
font-creepsterCreepster (Google Fonts)Page titles (“Spell Affinities”), hero name (“Alysha”), section headings
font-monoJetBrains Mono (Google Fonts)Nav tooltips, skill names, dates, status bar, code-like labels
font-spaceSpace Grotesk (Google Fonts)Default body font — set on <body>, used for all prose and card descriptions
text-gray-200—Default body text on coven-black background
text-gray-300—Secondary body text, card descriptions
text-gray-400—Muted text, metadata
text-gray-500—Placeholder text, disabled states
All three fonts are loaded from Google Fonts via the single @import at the top of assets/main.css: Creepster, JetBrains Mono:wght@400;700, and Space Grotesk:wght@300;400;600;700. In a Vite project these are typically declared as <link> tags in index.html instead of a CSS @import, which allows the browser to begin fetching them earlier.

​
Text Glow Effects

Glow on text reinforces which elements are “active” or semantically important. Two utility classes cover the two brand colors: 
.text-glow-green  { text-shadow: 0 0 10px rgba(163, 230, 53, 0.7), 0 0 20px rgba(163, 230, 53, 0.5); }
.text-glow-purple { text-shadow: 0 0 10px rgba(168, 85, 247, 0.7), 0 0 20px rgba(168, 85, 247, 0.5); }
Each glow uses two shadow layers — a tighter inner halo at 0.7 opacity and a wider bloom at 0.5 — producing a soft emanation rather than a hard outline. When to use each:
  • text-glow-green — hero name, currently-active nav label, any element that should feel “live” or selected. The acid green at high opacity reads as a light emission against coven-black.
  • text-glow-purple — section headings rendered in font-creepster, page titles, decorative Creepster labels. The purple glow ties headings visually to the border and glow palette without competing with green interactive elements.
Combine text glow with transition-all duration-300 on interactive labels so the glow fades in on hover rather than snapping on instantly. This is especially effective on nav items that transition between text-gray-400 (idle) and text-coven-green-400 text-glow-green (active).

​
Tracking and Spacing

Letter-spacing is used throughout to give Creepster headings room to breathe and to push font-mono labels into a data-readout style. 
{/* Standard section heading — wider tracking to open up the display font */}
<h2 className="font-creepster tracking-wider text-coven-purple-500 text-glow-purple">
  Spell Affinities
</h2>
tracking-wider (letter-spacing: 0.05em) prevents Creepster’s naturally tight glyphs from colliding at large sizes and gives the heading a grander, more inscribed feel.

​
Loading the Fonts

All three fonts are served from Google Fonts. Add the <link> tags to your HTML <head> — in a Vite project this lives in index.html: 
<!-- index.html -->
<head>
  <!-- Preconnect for faster font negotiation -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

  <!-- All three portfolio fonts — display=swap prevents invisible text during load -->
  <link
    href="https://fonts.googleapis.com/css2?family=Creepster&family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;600;700&display=swap"
    rel="stylesheet"
  />
</head>
Then register all three in your Tailwind config: 
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        creepster: ['Creepster', 'cursive'],
        mono:      ['"JetBrains Mono"', 'monospace'],
        space:     ['"Space Grotesk"', 'sans-serif'],
      },
    },
  },
}
font-display: swap (set by the Google Fonts URL parameter display=swap) ensures body text remains visible in the system fallback font while the custom fonts load. Without it, text renders as invisible until the font file arrives — a flash of invisible text (FOIT).

​
Responsive Sizing

Key typographic elements scale between mobile and desktop breakpoints using Tailwind’s responsive prefix syntax:

Hero name

<h1 className="font-creepster text-5xl md:text-7xl text-glow-green">
  Alysha
</h1>
text-5xl (3rem) on mobile → text-7xl (4.5rem) on md: (768px+). The name is the visual anchor of the hero section and earns the largest typographic footprint on any viewport.

Featured article titles

<h2 className="font-creepster text-3xl md:text-4xl text-coven-purple-500">
  {article.title}
</h2>
text-3xl (1.875rem) → text-4xl (2.25rem). Featured content titles need less visual weight than the hero name but should still read as display type rather than body headings.
Creepster is a single-weight display font (no bold or italic variants). All weight variation in the UI comes from color, glow, size, and tracking rather than font-weight changes. Do not apply font-bold to font-creepster elements — it will have no effect and may cause a browser synthetic-bold rendering artifact.

Build docs developers (and LLMs) love

Get started for freeTalk to us