acg-website: remove Paper/Ledger skin, set Bold as default
- CSS: Bold tokens now at :root (bone/near-black palette, signal orange) - JS: skin switcher cycles Bold/Midnight/Verdigris (default: bold) - HTML: all 7 pages default to bold skin - Docs: README + DESIGN.md rewritten for Bold design language - Deployment: live at ww9.azcomputerguru.com (IX hosting, grey-cloud DNS) Paper/Sonoran Ledger skin dropped per user direction. Single-page ledger version in root retained as archived reference pattern. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,50 +1,64 @@
|
||||
# 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.
|
||||
Multipage marketing site for Arizona Computer Guru. Hand-built static (HTML/CSS/vanilla JS).
|
||||
3 design skins, Bold as default. **Live deployment:** http://ww9.azcomputerguru.com
|
||||
|
||||
**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`.
|
||||
**Active version:** `multipage/` (6 pages: Home, Services, Pricing, Calculator, About, Contact)
|
||||
**Default design:** Bold — premium brutalist with Anton headlines, signal orange, grayscale photos
|
||||
**Archived:** Single-page Sonoran Ledger version (root `index.html`) — kept as reference pattern
|
||||
|
||||
## View it
|
||||
From this folder:
|
||||
|
||||
```powershell
|
||||
powershell -ExecutionPolicy Bypass -File serve.ps1 # serves :4327 and opens a browser
|
||||
```
|
||||
or any static server, e.g.:
|
||||
**Live site:** http://ww9.azcomputerguru.com (deployed to IX hosting, grey-cloud Cloudflare DNS)
|
||||
|
||||
**Local preview:**
|
||||
```bash
|
||||
py -m http.server 4327 # then open http://localhost:4327/
|
||||
cd multipage/
|
||||
powershell -ExecutionPolicy Bypass -File serve.ps1 # port 4328
|
||||
# OR
|
||||
py -m http.server 4328
|
||||
```
|
||||
|
||||
It also works opened directly as `index.html` (file://), though serving is cleaner
|
||||
(Google Fonts and JSON-LD behave best over http).
|
||||
**Archived single-page (Sonoran Ledger):**
|
||||
```bash
|
||||
# From project root
|
||||
powershell -ExecutionPolicy Bypass -File serve.ps1 # port 4327
|
||||
```
|
||||
|
||||
## 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 |
|
||||
|
||||
**Multipage (active):** `multipage/`
|
||||
- 6 HTML pages (index, services, pricing, calculator, about, contact)
|
||||
- 3 skins: **Bold** (default), Midnight, Verdigris — each with light + dark themes
|
||||
- Bold design: Anton uppercase headlines, signal orange (#E24A12), grayscale photos, bone/near-black palette
|
||||
- `css/styles.css` — 3-skin token-based system
|
||||
- `js/app.js` — theme + skin switchers, calculator, mobile nav, FAQ
|
||||
- `assets/images/` — Grok photography (default warm set + Verdigris cool set)
|
||||
- `PRODUCT.md`, `DESIGN.md` — brand register + design rules
|
||||
|
||||
**Single-page (archived):** Root directory
|
||||
- `index.html` — Sonoran Ledger design (warm paper aesthetic)
|
||||
- Kept as reusable pattern for other Guru-related sites
|
||||
|
||||
## 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.
|
||||
- **3 design skins** with header switcher (Bold / Midnight / Verdigris)
|
||||
- **Light + dark themes** for each skin (system-aware, remembered, FOUC-free)
|
||||
- **Interactive IT cost calculator** — GPS tiers, support plans, M365, phones → monthly/annual totals
|
||||
- **Estimate handoff** — calculator builds statement for contact form
|
||||
- Published GPS pricing, services, FAQ
|
||||
- WCAG-AA contrast in all 6 modes; keyboard-accessible nav, FAQ, forms
|
||||
- **Grayscale photography** in Bold skin (color in Midnight/Verdigris)
|
||||
|
||||
## 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.
|
||||
## Deployment
|
||||
- **Production:** http://ww9.azcomputerguru.com
|
||||
- **Server:** IX Web Hosting (ix.azcomputerguru.com, 72.194.62.5)
|
||||
- **Path:** `/home/azcomputerguru/public_html/ww9/`
|
||||
- **DNS:** Cloudflare A record (grey cloud / DNS-only)
|
||||
- **HTTPS:** AutoSSL (Let's Encrypt, auto-provisioned)
|
||||
|
||||
## 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).
|
||||
Contact forms are demo only (not wired). Pricing illustrative of published GPS rates.
|
||||
|
||||
## History
|
||||
- 2026-06-16: Deployed to ww9.azcomputerguru.com; Paper/Ledger skin dropped, Bold set as default
|
||||
- 2026-06-14-15: Built multipage (4 skins), Bold skin added as dialed-back radical
|
||||
- 2026-06-14: Built single-page Sonoran Ledger via Grok+Gemini pipeline
|
||||
|
||||
Reference in New Issue
Block a user