Reorganize repo: compartmentalize scripts by client/project
Move 150+ scripts from root and scripts/ into client/project directories: - clients/dataforth/scripts/ (110 files: AD2, sync, SSH, DB, DOS scripts) - clients/bg-builders/scripts/ (14 files: Lesley mgmt, Exchange, termination) - clients/internal-infrastructure/scripts/ (10 files: GDAP, Gitea, backups) - projects/msp-tools/scripts/ (9 files: CIPP, MSP onboarding, Datto) - projects/gururmm-agent/scripts/ (3 files: API test, JWT, record counts) - clients/glaztech/scripts/ (1 file: CentraStage removal) Also reorganized: - VPN scripts → infrastructure/vpn-configs/ - Retrieved API/JS files → api/ - Forum posts → projects/community-forum/forum-posts/ - SSH docs → clients/internal-infrastructure/docs/ - NWTOC/CTONW docs → projects/wrightstown-smarthome/docs/ - ACG website files → projects/internal/acg-website-2025/ - Dataforth docs → clients/dataforth/docs/ - schema-retrieved.sql → docs/database/ Deleted 24 tmp_*.ps1 one-off debug scripts (preserved in git history). Root reduced from 220+ files to 62 items (docs + directories only). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
273
projects/internal/acg-website-2025/azcomputerguru-changelog.md
Normal file
273
projects/internal/acg-website-2025/azcomputerguru-changelog.md
Normal file
@@ -0,0 +1,273 @@
|
||||
# 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
|
||||
```css
|
||||
--color2: #f57c00 /* Generic orange */
|
||||
--color1: #1b263b /* Navy blue */
|
||||
--color3: #0d1b2a /* Dark blue */
|
||||
```
|
||||
|
||||
### AFTER
|
||||
```css
|
||||
--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:
|
||||
|
||||
```bash
|
||||
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.
|
||||
@@ -0,0 +1,229 @@
|
||||
# Arizona Computer Guru - Bold Redesign Vision
|
||||
|
||||
## DESIGN PHILOSOPHY: DESERT BRUTALISM MEETS SOUTHWEST FUTURISM
|
||||
|
||||
The redesign breaks away from generic corporate aesthetics by fusing brutalist design principles with Arizona's dramatic desert landscape. This creates a distinctive, memorable identity that commands attention while maintaining professional credibility.
|
||||
|
||||
---
|
||||
|
||||
## CORE DESIGN ELEMENTS
|
||||
|
||||
### Typography System
|
||||
|
||||
**PRIMARY: Space Grotesk**
|
||||
- Geometric, brutalist character
|
||||
- Architectural precision
|
||||
- Strong uppercase presence
|
||||
- Negative letter-spacing for impact
|
||||
- Used for: All headings, navigation, CTAs
|
||||
|
||||
**SECONDARY: IBM Plex Sans**
|
||||
- Technical warmth (warmer than Inter/Roboto)
|
||||
- Excellent readability
|
||||
- Professional yet distinctive
|
||||
- Used for: Body text, descriptions
|
||||
|
||||
**ACCENT: JetBrains Mono**
|
||||
- Monospace personality
|
||||
- Tech credibility signal
|
||||
- Distinctive rhythm
|
||||
- Used for: Tech elements, small text, code snippets
|
||||
|
||||
### Color Palette
|
||||
|
||||
**Sunset Copper (#D4771C)**
|
||||
- Primary brand color
|
||||
- Warmer, deeper than generic orange
|
||||
- Evokes Arizona desert sunsets
|
||||
- Usage: Primary accents, highlights, hover states
|
||||
|
||||
**Midnight Desert (#0A0F14)**
|
||||
- Near-black with blue undertones
|
||||
- Deep, mysterious night sky
|
||||
- Usage: Dark backgrounds, text, headers
|
||||
|
||||
**Canyon Shadow (#2D1B14)**
|
||||
- Deep brown with earth tones
|
||||
- Geological depth
|
||||
- Usage: Secondary dark elements
|
||||
|
||||
**Sandstone (#E8D5C4)**
|
||||
- Warm neutral light tone
|
||||
- Desert sediment texture
|
||||
- Usage: Light text on dark backgrounds
|
||||
|
||||
**Neon Accent (#00FFA3)**
|
||||
- Unexpected cyberpunk touch
|
||||
- High-tech contrast signal
|
||||
- Usage: CTAs, active states, special highlights
|
||||
|
||||
---
|
||||
|
||||
## VISUAL LANGUAGE
|
||||
|
||||
### Geometric Brutalism
|
||||
- **Thick borders** (8-12px) on major elements
|
||||
- **Skewed transforms** (skewY/skewX) mimicking geological strata
|
||||
- **Chunky typography** with bold weights
|
||||
- **Asymmetric layouts** for visual interest
|
||||
- **High contrast** shadow and light
|
||||
|
||||
### Desert Aesthetics
|
||||
- **Textured backgrounds** - Subtle radial gradients and line patterns
|
||||
- **Sunset gradients** - Warm copper to deep brown
|
||||
- **Geological angles** - 2-5 degree skews
|
||||
- **Shadow depth** - Dramatic drop shadows (4-8px offsets)
|
||||
- **Layered atmosphere** - Overlapping semi-transparent effects
|
||||
|
||||
### Tech Elements
|
||||
- **Neon glow effects** - Cyan/green accents with glow shadows
|
||||
- **Grid patterns** - Repeating line textures
|
||||
- **Monospace touches** - Code-style elements
|
||||
- **Geometric shapes** - Angular borders and dividers
|
||||
- **Hover animations** - Transform + shadow combos
|
||||
|
||||
---
|
||||
|
||||
## KEY DESIGN FEATURES
|
||||
|
||||
### Navigation
|
||||
- Bold uppercase Space Grotesk
|
||||
- Skewed hover states with full background fill
|
||||
- Neon CTA button (last menu item)
|
||||
- Geometric dropdown with thick copper/neon borders
|
||||
- Mobile: Full-screen dark overlay with neon accents
|
||||
|
||||
### Hero/Feature Area
|
||||
- Desert gradient backgrounds
|
||||
- Massive 4.5rem headings with shadow
|
||||
- Textured overlays (subtle line patterns)
|
||||
- Dramatic positioning and scale
|
||||
|
||||
### Content Cards (Columns Upper)
|
||||
- Skewed -2deg transform
|
||||
- Thick neon left border (8-12px)
|
||||
- Gradient overlay effects
|
||||
- Transform + scale on hover
|
||||
- Neon glow shadow
|
||||
|
||||
### Button Boxes
|
||||
- 12px thick borders
|
||||
- Skewed containers
|
||||
- Gradient background slide-in on hover
|
||||
- Icon scale + rotate animation
|
||||
- Border color change (copper to neon)
|
||||
|
||||
### Typography Hierarchy
|
||||
- **H1:** 3.5-5rem, uppercase, geometric, heavy shadow
|
||||
- **H2:** 2.4-3.5rem, uppercase, neon underlines
|
||||
- **H3:** 1.6-2.2rem, left border accents
|
||||
- **Body:** 1.2rem, light weight, excellent line height
|
||||
|
||||
### Interactive Elements
|
||||
- **Links:** Underline slide animation (width 0 to 100%)
|
||||
- **Buttons:** Background slide + neon glow
|
||||
- **Cards:** Transform + shadow + border width change
|
||||
- **Hover timing:** 0.3s cubic-bezier(0.4, 0, 0.2, 1)
|
||||
|
||||
---
|
||||
|
||||
## TECHNICAL IMPLEMENTATION
|
||||
|
||||
### Performance
|
||||
- Google Fonts with display=swap
|
||||
- CSS-only animations (no JS dependencies)
|
||||
- Efficient transforms (GPU-accelerated)
|
||||
- Minimal animation complexity
|
||||
|
||||
### Accessibility
|
||||
- High contrast ratios maintained
|
||||
- Readable font sizes (min 16px)
|
||||
- Clear focus states
|
||||
- Semantic HTML structure preserved
|
||||
|
||||
### Responsive Strategy
|
||||
- Mobile: Remove skews, simplify transforms
|
||||
- Mobile: Full-width cards, simplified borders
|
||||
- Mobile: Dark background prioritized
|
||||
- Tablet: Reduced border thickness, smaller cards
|
||||
|
||||
---
|
||||
|
||||
## WHAT MAKES THIS DISTINCTIVE
|
||||
|
||||
### AVOIDS:
|
||||
- Inter/Roboto fonts
|
||||
- Purple/blue gradients
|
||||
- Generic rounded corners
|
||||
- Subtle gray palettes
|
||||
- Minimal flat design
|
||||
- Cookie-cutter layouts
|
||||
|
||||
### EMBRACES:
|
||||
- Geometric brutalism
|
||||
- Southwest color palette
|
||||
- Unexpected neon accents
|
||||
- Angular/skewed elements
|
||||
- Dramatic shadows
|
||||
- Textured layers
|
||||
- Monospace personality
|
||||
|
||||
---
|
||||
|
||||
## DESIGN RATIONALE
|
||||
|
||||
**Why Space Grotesk?**
|
||||
Geometric, architectural, brutalist character creates instant visual distinction. The negative letter-spacing adds density and impact.
|
||||
|
||||
**Why Neon Accent?**
|
||||
The unexpected cyberpunk green (#00FFA3) creates memorable contrast against warm desert tones. It signals tech expertise without being generic.
|
||||
|
||||
**Why Skewed Elements?**
|
||||
2-5 degree skews reference geological formations (strata, canyon walls) while adding dynamic brutalist energy. Creates movement without rotation.
|
||||
|
||||
**Why Thick Borders?**
|
||||
8-12px borders are brutalist signatures. They create bold separation, architectural weight, and memorable chunky aesthetics.
|
||||
|
||||
**Why Desert Palette?**
|
||||
Grounds the brand in Arizona geography while differentiating from generic blue/purple tech palettes. Warm, distinctive, regionally authentic.
|
||||
|
||||
---
|
||||
|
||||
## USER EXPERIENCE IMPROVEMENTS
|
||||
|
||||
### Visual Hierarchy
|
||||
- Clearer section separation with borders
|
||||
- Stronger color contrast for CTAs
|
||||
- More dramatic scale differences
|
||||
- Better defined interactive states
|
||||
|
||||
### Engagement
|
||||
- Satisfying hover animations
|
||||
- Memorable visual language
|
||||
- Distinctive personality
|
||||
- Professional yet bold
|
||||
|
||||
### Brand Identity
|
||||
- Regionally grounded (Arizona desert)
|
||||
- Tech-forward (neon accents, geometric)
|
||||
- Confident (brutalist boldness)
|
||||
- Unforgettable (breaks conventions)
|
||||
|
||||
---
|
||||
|
||||
## LIVE SITE
|
||||
|
||||
**URL:** https://azcomputerguru.com/testsite
|
||||
**Deployed:** 2026-02-01
|
||||
**Backup:** style.css.backup-20260201-154357
|
||||
|
||||
---
|
||||
|
||||
## DESIGN CREDITS
|
||||
|
||||
**Design System:** Desert Brutalism
|
||||
**Typography:** Space Grotesk + IBM Plex Sans + JetBrains Mono
|
||||
**Color Philosophy:** Arizona Sunset meets Cyberpunk
|
||||
**Visual Language:** Geometric Brutalism with Southwest Soul
|
||||
|
||||
This design intentionally breaks from safe, generic patterns to create a memorable, distinctive identity that positions Arizona Computer Guru as bold, confident, and unforgettable.
|
||||
1520
projects/internal/acg-website-2025/azcomputerguru-refined.css
Normal file
1520
projects/internal/acg-website-2025/azcomputerguru-refined.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user