Healthcare

Cardiology Specialist Website

A doctor's website that doesn't feel like a doctor's website. Bilingual (English + Arabic), buttery-smooth animations, and credibility you can feel before you read a single word.

2
Languages (EN/AR)
5
Core pages shipped
AAA
Lighthouse audited

Screenshots

Overview

When patients are choosing a heart specialist, design isn't decoration — it's a trust signal. This site treats every pixel as proof that the practice takes care seriously, from a calm, hand-tuned typographic hierarchy to motion that mirrors the rhythm of a steady pulse.

The Challenge

Cardiology patients (and the families behind them) make decisions in seconds. A cluttered, slow, or generic site reads as a careless practice. The doctor needed an English/Arabic presence that worked equally well for international referrals, surfaced credentials immediately, and didn't make anyone hunt for the contact button.

The Solution

I built a Vite + React single-page app with GSAP-driven animations, Lenis smooth scrolling, RTL-aware Arabic layouts, and a design system tuned for medical credibility. Lighthouse-audited, mobile-pixel-perfected, and fast enough to render before a worried family member finishes reading the URL.

Tech Stack

Frontend

ViteReactModern CSS

Quality

Lighthouse auditsMulti-viewport QA via Playwright

Internationalization

English + Arabic content

Key Features

Hero & Brand

Strong opening hero communicating the doctor's specialization.

Biography Page

Full credentials, education, and professional history.

Services Catalog

Detailed cardiology service offerings.

Articles Section

Thought leadership content for patient education.

Contact Flow

Clear call-to-action with multiple contact channels.

Mobile-Polished

Pixel-tuned mobile layouts (validated at 360px and 414px).

My Role

Lead Developer & Designer

Owned design recreation from reference, frontend implementation, accessibility passes, and Lighthouse optimization.

Results & Impact

  • Faithful match to design reference across all pages
  • Bilingual support enabling international patient outreach
  • Mobile experience polished across all key viewports