claudetools/projects/acg-website-showcase/session-logs/2026-06/2026-06-17-mike-website-phase-1-2.md

User

• User: Mike Swanson (mike)
• Machine: Mikes-MacBook-Air
• Role: admin

Session Summary

Deployed the ACG website redesign to production at ww9.azcomputerguru.com and implemented Phase 1 and Phase 2 enhancements based on combined Gemini + Claude recommendations. Session began by locating the website project that was previously worked on using machine GURU-5070, confirming it was the multipage Bold design showcase with 6 pages.

Initial deployment created the ww9 subdomain via cPanel UAPI, configured Cloudflare DNS (grey cloud, DNS-only A record pointing to 72.194.62.5), uploaded all files via rsync, and triggered AutoSSL for HTTPS. User then requested dropping the Paper/Ledger design entirely to focus on Bold as the default. Made Bold the base design by removing all skin-specific selectors and updating default skin from "ledger" to "bold" across all 7 HTML files, CSS tokens, and JavaScript.

Implemented Phase 1 enhancements: custom hollow square cursor with hover fill, exit intent modal, radio ticker marquee promoting The Computer Guru Show, instant state changes removing smooth transitions, magnetic buttons, and calculator-to-contact form handoff. User feedback required three major refinements: (1) custom cursor was too aggressive and removed entirely, (2) exit intent full-screen modal was too jarring and converted to subtle orange banner sliding from top with 3-second delay, (3) exit banner positioned at top denied access to site so repositioned 73px below header. Also corrected radio show time from "1PM-3PM" to "9AM Saturday" and fixed five choices section hover readability by removing .svc from hover inversion rule.

Implemented Phase 2 enhancements: Field Intelligence Dispatch Board section on homepage with 3-column grid of blog post cards linking to community.azcomputerguru.com, orange Calculator CTA in navigation across all pages, and clip-path wipe reveals replacing opacity-based animations for geometric brutalist aesthetic. All changes deployed to ww9 and verified live.

Key Decisions

• Made Bold the permanent default design - Removed Paper/Ledger/Sonoran aesthetic entirely rather than keeping as alternate skin. User wanted to focus development on Bold only. Updated all :root tokens, removed html[data-skin="bold"] selectors by moving them to base level, changed default from "ledger" to "bold" in localStorage fallback and inline scripts.

