EN

landing page with Astro 5, TypeScript and zero frameworks CSS

FrontEnd Design

#Astro #TypeScript #css #design #performance #a11y #cloudflare #javascript #xarop

What problem it solved

I needed a landing page for xarop.com: fast, accessible, multilingual and easy to maintain. The main website (web.xarop.com) is a blog/portfolio generated with Node.js + Markdown, but it's not a landing page. I needed something with more visual control and first-class performance.

Why Astro

Astro 5 compiles to static HTML by default — zero JavaScript on the client if you don't need it. It allows mixing .astro components, TypeScript and CSS without any runtime overhead. Routing is file-based, which makes internationalization (CA / ES / EN) straightforward.

The result: ~10 KB of JavaScript, all of it optional and progressive (IntersectionObserver for scroll reveal, theme toggle, flavor switching).

Stack

  • Astro 5 — build and routing
  • TypeScript — all component logic and configuration
  • Vanilla CSS — design tokens, color palettes (flavors), dark/light mode, no framework
  • Asap — self-hosted typography (OFL), no external calls
  • Google Analytics 4 — integrated via environment variable, optional
  • Cloudflare Pages / Vercel / Netlify — static deployment, configuration per ENV

Features

  • 7 flavor palettes persisted to localStorage
  • Dark/light mode: automatic via prefers-color-scheme + manual toggle
  • Multilingual: Catalan (default), Spanish, English via Astro routing
  • Sticky navigation with mobile hamburger, language and flavor switchers
  • Scroll reveal with no external dependencies — pure IntersectionObserver
  • Accessible: focus rings, prefers-reduced-motion, HTML semantics
  • MIT for code; SIL OFL for typography

Code distribution

CSS 37% · TypeScript 34% · Astro 27% · PHP 1% · JS 1%

xarop.com → · Code on GitHub →