Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/groovy/llms.txt

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

Groovy Portfolio draws its visual identity from the golden era of 1970s psychedelia — warm earth tones meet electric neons, hand-lettered display typography clashes (intentionally) with structured grid layouts, and every surface carries a sense of organic, hand-crafted energy. The palette is bold and unapologetic: magentas borrowed from blacklight posters, teals lifted from vintage macramé, and a warm cream base that evokes sun-faded paper. This document catalogues every color decision and typographic rule so you can understand and extend the project.

​
Color Tokens

All color tokens are baked into the compiled stylesheet at assets/main.css. There is no tailwind.config.js in this repository — it is a pre-built output and the token definitions live exclusively in the compiled CSS. The :root block in assets/main.css defines them as CSS custom properties, and they are consumed throughout every component via standard Tailwind utility classes (e.g. text-groovy-magenta, bg-teal, border-groovy-violet). To customise the palette you would need access to the original source project and its Tailwind configuration.
Because this is a compiled build, the tokens listed below cannot be changed by editing a config file. They are emitted as utility classes (e.g. .text-groovy-magenta, .bg-groovy-violet) directly into assets/main.css. Any palette changes require rebuilding from the original source.
The table below lists every token, its hex value, and its primary usage context.
TokenHexUsed For
groovy-magenta#d946efAbout heading (‘Dig My Vibe?’), Work heading (‘Where I’ve Grooved’), selection highlight across the whole site
groovy-violet#8b5cf6Projects heading (‘On Heavy Rotation’), Testimonials heading (‘The Fan Club’), tagline pill border and text on Home, ‘Animations’ badge
groovy-yellow#fde047Blog heading (‘The Record Crate’), ‘Design Systems’ badge, submit button in DaisyForm
groovy-sky#38bdf8Email petal color in DaisyForm
teal#2dd4bfAbout card border, ‘Frontend’ badge background
teal-dark#14b8a6Home h1 (‘Alex Groovy’), Skills heading, Case Studies heading, Contact heading
teal-light#5eead4PeaceTimeline center-line (at reduced opacity)
cream#faf6e9Site-wide page background, card surfaces, modal backgrounds
The root div rendered by Layout.js carries the classes selection:bg-groovy-magenta selection:text-white, which means any text the user highlights across the entire site is styled with a magenta background and white foreground — a small but satisfying detail that reinforces the palette even in interactive browser states.

​
Token definitions in assets/main.css

The compiled stylesheet defines these as both CSS custom properties and Tailwind utility classes. The :root block looks like this: 
/* assets/main.css — compiled output (do not edit directly) */
:root {
  --color-cream:      #faf6e9;
  --color-teal-light: #5eead4;
  --color-teal:       #2dd4bf;
  --color-teal-dark:  #14b8a6;
  --color-magenta:    #d946ef;
  --color-yellow:     #fde047;
  --color-lime:       #a3e635;
  --color-sky:        #38bdf8;
  --color-violet:     #8b5cf6;
}
Tailwind utility classes such as .text-groovy-magenta, .bg-groovy-violet, and .border-teal are generated from these values and appear later in the same file.

​
Typography

Typography in Groovy Portfolio leans hard into the decade’s love of hand-drawn and art-deco-adjacent letterforms.

font-groovy

The display font is Modak (loaded via Google Fonts) and registered as font-groovy in the compiled stylesheet. Applied to every h1 heading across all pages to give them a retro, psychedelic character. Never used for body text — the visual contrast between the playful display font and clean sans-serif body copy is intentional.

font-medium / font-bold

Body copy, navigation links, card text, and form labels all use Quicksand (also loaded via Google Fonts) with Tailwind’s font-medium and font-bold weight utilities. This keeps body text highly legible against the busy decorative backgrounds.

​
Heading hierarchy

// Page heading — font-groovy (Modak) for the display name
// Home page: teal-dark with a groovy-magenta drop-shadow
<h1 className="font-groovy text-7xl text-teal-dark drop-shadow-[0_4px_4px_rgba(217,70,239,0.5)]">
  Alex Groovy
</h1>

// Section heading — font-groovy with groovy-violet accent (Projects, Testimonials)
<h1 className="font-groovy text-6xl text-groovy-violet">
  On Heavy Rotation
</h1>

// Section heading — font-groovy with groovy-magenta accent (About, Work)
<h1 className="font-groovy text-5xl text-groovy-magenta">
  Dig My Vibe?
</h1>

// Card / sub-section heading — bold sans-serif
<h3 className="font-bold text-xl text-gray-800">
  Featured Project
</h3>

​
Body text

Body copy uses text-gray-800 on light surfaces (cream cards, white backgrounds) and text-white on dark or colored surfaces. Secondary/supporting text drops to text-gray-700 or text-gray-500 for reduced visual weight. 
<p className="text-gray-800 font-medium leading-relaxed">
  Primary body paragraph on a cream card surface.
</p>

<span className="text-gray-700 text-sm">
  Secondary label or metadata text.
</span>

<p className="text-white font-medium">
  Body text on a colored or dark background.
</p>

​
Color Usage by Page

The table below maps each page to the accent color used for its primary h1 heading, so the site has a consistent but varied chromatic rhythm as visitors navigate.
PagePrimary Heading ColorToken
HomeTeal (with magenta drop-shadow)text-teal-dark
AboutMagentatext-groovy-magenta
ProjectsViolettext-groovy-violet
SkillsTealtext-teal-dark
WorkMagentatext-groovy-magenta
Case StudiesTealtext-teal-dark
BlogYellowtext-groovy-yellow
TestimonialsViolettext-groovy-violet
ContactTealtext-teal-dark

Build docs developers (and LLMs) love

Get started for freeTalk to us