ES

xarop.com página de inicio

Disseny & Desenvolupament · 2026 · visitar →

Design FrontEnd Portfolio

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

El proyecto

landing page de xarop.com: una página de entrada de alto rendimiento construida con Astro 5 y TypeScript. Presenta el portafolio, los servicios y FAQs en tres idiomas (CA / ES / EN), con paletas de color intercambiables y soporte de tema oscuro/claro.

Stack

  • Astro 5 — generación estática, routing y componentes
  • TypeScript — toda la lógica de componentes y configuración tipada
  • Vanilla CSS — design tokens, 7 flavor palettes, modo oscuro, sin frameworks externos
  • Asap — tipografía auto-alojada, cero llamadas a Google Fonts
  • Cloudflare Pages — deploy y CDN global

Características

  • ~10 KB de JavaScript — todo progresivo, la página funciona sin JS
  • 7 sabores de paleta persistidos en localStorage
  • Multilingüe (CA / ES / EN) via routing nativo de Astro
  • Scroll reveal con IntersectionObserver, sin dependencias
  • Accesible — WCAG 2.1, focus rings, prefers-reduced-motion
  • Deploy compatible con Cloudflare Pages, Vercel y Netlify

xarop.com → · Código en GitHub