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 Testimonials page is titled “The Fan Club” and showcases kind words from three colleagues through the GroovyBubble component — a retro speech-bubble UI element styled to evoke the comic-strip lettering and bubbly typography of 1970s pop art. Each bubble floats at a slightly different vertical offset and animates in with a staggered delay, creating a lively, cascading entrance effect. The three bubbles use the portfolio’s signature accent colours — fuchsia, teal, and yellow — so the page reads as a cohesive rainbow spread even without a dedicated background component.

​
Route

PropertyValue
Path/testimonials
React componentI
Router typeHashRouter — accessed as /#/testimonials

​
Current testimonials

Sarah Jenkins — Product Manager

“Alex brought so much color to our drab corporate dashboard…” · Colour: #d946ef

Mike Chen — Lead Designer

“I’ve never seen someone write CSS with such soul…” · Colour: #2dd4bf

Elena Rodriguez — Engineering Director

“Not only is the code clean, but Alex’s positive energy…” · Colour: #fde047

​
GroovyBubble props

Each GroovyBubble instance accepts the following props:
​
quote
string
required
The testimonial text displayed inside the bubble. Full sentence(s) preferred — the bubble shape scales with content height, so a two-to-four sentence quote fills the bubble naturally without awkward white space.
"Alex brought so much color to our drab corporate dashboard. Working with them was like turning the saturation slider all the way up on our product."
​
author
string
required
The full name of the person giving the testimonial. Rendered in a bold style at the base of the bubble’s tail, beneath the quote body.
"Sarah Jenkins"
​
role
string
required
The professional title or role of the testimonial author. Displayed in a smaller, secondary style immediately below the author name.
"Product Manager"
​
color
string (hex)
required
The background fill colour of the speech bubble. Also used for the bubble’s tail triangle. Should be high-contrast against white text — all three current bubbles use saturated, mid-to-dark tones for this reason.
"#d946ef"
​
direction
"left" | "right"
default:"\"left\""
Controls which side the bubble tail points toward. Alternating "left" and "right" across consecutive bubbles gives the page a conversation-thread feel. Defaults to "left" if omitted.
​
yOffset
number
default:"0"
Vertical pixel offset applied to the bubble’s resting position. Staggering yOffset values across bubbles (e.g. 0, 30, -20) creates the floating, scattered layout that distinguishes the page from a plain list. Positive values push the bubble downward; negative values push it upward.
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds. Stagger each bubble by 0.15–0.25 seconds to produce the cascading pop-in effect. The current three bubbles use 0, 0.2, and 0.4 respectively.
<GroovyBubble delay={0.4} ... />

​
Full testimonials array (as defined in source)

const testimonials = [
  {
    quote:     "Alex brought so much color to our drab corporate dashboard...",
    author:    "Sarah Jenkins",
    role:      "Product Manager",
    color:     "#d946ef",
    direction: "left",
    yOffset:   0,
  },
  {
    quote:     "I've never seen someone write CSS with such soul...",
    author:    "Mike Chen",
    role:      "Lead Designer",
    color:     "#2dd4bf",
    direction: "right",
    yOffset:   20,
  },
  {
    quote:     "Not only is the code clean, but Alex's positive energy...",
    author:    "Elena Rodriguez",
    role:      "Engineering Director",
    color:     "#fde047",
    direction: "left",
    yOffset:   -10,
  },
];

​
Adding a new testimonial

Append a new object to the testimonials array and provide a delay value 0.2 seconds greater than the previous entry’s: 
{
  quote:  "Shipping with Alex was the smoothest collaboration of my career. Zero drama, maximum groove.",
  author: "James Park",
  role:   "CTO, Nebula Labs",
  color:  "#fb923c",
  direction: "right",
  yOffset: 15,
  delay: 0.6,
}
The yOffset prop is a presentational nudge — it does not affect document flow, only the visual transform. If you add many bubbles with large yOffset values, the bubbles may visually overlap each other or clip outside the page container. Check at both mobile (375 px) and desktop (1280 px) breakpoints after any layout change.

​
Related components

GroovyBubble Component

Full props reference, tail positioning options, and entrance animation configuration.

Contact Page

The natural next step after visitors read positive testimonials — prompt them to get in touch.

Build docs developers (and LLMs) love

Get started for freeTalk to us