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 Skills page takes a decidedly artistic approach to the traditional skills list. Rather than bullet points or progress bars, the entire page is filled by the RainbowArc component — a sweeping, arc-shaped visualisation that maps skill categories across a spectrum of colour bands, much like the bands of a rainbow. The heading “My Groovy Toolkit” and subtitle “A full spectrum of skills” frame the component above, setting up the visual metaphor before the arcs expand downward. The result feels less like a résumé section and more like a piece of data-driven wall art.

Route

PropertyValue
Path/skills
React componentR
Router typeHashRouter — accessed as /#/skills

Page structure

Page Heading

Renders the string “My Groovy Toolkit” as a large styled h1. Font size and weight are controlled by Tailwind classes in the R component wrapper.

Page Subtitle

Renders “A full spectrum of skills” as a smaller p element directly beneath the heading, acting as a thematic bridge to the arc visualisation below.

RainbowArc

Full-page arc component that fills the remaining viewport height. Each arc band represents a skill category or individual skill, coloured from red through violet across the spectrum.

Responsive Layout

The RainbowArc component scales fluidly. On narrow viewports the arcs compress vertically; on wide viewports they breathe outward for a poster-like effect.

RainbowArc component

The RainbowArc component is fully self-contained with no documented props — its skill data, colour bands, arc dimensions, and animation behaviour are all defined internally. To render it, use the component with no props:
<RainbowArc />
The component produces an SVG arc visualisation that fills the available page area. Any changes to the skills displayed, colour assignments, or arc sizing require editing the RainbowArc component source directly.
The RainbowArc relies on SVG and colour to communicate skill levels. Ensure the aria-label on the SVG root describes the visualisation for screen-reader users — this is set inside the component source.

Visual Theme

Full reference for the RainbowArc, including SVG rendering details and animation sequencing.

About Page

Companion page that surfaces the same skill tags in badge form alongside the bio card.

Build docs developers (and LLMs) love