Spooky Theme: Colors, Fonts, Animations, and Effects

The Full Stack Sorcery portfolio is built on a tightly scoped design system defined entirely inside tailwind.config.js and a small block of custom CSS at the top of main.css. Every color, font, glow effect, and animation is a named token — so changing the look of the whole site means editing one place, not hunting through dozens of component files.

Color Palette

Six custom color tokens extend Tailwind’s default palette under the spooky-* namespace. They cover every role from page background to interactive accents.

Token	Hex	Usage
`spooky-midnight`	`#0d1f24`	Page background, deepest layer
`spooky-navy`	`#0a2a2f`	Cards, panels, nav backdrop
`spooky-cream`	`#fef3c7`	Primary body text
`spooky-turquoise`	`#3fd6c0`	Primary accent — glows, links, active states
`spooky-aqua`	`#5eead4`	Lighter accent variant — hover states, secondary highlights
`spooky-orange`	`#f59e0b`	Secondary accent — badges, call-to-action elements, highlights

All tokens are available as standard Tailwind utilities (bg-*, text-*, border-*, from-*, etc.) and support Tailwind’s opacity modifier syntax.

// Background and text
<div className="bg-spooky-midnight text-spooky-cream">
  <h1 className="font-display text-spooky-turquoise text-glow">
    Full Stack Sorcery
  </h1>
  <p className="font-body text-spooky-cream/70">
    A developer's dark grimoire.
  </p>
</div>

Opacity modifiers work on any spooky color token. For example, text-spooky-cream/70 renders the cream text at 70% opacity — perfect for supporting copy and captions that should recede behind primary content.

Text selection is also themed globally: selected text displays with a spooky-turquoise background and spooky-midnight foreground, applied via the selection:bg-spooky-turquoise and selection:text-spooky-midnight utilities on the root element.

Typography

Two Google Fonts are loaded at the top of main.css and mapped to Tailwind font-family utilities:

@import "https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap";

Class	Font	Role
`.font-display`	Bagel Fat One	Headings, page titles, nav labels, tombstone SVGs
`.font-body`	DM Sans	Body copy, descriptions, labels, form inputs

Bagel Fat One is also applied globally to all heading elements (h1–h6) via a base layer rule, so semantic headings inherit it automatically without adding .font-display manually.

// Explicit font class usage
<h2 className="font-display text-4xl text-spooky-turquoise">Haunts</h2>
<p  className="font-body   text-base  text-spooky-cream/80">Where I have been lurking.</p>

Custom Glow Utilities

Two custom utility classes are defined after @tailwind utilities in main.css and are available anywhere in the project.

`.text-glow`

Adds a two-layer turquoise text-shadow for glowing headings.

.text-glow {
  text-shadow:
    0 0 10px rgba(63, 214, 192, 0.5),
    0 0 20px rgba(63, 214, 192, 0.3);
}

Use it on large display headings where you want the turquoise accent to appear luminous — for example <h1 className="font-display text-spooky-turquoise text-glow">.

`.box-glow`

Adds an outer and inset turquoise box-shadow for glowing card borders.

.box-glow {
  box-shadow:
    0 0 15px #3fd6c033,
    inset 0 0 15px #3fd6c01a;
}

Use it on container elements — panels, modals, or cards — where you want the edges to emit a soft turquoise halo. It pairs naturally with border-spooky-turquoise for a fully lit frame.

Custom Animations

`fog-scroll`

A horizontal scrolling animation used exclusively by the FogBackground component to move a wide, tiled fog texture across the viewport.

@keyframes fog-scroll {
  0%   { transform: translate(0); }
  100% { transform: translate(-50%); }
}

.animate-fog-scroll {
  animation: fog-scroll 60s linear infinite;
}

The element is twice the viewport width (w-[200%]) so the -50% translate lands exactly back at the start, producing a seamless loop over 60 seconds.

The fog animation is managed entirely by the FogBackground component, which renders behind all page content at z-0. You do not need to apply .animate-fog-scroll manually anywhere — just ensure FogBackground is mounted in the layout wrapper.

`swing`

A gentle pendulum rotation applied to the string elements above project Polaroids on the Projects page.

@keyframes swing {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg); }
}

.animate-swing {
  animation: swing 3s ease-in-out infinite;
}

The .5rem-wide string div above each project card uses .animate-swing with a staggered animationDelay (one per card) so the Polaroids sway out of sync with each other.

Scrollbar Customization

The custom scrollbar is defined in main.css using WebKit pseudo-elements and keeps the UI consistent with the dark theme:

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a2a2f; /* spooky-navy */
}
::-webkit-scrollbar-thumb {
  background: #3fd6c0; /* spooky-turquoise */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5eead4; /* spooky-aqua */
}

The thumb transitions from turquoise to aqua on hover, echoing the site’s primary accent hover pattern seen throughout interactive elements.

Adding a New Color Token

Because this is a compiled Vite build, color tokens are defined in tailwind.config.js in the source tree — not in the compiled assets/main.css. To add a new token:

Open tailwind.config.js and locate the theme.extend.colors object.
Add your token under the spooky namespace:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'spooky-midnight':  '#0d1f24',
        'spooky-navy':      '#0a2a2f',
        'spooky-cream':     '#fef3c7',
        'spooky-turquoise': '#3fd6c0',
        'spooky-aqua':      '#5eead4',
        'spooky-orange':    '#f59e0b',
        // Add your new token here:
        'spooky-crimson':   '#9b1c1c',
      },
    },
  },
}

Run vite build to regenerate assets/main.css and assets/main.js with the new utility classes included.
Use the token with any Tailwind utility: bg-spooky-crimson, text-spooky-crimson, border-spooky-crimson, etc.

Architecture

Customization

Spooky Theme: Colors, Fonts, Animations, and Effects

Color Palette

Typography

Custom Glow Utilities

`.text-glow`

`.box-glow`

Custom Animations

`fog-scroll`

`swing`

Scrollbar Customization

Adding a New Color Token

Build docs developers (and LLMs) love

Architecture

Customization

Documentation Index

​Color Palette

​Typography

​Custom Glow Utilities

​.text-glow

​.box-glow

​Custom Animations

​fog-scroll

​swing

​Scrollbar Customization

​Adding a New Color Token

Build docs developers (and LLMs) love

Color Palette

Typography

Custom Glow Utilities

`.text-glow`

`.box-glow`

Custom Animations

`fog-scroll`

`swing`

Scrollbar Customization

Adding a New Color Token