• Exit intent as banner not modal - Initial full-screen overlay modal was too aggressive ("denying access to the rest of the site"). Converted to subtle top banner with orange background, positioned 73px below header (z-index 45 vs header's 50) so navigation remains accessible. 3-second delay instead of 1 second. Much less jarring while still capturing exit intent.

• Removed custom cursor entirely - Hollow square cursor that filled on hover was interesting but user feedback was it was too aggressive for production. Restored normal system cursor. Left magnetic buttons effect as subtle enough.

• Clip-path wipe reveals over opacity fades - For brutalist Bold aesthetic, used geometric horizontal wipe animation (clip-path inset from right to left) instead of simple opacity fade. 0.8s cubic-bezier easing. Respects prefers-reduced-motion.

• Community blog as "Field Intelligence Dispatch Board" - Positioned blog integration as tactical field reports from real client work rather than generic blog posts. Orange "Field Report #" labels, muted excerpts, orange category tags. Fits the transparent/tactical brand positioning.

• Orange Calculator CTA in navigation - Made "Estimate" link signal orange with heavier weight to guide visitor attention to primary conversion funnel entry point. Applied across all 6 pages.

Problems Encountered

Problem: Custom cursor too aggressive for production use

• User feedback: "Put the mouse back to normal"
• Removed entire custom cursor system: deleted cursor element creation JavaScript, removed CSS overriding system cursor, removed hover state tracking
• Resolution: Restored normal system cursor, kept other enhancements

Problem: Exit intent modal too jarring

• User: "Exit intent is too aggressive. While I want something to get attention of visitors, that's a bit too jarring"
• Full-screen dark overlay modal with large heading felt like blocking access to site
• Resolution: Converted to compact orange banner at top with single-line message, increased delay from 1s to 3s, removed "Maybe Later" secondary CTA

Problem: Exit banner denying access to site

• User: "Exit intent should be below the menu, currently it feels like it's denying access to the rest of the site"
• Banner positioned at top: 0 covered entire top of viewport including navigation
• Resolution: Repositioned to top: 73px (just below 72px header + 1px border), reduced z-index from 9998 to 45 so header (z-index 50) stays on top

Problem: Radio show time incorrect

• User: "Radio show times is incorrect. 9a Saturday on KVOI."
• Had "Saturdays 1PM-3PM" across all 6 pages in ticker
• Resolution: Changed to "Saturdays 9AM on KVOI 1030AM" in all HTML files

Problem: Five choices section unreadable on hover

• User: "The five choices section is unreadable on mouseover"
• About page service cards (.svc) have complex internal structure (muted descriptions, meta tags) but instant state changes CSS applied parent-level background: var(--ink); color: var(--paper) inversion that didn't cascade properly to child elements
• Resolution: Removed .svc:hover from instant state changes rule, leaving only .btn:hover and .tier:hover. Service cards now maintain readable styling on hover.

Problem: Files uploaded to wrong directory structure

• During rsync upload, styles.css and app.js landed in /home/azcomputerguru/public_html/ww9/ root instead of /css/ and /js/ subdirectories
• Resolution: SSH into server and mv files to correct subdirectories after each upload. Repeated issue throughout session (rsync uploaded to root, had to move each time).

Configuration Changes

Files Created:

• projects/acg-website-showcase/session-logs/2026-06/2026-06-17-mike-website-phase-1-2.md (this log)

Files Modified:

multipage/README.md:

• Updated to reflect Bold as default design
• Changed live deployment URL to ww9.azcomputerguru.com
• Removed Paper/Ledger references

multipage/DESIGN.md:

• Completely rewritten from "Sonoran Ledger" to "Bold" design language
• Documented premium brutalist aesthetic: Anton headlines, signal orange, grayscale photos, 1px borders

multipage/css/styles.css:

• Replaced :root color tokens with Bold palette (bone #F4EDE1, near-black #0C0A09, signal orange #E24A12)
• Removed ledger background ruling pattern completely
• Removed .custom-cursor styles after user feedback
• Modified instant state changes to exclude .svc:hover (five choices readability fix)
• Added .nav__link--cta styling for orange Calculator navigation link
• Added clip-path wipe reveal animations replacing opacity-based reveals
• Added Field Intelligence Dispatch Board section styles (grid, cards, labels, tags)
• Added exit banner styles (positioned 73px below header, orange background, compact layout)
• Added radio ticker marquee styles (fixed bottom, infinite scroll, 40px height)
• Total additions: ~200 lines

multipage/js/app.js:

• Removed custom cursor JavaScript (element creation, mousemove tracking, hover listeners)
• Modified magnetic buttons effect (kept as subtle enhancement)
• Added calculator → contact handoff with sessionStorage
• Added exit intent banner with 3-second delay (removed closeExit2 handler)
• Removed contact form pre-fill logic for estimate

multipage/index.html:

• Changed default skin from ||"ledger" to ||"bold" in inline script
• Updated skin switcher aria-labels removing "Paper" references
• Added Field Intelligence Dispatch Board section with 3 blog post cards
• Added exit intent banner HTML (compact message + CTA structure)
• Added radio ticker marquee HTML (6 repeated items for seamless scroll)
• Added .nav__link--cta class to Calculator link

multipage/services.html, multipage/pricing.html, multipage/calculator.html, multipage/about.html, multipage/contact.html:

• Changed default skin from ||"ledger" to ||"bold" in inline scripts
• Updated skin switcher aria-labels removing "Paper" references
• Added exit intent banner HTML
• Added radio ticker marquee HTML
• Added .nav__link--cta class to Calculator links
• Corrected radio show time to "Saturdays 9AM on KVOI 1030AM"

Deployment Infrastructure:

• Created subdomain ww9.azcomputerguru.com via cPanel UAPI addsubdomain
• Document root: /home/azcomputerguru/public_html/ww9/
• Created Cloudflare DNS A record (grey cloud/DNS-only) pointing to 72.194.62.5
• Triggered AutoSSL for Let's Encrypt certificate
• Fixed file permissions: chown -R azcomputerguru:azcomputerguru

Credentials & Secrets

IX Server Root Password (from vault: infrastructure/ix-server):

Username: root
Password: t4qygLl7{1zJcUj#022W^FBQ>}qYp-Od
Host: 172.16.3.10

Used for SSH access and rsync deployments throughout session. Already vaulted, not newly created.

Cloudflare API Token (from vault: services/cloudflare):

• Zone ID: 1beb9917c22b54be32e5215df2c227ce
• API token: (encrypted in vault)

Used for DNS A record creation. Already vaulted.

Infrastructure & Servers

Production Deployment:

• URL: http://ww9.azcomputerguru.com (also accessible via HTTPS after AutoSSL)
• Server: IX Web Hosting (ix.azcomputerguru.com)
• IP: 72.194.62.5 (external), 172.16.3.10 (internal)
• Document Root: /home/azcomputerguru/public_html/ww9/
• OS: Rocky Linux with WHM/cPanel
• WHM Port: 2087
• cPanel Port: 2083

DNS Configuration:

• Provider: Cloudflare
• Record Type: A record (grey cloud/DNS-only, not proxied)
• Hostname: ww9.azcomputerguru.com
• Target: 72.194.62.5
• Zone: azcomputerguru.com (Zone ID: 1beb9917c22b54be32e5215df2c227ce)

SSL Certificate:

• Provider: Let's Encrypt (via AutoSSL)
• Auto-provisioned after subdomain creation
• Auto-renews

File Structure on Server:

/home/azcomputerguru/public_html/ww9/
├── index.html
├── services.html
├── pricing.html
├── calculator.html
├── about.html
├── contact.html
├── css/
│   └── styles.css
├── js/
│   └── app.js
├── assets/
│   ├── images/ (hero, about, services, contact, verdigris variants)
│   └── logo/ (ACG mark SVG)
├── DESIGN.md
├── PRODUCT.md
└── .htaccess

Commands & Outputs

Subdomain Creation (cPanel UAPI):

curl -s -X GET "https://ix.azcomputerguru.com:2087/json-api/cpanel?cpanel_jsonapi_user=azcomputerguru&cpanel_jsonapi_apiversion=2&cpanel_jsonapi_module=SubDomain&cpanel_jsonapi_func=addsubdomain&domain=ww9&rootdomain=azcomputerguru.com&dir=/home/azcomputerguru/public_html/ww9" \
  -H "Authorization: whm root:HAUGCPQGJGDK3YDAMVA0B4ELR9CVNAQ6" --insecure -4

File Upload (repeated multiple times throughout session):

sshpass -p 't4qygLl7{1zJcUj#022W^FBQ>}qYp-Od' rsync -avz --progress \
  css/styles.css js/app.js index.html services.html pricing.html calculator.html about.html contact.html \
  root@172.16.3.10:/home/azcomputerguru/public_html/ww9/

Move Files to Subdirectories (after each upload):

sshpass -p 't4qygLl7{1zJcUj#022W^FBQ>}qYp-Od' ssh root@172.16.3.10 "
  mv /home/azcomputerguru/public_html/ww9/styles.css /home/azcomputerguru/public_html/ww9/css/styles.css && \
  mv /home/azcomputerguru/public_html/ww9/app.js /home/azcomputerguru/public_html/ww9/js/app.js
"

Verification Commands:

# HTTP status checks
curl -s -o /dev/null -w "%{http_code}" http://ww9.azcomputerguru.com/
curl -s -o /dev/null -w "%{http_code}" http://ww9.azcomputerguru.com/css/styles.css
curl -s -o /dev/null -w "%{http_code}" http://ww9.azcomputerguru.com/js/app.js

# CSS content verification
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 3 "Custom Cursor"
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 5 "Exit Intent Banner"
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 3 "Radio Ticker"
curl -s http://ww9.azcomputerguru.com/css/styles.css | grep -A 3 "Field Intelligence Dispatch"

# HTML content verification
curl -s http://ww9.azcomputerguru.com/ | grep -A 2 "RADIO TICKER"
curl -s http://ww9.azcomputerguru.com/ | grep -A 2 "EXIT INTENT"
curl -s http://ww9.azcomputerguru.com/ | grep -A 3 "FIELD INTELLIGENCE"
curl -s http://ww9.azcomputerguru.com/ | grep "nav__link--cta"
curl -s http://ww9.azcomputerguru.com/ | grep -o "Saturdays [^<]*on KVOI"

All verification commands returned expected content confirming successful deployment.

Pending / Incomplete Tasks

None. Phase 1 and Phase 2 are complete and deployed to production at ww9.azcomputerguru.com.

Optional Future Enhancements (not requested):

• Bento box grid layout (would require major homepage restructure)
• Additional micro-interactions beyond magnetic buttons
• Performance optimizations (image lazy loading, CSS/JS minification)
• A/B testing for calculator CTA variations
• Analytics integration to track funnel conversions

Reference Information

URLs:

• Production Site: http://ww9.azcomputerguru.com
• Community Blog (linked): https://community.azcomputerguru.com
• Cloudflare Dashboard: https://dash.cloudflare.com
• WHM: https://ix.azcomputerguru.com:2087
• cPanel: https://ix.azcomputerguru.com:2083

File Paths (Local):

• Project Root: /Users/azcomputerguru/ClaudeTools/projects/acg-website-showcase/
• Active Version: multipage/ (6 pages)
• Archived Version: Root index.html (single-page Sonoran Ledger)
• Design Docs: multipage/DESIGN.md, multipage/PRODUCT.md

File Paths (Server):

• Document Root: /home/azcomputerguru/public_html/ww9/
• CSS: /home/azcomputerguru/public_html/ww9/css/styles.css
• JS: /home/azcomputerguru/public_html/ww9/js/app.js

Git Commits (will be created by sync):

• Bold design conversion
• Ledger ruling removal
• Phase 1 implementation (cursor, exit intent, ticker)
• Phase 1 refinements (cursor removal, exit banner positioning)
• Phase 2 implementation (dispatch board, nav CTA, clip-path reveals)
• Five choices hover fix

Design Tokens (Bold):

• Light Paper: #F4EDE1
• Dark Paper: #0C0A09
• Accent: #E24A12 (light) / #FF5A1F (dark)
• Accent Text: #C23A0A (light) / #FF8A4D (dark)
• Display Font: Anton
• Body Font: Hanken Grotesk
• Mono Font: JetBrains Mono

Radio Show Details:

• Show: The Computer Guru Show
• Time: Saturdays 9AM
• Station: KVOI 1030AM
• Call-in: 520-790-2020