EN

xarop.com landing

Disseny & Desenvolupament · 2026 · visit →

Design FrontEnd Portfolio

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

The project

landing page by xarop.com: A high performance landing page built with Astro 5 and TypeScript. It presents the portfolio, services and FAQs in three languages ​​(CA / ES / EN), with interchangeable color palettes and dark/light theme support.

Stack

  • Astro 5 — static generation, routing and components
  • TypeScript — all typed configuration and component logic
  • Vanilla CSS — design tokens, 7 flavor palettes, dark mode, no external frameworks
  • Asap — self-hosted typeface, zero calls to Google Fonts
  • Cloudflare Pages — deploy and global CDN

Characteristics

  • ~10 KB of JavaScript — all progressive, the page works without JS
  • 7 palette flavors persisted to localStorage
  • Multilingual (CA / ES / EN) via native Astro routing
  • Scroll reveal with IntersectionObserver, no dependencies
  • Accessible — WCAG 2.1, focus rings, prefers-reduced-motion
  • Deploy compatible with Cloudflare Pages, Vercel and Netlify

xarop.com → · Code on GitHub