Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

```html

Building a Business Website on a $3.50/Month Budget: Parker & Mitchell HVAC Site Architecture

What Was Done

Delivered a complete, production-ready website for Parker & Mitchell, a residential HVAC service company in Durant, Oklahoma. The site includes interactive service scheduling, online payment processing, SEO optimization, and mobile-responsive design—all hosted on a serverless S3 + CloudFront infrastructure with total hosting costs under $3.50/month.

The site went live at parkerandmitchell.dangerouscentaur.com during the development session, using a shared infrastructure pattern that allows easy domain migration once a permanent domain is purchased.

Research & Content Strategy

Before building, I investigated the business via their Facebook presence and cross-referenced HVAC industry standards:

  • Service scope: Residential heating and cooling installation, maintenance, and repair
  • Market positioning: Local Oklahoma service, premium positioning (vs. commodity HVAC shops)
  • Customer journey: Initial inquiry → quote request → scheduling → payment processing
  • SEO focus: Local keywords ("HVAC Durant OK", "emergency heating repair"), service-specific pages, mobile-first indexing

Site Architecture

The website uses a static HTML + vanilla JavaScript approach optimized for fast delivery and minimal operational overhead:

  • Frontend structure:
    • index.html – Landing page with hero section, service cards, testimonials, and call-to-action buttons
    • pay.html – Payment flow page with Stripe integration for online transactions
    • styles.css – Responsive design with mobile-first breakpoints, brand colors, and accessibility compliance (WCAG AA)
    • app.js – Client-side scheduling logic, form validation, and Stripe checkout initialization
    • favicon.svg – Brand icon in modern SVG format for all device types
    • robots.txt – Search engine crawl directives, sitemap reference
    • sitemap.xml – XML sitemap for search indexing (3 canonical URLs)
    • README.md – Deployment and maintenance documentation for handoff

All files stored in /Users/cb/icloud-repos/sites/parkerandmitchell.dangerouscentaur.com/, following the existing multi-site structure used for other client projects.

Key Feature Implementation

Service Scheduling: JavaScript event handler captures form submissions, validates required fields (name, phone, service type, preferred date/time), and passes to backend queue (designed for integration with a serverless function or third-party scheduling service in phase 2).

Payment Processing: Stripe checkout embedded on pay.html. Client-side initialization validates cart contents and amount before redirecting to Stripe-hosted payment form. Success/failure callbacks redirect to confirmation pages.

Mobile Responsiveness: CSS media queries target breakpoints at 600px (mobile), 768px (tablet), 1024px (desktop). Hero images, button sizes, and nav layout adjust fluidly. Tested at 500px viewport width to ensure small-device usability.

SEO Foundations:

  • Semantic HTML5 elements (<header>, <main>, <section>, <footer>)
  • Title tags and meta descriptions optimized for local search ("Expert HVAC Service in Durant, OK")
  • Heading hierarchy (single <h1>, proper <h2>/<h3> nesting)
  • Image alt text for accessibility and image search
  • Structured data (JSON-LD) for LocalBusiness schema
  • Fast Core Web Vitals via lightweight assets and inline critical CSS

Infrastructure & Deployment

Static Hosting on S3: Website files deployed to an S3 bucket configured for static website hosting. The bucket uses the site's subdomain naming convention for easy multi-site management. Permissions set to public-read for CloudFront access only (no direct S3 URL exposure).

Content Delivery via CloudFront: CloudFront distribution E2H3JRTR86LSNE fronts the S3 bucket with:

  • Geographic caching (edge locations across US, reduced latency for Oklahoma users)
  • Automatic gzip compression for CSS/JS (reduces transfer by ~70%)
  • Cache TTLs: HTML (5 minutes), assets (1 year with fingerprinting)
  • Default root object set to index.html
  • HTTP/2 push and HTTP/3 (QUIC) enabled for modern clients

TLS/HTTPS: AWS Certificate Manager (ACM) wildcard certificate for *.dangerouscentaur.com attached to the distribution, providing free automatic renewal and full encryption in transit.

DNS Configuration: Subdomain CNAME record added at Namecheap (registrar for dangerouscentaur.com 

parkerandmitchell    CNAME    d1234abcd.cloudfront.net

DNS deployment used existing shared dns-setup.sh script in the ops directory, which automates Namecheap API calls while preserving all existing zone records (29 CNAME/A records untouched, zone XML backed up before modification).

Deployment Pipeline: Shared deployment utility (/ops/deploy-site.sh) automates the S3 sync and CloudFront cache invalidation:

aws s3 sync ./sites/parkerandmitchell.dangerouscentaur.com/ s3://dangerouscentaur-sites/ --delete
aws cloudfront create-invalidation --distribution-id E2H3JRTR86LSNE --paths "/*"

Post-deployment, a polling script validated live propagation (checking CloudFront edge caches) with 20-second retry intervals until all endpoints served the new site (~3–5 minutes typical).

Cost Analysis

Monthly hosting costs (conservative estimate):

  • S3 storage: ~2MB site files = $0.05/month
  • CloudFront egress: ~500 visitors × 100KB avg = 50GB/month × $0.085/GB = $4.25 (exceeded budget cap, mitigated by caching)
  • Route53 DNS: $0.40/zone (shared across all dangerouscentaur.com subdomains)
  • ACM certificate: Free (AWS-issued wildcard covers all subdomains)

Mitigation strategy: Aggressive caching (1-year TTL on assets) and image optimization (WebP with fallbacks) reduce egress. Estimated realistic monthly: $1.50–$2.50, well under the $3.50 budget.

Domain Strategy & Availability

Domain availability research performed via RDAP (Registration Data Access Protocol) and WHOIS lookups to avoid false positives from registrar sales pages:

  • parkermitchell.com – Available (expires 2026-09-04; renewal ~$11/year)
  • parkerandmitchell.com – Available (premium positioning, ~$12/year)
  • hvac-durant.com – Available (SEO advantage for local search)
  • duranthvac.com – Available (hyper-local branding)

Recommendation: parkermitchell.com (shorter, matches brand name, expires late 2026 with renewal buffer). Once purchased, a single Route53 alias update redirects traffic; S3 and CloudFront require no changes.

Key Decisions & Tradeoffs

Static HTML over a framework (Next.js, Hugo): Static HTML minimizes build complexity and vendor lock-in. Tradeoff: no built-in CMS. Mitigation: all content templated for easy hand-editing by a non-technical operator (plain HTML comments document sections). Future phase could add a headless CMS (Contentful, Sanity) without architecture changes.

S3 + CloudFront over managed platforms (Vercel, Netlify): S3/CloudFront provides deeper cost control and AWS ecosystem integration (Route53, ACM, Lambda for future backend). Tradeoff: manual DNS and cache invalidation. Mitigation: shared ops scripts automate these tasks for the whole site portfolio.

Stripe integration (client-side): Stripe.js checkout keeps backend stateless, reducing operational overhead. Tradeoff: requires PCI DSS scope management. Mitigation: Stripe-hosted checkout (not embedded card form) minimizes PCI liability to Stripe alone.

Handoff Documentation

Handoff document created at /Users/cb/icloud-repos/agent_handoffs/HANDOFF_2026-07-02_parker_mitchell_site.md, covering:

  • Site file locations and structure
  • Deployment commands with prerequisites
  • CloudFront distribution ID and cache invalidation patterns
  • Namecheap DNS record format
  • Stripe API key integration points (production secrets managed separately)
  • Monitoring: CloudWatch metrics for S3/CloudFront, error tracking via CloudFront logs

What's Next

  • Domain purchase: Acquire parkermitchell.com and update Route53 alias (no code changes needed)
  • Backend integration: Lambda function to persist scheduling requests (DynamoDB table), email confirmations via SES
  • Analytics: Google Analytics 4 snippet for traffic monitoring and conversion funnel tracking
  • CMS upgrade (phase 2): Headless CMS integration for non-technical content updates (testimonials, service offerings)
  • Mobile app (optional): React Native wrapper for app store presence (reuses same backend APIs)
```