claudetools/projects/internal/acg-website-2025/README.md

Arizona Computer Guru Website 2025 Rebuild

Project Type: Internal - Company Website Status: Active Development (Static Site Approach) Technology: HTML5, CSS3, JavaScript (vanilla) Target Launch: TBD

Project Overview

Complete rebuild of Arizona Computer Guru's company website (www.azcomputerguru.com). Original site is WordPress-based; new approach is clean static HTML/CSS/JS for performance and maintainability.

Business: Arizona Computer Guru - MSP serving Arizona businesses Tagline: "Any system, any problem, solved" Service Area: Statewide (Tucson, Phoenix, Prescott, Flagstaff) Experience: 20+ years in IT support

---

Sites

Environment	URL	Technology	Status
Production (old)	https://www.azcomputerguru.com	WordPress	Live - to be replaced
Dev site (original)	https://dev.computerguru.me/acg2025/	WordPress	Reference only - don't modify
Working copy	https://dev.computerguru.me/acg2025-wp-test/	WordPress	Test environment
Static site	https://dev.computerguru.me/acg2025-static/	HTML/CSS/JS	Active development

---

Architecture Decision

Why Static Site?

Problems with WordPress approach:

• Massive CSS bloat from theme/plugins
• Difficult to customize mega menu cleanly
• Performance overhead
• Security concerns (plugin vulnerabilities)
• Maintenance burden (updates, backups)

Benefits of static site:

• Clean, maintainable CSS (~400 lines vs thousands)
• Full control over HTML structure
• Excellent performance (no database queries)
• Easy to host anywhere
• Minimal security attack surface
• Version control friendly

---

Current Development: Static Site

Location (Local): C:\Users\MikeSwanson\claude-projects\Website2025\static-site\ Location (Server): /home/computergurume/public_html/dev/acg2025-static/ Public URL: https://dev.computerguru.me/acg2025-static/

File Structure

static-site/
├── index.html          # Homepage
├── css/
│   └── style.css       # Main stylesheet (~400 lines)
├── js/
│   └── main.js         # Minimal JavaScript for interactivity
└── images/             # Optimized images from original site

Design Features

CSS Architecture:

• CSS Variables for consistent theming
• Mobile-first responsive design
• Breakpoints: 1024px (tablet), 768px (mobile)
• No frameworks (vanilla CSS)

Mega Menu:

• Dropdown navigation with blur overlay
• Smooth hover transitions
• Keyboard accessible

Components:

• Fixed header with scroll-triggered shrink effect
• Service cards grid layout
• Responsive hero section
• Contact forms (to be integrated with backend)

Color Scheme:

• Primary: [TBD - extract from logo]
• Secondary: [TBD]
• Accent: [TBD]

---

Business Information

Company Details

Name: Arizona Computer Guru Phone: 520.304.8300 Email: info@azcomputerguru.com Service Areas: Tucson, Phoenix, Prescott, Flagstaff Target Audience: Small to medium businesses needing IT support

Services Offered

1. Managed IT

   • Proactive monitoring and maintenance
   • 24/7 support
   • Strategic IT planning

2. Network & Server Management

   • Infrastructure design and implementation
   • Server administration
   • Cloud migration

3. Cybersecurity

   • Security assessments
   • Threat protection
   • Compliance assistance

4. Remote Support

   • Help desk services
   • GuruConnect remote desktop
   • Ticketing system

5. Website Services

   • Web hosting
   • Website design and development
   • Email services

---

Server Access

SSH Access

Root Access:

ssh root@ix.azcomputerguru.com

Claude User (Limited):

ssh claude-temp@ix.azcomputerguru.com
# Password: Gptf*77ttb
# Note: CageFS restricts access to other users' directories

File Paths on Server

/home/computergurume/public_html/dev/
├── acg2025/              # Original dev site (don't modify)
├── acg2025-wp-test/      # WordPress working copy
└── acg2025-static/       # Static site (active development)

/home/azcomputerguru/public_html/
└── [production WordPress site]

Web Server

• Software: Apache with cPanel
• User: Apache runs as nobody
• PHP: Available (if needed for contact forms)
• SSL: Let's Encrypt (auto-renewed)

---

Development Workflow

Local Development

# Edit files locally
cd ~/claude-projects/Website2025/static-site/
code index.html

# Test in browser (use local web server)
python3 -m http.server 8000
# OR
php -S localhost:8000

# Open: http://localhost:8000

Deploy to Server

# Deploy all files
rsync -avz --progress \
  ~/claude-projects/Website2025/static-site/ \
  root@ix.azcomputerguru.com:/home/computergurume/public_html/dev/acg2025-static/

# Deploy single file
scp index.html root@ix.azcomputerguru.com:/home/computergurume/public_html/dev/acg2025-static/

# Fix permissions
ssh root@ix.azcomputerguru.com "chmod -R 755 /home/computergurume/public_html/dev/acg2025-static/"

Git Workflow

Repository: AZComputerGuru/claude-projects (GitHub) Folder: Website2025/

cd ~/claude-projects/Website2025
git add .
git commit -m "Update homepage hero section"
git push origin main

---

Content Strategy

Homepage

Sections:

