Consultancy
Mythic Works
A hand-crafted consultancy website for Mythic Works LLC featuring an AI-powered Website Grader that audits any URL across six categories using Google PageSpeed and Claude - deployed on Vercel with zero framework dependencies.
- Static HTML/CSS/JS
- Vercel + Terraform DNS
- AI Website Grader
- Git-driven deploys
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 bespoke 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 free tool that audits any URL across six categories using Google PageSpeed and Claude
- 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: bespoke HTML/CSS/JS on Vercel, 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
- Vercel hosting: Static pages plus one Vercel Function, with routing and security headers in version-controlled config
- AI differentiation: The Website Grader gives visitors immediate value with nothing asked in return
- Git-driven deploys: Push to main deploys to production through Vercel's Git integration
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; Cloudflare Turnstile guards the endpoint against abuse
- PageSpeed audit: The grader function 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. If the Claude call fails, the grader falls back to a PageSpeed-only 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
- Vercel Function: Serverless function orchestrates the grading pipeline
- Cloudflare Turnstile: Guards the endpoint against abuse, alongside a per-IP rate limit
- Google PageSpeed API: Raw metrics and Lighthouse audit data
- Claude (Anthropic): Processes data into structured grades and recommendations
- Graceful degradation: Falls back to a PageSpeed-only report if the Claude call fails
Lead generation strategy
- Value first: Visitors receive actionable insights before any sales pitch
- Qualified leads: Anyone grading their site likely needs web services
- Expertise proof: The tool itself demonstrates AI and infrastructure skills
Infrastructure
The site deploys to Vercel from Git, with routing, caching and security headers in version-controlled config. Terraform manages DNS and the GitHub repository. The original Terraform-managed AWS stack was retired in August 2026.
Hosting and services
- Vercel: Static hosting with clean URLs and a real 404 for unmatched paths
- Vercel Function: Serverless compute for the Website Grader pipeline
- Security headers: HSTS, CSP, X-Frame-Options and Referrer-Policy set in vercel.json
- Route 53: DNS records managed in Terraform
- Terraform: Also manages the GitHub repository and branch protection
CI/CD pipeline
- Push to main: Vercel's Git integration deploys to production
- Tests: A GitHub Actions workflow runs the unit tests on pull requests and pushes, with no secrets and no deploy step
- Asset versioning: Content-hashed CSS and JS, so returning visitors never keep stale files
- No stored credentials: No long-lived cloud credential lives in the repository
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
- Static site with dark/light mode and fluid typography
- AI-powered Website Grader analyzing six categories per URL
- Turnstile-protected grading with a PageSpeed-only fallback
- Vercel hosting with routing, caching and security headers in code; DNS in Terraform
- Git-driven production deploys through Vercel, with tests in GitHub Actions
- Serverless Vercel Function 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.