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 Home page is the first impression visitors get of Alex Groovy’s portfolio. It renders a full-viewport hero section drenched in 1970s psychedelic energy: a swirling TieDyeBackground in spiral variant floods the canvas with colour, a SmileySun component beams from the top-right corner, and three decorative emoji — ✌️ peace fingers, 🌼 daisy, and 🌈 rainbow — are scattered across the layout to reinforce the free-spirit aesthetic. The hero text centres on the developer’s name and a laid-back tagline that doubles as a personal philosophy.

​
What’s on the page

TieDyeBackground

Full-bleed animated background using the spiral variant. Generates a psychedelic colour wash behind all hero content.

SmileySun

Decorative animated sun component fixed to the top-right corner, providing a cheerful focal point above the fold.

Hero Text

Displays the developer name Alex Groovy and the tagline “Good vibes only (and good code)” in bold, retro-styled typography.

Emoji Accents

Three floating emoji — ✌️ 🌼 🌈 — are positioned around the hero as lightweight decorative elements requiring no additional dependencies.

​
Route

PropertyValue
Path/
React componentk (default export of the Home module)
Router typeHashRouter — accessed as /#/ in the browser

​
Customising the hero content

The hero text and emoji are defined inline in the k component. To change the displayed name or tagline, locate the component and update the corresponding JSX strings.
​
name
string
required
The large heading displayed in the hero. Currently "Alex Groovy". Change this to reflect the portfolio owner’s real or preferred name.
​
tagline
string
required
The subtitle line beneath the name. Currently "Good vibes only (and good code)". Keep it short — one punchy sentence works best with the spiral background.
​
backgroundVariant
string
default:"spiral"
Passed to TieDyeBackground. Accepted values are "spiral", "crumple", "sunburst", and "bullseye". Changing this value swaps the entire background animation style.
​
emojis
string[]
default:"[\"✌️\", \"🌼\", \"🌈\"]"
Array of emoji characters rendered as floating accents. Add, remove, or swap any Unicode emoji to personalise the vibe without touching CSS.

​
Changing the background variant

The TieDyeBackground component accepts a variant prop. To switch from the default spiral to another pattern (e.g. sunburst), update the JSX: 
// Before
<TieDyeBackground variant="spiral" />

// After — sunburst pattern
<TieDyeBackground variant="sunburst" />
Keep the SmileySun positioned with a high z-index so it always renders above the TieDyeBackground canvas. If you add a hero image or card, set position: relative and a matching z-index on that element to prevent the sun from being obscured.

​
Related components

Backgrounds

Animated psychedelic background with multiple variant modes.

Animations

Decorative retro sun used as a hero accent.

Layout & Routing

How HashRouter wires all nine pages together.

Build docs developers (and LLMs) love

Get started for freeTalk to us