Clinica MCU

Overview

The website of a private medical clinic, written in the local language, with its Italian specialists on staff.

Stack

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

What I built

• 22 static pages generated from typed data files: services, departments and doctor profiles each come from one file, and a publish flag keeps a doctor hidden until the profile is ready.
• Structured data for search: MedicalClinic with opening hours and location on every page, Physician on doctor pages, MedicalSpecialty and FAQ on services, plus breadcrumbs, canonical URLs, Open Graph tags and a sitemap.
• An animated hero background of 45 wave lines drawn on a Canvas 2D element, with the pixel ratio capped, drawing paused off screen and a still frame for reduced motion.
• A motion layer: Lenis smooth scrolling driven by the GSAP ticker, seven animation modules that all respect reduced motion, and view transitions between pages.
• Google Maps stays a placeholder until the visitor gives consent.

Key decisions

• No backend and no CMS: content is typed TypeScript in the repository, and contact goes through phone, WhatsApp and email links.
• A performance budget: two self-hosted font weights, lazy-loaded WebP images and about 248 KB of JavaScript and CSS for the whole site.
• Accessibility by default: a skip link, visible focus styles, decorative canvases hidden from screen readers and reduced motion honoured everywhere.