Web
Design and build
Aparna Gold Buyers
A static multi-page site for a gold buyer in J.P. Nagar, Bengaluru, built with Astro 5 islands. Every lead action is a phone call, a WhatsApp message or an email.
Stack: Astro, React, three.js, React Three Fiber, Framer Motion, Lenis
Problem
A multi-page site for a gold buyer in J.P. Nagar, Bengaluru, where every lead action goes to a phone call, WhatsApp or email.
What I built
- Astro 5 with React islands hydrated on load, when visible or when idle; three.js through React Three Fiber, dynamically imported for one hero moment.
- A fixed wordmark with mix-blend-mode: difference, shown only between hero and footer, backed by a stacking-context audit.
- Brand red derived from sampling 110,664 logo pixels; the hue shifts with lightness from wine to crimson across the token ramp.
- A low-end device path that drops Lenis, particles, grain and the 3D coin.
- LocalBusiness, FAQPage, HowTo and BreadcrumbList JSON-LD, AI-crawler robots rules and a build-time llms.txt.
Proof
- Scored 100 in Lighthouse accessibility, SEO and best practices on every page
- Held layout shift at 0 and scrolling at a smooth 60 fps with the blend overlay (p95 frame 17 ms)
- Checked all 444 links: every one works
Stack
- Astro
- React
- three.js
- React Three Fiber
- Framer Motion
- Lenis
Share this case