Project Snapshot
Client
Robin Walsh — AweStruck Intelligence
Project Type
Custom Web App + Performance Architecture
Platform
React 18 + TypeScript + Vite
My Role
Designer, Developer, Performance Engineer
Key Achievements
- Built a custom React + TypeScript site from scratch — no CMS, no template
- Lifted Lighthouse mobile from 26 → 100 through a five-part performance architecture
- Wrote a custom Vite plugin to inject the Hero as static HTML at build time for LCP wins
- Implemented viewport-based section lazy-loading via IntersectionObserver
- Built an interactive Biblically-centered SEL wheel (AMP wheel) with responsive hotspots and per-pillar audio playback
- Set up domain consolidation, structured data, GA4, and Netlify Forms contact integration
The Challenge
Robin had the first domain of her Biblically-centered SEL curriculum — Josiah's Journey — ready to share, but no website to host it. She needed a public-facing site that felt distinctive — not a template — and could carry interactive content like the audio-driven AMP wheel, video walkthroughs, and decision-tree cards.
The primary audience is homeschool moms browsing on laptops and desktops, but the animation-heavy homepage pushed performance to its limits. The first build came in at a Lighthouse mobile score of 26 — unacceptable for the launch target.
My Approach
I built the site as a custom React + TypeScript application on Vite, with Tailwind for styling and Framer Motion for scroll animations. No CMS, no page builder — every section is hand-built so the visual language stays on-brand and the bundle stays lean.
Cloudinary handles all images and audio with automatic format and quality. Delivery widths are tuned per breakpoint so we never ship a 1920px image to a 380px viewport.
When performance became the bottleneck, I rebuilt the loading architecture from the ground up — static Hero injection, viewport-based lazy loading, deferred analytics, and path-based bundle splitting. The result was a 3.8× Lighthouse score lift on mobile.
Project Timeline
Discovery
Mapped the SEL framework to a section-by-section narrative arc with Robin
Design system
Space-themed visual language with unified purple glassmorphism cards and teal accent glow
Build
Section-first React build with Tailwind and Framer Motion scroll animations
Performance overhaul
Lighthouse mobile 26 → 100 through static Hero injection, lazy loading, and deferred analytics
Launch + handoff
Netlify deploy, domain consolidation, GA4 wiring, handoff docs
Performance Improvements
Mobile Lighthouse
Before
After
Lighthouse mobile lifted from 26 to 100 through a five-part architecture: static Hero injection via a custom Vite plugin, viewport-based section lazy-loading, deferred analytics, path-based bundle splitting, and per-breakpoint Cloudinary delivery widths. LCP 2.7s, TBT 10ms, CLS 0 on emulated Moto G Power.
Engineering Highlights
Custom Vite plugin for static Hero injection
Wrote awestruck-inject-static-hero, a Vite plugin that reads hero.json at build time and renders the Hero section as plain HTML in index.html before React boots. The LCP image paints instantly. The React Hero component exists only as a Tailwind class manifest so the compiler keeps emitting required classes.
Viewport-based section lazy loading
Built LazyOnView, an IntersectionObserver wrapper that fetches each below-the-fold section chunk only when its placeholder is within 300px of the viewport. Replaces a naive single-Suspense pattern that triggered all 10 section chunks at initial render.
Deferred analytics
GA4 loads on first user interaction (scroll, click, keydown, touch) or after a 6s idle timer — whichever comes first. Keeps GTM out of the TBT window during initial paint.
Path-based bundle splitting
Reworked Vite manualChunks from array-form to path-based matching. The array form produced a 0.03 KB empty react-vendor chunk because react-router-dom transitively pulled React into the router chunk. Path matching guarantees React and ReactDOM land where they belong.
Features
Interactive AMP Wheel
Six clickable pillar hotspots plus a center node. Each pillar plays a voiceover audio clip via the HTML5 Audio API. Hotspot positions are responsive — a custom useBreakpoint hook re-maps coordinates per device. Replaces an earlier Web Speech API implementation that proved too buggy across browsers.
Josiah's Journey Decision Cards
Three decision-type cards (Wise / Unwise / Responsible) with per-card voiceover. Hover to play on desktop, click to toggle on mobile. Visual feedback via ring highlight and "Playing..." indicator.
Netlify Forms Contact Modal
Contact form lives inside a glassmorphism modal triggered from the CTA. Wired to Netlify Forms with a hidden form declaration in index.html, honeypot spam protection, and a thank-you success state.
Custom 404 Page
Space-themed "Lost in Space" page with animated twinkling stars, on-brand typography, and dual navigation (Back to Home + browser-back). Consistent with the main site's visual language.
Built Mobile-First
iamawestruck.com on a phone, section by section. Every layout adapts — breakpoint-tuned Cloudinary delivery widths, responsive hotspot positions on the AMP wheel, and a static Hero injection that paints the LCP image before React boots.
Hero
Josiah's Journey
Satellite Overview
CTA
Gallery
Tech Stack
What the Client Says
Why Hire Tisha in the Age of DIY Website Builders and AI?
In a world full of DIY website platforms, AI tools, and "vibe coding," it's fair to ask: why hire a professional like Tisha?
After working with her, my answer is simple: because Tisha brings something those tools cannot — vision, strategy, care, and true craftsmanship.
Yes, you can spend hours trying to build a website yourself, learning platforms, troubleshooting templates, managing domains, and piecing everything together along the way. You may eventually end up with a site that works.
But Tisha creates something far beyond "working."
She takes the time to understand your vision, your business, your message, and your brand. Then she transforms that understanding into a website that feels authentic, polished, professional, and completely aligned with who you are.
The best way I can describe the difference is this: building your own website can feel like assembling a NASCAR kit in your garage. It may run, and it may even look good. But working with Tisha is like having a Formula One team behind you — precise, strategic, high-performance, and built to help you win.
Every detail matters to her. Every design choice has purpose. Every section is created with care.
Tisha is not just a designer or developer. She is a creative partner who brings clarity, excellence, and heart to the entire process.
If you want a starter site, the DIY route is always there.
But if you want a top-shelf digital presence built with strategy, beauty, and professionalism, hire Tisha.
She is truly exceptional.
Client
- Robin Walsh — AweStruck Intelligence
Services
- Custom React + TypeScript Build
- UI / UX Design
- Performance Engineering
- SEO + Analytics
Stack
- React 18
- TypeScript
- Vite
- Tailwind CSS
- Framer Motion
- Cloudinary
Results
- iamawestruck.com
- Lighthouse mobile 26 → 100
- LCP 2.7s, TBT 10ms, CLS 0 on emulated Moto G Power
- SEO 100, Accessibility 100, Best Practices 100
- Live at iamawestruck.com with 301 from awestruckintelligence.com