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.

VinylRecord is the centrepiece of the portfolio’s project showcase section. It presents each project as a vinyl record album: the outer face shows the album art (cover colour, title, description), hovering causes the record disc to peek out from the right edge, and clicking the cover splits it open — the cover slides left, the disc slides right and spins continuously, and an inner-sleeve panel fades in with a full description and technology tags.

​
Props

​
title
string
required
The album title displayed on the cover and repeated on the inner sleeve label. Typically the project name.
​
description
string
required
A short description of the project. Shown on the inner sleeve when the record is opened.
​
tech
string[]
required
An array of technology or tool names. Each entry is rendered as a small pill/tag on the inner sleeve track listing.
​
coverColor
string (hex)
required
The background fill colour of the album cover, supplied as a CSS hex string (e.g. "#c2410c"). Used as the backgroundColor style on the cover panel.
​
labelColor
string (hex)
required
The accent colour of the circular label at the centre of the vinyl disc (e.g. "#fbbf24"). Should contrast with the dark grooves of the disc.

​
Animation States

Three interaction states are tracked via isHovered and isFlipped (useState):
StateisHoveredisFlippedVisual result
IdlefalsefalseAlbum cover visible, disc hidden behind it
HoveredtruefalseDisc peeks out: x: 40px, rotate: 45deg
Flipped / Playing—trueCover slides x: -160px; disc slides x: 160px and spins infinitely; inner sleeve fades in
Clicking the record while it is open (isFlipped: true) resets everything to the idle state.
The infinite spin on the disc uses a Framer Motion animate keyframe cycle: rotate goes from 0 to 360 with duration: 3 and repeat: Infinity, ease: 'linear'. This is applied only when isFlipped is true; when the record closes the rotation resets gracefully via a spring.

​
Usage

import VinylRecord from './components/VinylRecord';

function ProjectsSection() {
  return (
    <div className="flex flex-wrap gap-10 justify-center py-16">
      <VinylRecord
        title="Cosmic Vibes App"
        description="A real-time mood-tracking PWA with offline support and push notifications."
        tech={['React', 'Firebase', 'Workbox', 'Tailwind CSS']}
        coverColor="#7c3aed"
        labelColor="#fbbf24"
      />
      <VinylRecord
        title="Lava Lamp CMS"
        description="A headless CMS dashboard for managing groovy content pipelines."
        tech={['Next.js', 'Sanity', 'TypeScript', 'Framer Motion']}
        coverColor="#c2410c"
        labelColor="#34d399"
      />
    </div>
  );
}
Pick coverColor values from the same decade-appropriate palette as the rest of the site — deep oranges (#c2410c), harvest golds (#d97706), avocado greens (#65a30d), and dark purples (#7c3aed) all read authentically 1970s. Ensure labelColor has at least a 3:1 contrast ratio against black for the centre-label text to stay readable when the record is spinning.

Build docs developers (and LLMs) love

Get started for freeTalk to us