Valestra Nursing and Rehabilitation
Case Study
I audited the old site at 42 out of 100, rebuilt it in Astro in English and Spanish, and re-scored it at 83 six days later.
The six answers
Problem · What was wrong with the old site?
It scored 42 out of 100.
79 of its 101 sitemap URLs were junk, nine menu pages were empty, and the mobile home page took 9.8 seconds to load its main image.
Read the full brief
A client project for a post-acute nursing and rehabilitation facility in Miami, shown here as Valestra so the client stays private. On July 2, 2026 I crawled and archived the old site (87 pages, 171 assets) and audited it with Claude Code's seo-audit skill, Lighthouse and Playwright. It scored 42 out of 100: 79 of its 101 sitemap URLs were junk, nine menu pages were empty, and the mobile home page took 9.8 seconds to load its main image.
I rebuilt it in Astro with Claude Code the same day, from the archive's own copy and photographs, and kept improving it for six days: privacy controls, Spanish for its Miami families, structured data and security headers. Re-scored on the same seven-category rubric on July 8, it reached 83. The redesign blueprint sets out the work in twelve parts: what I did, what I used and why.
Approach · What did you rebuild, and how?
A static Astro site, in four directions.
I rebuilt it in Astro with Claude Code the same day, from the archive's own copy and photographs, and kept improving it for six days: privacy controls, Spanish for its Miami families, structured data and security headers.
Search · Can families and search engines find it?
In two languages, with every search score up.
A Miami business, so every direction is in English and Spanish. A unique title and one H1 on every page. Structured data score 35 → 90. AI search readiness score 35 → 85.
Usability · Is it fast, accessible and private?
Faster, with accessibility basics and no trackers before consent.
Mobile home page 39 → 93 in Lighthouse. 198 of 198 images with alt text. 11 outside host families before consent → 0.
Results · How do you know it worked?
Re-scored 42 → 83 on the same rubric.
Re-scored on the same seven-category rubric on July 8, it reached 83.
Compare · Can I see it?
Six pages, side by side.
The before is each page of the old site as its crawl archive recorded it. The after is the redesigned page, captured from the live demo.
Every result
The Red direction's home page, captured from the live demo on October 15, 2026.
Website redesign case study
The problem and the scope
SEO audit, website redesign and AI-assisted build · Client project, shown as Valestra · 2026
A client project for a post-acute nursing and rehabilitation facility in Miami, shown here as Valestra so the client stays private. On July 2, 2026 I crawled and archived the old site (87 pages, 171 assets) and audited it with Claude Code's seo-audit skill, Lighthouse and Playwright. It scored 42 out of 100: 79 of its 101 sitemap URLs were junk, nine menu pages were empty, and the mobile home page took 9.8 seconds to load its main image.
I rebuilt it in Astro with Claude Code the same day, from the archive's own copy and photographs, and kept improving it for six days: privacy controls, Spanish for its Miami families, structured data and security headers. Re-scored on the same seven-category rubric on July 8, it reached 83. The redesign blueprint sets out the work in twelve parts: what I did, what I used and why.
Alongside the site I wrote the audit report, a visual SEO briefing, an action plan, a privacy report and the proposal. Before consent, the old site contacted 11 outside host families; on the rebuild the pages tested made no third-party requests on load, with self-hosted fonts, a static map and a consent banner.
- Built with
- Astro, TypeScript, CSS, HTML, Vercel
- Dated features
- 37
- Pages compared
- 6
- Period
- July 2 to 8, 2026
Valestra is a showcase identity that keeps the client private: the client's name, logo, copy, photographs and contact details are replaced, while the dates, tools, counts and scores are the original project's own.
87
pages archived
This answers
Nothing the business had written was lost: the rebuild took its copy and photos from the archive, and the archive set a fixed starting point to measure against.
July 2 · July 6 · July 5
Part 1 of 12
Research and planning
87 pages archived, audited at 42 out of 100
4 dated features
- What I did
- Crawled the old site and archived every public page as HTML, text and metadata, with its images, fonts and scripts: 87 pages and 171 assets, with no errors.
- What I used
- Claude Code, site-clone-redesign skill, Codex
- Why
- Nothing the business had written was lost: the rebuild took its copy and photos from the archive, and the archive set a fixed starting point to measure against.
- What I did
- Ran a full SEO audit: six specialist reviews (technical, content, schema, sitemap, performance and visual) weighted into one score, with every finding ranked Critical, High, Medium or Low. The old site scored 42 out of 100.
- What I used
- Claude Code seo-audit skill, Lighthouse 12.8, Playwright, Codex
- Why
- It turned "the site feels old" into a ranked list of work, set the scope of the rebuild and gave a baseline to prove the result.
- What I did
- Built a repeatable tracker test: a clean browser, no clicks, and a record of which ad and video requests fire before a visitor consents. It ran on the old site and on the new one.
- What I used
- Chrome DevTools, Playwright, Claude Code, Codex
- Why
- A plain pass or fail that any developer can rerun, with dated before and after results.
- What I did
- Wrote the proposal with the build's details measured page by page, and set it as a branded PDF.
- What I used
- Python, headless Chrome, Claude Code, Codex
- Why
- The client sees exactly what was built, counted on the build itself, and the PDF is generated the same way every time.
4
directions
This answers
There is far less to keep secure, the pages are much faster, and hosting is simple and low-cost.
July 2 · July 2 to 6
Part 2 of 12
Platform and build
WordPress replaced by a static Astro site
3 dated features
- What I did
- Replaced the WordPress site with a static Astro site on Vercel: no CMS, no database and no plugins to patch.
- What I used
- Astro 5, Vercel, Claude Code, Codex
- Why
- There is far less to keep secure, the pages are much faster, and hosting is simple and low-cost.
- What I did
- Built four color directions, Red, Gold, Gilt and Crimson, on one shared content structure, each with its own design tokens.
- What I used
- Astro layouts, CSS design tokens, Claude Code, Codex
- Why
- The client chooses a look without touching content or SEO, and one change reaches every version.
- What I did
- Set up a script that builds each direction, gives it its own sitemap and deploys it to its own Vercel address.
- What I used
- Bash, Vercel CLI, Claude Code, Codex
- Why
- Every change ships to every version the same way, with no manual step to forget.
9
real pages
This answers
Search engines spend their time on real pages, and visitors never land on a placeholder.
July 2 · July 8 · July 6 and 7
Part 3 of 12
Pages and content
Nine real pages and a family FAQ
4 dated features
- What I did
- Kept only the real pages: 79 of the 101 addresses in the old sitemap were attachment pages, theme demos and archives, and the new site leaves them behind.
- What I used
- The audit's crawl, Claude Code, Codex
- Why
- Search engines spend their time on real pages, and visitors never land on a placeholder.
- What I did
- Built nine real pages from the archive's own copy, with its character encoding cleaned: Home, Our Facility, Our Team, Services, List of Services, Rehabilitation, Respiratory, Careers and Contact.
- What I used
- Astro, the archive, Claude Code, Codex
- Why
- Families find care, see the facility and call or book a tour in fewer clicks, and every word comes from the business itself.
- What I did
- Wrote a seven-question family FAQ in English and Spanish, on insurance, care, visiting and tours. The Medicare and Medicaid answer was checked against the federal CMS provider record.
- What I used
- CMS Care Compare data, Astro, Claude Code, Codex
- Why
- It answers what families ask before they call, marked up so search engines and AI tools can read it.
- What I did
- Added visitor and legal pages to every footer, in both languages: Visitor Policy, Emergency Rules, Privacy, Cookie Policy and Do Not Sell or Share.
- What I used
- Astro, Claude Code, Codex
- Why
- The information and disclosures families and regulators expect from a healthcare provider.
Home
The old home page autoplayed a YouTube video in its hero on every visit, which set cookies before visitors agreed. The redesign has no video and makes no third-party requests on load.
Our Facility
General Services
The old copy showed broken characters where apostrophes belonged; the rebuild repaired the encoding.
Rehabilitation
Respiratory
Contact
The old contact page embedded Google Maps; the redesign shows its own map and opens Google Maps only on a click.
The before is each page of the old site as its crawl archive recorded it, rendered from its own HTML, CSS and fonts with the client's identity replaced: the layout, type and colors are the original's, faults included. The after is the redesigned page, captured from the live demo.
#E31A2E · #C2A303 · #CC3A2C · #D6C495 · #B32017
This answers
A distinctive, premium look that belongs to the brand instead of a stock theme.
July 6 to 8 · July 2
Part 4 of 12
Visual design and experience
Royal red and gold, with an image hero
4 dated features
- What I did
- Took the brand system from the logo: royal red with gold details, Fondamento headings and gold frames in the Crimson direction, and the full logo in the header, the mobile menu and the footer.
- What I used
- CSS design tokens, Fontsource, Claude Code, Codex
- Why
- A distinctive, premium look that belongs to the brand instead of a stock theme.
- What I did
- Replaced the autoplay YouTube hero with photo slides: a headline, tour and call buttons, slide controls, and a pause when the pointer rests on it.
- What I used
- CSS, JavaScript, Claude Code, Codex
- Why
- It loads far faster, sends no video or ad requests, and puts the two main actions first.
- What I did
- Added motion with care: crossfading slides, scroll reveals, a sticky header and a slide-in mobile drawer, all switched off for visitors who ask for reduced motion.
- What I used
- CSS transitions, prefers-reduced-motion, Claude Code, Codex
- Why
- The site feels alive without hiding content or bothering motion-sensitive visitors.
- What I did
- Kept the phone number and the language switch in a sticky bar, one tap away on every page, in three zones that rearrange on a phone.
- What I used
- CSS, Claude Code, Codex
- Why
- Calling and switching language are the two actions families use most, and most of them browse on a phone.
EN · ES
This answers
The facility is a Miami business, and the site reaches the many Spanish-speaking families it serves.
July 6 and 7
Part 5 of 12
Language (English and Spanish)
Every direction in English and Spanish
2 dated features
- What I did
- Built the full Spanish site in all four directions: every page and menu, the visitor and legal pages, the cookie banner and a language switch.
- What I used
- Astro i18n routing, translated content files, Claude Code, Codex
- Why
- The facility is a Miami business, and the site reaches the many Spanish-speaking families it serves.
- What I did
- Linked every English page to its Spanish twin with hreflang tags, x-default included.
- What I used
- hreflang link tags, Claude Code, Codex
- Why
- Search engines can match each family with the page in its own language.
28 / 28
pages
This answers
Clearer search snippets, more clicks, and clean previews when a page is shared.
July 5 · July 8 · July 2
Part 6 of 12
Search (SEO)
A unique title and one H1 on every page
3 dated features
- What I did
- Gave every page its own title, description and canonical address, with Open Graph and Twitter tags.
- What I used
- Astro layouts, Claude Code, Codex
- Why
- Clearer search snippets, more clicks, and clean previews when a page is shared.
- What I did
- Gave every page exactly one H1, 28 of 28 pages in each direction: the hero's other headlines became paragraphs styled the same way, so visitors see no change.
- What I used
- Astro, a computed-style check in a real browser, Claude Code, Codex
- Why
- One clear topic per page tells search engines what each page is about.
- What I did
- Generated the sitemap and robots.txt for every direction.
- What I used
- @astrojs/sitemap, Claude Code, Codex
- Why
- Search engines find and crawl every real page.
Both scores use the audit's seven-category SEO rubric, built from a crawl of the site and Lighthouse lab runs. It is not a Google score. The re-score measured the rebuild on the same rubric, and each category counts toward the total by its weight.
| Category | Weight | Before | After | Change | Chart |
|---|---|---|---|---|---|
| Technical SEO | 25% | 60 | 90 | +30 | |
| Content | 25% | 24 | 65 | +41 | |
| On-page SEO | 20% | 45 | 88 | +43 | |
| Structured data | 10% | 35 | 90 | +55 | |
| Performance | 10% | 39 | 93 | +54 | |
| Images | 5% | 55 | 90 | +35 | |
| AI search | 5% | 35 | 85 | +50 | |
| Total | 100% | 42 | 83 | +41 |
BeforeAfter
Recorded in part 1, Research and planning and part 12, Testing and proof.
Before: 39After: 93Home page performance, mobileRecorded in part 9, SpeedBefore: 9.8 sAfter: 2.7 sHome page main image (Largest Contentful Paint), mobileRecorded in part 9, Speed- 97Services page performance, mobileRecorded in part 9, Speed
- 98Contact page performance, mobileRecorded in part 9, Speed
- 0Home page layout shift (Cumulative Layout Shift)Recorded in part 9, Speed
Before: 11After: 0Outside hosts contacted on load, before consentRecorded in part 11, Privacy and security- 28 of 28Pages with one H1, in each of the four directionsRecorded in part 6, Search (SEO)
- 198 of 198Images with alt text and a width and heightRecorded in part 10, Accessibility
35 → 90
BeforeAfter
This answers
Search engines read the business's facts without guessing, which supports the map pack, breadcrumbs and FAQ results.
July 5 to 8 · July 8
Part 7 of 12
Structured data
Structured data score 35 → 90
2 dated features
- What I did
- Produced one JSON-LD graph for the whole site: the business as a MedicalBusiness with its address, map coordinates, logo, founding date, Facebook page and federal provider identifier; a WebSite; breadcrumbs on every page; the care team as people; and FAQ markup that matches the visible FAQ.
- What I used
- JSON-LD (schema.org), TypeScript, Claude Code, Codex
- Why
- Search engines read the business's facts without guessing, which supports the map pack, breadcrumbs and FAQ results.
- What I did
- Checked that the graph parses on every page of every direction, 28 pages in each of four.
- What I used
- Python, Claude Code, Codex
- Why
- Structured data only counts when it is valid everywhere.
35 → 85
BeforeAfter
This answers
AI assistants can read an accurate summary of the business.
July 8
Part 8 of 12
AI search
AI search score 35 → 85
2 dated features
- What I did
- Published llms.txt, a plain summary of the business for AI assistants, and kept GPTBot, ClaudeBot and PerplexityBot allowed in robots.txt.
- What I used
- llms.txt, robots.txt, Claude Code, Codex
- Why
- AI assistants can read an accurate summary of the business.
- What I did
- Wrote the FAQ as short question-and-answer passages, marked up as an FAQ page.
- What I used
- FAQPage markup, Claude Code, Codex
- Why
- Short, complete answers an assistant can read.
39 → 93
BeforeAfter
This answers
The mobile home page went from 39 to 93 in Lighthouse and its main image from 9.8 to 2.7 seconds; Services reached 97 and Contact 98. Faster pages keep visitors from waiting.
July 2 to 8 · July 2 · July 6
Part 9 of 12
Speed
Mobile home page 39 → 93 in Lighthouse
3 dated features
- What I did
- Left the heavy code behind: 32 render-blocking stylesheets, two slider frameworks and the YouTube embed, with the hero image loading at high priority.
- What I used
- Astro static build, fetchpriority, Claude Code, Codex
- Why
- The mobile home page went from 39 to 93 in Lighthouse and its main image from 9.8 to 2.7 seconds; Services reached 97 and Contact 98. Faster pages keep visitors from waiting.
- What I did
- Ran every image through one pipeline: WebP, responsive sizes, width and height on every image, its native ratio kept, lazy loading below the fold.
- What I used
- Astro image pipeline, Claude Code, Codex
- Why
- Faster loading and no layout shift: the home page's Cumulative Layout Shift is 0.
- What I did
- Self-hosted the fonts, with only the weights the design uses.
- What I used
- Fontsource, Claude Code, Codex
- Why
- Text appears sooner, and the page makes no request to Google.
I designed four directions on one content structure: Red, Gold, Gilt and Crimson. Each is its own layout and set of design tokens over the same pages, content and search work, so the business could choose a look without changing anything else.
For this showcase I directed a new identity, Valestra: a botanical symbol of rising leaves with a serif wordmark, in full, light and icon versions, with Spanish lockups for a Miami business. The live demo carries it in both languages.
198 / 198
This answers
Easier for older visitors and for keyboard and screen-reader users.
July 2 to 5 · July 5 to 8 · July 6
Part 10 of 12
Accessibility
198 of 198 images with alt text
3 dated features
- What I did
- Built to the WCAG 2.1 AA basics: a skip link, a main landmark, labeled form fields, visible keyboard focus, pinch zoom allowed and contrast set for older readers.
- What I used
- Semantic HTML, CSS, Claude Code, Codex
- Why
- Easier for older visitors and for keyboard and screen-reader users.
- What I did
- Gave all 198 images alt text, descriptive on the photographs and empty on the decorative ornaments, and a width and height on every one.
- What I used
- An HTML sweep in Python, Claude Code, Codex
- Why
- Screen readers describe what matters and skip what is only decoration.
- What I did
- Made the closed mobile drawer inert and gave the map image a label.
- What I used
- The inert attribute, ARIA labels, Claude Code, Codex
- Why
- Keyboard focus never lands in a hidden menu, and every element says what it is.
11 → 0
BeforeAfter
This answers
No tracking runs before the visitor agrees.
July 6 and 7 · July 6 · July 8
Part 11 of 12
Privacy and security
11 outside host families before consent → 0
4 dated features
- What I did
- Added cookie consent that really blocks tracking: necessary cookies only by default; Accept, Reject and Manage; a preferences link in every footer; the banner in Spanish too.
- What I used
- Vanilla CookieConsent 3, Claude Code, Codex
- Why
- No tracking runs before the visitor agrees.
- What I did
- Replaced the embedded Google Map with a self-hosted map image that opens Google Maps only when clicked.
- What I used
- SVG, Claude Code, Codex
- Why
- The pages make no request to Google on load.
- What I did
- Tested it end to end: rejecting leaves one necessary cookie, the choice survives a reload, and the pages tested made no third-party requests on load. The old site contacted 11 outside host families before any consent.
- What I used
- Playwright, Claude Code, Codex
- Why
- Proof that the tracker problem found in research is gone.
- What I did
- Sent six security headers with every page: HSTS, a Content Security Policy, anti-framing, no MIME sniffing, a referrer policy and a permissions policy.
- What I used
- vercel.json headers, Claude Code, Codex
- Why
- It protects visitors from clickjacking and injected content, and it counts toward technical SEO.
28 × 4
pages
This answers
Problems are caught before the client sees them.
July 8 · July 2 to 8
Part 12 of 12
Testing and proof
Re-scored 42 → 83 on the same rubric
3 dated features
- What I did
- Swept every built page for one H1, valid JSON-LD, unique titles, alt text and image sizes: 28 pages in each of the four directions.
- What I used
- Python HTML parser, Claude Code, Codex
- Why
- Problems are caught before the client sees them.
- What I did
- Took desktop and mobile screenshots, read the browser console and checked the status codes and headers of all four live sites.
- What I used
- Playwright, curl, Claude Code, Codex
- Why
- Every claim about the build has evidence behind it.
- What I did
- Re-scored the new site on the same seven-category rubric, with Lighthouse measured on the live builds: 42 to 83 in six days.
- What I used
- The audit rubric, Lighthouse, Claude Code, Codex
- Why
- An apples-to-apples result the client and the portfolio can stand behind.
Valestra is a showcase identity that keeps the client private: the client's name, logo, copy, photographs and contact details are replaced, while the dates, tools, counts and scores are the original project's own.
Where the figures come from
- Scores use the audit's seven-category SEO rubric. It is not a Google score, and it measures the site itself, not search rankings, traffic or inquiries.
- The live demos carry the Valestra showcase identity, with replacement copy and photographs. The scores and measurements above come from the original client build, re-scored on July 8, 2026, not from the demos.
- The before captures rebuild the archived pages from their own HTML, CSS and fonts with the client's identity replaced, so their copy and photographs are not the original's; their layout, type and colors are.
- The audit reports, proposals and other client records are private, so none is published or offered for download here.
- Speeds are Lighthouse lab runs from the original project, measured on the live builds, not field data from visitors.