myCAIO Homepage Card & Vercel Routing Fix

Shipped the gold-themed myCAIO Fractional CAIO card on the homepage and fixed Vercel SPA rewrites that were 404ing the /blog route in production.

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

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.