51 lines
2.2 KiB
Markdown
51 lines
2.2 KiB
Markdown
# Arizona Computer Guru — Website Showcase
|
|
|
|
A self-contained, hand-built single-page marketing site for Arizona Computer Guru,
|
|
produced as a local "what we can do" test piece. No framework, no build step.
|
|
|
|
**Art direction:** "Sonoran Ledger" — warm paper, a bookkeeper's-ledger rhythm,
|
|
mono numerals, orange used only as sparse accent "ink." Chosen by a Grok + Gemini
|
|
design panel and confirmed by Mike. See `DESIGN.md`.
|
|
|
|
## View it
|
|
From this folder:
|
|
|
|
```powershell
|
|
powershell -ExecutionPolicy Bypass -File serve.ps1 # serves :4327 and opens a browser
|
|
```
|
|
or any static server, e.g.:
|
|
```bash
|
|
py -m http.server 4327 # then open http://localhost:4327/
|
|
```
|
|
|
|
It also works opened directly as `index.html` (file://), though serving is cleaner
|
|
(Google Fonts and JSON-LD behave best over http).
|
|
|
|
## What's inside
|
|
| Path | Purpose |
|
|
|---|---|
|
|
| `index.html` | The page — semantic, accessible, all sections |
|
|
| `css/styles.css` | Sonoran Ledger design system (light + dark themes) |
|
|
| `js/app.js` | Theme toggle, IT-cost calculator, FAQ, mobile nav, reveal |
|
|
| `assets/images/` | Grok-generated photography (hero, story, trust) + paper texture |
|
|
| `design/` | Pipeline artifacts: AI design directions, reviews, render screenshots |
|
|
| `DESIGN.md` | Locked design system + anti-slop rules |
|
|
|
|
## Features
|
|
- Light **and** dark themes (system-aware, remembered, no flash-of-wrong-theme).
|
|
- Live **IT cost calculator** — endpoints, GPS tier, support plan, M365, phones,
|
|
hosting → monthly/annual/all-in-per-endpoint. "Send me this estimate" hands the
|
|
built statement to the contact form.
|
|
- Published GPS pricing, services, FAQ, and concierge story from ACG's own materials.
|
|
- WCAG-AA contrast in both themes; keyboard-accessible nav, FAQ, and forms.
|
|
|
|
## Build pipeline (how it was made)
|
|
Grok (art-direction input + image generation) → Gemini (design-weight decision) →
|
|
human pick → hand-built static site → Gemini + Grok design & code review → fixes →
|
|
Gemini vision final design gate → polish → local publish.
|
|
|
|
## Not production
|
|
This is a demonstration build. The contact form is not wired to a mailbox, pricing
|
|
is illustrative of published GPS rates, and photography is representational. The live
|
|
site project lives at `clients/azcomputerguru.com/` (Astro).
|