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.

All content in the Colorful theme lives directly in the HTML files and the compiled JavaScript bundle. There is no database, API, or external data source — every piece of text, every project title, and every contact detail is written inline in the files that ship with the theme. Personalizing the theme means opening those files in a text editor, replacing the placeholder copy, and saving.
Colorful is a static site. There is no CMS, no headless backend, and no database. All content is stored in plain HTML files and compiled React component files. To update copy, edit the source files directly.

​
What to replace

The theme ships with ten pages, each covering a different section of a personal portfolio. The table below maps each page to its source file and the placeholder content you should replace.
PageHTML fileWhat to replace
Homepageindex.htmlHero greeting, tagline, intro paragraph, featured project teasers
Aboutabout.htmlBiography copy, background story, personal details, profile image reference
Projectsprojects.htmlProject titles, descriptions, technology tags, links, and screenshot references
Skillsskills.htmlSkill names, proficiency indicators, technology categories
Workwork.htmlJob titles, company names, employment dates, role descriptions
Case Studiescasestudies.htmlCase study titles, problem statements, process narratives, outcomes
Blogblog.htmlPost titles, dates, excerpts, and any post body copy
Testimonialstestimonials.htmlTestimonial quotes, contributor names, and roles
Contactcontact.htmlEmail address, social profile links, contact form destination
Alternate homepagehome.htmlSame fields as index.html — retained as an alternate entry point
index.html is the GitHub Pages entry file and the first page visitors land on.

​
Screenshots

The images/screenshots/ folder contains the preview screenshots that ship with the theme. After you have personalized the content and visual style, replace these files with screenshots of your own pages so that any README previews or social cards reflect your actual portfolio. The filenames follow the pattern colorful-screenshot-01.png through colorful-screenshot-26.png. You do not need to match that naming scheme — update any references in README.md to point to whatever filenames you choose.

​
Navigation labels

Navigation link labels and their individual accent colors are defined in a routes array inside components/Navigation.js. Each entry has three fields: 
const routes = [
  { 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" },
];
  • path — must match the route the page is served at. For GitHub Pages project sites this is the path relative to the repo root.
  • label — the text that appears in the floating navigation pill when the menu is open.
  • color — the hex color used for the active-state background and the pill border when that link is selected.
To rename a navigation item, change its label string. To assign a different accent color to a link, change its color value to any valid hex or CSS color string.
Do not edit assets/main.js directly. That file is the compiled application bundle and any manual changes will be invalid. To change navigation labels or colors, edit components/Navigation.js — it is a standalone file that ships with the theme and can be edited in any text editor without a build step.

​
Site title

Each HTML file contains a <title> tag in its <head> section. Update it to reflect your name and the page purpose: 
<title>Your Name — Projects</title>
The browser tab, search-engine snippets, and link-preview cards all read from this tag, so keeping it descriptive and consistent across pages improves both usability and SEO.

Build docs developers (and LLMs) love

Get started for freeTalk to us