Dental clinic — two-direction pitch website
A pitch: two complete redesigns of a clinic's site, immersive and professional, without losing search traffic.
- Astro 7
- Three.js
- GLSL
- Node.js
- cheerio
- sharp
- Netlify
- 219pages in the rebuild, two directions plus a selector
- 8,918links checked by the build audit, with 0 errors
- 71blog posts migrated from WordPress
One crawl, one build, two directions
One crawl of the old site and one content source feed two complete designs of the same clinic, immersive and professional, with every old URL kept.
Tap a block to see what it does.
- People
- Input
- Logic
- Data
- Output
- Infrastructure
People
Brand research
Brand bible from a crawl of 60 pages and their computed styles; the other agency's 17 promises transcribed and answered.
Hands to Astro build
Input
Site crawl
Sitemaps plus 406 URLs of the old WordPress site saved locally, five requests at a time.
- Node.js
Hands to Content prep, Migration map
Logic
Content prep
cheerio pulls clean text from pages and 71 blog posts, sharp makes WebP photos, and everything lands in one content file.
- cheerio
- sharp
Gets from Site crawlHands to Astro build
Data
Migration map
109 old URLs mapped to new pages, with service slugs identical to the live site.
- JSON
Gets from Site crawlHands to Astro build
Logic
Astro build
One catch-all route renders both directions from the same data: 109 pages each, plus a selector page.
- Astro 7
Gets from Brand research, Content prep, Migration mapHands to Immersive direction, Professional direction
Output
Immersive direction
A 3D tooth: camera on a spline in three scroll chapters, pearl clearcoat material, exploded crown, render paused off screen.
- Three.js
Gets from Astro buildHands to Build audit
Output
Professional direction
A calm direction: treatments filtered by the patient's need, a searchable magazine and one sheet per treatment.
Gets from Astro buildHands to Build audit
Logic
Build audit
Checks titles, one h1 per page, noindex, local links, assets, alt text and migration coverage; 6 node tests on top.
- node:test
- cheerio
Gets from Immersive direction, Professional directionHands to Netlify bundle
Infrastructure
Netlify bundle
The build copied and every file checked by sha256, a noindex header, old .php URLs rewritten with status 200.
- Netlify
Gets from Build audit
The problem
A private dental clinic had an informational WordPress site, and another agency was pitching a restyle built on a template. My pitch had to show a site that brings in patients, without losing search ranking, old URLs or the blog.
What I built
- Researched the brand from a crawl of 60 pages and their computed styles, and answered the other agency's 17 promises one by one.
- First version: a custom Node static generator, one content source feeding two directions of 51 pages each, with the logo rebuilt as WebGL particles on the immersive one.
- Second version in Astro: crawled the live site, migrated 16 services and all 71 blog posts, and built both directions from the same data, 109 pages each.
- Built the immersive direction around a 3D tooth: a scroll-driven camera in three chapters, a pearl material, an exploded view and a button that pauses motion.
- Kept the pitch honest: forms only prepare an email, nothing is booked or sent, and every page is noindex.
The hard part
Changing the whole stack without losing search traffic. Old .php addresses are served through 200 rewrites, service slugs match the live site and a migration map covers 109 URLs. A build audit then checked 8,918 links and 959 images with 0 errors.
Result
Two complete, navigable directions on the same brand, delivered as private static bundles ready for Netlify. This was a pitch / proposal: the clinic's current site is not my work.
My role
Solo, with agents. I did the research, set the direction for both variants and reviewed the work, sending the first immersive homepage of the rebuild back for a new direction; Claude Code wrote the first generator and OpenAI Codex the Astro rebuild.