Groovy Portfolio is built from seven primary React components, each capturing a distinct piece of 1970s visual culture — spinning vinyl records, peace-sign timelines, hand-painted wall posters, and more. Every component lives inside theDocumentation 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.
components/ directory and is authored as an ES module. Animation primitives are sourced from Framer Motion via assets/proxy.js, which re-exports motion, AnimatePresence, useAnimation, and related hooks so that tree-shaking stays consistent across the build. Tailwind CSS handles all static styling; Framer Motion owns every transition, spring, and keyframe.
Five additional decorative and utility components ship alongside the primary seven: RainbowCursor (a trailing-rainbow mouse cursor), TieDyeBackground (a full-viewport swirling gradient), SmileySun (an animated sun icon used in the hero section), LavaLamp (floating blob shapes), and RainbowArc (the hero rainbow banner). These components accept no props and require no configuration — they are drop-in visual accents.
Layout
The root wrapper rendered at the
/ route. Mounts the Navbar, RainbowCursor, and a Framer Motion AnimatePresence outlet that applies a blur-and-scale page transition on every route change.VinylRecord
An interactive vinyl album card. Hover to peek the disc; click to split the cover and spin the record while revealing an inner-sleeve track listing.
PeaceTimeline
A vertical career/experience timeline with alternating left/right cards, spring entrance animations, and a peace-sign SVG node for each entry.
WallPoster
A rotated poster thumbnail that expands into a full
layoutId-animated modal with a cream-paper texture, extended content, and a Groovy Results bullet list.RecordCrate
A 3D wooden crate stacking five vinyl records. Click a record to fan it upward and reveal the blog post label area; click again to collapse.
DaisyForm
A contact form shaped like a daisy — three petal input fields and a centre submit button. Includes a ‘Sending Vibes…’ loading state and a confetti-burst success state.
GroovyBubble
A floating testimonial speech bubble with a continuous sinusoidal float animation, directional entrance spring, and a coloured avatar circle.