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.

The Projects page presents Alex Groovy’s featured work through a set of VinylRecord cards — a custom component that renders each project as a spinning (or hoverable) vinyl disc with a coloured label at its centre. The design leans fully into the music-and-retro theme: instead of a typical grid of project thumbnails, visitors see album-art-style records they can interact with. Each card surfaces the project title, a short description, a list of technologies used, and two colour values — one for the outer disc and one for the central label — making each project visually distinct at a glance.

​
Route

PropertyValue
Path/projects
React componentP
Router typeHashRouter — accessed as /#/projects

​
Current projects

Psychedelic UI

A component library for building groovy user interfaces. Tech: React, Framer Motion, Tailwind. Cover: #d946ef · Label: #fde047

Woodstock Weather

A weather app that tells you if it’s a good day for a festival. Tech: TypeScript, API, SVG. Cover: #2dd4bf · Label: #d946ef

Groove Tracker

Habit tracking app with a 70s aesthetic. Tech: Next.js, Prisma, PostgreSQL. Cover: #fde047 · Label: #2dd4bf

​
Project object shape

Each entry in the projects array passed to the P component (or defined inline) must conform to the following shape:
​
title
string
required
The project name displayed on the vinyl label and beneath the record card. Keep it short and punchy — one to four words render best inside the circular label area.
​
description
string
required
A one-to-two sentence summary of the project shown below the record or in a tooltip/popover on hover. Plain text only; no Markdown is parsed.
​
tech
string[]
required
An array of technology name strings rendered as small pill badges beneath the description. No fixed limit, but three to five items keep the card visually balanced.
["React", "Framer Motion", "Tailwind"]
​
coverColor
string (hex)
required
CSS hex colour for the outer vinyl disc area. Acts as the album-cover background. High-contrast, saturated colours work best — the component does not apply any additional tint or overlay.
"#d946ef"
​
labelColor
string (hex)
required
CSS hex colour for the circular centre label of the record — the area that displays the project title. Should contrast well with the coverColor so the title remains legible.
"#fde047"

​
Full projects array (as defined in source)

const projects = [
  {
    title: "Psychedelic UI",
    description:
      "A component library for building groovy user interfaces...",
    tech: ["React", "Framer Motion", "Tailwind"],
    coverColor: "#d946ef",
    labelColor: "#fde047",
  },
  {
    title: "Woodstock Weather",
    description:
      "A weather app that tells you if it's a good day for a festival...",
    tech: ["TypeScript", "API", "SVG"],
    coverColor: "#2dd4bf",
    labelColor: "#d946ef",
  },
  {
    title: "Groove Tracker",
    description:
      "Habit tracking app with a 70s aesthetic...",
    tech: ["Next.js", "Prisma", "PostgreSQL"],
    coverColor: "#fde047",
    labelColor: "#2dd4bf",
  },
];

​
Adding a new project

Copy the object shape above and push a new entry into the projects array. Choose coverColor and labelColor values that don’t clash with existing cards — using the three portfolio accent colours (#d946ef, #2dd4bf, #fde047) in alternating roles keeps the palette consistent: 
{
  title: "Far Out Forms",
  description: "An accessible, animated form library built with React Hook Form and Zod.",
  tech: ["React", "Zod", "React Hook Form"],
  coverColor: "#2dd4bf",
  labelColor: "#fde047",
}
Aim for a high luminance contrast ratio between coverColor and labelColor. A dark cover (deep fuchsia, forest green) paired with a light label (yellow, white) makes the project title readable without needing to hover. Run your chosen hex pair through the WCAG contrast checker to confirm at least a 3:1 ratio.

​
Related components

VinylRecord Component

Full props reference, hover animation options, and sizing variants for the VinylRecord card.

Case Studies Page

Deep-dive WallPoster cards that expand project stories into full-screen modals.

Build docs developers (and LLMs) love

Get started for freeTalk to us