Clinica MCU

Panoramica

Il sito di una clinica medica privata, scritto nella lingua del posto, con i suoi specialisti italiani in organico.

Stack

Astro 5 (output statico), TypeScript, Tailwind CSS 4, GSAP, Lenis, Canvas 2D, Cloudflare

Cosa ho realizzato

• 22 pagine statiche generate da file di dati tipizzati: servizi, reparti e profili dei medici vengono ciascuno da un file, e un flag di pubblicazione tiene nascosto un medico finché il suo profilo non è pronto.
• Dati strutturati per la ricerca: MedicalClinic con orari e posizione su ogni pagina, Physician sulle pagine dei medici, MedicalSpecialty e FAQ sui servizi, più breadcrumb, URL canonici, tag Open Graph e una sitemap.
• Uno sfondo animato nella hero con 45 linee d'onda disegnate su un elemento Canvas 2D, con il pixel ratio limitato, il disegno in pausa fuori schermo e un fotogramma fisso per chi riduce il movimento.
• Uno strato di animazioni: scroll fluido con Lenis guidato dal ticker di GSAP, sette moduli di animazione che rispettano tutti la riduzione del movimento, e view transition tra le pagine.
• Google Maps resta un segnaposto finché il visitatore non dà il consenso.

Scelte chiave

• Niente backend e niente CMS: i contenuti sono TypeScript tipizzato nel repository, e i contatti passano da link per telefono, WhatsApp ed email.
• Un budget di prestazioni: due pesi di font self-hosted, immagini WebP caricate in modo lazy e circa 248 KB di JavaScript e CSS per tutto il sito.
• Accessibilità di default: uno skip link, stili di focus visibili, canvas decorativi nascosti agli screen reader e riduzione del movimento rispettata ovunque.