Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/color-melt/llms.txt

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

The Skills page gives visitors a structured view of the portfolio owner’s technical toolkit and capabilities. Labeled “Bag of Tricks” in the navigation bar (bg-dye-green), it uses the PatchworkQuilt component to present skills and technologies in a tiled, visually organized layout that balances scannability with the site’s signature colorful energy.

​
Purpose

The Skills page answers a specific practical question that hiring managers and collaborators ask when reviewing a portfolio: what does this person actually know how to do? Unlike the Projects page, which demonstrates skills through examples of work, the Skills page gives visitors a direct inventory of languages, frameworks, tools, platforms, and methodologies the portfolio owner has experience with. It is especially useful for people who need to quickly determine whether a candidate or collaborator has experience with a specific technology before reading the rest of the portfolio. The page works best when it reflects genuine proficiency rather than aspirational or superficial familiarity. Including a brief note about how each skill is applied — for example, “used daily in professional projects” versus “explored in personal projects” — helps visitors calibrate their expectations.

​
Components Used

ComponentRole on This Page
TieDyeSpiralPreloaded theme component available to the page’s React app bundle
LavaBlobPreloaded theme component available to the page’s React app bundle
StickerSheetPreloaded theme component available to the page’s React app bundle
ShirtRackPreloaded theme component available to the page’s React app bundle
RainbowArchPreloaded theme component available to the page’s React app bundle
SpiralTimelinePreloaded theme component available to the page’s React app bundle
MagazineSpreadPreloaded theme component available to the page’s React app bundle
PatchworkQuiltRenders the skills in a patchwork tile grid, organizing them visually by category with color-coded sections drawn from the Color Melt palette
SmileyFlowerPreloaded theme component available to the page’s React app bundle
LiquidFormPreloaded theme component available to the page’s React app bundle
NavigationRenders the shared top navigation bar; the “Bag of Tricks” pill is highlighted as the active route
CursorDropsMaintains the theme-specific cursor trail effect, consistent with all other pages
PageTransitionWraps the page content in the animated entrance transition triggered when navigating to /skills

​
Content to Customize

1

Replace technology and tool names

Update each tile label with the actual languages, frameworks, libraries, tools, and platforms the creator knows. Remove any defaults that are not part of the creator’s actual skill set.
2

Organize skills into categories

Group skills into logical categories — for example, Languages, Frameworks, Tools, Platforms, or Design. Clear categories make it easier for visitors to scan for specific areas of expertise.
3

Add proficiency context

Where the layout allows, add a short note or label explaining the depth of experience with each skill. For example: “professional experience,” “personal projects,” “currently learning.” Honest context is more useful than a long list of technology names with no indication of how well each one is known.
4

Add or remove skill categories

Duplicate an existing category block to add a new group, or delete blocks for categories that do not apply. Common additions include Testing, DevOps, Data, Accessibility, or Writing depending on the creator’s background.
5

Update tile colors

Each PatchworkQuilt tile can carry a background color from the Color Melt palette. Assign colors intentionally — for example, using one palette color per skill category — to create a visual organization system that helps visitors read the page at a glance.
6

Keep the list honest and current

Remove skills that are no longer actively used or that the creator would not feel confident discussing in an interview. The Skills page is more credible when it reflects genuine capabilities rather than being padded to look impressive.

​
File Location

The Skills page template is pages/Skills.html inside the pages/ folder. 
pages/Skills.html
The file includes a window.__STATIC_PAGE_ROUTE__ script tag that sets the active route when this page is opened directly: 
<script>
  window.__STATIC_PAGE_ROUTE__ = "/skills";
  if (!window.location.hash || window.location.hash === "#/" || window.location.hash === "#") {
    window.location.hash = "/skills";
  }
</script>
This script ensures the React app renders the Skills view when a visitor navigates to pages/Skills.html directly. Do not remove or modify this script tag.
A short, well-curated skills list is more effective than an exhaustive one. Prioritize the technologies most relevant to the work you want to do next, and lead each category with your strongest tools.

Build docs developers (and LLMs) love

Get started for freeTalk to us