azcomputerguru/claudetools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
fee9cc01ac20da81313e8edf8916e49b5dd1ef69
claudetools/azcomputerguru-changelog.md

7.0 KiB
Raw Blame History

Arizona Computer Guru Redesign - Change Log

Version 2.0.0 - "Desert Brutalism" (2026-02-01)

MAJOR CHANGES FROM PREVIOUS VERSION

Typography Transformation

BEFORE

  • Inter (generic, overused)
  • Standard weights
  • Minimal letter-spacing
  • Conservative sizing

AFTER

  • Space Grotesk - Geometric brutalist headings
  • IBM Plex Sans - Warm technical body text
  • JetBrains Mono - Monospace tech accents
  • Negative letter-spacing (-0.03em to -0.01em)
  • Bolder sizing (H1: 3.5-5rem vs 2rem)
  • Uppercase dominance

Color Palette Evolution

BEFORE

--color2: #f57c00  /* Generic orange */
--color1: #1b263b  /* Navy blue */
--color3: #0d1b2a  /* Dark blue */

AFTER

--sunset-copper: #D4771C    /* Warmer, deeper orange */
--midnight-desert: #0A0F14  /* Near-black with blue undertones */
--canyon-shadow: #2D1B14    /* Deep brown */
--sandstone: #E8D5C4        /* Warm neutral */
--neon-accent: #00FFA3      /* Cyberpunk green - NEW */

Impact: Shifted from blue-heavy to warm desert palette with unexpected neon accent

Visual Effects Added

Geometric Transforms

  • NEW: skewY(-2deg) on cards and boxes
  • NEW: skewX(-5deg) on navigation hovers
  • NEW: Angular elements mimicking geological strata

Border Treatments

  • BEFORE: 2-5px borders
  • AFTER: 8-12px thick brutalist borders
  • NEW: Neon accent borders (left/bottom)
  • NEW: Border width changes on hover (8px → 12px)

Shadow System

  • BEFORE: Simple box-shadows
  • AFTER: Dramatic offset shadows (4px, 8px, 12px)
  • NEW: Neon glow shadows: 0 0 20px rgba(0, 255, 163, 0.3)
  • NEW: Multi-layer shadows on hover

Background Textures

  • NEW: Radial gradient overlays
  • NEW: Repeating line patterns
  • NEW: Desert texture simulation
  • NEW: Gradient overlays on dark sections

Interactive Animations

Link Hover Effects

  • BEFORE: Simple color change
  • AFTER: Underline slide animation (::after pseudo-element)
  • Width: 0 → 100%
  • Positioned with absolute bottom

Button Animations

  • BEFORE: Background + color transition
  • AFTER: Background slide-in effect (::before pseudo-element)
  • Left: -100% → 0
  • Neon glow on hover

Card Hover Effects

  • BEFORE: translateY(-4px) + shadow
  • AFTER: Combined transform: skewY(-2deg) translateY(-8px) scale(1.02)
  • Border thickness change
  • Neon glow shadow
  • Multiple property transitions

Icon Animations

  • NEW: scale(1.2) rotate(-5deg) on button box icons
  • NEW: Neon glow filter effect

Component-Specific Changes

Navigation

  • Font: Inter → Space Grotesk
  • Weight: 500 → 600
  • Border: 2px → 4px (active states)
  • Hover: Simple background → Skewed background + border animation
  • CTA Button: Orange → Neon green with glow

Above Header

  • Background: Gradient → Solid midnight desert
  • Border: Gradient border → 4px solid copper
  • Font: Inter → JetBrains Mono
  • Link hover: Color change → Underline slide + color

Feature/Hero Section

  • Background: Simple gradient → Desert gradient + textured overlay
  • Typography: 2rem → 4.5rem headings
  • Shadow: Simple → 4px offset with transparency
  • Overlay: None → Multi-layer pattern overlays

Columns Upper (Cards)

  • Transform: None → skewY(-2deg)
  • Border: None → 8px neon left border
  • Hover: translateY(-4px) → Complex transform + scale
  • Background: Solid → Gradient overlay effect

Button Boxes

  • Border: 15px orange → 12px copper (mobile: 8px)
  • Transform: None → skewY(-2deg)
  • Hover: Simple → Background slide + border color change
  • Icon: Static → Scale + rotate animation
  • Size: 25rem → 28rem height

Footer

  • Background: Solid dark → Gradient + repeating line texture
  • Border: Simple → 6px copper top border
  • Links: Color transition → Underline slide animation
  • Headings: Orange → Neon green with left border

Layout Changes

Spacing

  • Increased padding on major sections (2rem → 4rem, 8rem)
  • More generous margins on cards (0.5rem → 1rem)
  • Better breathing room in content areas

Typography Scale

  • H1: 2rem → 3.5-5rem
  • H2: 1.6rem → 2.4-3.5rem
  • H3: 1.2rem → 1.6-2.2rem
  • Body: 1.2rem (maintained, improved line-height)

Border Weights

  • Thin (2-5px) → Thick (6-12px)
  • Consistent brutalist aesthetic

Mobile/Responsive Changes

Maintained

  • Core responsive structure
  • Flexbox collapse patterns
  • Mobile menu functionality

Enhanced

  • Removed skew transforms on mobile (performance + clarity)
  • Simplified border weights on small screens
  • Better contrast with dark background priority
  • Improved touch target sizes

Performance Considerations

Font Loading

  • Google Fonts with display=swap
  • Three typefaces vs one (acceptable for impact)

Animation Performance

  • CSS-only (no JavaScript)
  • GPU-accelerated transforms (translateY, scale, skew)
  • Cubic-bezier timing: cubic-bezier(0.4, 0, 0.2, 1)

Code Size

  • Previous: 28KB
  • New: 31KB (+10% for significant visual enhancement)

Accessibility Maintained

Contrast Ratios

  • High contrast preserved
  • Neon accent (#00FFA3) used carefully for CTAs only
  • Dark backgrounds with light text meet WCAG AA

Interactive States

  • Clear focus states
  • Hover states distinct from default
  • Active states visually obvious

What Stayed the Same

Structure

  • HTML structure unchanged
  • WordPress theme compatibility maintained
  • Navigation hierarchy preserved
  • Content organization intact

Functionality

  • All links work identically
  • Forms function the same
  • Mobile menu behavior consistent
  • Responsive breakpoints similar

Files Modified

Primary

  • style.css - Complete redesign

Backups

  • style.css.backup-20260201-154357 - Previous version saved

New Documentation

  • azcomputerguru-design-vision.md - Design philosophy
  • azcomputerguru-changelog.md - This file

Deployment Details

Date: 2026-02-01 Time: ~16:00 Server: 172.16.3.10 Path: /home/azcomputerguru/public_html/testsite/wp-content/themes/arizonacomputerguru/ Live URL: https://azcomputerguru.com/testsite Status: Active

Rollback Instructions

If needed, restore previous version:

ssh root@172.16.3.10
cd /home/azcomputerguru/public_html/testsite/wp-content/themes/arizonacomputerguru/
cp style.css.backup-20260201-154357 style.css

Summary

This redesign transforms the site from a conservative corporate aesthetic to a bold, distinctive Desert Brutalism identity. The changes prioritize:

  1. Memorability - Geometric brutalism + unexpected neon accents
  2. Regional Identity - Arizona desert color palette
  3. Tech Credibility - Monospace accents + clean typography
  4. Visual Impact - Dramatic scale, shadows, transforms
  5. Professional Edge - Maintained structure, improved hierarchy

The result is a website that commands attention while maintaining complete functionality and accessibility.

Reference in New Issue View Git Blame Copy Permalink