Asuntha Fleming
Live
A refined single-page athlete & coach presence: match photography, coaching overview, and a direct booking path — engineered to feel sharp on mobile first, then scale upward without losing rhythm or clarity.
Project Gallery
Project Snapshot
Role
Web Architect & Engineer
Design system shaping, responsive architecture, performance discipline, deployment, and instrumentation.
Timeline
Rapid delivery
Structured build pass: layout, content, gallery rhythm, polish — then deployment + indexing.
Stack
HTML · CSS · JS
No framework. Clean, readable, hand-authored front-end with minimal JavaScript.
Deliverables
CavBot-ready build
Portfolio surfaces + CavBot integration: Control Room game, brain routing logic, and analytics instrumentation.
Scope
- Designed a mobile-first hero system: identity, story, and CTA hierarchy.
- Built a swipeable gallery presentation system (slider) to showcase the project with deck-level polish.
- Structured “About” into a calm two-column rhythm that stacks perfectly on small screens.
- Created a coaching “Ready to train?” module with skill bubbles and a centered booking CTA.
- Integrated CavBot instrumentation: Control Room game hooks, brain logic, and analytics tracking for runtime visibility.
- Integrated SEO + social preview metadata and schema for a clean, indexable public surface.
Deliverables
- Design system: dark navy base, tennis-ball accent logic, clay highlight for pressure + energy.
- UI surfaces: hero, action gallery system, about, training grid, contact strip.
- Responsive architecture: hard stacking rules under 900px — no sideways scrolling, stable layout.
- CavBot integration (custom): Control Room game, CavBot “brain” routing logic, and analytics instrumentation to monitor routes + runtime feel.
- SEO package: canonical, robots, OG/Twitter cards, sitemap link, schema.
- Deployment: static hosting-ready (Cloudflare Pages / GitHub workflows compatible).
Brand System
Palette
Navy anchors trust and calm. Tennis-ball yellow carries energy and visibility. Clay becomes the pressure accent.
Ivory preserves contrast and softness for long reading.
Typography
Sporty elegance. Clean rhythm.
Inter for body readability and system clarity. Sora for headings to keep the voice modern, geometric, and disciplined.
Highlights
Three wins: structure, UX, and brand — the things that make it feel “official.”
Performance discipline
Static build, minimal JS, clean sections, optimized stacking — designed to load fast and stay stable.
Mobile-first clarity
Hero + CTA hierarchy stays readable on small screens; sections stack naturally with zero horizontal drift.
CavBot integration
Control Room game + CavBot brain + analytics instrumentation — routed into the build so the system can be monitored like a product.
Next step
View the live deployment — then contact for your own build.
This case study is a presentation surface. The live site is the official destination.