The About page gives visitors a warm, personal introduction to Alex Groovy. The layout splits into two columns: the left side holds a gently bubblingDocumentation 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.
LavaLamp animation that acts as a living piece of retro décor, while the right side presents a styled card containing a conversational bio and a row of coloured tag badges. The tone is deliberately casual and inviting — very much in keeping with the 1970s portfolio theme — opening with “Hey there, cool cats!” and describing Alex’s journey as a frontend developer. The three tag badges (Frontend, Design Systems, Animations) give recruiters and collaborators an instant at-a-glance skill summary.
Page layout
LavaLamp (left column)
An animated lava-lamp component that continuously morphs coloured blobs in a tall vertical container. Purely decorative — it requires no data props.
Bio Card (right column)
A card element containing the biography text and tag badge row. The card uses Tailwind utility classes for retro-styled borders and a warm background tint.
Route
| Property | Value |
|---|---|
| Path | /about |
| React component | A |
| Router type | HashRouter — accessed as /#/about |
Bio content
The bio paragraph is hardcoded in theA component as a JSX string. It reads:
“Hey there, cool cats! I’m a frontend developer who believes that the web should be as vibrant and alive as a summer music festival. I’ve been slinging code since the days of table layouts, but I’ve kept up with the times — I just prefer my interfaces with a little more soul.”To update the bio, locate the paragraph element in the
A component and replace the text content.
Customising the tag badges
The three tag badges —Frontend, Design Systems, and Animations — are defined as hardcoded JSX strings inside the A component. Each badge is a <span> element with a fixed Tailwind background class:
- Frontend —
bg-teal text-white rotate-2 - Design Systems —
bg-groovy-yellow text-gray-800 rotate-3 - Animations —
bg-groovy-violet text-white -rotate-1
<span> elements directly in the A component source.
LavaLamp component
TheLavaLamp component is fully self-contained and driven by internal animation state — it has no documented props. To render it, use the component with no props:
hidden md:block wrapper, so it only appears on medium and wider viewports. Any changes to blob colours, animation speed, or sizing require editing the LavaLamp component source directly.
The
LavaLamp component uses CSS mix-blend-mode for the blob blending effect. If you place it on a dark background, switch the page wrapper’s background-color to a deep purple or midnight blue — the blobs will pop dramatically and still read as clearly separate shapes.Related components
Layout Component
Full props reference and animation customisation options for the LavaLamp.
Visual Theme
Reusable skill badge component used across the About and Skills pages.