The Home page is the first thing every visitor sees when they open a Color Melt portfolio site. Labeled “The Studio” in the navigation bar (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.
bg-dye-red), it serves as the portfolio’s visual and editorial introduction — combining an animated hero, decorative layout components, and a high-level overview of the creator’s work into a single richly layered landing experience.
Purpose
The Studio page is the portfolio’s primary entry point and the file GitHub Pages loads by default. Its job is to establish the site’s visual identity immediately, communicate who the portfolio belongs to, and give visitors a reason to keep exploring. A hiring manager, collaborator, or client landing on this page should be able to grasp the creator’s name, discipline, and aesthetic within seconds. The page is intentionally dense with themed visuals — spirals, lava blobs, shirt racks, rainbow arches — because the overall Color Melt aesthetic is meant to be felt on arrival. Every decorative component is layered around the written content so the personality of the site supports rather than replaces the portfolio information.Components Used
| Component | Role on This Page |
|---|---|
TieDyeSpiral | Full-bleed animated spiral that anchors the page’s visual identity in the hero section |
LavaBlob | Fluid morphing shape used as a decorative background accent |
StickerSheet | Displays a grid of sticker-style visual elements representing the creator’s work and personality |
ShirtRack | Renders a row of shirt-style cards as a playful visual summary of featured projects or themes |
RainbowArch | Decorative arched rainbow element used as a section divider or visual accent |
SpiralTimeline | Presents a brief timeline summary of career milestones or key highlights |
MagazineSpread | Lays out a two-column editorial-style content block for featured work or an introduction |
PatchworkQuilt | Displays a patchwork tile grid for a quick visual summary of skills or focus areas |
SmileyFlower | Decorative animated element providing visual punctuation between content sections |
LiquidForm | Renders the themed contact or interaction form element |
CursorDrops | Adds the theme-specific cursor trail effect active across all pages |
Navigation | Renders the shared top navigation bar with color-coded pill links to all portfolio sections |
PageTransition | Wraps page content in the animated entrance transition used across all static page routes |
Content to Customize
Replace the portfolio owner's name and headline
Update the primary name and role or headline displayed in the hero section. This is the first text a visitor reads and should clearly state who the portfolio belongs to and what they do.
Update the short introduction copy
Replace the starter introduction paragraph with a one-to-three sentence summary of the creator’s background, discipline, and what makes their work distinct. Keep it brief — detailed biography belongs on the About page.
Swap StickerSheet content
Replace the default sticker visuals with images, icons, or labels that reflect the creator’s actual interests, tools, or personality. Sticker content can reference technologies, side projects, or creative references.
Update ShirtRack items
Replace the default shirt-style cards with the creator’s featured projects or thematic areas. Each card should link to the relevant Projects or Case Studies page entry.
Revise MagazineSpread copy
Replace the editorial introduction text in the MagazineSpread block with genuine writing about the creator’s approach to their work, a personal statement, or a highlight from their most significant project.
Update SpiralTimeline entries
Replace the placeholder timeline events with real career milestones, education, key projects, or inflection points in the creator’s professional story. Dates and labels should reflect actual history.
Update PatchworkQuilt tiles
Replace the default quilt tiles with skill categories, tools, or areas of focus relevant to the creator. Each tile can carry a label and a background color from the Color Melt palette.
File Location
The Home page template isindex.html at the root of the repository — not inside the pages/ folder. This placement is required for GitHub Pages to find and serve it as the site’s entry point.
index.html does not include a window.__STATIC_PAGE_ROUTE__ script tag. The React app treats the root route / as the default and renders The Studio view automatically when no hash route is set.
Keep
index.html at the repository root at all times. Moving it into a subfolder will break GitHub Pages deployment because the platform expects the homepage to live at /(root)../assets/ and ./components/ paths in index.html resolve correctly from that location.