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:**
```bash
ssh root@ix.azcomputerguru.com
```

**Claude User (Limited):**
```bash
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

```bash
# 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

```bash
# 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/

```bash
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