Overview
Mythic Works LLC is a technology consultancy specializing in product strategy, AI integration, and full-stack engineering. The website at mythicworks.net serves as both a consultancy storefront and a live demonstration of the craft — shipping a hand-coded static site with an AI-powered lead generation tool on production-grade infrastructure.
- 11 pages: Service offerings, case studies, about, contact, and the AI Website Grader tool
- AI-powered Website Grader: A standout lead-gen tool that audits any URL across six categories using Google PageSpeed and Claude
- Lead generation: Grader results are emailed to prospects, capturing contact information in exchange for actionable insights
- Zero framework dependencies: Pure HTML, CSS, and vanilla JavaScript — no build step, no runtime
Problem
Most consultancy sites are template-driven, indistinguishable from competitors, and offer nothing beyond “contact us.” They fail to demonstrate technical capability or generate qualified leads.
Template limitations
- Generic WordPress/Squarespace themes
- No differentiation from competitors
- Heavy frameworks for simple content
No lead qualification
- Contact forms with no value exchange
- No way to demonstrate expertise upfront
- Cold outreach yields low conversion
Manual deployment
- FTP uploads or manual S3 syncs
- No infrastructure versioning
- SSL and CDN configured by hand
Solution
Build a bespoke static site that doubles as a technical showcase: hand-coded HTML/CSS/JS on Terraform-managed AWS, differentiated by an AI-powered tool that turns visitors into qualified leads.
The approach
- Pure static: No framework runtime — every page is hand-authored HTML with vanilla CSS and JS
- Terraform-managed AWS: S3 + CloudFront + ACM + Route 53, all defined in code and applied via CI
- AI differentiation: The Website Grader gives visitors immediate value and captures leads organically
- GitHub Actions CI/CD: Push to main triggers lint, deploy, and CloudFront invalidation
Website Grader
The standout feature: an AI-powered tool that grades any website across six categories, delivering actionable insights in seconds. It serves as both a value-first lead generation engine and a live demonstration of AI integration skills.
Multi-step pipeline
- URL submission: Visitor enters a URL and their email address
- PageSpeed audit: Lambda calls Google PageSpeed Insights API to gather performance, accessibility, SEO, and best-practice metrics
- AI analysis: Claude processes the raw PageSpeed data alongside page content to generate grades, findings, and recommendations across six categories
- Report delivery: Results are displayed on-screen and emailed as a formatted report
Six grading categories
| Category | What it measures |
|---|---|
| Performance | Core Web Vitals, load time, render-blocking resources, asset optimization |
| SEO | Meta tags, heading structure, indexability, structured data, mobile-friendliness |
| Accessibility | WCAG compliance signals, color contrast, ARIA usage, keyboard navigation |
| Best practices | HTTPS, console errors, deprecated APIs, image aspect ratios |
| Content & messaging | Clarity of value proposition, CTA effectiveness, copy quality, trust signals |
| Design & UX | Visual hierarchy, consistency, responsive layout, navigation clarity |
Technical implementation
- AWS Lambda: Serverless function orchestrates the grading pipeline
- API Gateway: HTTPS endpoint with rate limiting and CORS
- Google PageSpeed API: Raw metrics and Lighthouse audit data
- Claude (Anthropic): Processes data into structured grades and recommendations
- SES: Formatted report delivery to the visitor's email
Lead generation strategy
- Value first: Visitors receive actionable insights before any sales pitch
- Email capture: Report delivery naturally requires an email address
- Qualified leads: Anyone grading their site likely needs web services
- Expertise proof: The tool itself demonstrates AI and infrastructure skills
Infrastructure
Every resource is defined in Terraform and deployed via GitHub Actions — no manual console clicks, no drift, full reproducibility.
AWS services
- S3: Static site hosting with versioning enabled
- CloudFront: Global CDN with custom domain and edge caching
- ACM: Managed TLS certificate with auto-renewal
- Route 53: DNS management with alias records
- Lambda: Serverless compute for the Website Grader pipeline
- API Gateway: HTTPS endpoint with throttling and CORS
- SES: Transactional email for grader reports
CI/CD pipeline
- Push to main: GitHub Actions workflow triggers on merge
- Terraform plan/apply: Infrastructure changes are reviewed and applied
- S3 sync: Static assets are deployed to the hosting bucket
- CloudFront invalidation: Cache is purged to serve fresh content globally
Design system
A minimal, performance-first design system built without preprocessors or frameworks — just modern CSS and semantic HTML.
Design principles
- Dark/light mode: CSS custom properties with
prefers-color-schememedia query - System fonts: Native font stack for zero-latency text rendering
- Fluid typography:
clamp()for responsive sizing without breakpoints - Semantic HTML: Correct use of landmarks, headings, and ARIA where needed
- CSS-only interactions: Hover states, transitions, and scroll-driven animations without JS
Outcomes
Delivered capabilities
- Hand-coded static site with dark/light mode and fluid typography
- AI-powered Website Grader analyzing six categories per URL
- Automated lead capture with formatted email reports
- Terraform-managed AWS infrastructure from DNS to CDN
- GitHub Actions CI/CD with automated deployment and cache invalidation
- Serverless Lambda pipeline integrating PageSpeed and Claude
- Responsive design with CSS-only interactions and animations
- Semantic HTML with accessibility-first markup patterns
Need a site that works as hard as you do?
Mythic Works demonstrates infrastructure-as-code, AI integration, and performance-first design in a real production deployment. If you need someone who can ship the full stack — from Terraform to the pixel — let's talk.