1. Hero: Eye-catching headline, brief description, CTA button
2. Services: Grid of service cards (6 services)
3. About: Company overview, experience, certifications
4. Service Areas: Map highlighting Tucson, Phoenix, Prescott, Flagstaff
5. Testimonials: Client success stories
6. Contact: Form + phone + email

Service Pages

Template Structure:

• Service overview
• Benefits
• Key features
• Process/workflow
• Pricing (or "Contact for quote")
• Related case studies
• CTA to contact

Pages Needed:

• Managed IT
• Network & Server Management
• Cybersecurity
• Remote Support
• Website Services

Additional Pages

• About Us: Company history, team, values
• Contact: Form, phone, email, office hours
• Blog: Technical articles, MSP tips (optional)
• Careers: Job openings (future)
• Privacy Policy: GDPR/CCPA compliance
• Terms of Service: Standard legal terms

---

Technical Specifications

Performance Goals

• Page Load: <2 seconds (3G connection)
• Time to Interactive: <3 seconds
• Lighthouse Score: 90+ across all metrics

SEO Considerations

• Meta Tags: Proper title, description, keywords
• Structured Data: Schema.org markup for local business
• Sitemap: XML sitemap for Google
• Robots.txt: Allow indexing of public pages
• Open Graph: Social media preview cards

Accessibility (WCAG 2.1 Level AA)

• Semantic HTML5 elements
• Proper heading hierarchy (h1, h2, h3)
• Alt text for all images
• Keyboard navigation support
• Color contrast ratios met
• ARIA labels where needed

Browser Support

• Chrome/Edge (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Mobile browsers (iOS Safari, Chrome Android)

---

Integration Points

Contact Forms

Backend Options:

1. PHP script (simple SMTP)
2. FormSpree/Formcarry (third-party service)
3. Custom API (GuruRMM integration)

Required:

• Spam protection (reCAPTCHA or similar)
• Email validation
• Success/error messages
• Auto-responder email to client

Analytics

Google Analytics 4:

• Track page views
• Conversion goals (form submissions, phone clicks)
• User behavior flow

GuruRMM Integration (Future)

• Live chat widget
• Client portal link
• Status page integration

---

Deployment Plan

Pre-Launch Checklist

• Complete all pages (home + 5 service pages + about + contact)
• Test on all target browsers
• Mobile responsiveness verified
• Contact form functional
• SSL certificate configured
• Analytics installed
• SEO meta tags complete
• Sitemap generated
• 301 redirects from old site configured

Launch Process

1. Final Testing: Staging site (dev.computerguru.me/acg2025-static/)
2. Client Review: Get approval from stakeholders
3. Backup Old Site: Full WordPress backup to archive
4. Deploy to Production: Copy files to /home/azcomputerguru/public_html/
5. DNS Verification: Ensure www.azcomputerguru.com points to correct server
6. SSL Check: Verify HTTPS working
7. Monitoring: Watch error logs, analytics for first 48 hours

Rollback Plan

If issues arise post-launch:

1. Restore WordPress site from backup
2. Investigate static site issues
3. Fix and re-deploy

Keep WordPress site available for at least 30 days post-launch.

---

Session History

2025-11-29

• Initial project handoff and context gathering
• Discussed exploring both old and new site structures
• Created working copy at acg2025-wp-test
• Set up GitHub repo: AZComputerGuru/claude-projects
• Attempted WordPress mega menu (encountered CSS bloat)
• Pivoted to static site rebuild

Recent Work

• Created clean static site foundation
• Implemented mega menu with smooth transitions
• Responsive design framework
• Local development environment set up

---

Design Assets

Logo

File: [TBD - extract from production site] Formats Needed: SVG (preferred), PNG (high-res fallback)

Color Palette

To Extract from Logo:

• Primary color
• Secondary color
• Accent color
• Neutral grays

Typography

Headings: [TBD - choose modern sans-serif] Body: [TBD - readable sans-serif] Monospace (code): [TBD - if needed for technical content]

Images

Stock Photos: For service pages, testimonials Custom Graphics: Icons for service cards Team Photos: For about page (if available)

---

Future Enhancements

Phase 2 Features

• Blog System: Static site generator (Jekyll, Hugo) or headless CMS
• Client Portal: Login area for existing clients
• Knowledge Base: Self-service support articles
• Service Status: Real-time infrastructure status page

Advanced Features

• Dark Mode: CSS toggle for dark theme
• Internationalization: Spanish language support
• Progressive Web App: Offline capability, install prompt
• Live Chat: Integration with GuruConnect or third-party

---

Related Projects

GuruRMM: MSP monitoring platform GuruConnect: Remote desktop solution MSP Toolkit: PowerShell scripts toolkit

---

Documentation

Local Files: ~/claude-projects/Website2025/static-site/ Server Files: /home/computergurume/public_html/dev/acg2025-static/ Git Repo: https://github.com/AZComputerGuru/claude-projects Session Logs: ~/claude-projects/session-logs/ (various dates)

---

Contacts

Project Owner: Mike Swanson Email: mike@azcomputerguru.com Phone: 520.304.8300

Stakeholders:

• [TBD - company owner/decision maker]
• [TBD - marketing contact]

---

Project Status: Active Development - Static Site Approach Current Phase: Homepage and core structure Next Milestone: Complete all service pages Target Launch: TBD