myCAIO Homepage Card & Vercel Routing Fix

2026-01-02 By Sean Weldon

Atlas Development Log — myCAIO Homepage Card & Vercel Routing Fix

Overview

Added a third service card to the sean-weldon.com homepage for the myCAIO (Fractional Chief AI Officer) service. The card uses a gold theme to match the Obsidian Authority design of the mycaio.html page. Also debugged and fixed Vercel routing issues that were causing the /blog route to return 404.

1. Objectives

Add myCAIO card to homepage with gold/yellow theme
Match existing card design pattern (hover effects, textures, theme colors)
Verify and fix blog routing on live site

Success looks like: Three cards on homepage (AI Engineering, myCAIO, Web Presence) with working navigation to all service pages and blog.

2. Key Developments

Technical Progress:

Extended BrandSegment type to support 'gold' theme and texture
Created GoldTexture component with ascending growth lines and diamond SVG pattern
Added gold theme styles (glow, accent, bg, border) to Card component
Implemented myCAIO segment with Briefcase icon

System Improvements:

Fixed Vercel routing for hybrid static/SPA site architecture
Established reliable routing pattern for future static page additions

Integrations Added:

New /mycaio route accessible from homepage card navigation

3. Design Decisions

Gold Theme Color Palette

Decision: Use rgba(201, 162, 39) for glow, Tailwind yellow-500 for accents
Rationale: Matches Obsidian Authority gold (#c9a227) from mycaio.html for visual consistency
Alternative considered: amber-500/600 from Tailwind
Trade-off: yellow-500 is slightly brighter but more accessible

GoldTexture Pattern Design

Decision: Ascending growth lines with diamond pattern overlay
Rationale: Evokes premium/executive positioning for C-suite consulting service
Alternative considered: Hexagonal pattern, radial burst
Trade-off: More subtle than other textures but appropriate for executive branding

Card Ordering

Decision: AI Engineering (left) → myCAIO (center) → Web Presence (right)
Rationale: Technical → Strategic → Marketing creates logical service hierarchy
Alternative considered: Alphabetical, by popularity
Trade-off: None - this ordering makes conceptual sense

Vercel Routing Strategy

Decision: Explicit static page rewrites BEFORE SPA catch-all
Rationale: First matching rewrite wins in Vercel; static pages must be listed first
Alternative considered: cleanUrls, routes array, regex exclusions
Trade-off: More verbose config but reliable behavior

4. Challenges & Solutions

Blog Route 404

Problem: /blog returned 404 on live site despite rewrites in vercel.json
Root cause: With framework: null, Vercel's rewrite processing order wasn't matching SPA routes
Solution: Added explicit rewrites for each route type with static pages first, catch-all last

Static Pages Breaking When Blog Fixed

Problem: Regex exclusion pattern ((?!agents|mycaio|trading).*) didn't work
Root cause: Vercel's rewrite regex may not fully support negative lookahead
Solution: Explicit individual rewrites for each static page before catch-all

WebFetch Returning False 404s

Problem: WebFetch tool reported 404 when site was actually working
Root cause: Caching or client-side rendering detection issue
Solution: Used curl -sI for reliable HTTP status verification

5. Code Changes

File	Change
`src/types/index.ts`	Added 'gold' to theme and texture union types
`src/components/ui/BackgroundTextures.tsx`	Created GoldTexture component
`src/components/ui/Card.tsx`	Added gold theme styles and GoldTexture rendering
`src/pages/Home.tsx`	Added Briefcase import, myCAIO segment to SEGMENTS array
`vercel.json`	Fixed routing with explicit static rewrites before SPA catch-all

6. Next Steps

Consider adding hover animation variations for gold card
Monitor analytics for myCAIO card click-through rate
Add myCAIO to header navigation if warranted

7. Session Notes

Vercel Routing Pattern for Hybrid Sites:

{
  "framework": null,
  "rewrites": [
    { "source": "/static-page", "destination": "/static-page.html" },
    { "source": "/spa-route", "destination": "/index.html" },
    { "source": "/:path*", "destination": "/index.html" }
  ]
}

Key insight: Order matters. Static pages must be explicitly routed FIRST, then SPA routes, then catch-all. The cleanUrls option alone doesn't handle this correctly with framework: null.

Testing tip: Use curl -sI https://url to verify actual HTTP status rather than relying on browser or WebFetch which may cache or have rendering issues.