Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/colorful/llms.txt

Use this file to discover all available pages before exploring further.

Colorful ships with animated effects — a rainbow cursor trail, an animated fluid gradient background, and Framer Motion spring transitions — that require accessibility review before publication. These effects can create barriers for users who rely on keyboard navigation, have vestibular disorders, or use assistive technologies that depend on clear focus states and well-structured content. Working through the checklist below before publishing will catch the most common issues.
Automated tools cover a useful subset of accessibility issues. Run your personalized portfolio through axe DevTools, WAVE, or a Lighthouse accessibility audit before publication to surface any additional concerns beyond what manual review catches.

​
Pre-publish checklist

Tab through every interactive element on each page without using a mouse. Every link, button, and navigation item must be reachable in a logical order and must be operable using the keyboard alone. Nothing interactive should be accessible only by hover or click.
Test the portfolio at the following viewport widths to confirm layout, text size, and navigation all remain readable and usable:
  • 320 px — minimum width targeted by most mobile browsers
  • 375 px — common phone width (iPhone SE, iPhone 14)
  • 768 px — tablet breakpoint where Colorful’s responsive grid changes
Use browser DevTools responsive mode or a physical device for the most accurate results.
Every <img> element must carry a descriptive alt attribute. This includes project screenshots, profile photos, and any decorative images that convey meaning. The only images that should use an empty alt="" are purely decorative images that add no information — and those should be rare in a portfolio context.
<!-- Descriptive alt for meaningful images -->
<img src="images/screenshots/project-dashboard.png"
     alt="Dashboard screenshot showing monthly analytics for Q1 2026" />

<!-- Empty alt only for purely decorative images -->
<img src="images/decoration.png" alt="" />
Headings must follow a logical h1 → h2 → h3 hierarchy without skipping levels. Each page should have exactly one h1 (the page title), followed by h2 section headings, and h3 subsection headings where needed. Skipping from h1 to h3 confuses screen reader navigation. Use a browser extension such as HeadingsMap to visualize the heading structure of each page.
The FluidBackground component animates four large blurred blobs continuously using Framer Motion. The CursorTrail component draws an animated rainbow trail on the canvas as the mouse moves. Neither component currently reads the prefers-reduced-motion media query.Users who have enabled the “reduce motion” system preference (Settings → Accessibility → Motion on macOS and iOS, for example) will see full animation regardless of that preference. See the Reduced-motion implementation and Disabling CursorTrail sections below for remediation steps.
The theme’s primary teal color #14b8a6 (--color-teal-main) on a white #ffffff background produces a contrast ratio of approximately 2.4:1, which does not meet the WCAG AA minimum of 4.5:1 for normal-weight text smaller than 18 pt, or 3:1 for large text. Before publishing:
  • Verify all body text and label text using a tool such as the WebAIM Contrast Checker.
  • Consider using the darker #0f172a (--color-bg-dark) for body text against light backgrounds — this combination passes AA and AAA.
  • Teal is used safely as a decorative accent (scrollbar, focus rings, borders) rather than as body text color throughout the default theme; confirm your personalized content has not introduced teal-colored small text.
The .text-fluid-clip class applies an animated gradient to text using -webkit-background-clip: text and -webkit-text-fill-color: transparent. In browsers that do not support this WebKit property, the text will fall back to the inherited color, which is typically #0f172a (dark slate). Confirm the fallback color is readable and provides sufficient contrast on the background behind that text element. See the warning below for cross-browser details.

​
Reduced-motion implementation

The compiled assets/main.css file does not currently include a prefers-reduced-motion media query — this is an acknowledged future enhancement noted in the README. You can add the following block to assets/main.css to immediately stop the CSS animations for users who have requested reduced motion: 
@media (prefers-reduced-motion: reduce) {
  .bg-fluid-gradient,
  .text-fluid-clip {
    animation: none;
    background-position: 0% 50%;
  }
}
This stops the fluid-gradient keyframe animation defined in main.css and holds the gradient at its starting position (0% 50%), so the decorative colors remain visible without moving. The Framer Motion animations inside FluidBackground.js are separate from the CSS keyframes and require a JavaScript-level fix. The recommended approach is to read the user’s motion preference via the Framer Motion useReducedMotion hook and pass conditional animate props: 
import { useReducedMotion } from "framer-motion";

// Inside the FluidBackground component:
const shouldReduceMotion = useReducedMotion();

// Then on each animated div:
animate={shouldReduceMotion ? {} : { x: [0, 100, 0], y: [0, 50, 0], scale: [1, 1.2, 1] }}
When shouldReduceMotion is true, passing an empty object stops all animation and leaves the blobs in their initial positions.

​
Disabling CursorTrail

The CursorTrail component renders a full-screen canvas that draws a rainbow dot-and-line trail following mouse movement. This is a purely decorative effect. Users who prefer no decorative motion, or who are using a touch device where cursor trails are meaningless, will receive no benefit from the component. To remove the cursor trail entirely, locate the <CursorTrail /> import and usage in main.js and either delete the JSX element or comment it out: 
// Remove or comment out the import:
// import { CursorTrail } from "../components/CursorTrail.js";

// Remove or comment out the usage:
// <CursorTrail />
To conditionally render it only when the user has not requested reduced motion, check window.matchMedia before mounting: 
const prefersReducedMotion =
  window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// Then in the JSX:
{!prefersReducedMotion && <CursorTrail />}
See CursorTrail component reference and FluidBackground component reference for further details on how those components work.

​
Future enhancements

The Colorful README notes the following accessibility-related items as planned future additions. If your workflow requires any of these before publishing, they are safe to implement manually on your fork:
  • Visible reduced-motion toggle — a button in the UI that lets visitors disable animations without relying on the OS-level preference.
  • Themed 404.html page — a styled error page that matches the Colorful visual design rather than GitHub Pages’ default 404.
  • Additional accessibility refinements — further improvements after testing the portfolio with personalized content, which may surface issues specific to the text and images you add.
Gradient text (.text-fluid-clip) uses -webkit-text-fill-color: transparent and -webkit-background-clip: text. These are WebKit-prefixed properties. While they work in Chromium and Firefox, behavior can vary in older browsers or in high-contrast mode on Windows. Always test gradient text headings in multiple browsers and verify that the text remains legible if the clip effect does not apply.

Build docs developers (and LLMs) love

Get started for freeTalk to us