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 is a static portfolio theme designed for creative professionals who want a site that leads with personality rather than convention. Built on React 18, Framer Motion, Tailwind CSS, and Vite, it delivers nine fully-templated pages, animated fluid gradients, a custom cursor trail, and a color-coded floating navigation — all compiled into plain HTML, CSS, and JavaScript that deploy instantly on GitHub Pages with zero server configuration.

​
Design philosophy

Colorful is built around three visual ideas: color blocking, playful contrast, and personality-first layout. Every page in the theme is assigned a signature accent color drawn from the rainbow palette — teal, pink, amber, lime, indigo, and purple — so the site feels cohesive and vibrant at the same time. The typographic pairing of Bricolage Grotesque (display headings), Caveat (handwriting accents), and Inter (body copy) creates a balance between editorial clarity and expressive warmth. The CSS custom properties defined in assets/main.css anchor the entire color system: 
:root {
  --color-bg-light:      #fafaf9;
  --color-bg-dark:       #0f172a;
  --color-teal-main:     #14b8a6;
  --color-teal-light:    #2dd4bf;
  --color-teal-dark:     #06b6d4;
  --color-rainbow-pink:  #ec4899;
  --color-rainbow-amber: #f59e0b;
  --color-rainbow-lime:  #84cc16;
  --color-rainbow-indigo:#6366f1;
  --color-rainbow-purple:#a855f7;
}
The animated .bg-fluid-gradient and .text-fluid-clip utility classes cycle through the full rainbow palette using a 15-second keyframe animation, producing the signature shifting gradient that appears in hero sections and large display text across the theme. Two additional utility classes complete the visual toolkit. .glass-bubble applies a radial-gradient glass surface with pink and teal inset highlights and a backdrop-filter: blur layer, used for decorative card overlays. .sticker-shadow applies a layered drop-shadow filter that gives cut-out sticker elements their characteristic lifted appearance. The three Tailwind font utilities — font-display (Bricolage Grotesque), font-handwriting (Caveat), and font-sans (Inter) — map directly to the Google Fonts @import at the top of assets/main.css and are used throughout page templates to set typographic hierarchy.

​
What’s included

​
Pages

Colorful ships with nine HTML pages, each serving a distinct purpose in a creative portfolio:

Hello, World

index.html — The main homepage and GitHub Pages entry point.

The Vibe

about.html — Biography and personal background.

Made With Love

projects.html — Featured project portfolio.

The Toolbox

skills.html — Skills, technologies, and capabilities.

The Journey

work.html — Professional experience and work history.

Long Story Short

casestudies.html — Detailed project and technical breakdowns.

Thoughts & Things

blog.html — Writing archive or blog page.

Nice Words

testimonials.html — Testimonials and feedback.

Say Hi

contact.html — Contact details and communication links.
The theme also includes home.html as an alternate homepage entry retained for structural completeness.

​
Shared components

Three JavaScript components in the components/ directory power the interactive behavior shared across every page:
ComponentPurpose
Navigation.jsFloating, color-coded navigation with per-route accent colors and animated transitions
FluidBackground.jsDecorative animated background layer rendered behind page content
CursorTrail.jsCustom themed cursor trail that follows pointer movement

​
Shared assets

AssetPurpose
assets/main.cssMain stylesheet — color tokens, font families, Tailwind utilities, and custom animations
assets/main.jsCompiled site bundle
assets/jsx-runtime.jsReact JSX runtime
assets/proxy.jsSupporting script for router and third-party integrations

​
Tech stack

Colorful is assembled from a focused set of modern front-end tools:
TechnologyVersion / Role
React18 — component model for navigation and interactive elements
React Router DOMv6.30.4 — client-side routing across the nine-page SPA
Framer MotionDeclarative animation for page transitions and motion effects
Tailwind CSSUtility-first styling compiled at build time
ViteBuild tool that compiles the React components to static files
Lucide ReactIcon library used throughout the UI
Bricolage Grotesque / Caveat / InterGoogle Fonts loaded via @import in main.css

​
How it works

Colorful is a single-page application compiled to fully static output. During development, Vite bundles the React components and Tailwind styles into the assets/ directory. The result is a collection of plain .html, .css, and .js files with no runtime server dependency — every page works by opening the file directly in a browser or serving it from any static host. React Router DOM handles client-side navigation between the nine pages. Because GitHub Pages serves static files, the theme is structured so that all nine HTML files live at the repository root, each bootstrapping the same compiled React bundle. This avoids the need for server-side redirects or a custom 404 handler.
GitHub Pages ignores files beginning with an underscore by default, applying Jekyll processing rules to the repository. The .nojekyll file at the repository root disables this behavior and ensures all assets in assets/ and components/ are served correctly. Do not delete .nojekyll when deploying your customized version.
Deployment requires only two settings in your repository’s Settings → Pages panel: 
Branch: main
Folder: / (root)
GitHub Pages will then serve the theme at https://<your-username>.github.io/<repo-name>/, with index.html as the entry point.
Ready to get your portfolio live? Head to the Quickstart to fork the repo and publish in under 15 minutes.

Build docs developers (and LLMs) love

Get started for freeTalk to us