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 Case Studies page, titled “Deep Dives”, gives Alex Groovy a space to go beyond the thumbnail-sized summaries on the Projects page and tell the full story behind each piece of work. Three WallPoster components are arranged on the page like pinned art prints — each slightly rotated at a different angle to create a casual, pinboard aesthetic. Clicking any poster triggers a Framer Motion–powered full-screen modal that overlays the entire viewport, expanding the poster into a richly detailed narrative with a highlighted “Groovy Results” bullet list. The modal includes a close button and supports the Escape key for dismissal.

​
Route

PropertyValue
Path/case-studies
React componentC
Router typeHashRouter — accessed as /#/case-studies

​
Current case studies

Project Alpha

E-Commerce Redesign · Rotation: -3° · Colour: #d946ef

Beta App

Social Music Platform · Rotation: +2° · Colour: #2dd4bf

Gamma Dash

Analytics Dashboard · Rotation: -1° · Colour: #fde047

​
WallPoster object shape

Each poster is defined by an object with the following fields:
​
title
string
required
The large display title printed prominently on the poster face. Short and bold — one or two words work best given the constrained poster canvas. Rendered as an h2 inside the poster component.
"Project Alpha"
​
subtitle
string
required
A secondary descriptor line displayed beneath the title on the poster. Typically a project type or domain description.
"E-Commerce Redesign"
​
color
string (hex)
required
The background fill colour for the poster card. Used both in the closed poster state and as the modal header background when expanded. Saturated colours are strongly recommended to preserve the gallery-poster feel.
"#d946ef"
​
rotation
number
required
CSS rotate value in degrees applied to the poster card for the pinboard tilt effect. Negative values tilt left; positive values tilt right. Keep values between -5 and 5 — larger angles make the layout feel messy rather than playful.
-3

​
Full posters array (as defined in source)

const posters = [
  { title: "Project Alpha", subtitle: "E-Commerce Redesign",    color: "#d946ef", rotation: -3 },
  { title: "Beta App",      subtitle: "Social Music Platform",  color: "#2dd4bf", rotation:  2 },
  { title: "Gamma Dash",    subtitle: "Analytics Dashboard",    color: "#fde047", rotation: -1 },
];

​
Modal extended content

When a poster is clicked, the modal renders additional content that is not visible in the closed poster state. This extended content is hardcoded inside the WallPoster component — it is identical for every poster and is not driven by props or data fields. The hardcoded modal body reads:
“Far out, right? We took a totally bogus legacy codebase and turned it into a smooth, performant machine.”
It is followed by a Groovy Results bullet list, also hardcoded:
  • 400% increase in good vibes (user retention)
  • Load times faster than a VW Bus going downhill
  • Accessibility score of 100 on Lighthouse
The modal also includes a close button (✕) in the top-right corner and supports the Escape key for dismissal. To change the modal narrative or results bullets, edit them directly in the WallPoster component source.

​
Adding a new case study

Push a new poster object into the posters array. The page layout uses a CSS flex wrap, so a fourth poster will start a new row on smaller viewports: 
{
  title: "Delta CMS",
  subtitle: "Headless CMS Integration",
  color: "#a78bfa",
  rotation: 3,
}
The WallPoster click handler uses Framer Motion’s layoutId prop to power the shared-layout expand animation between the poster and the modal. Each poster must have a unique title (used as the layoutId). Duplicate titles will cause the wrong modal to animate on click.

​
Related components

WallPoster Component

Props reference, layout behaviour, and modal animation configuration for WallPoster.

Projects Page

The companion projects overview using VinylRecord cards with a lighter level of detail.

Build docs developers (and LLMs) love

Get started for freeTalk to us