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.

By the end of this guide you will have a personalized Colorful portfolio running live on GitHub Pages. You will fork the repository, explore the file structure, swap in your own content, and configure the Pages deployment — no build tooling or local server required.
1

Fork or clone the repository

Option A — Fork on GitHub (recommended for GitHub Pages deployment)Open the Colorful repository and click Fork in the top-right corner. GitHub will create a copy under your account that you can deploy directly from Settings → Pages.Option B — Clone to work locally
git clone https://github.com/apursley2012/colorful.git
cd colorful
Upload the contents of the cloned folder to a new GitHub repository when you are ready to deploy. Make sure index.html and .nojekyll sit at the repository root — not inside a subdirectory.
Keep .nojekyll beside index.html at the repository root at all times. This empty file tells GitHub Pages to skip Jekyll processing, which is required for the files inside assets/ and components/ to be served correctly. If .nojekyll is missing, your site’s scripts and styles will return 404 errors.
2

Explore the file structure

The repository is intentionally flat. All HTML pages live at the root alongside index.html, and the compiled assets are grouped into assets/ and components/:
colorful/
├── .nojekyll               ← Required for GitHub Pages — do not delete
├── README.md
├── index.html              ← Homepage and GitHub Pages entry point
├── home.html               ← Alternate homepage retained by the theme
├── about.html
├── blog.html
├── casestudies.html
├── contact.html
├── projects.html
├── skills.html
├── testimonials.html
├── work.html
├── assets/
│   ├── main.css            ← Color tokens, fonts, Tailwind utilities
│   ├── main.js             ← Compiled site bundle
│   ├── jsx-runtime.js
│   └── proxy.js
├── components/
│   ├── Navigation.js       ← Floating nav with per-route colors
│   ├── FluidBackground.js  ← Animated background layer
│   └── CursorTrail.js      ← Custom cursor trail
└── images/
    └── screenshots/
Do not rename or move index.html. GitHub Pages always uses index.html at the repository root as the entry point. Renaming it will result in a 404 for your live site URL.
3

Edit your content

All personal content lives in the HTML files at the repository root. Open each file in any text editor and replace the placeholder text with your own information:
FileWhat to update
index.htmlYour name, tagline, and hero copy
about.htmlBiography, background, and personal details
projects.htmlProject titles, descriptions, and links
skills.htmlTechnologies, tools, and proficiency levels
work.htmlJob titles, company names, dates, and role descriptions
casestudies.htmlDetailed write-ups of selected projects
blog.htmlPost titles, excerpts, and publication dates
testimonials.htmlQuotes, attribution names, and roles
contact.htmlEmail address, social links, and availability note
Images: Replace the screenshot placeholders in images/screenshots/ with your own project images after you have personalized the theme content.Colors and typography: The color palette and font families are controlled by CSS custom properties in assets/main.css. The :root block defines all ten color tokens:
: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;
}
Navigation labels: Each route in components/Navigation.js carries its own accent color. The route list maps paths to display labels and hex colors:
[
  { path: '/',            label: 'Hello, World',    color: '#2dd4bf' },
  { path: '/about',       label: 'The Vibe',        color: '#ec4899' },
  { path: '/projects',    label: 'Made With Love',  color: '#f59e0b' },
  { path: '/skills',      label: 'The Toolbox',     color: '#84cc16' },
  { path: '/work',        label: 'The Journey',     color: '#6366f1' },
  { path: '/case-studies',label: 'Long Story Short',color: '#a855f7' },
  { path: '/blog',        label: 'Thoughts & Things',color:'#14b8a6' },
  { path: '/testimonials',label: 'Nice Words',      color: '#ec4899' },
  { path: '/contact',     label: 'Say Hi',          color: '#f59e0b' },
]
Update the label values to match your preferred section names. Keep the path values consistent with the corresponding HTML filenames.
4

Deploy to GitHub Pages

Once your content edits are committed and pushed to the main branch, enable GitHub Pages in your repository settings:
  1. Open your repository on GitHub.
  2. Click Settings in the top navigation bar.
  3. Click Pages in the left sidebar under Code and automation.
  4. Under Branch, select main and set the folder to / (root).
  5. Click Save.
GitHub will build and publish your site within a minute or two. The live URL will appear at the top of the Pages settings panel:
https://<your-username>.github.io/<repo-name>/
After the first deployment, any subsequent push to main automatically updates the live site.
If your site URL shows a 404 or unstyled page after deploying, confirm that .nojekyll is present at the root of the main branch and that index.html has not been moved or renamed.

​
Next steps

Pages overview

Learn what each of the nine pages includes and how to structure your content effectively.

Colors and typography

Customize the color tokens, gradient animations, and font families to make the theme your own.

Navigation component

Understand how the floating navigation works, how per-route colors are applied, and how to update route labels.

GitHub Pages deployment

A deeper look at the deployment process, custom domains, and troubleshooting common GitHub Pages issues.

Build docs developers (and LLMs) love

Get started for freeTalk to us