Project · la-rucula
La Rúcula Gastrobar
- Rol
- Freelance · diseño y desarrollo
- Cliente
- La Rúcula Gastrobar · Chiclana de la Frontera, ES
- Año
- 2026
- Estado
- En producción
- Tecnologías
- GSAPMovimiento. Desde 2026. Orquestación temporal determinista para interfaces de alta precisión y micro-interacciones espaciales. También en ARG Piscinas y Ynara Web.
- LenisMovimiento. Desde 2026. Scroll inercial normalizado multiplataforma sin romper el comportamiento nativo del navegador. También en Ynara Web.
- Tailwind CSSHerramientas. Desde 2026. Sistema de diseño componible y utilitario con purga agresiva para bundles ultra ligeros. También en ARG Piscinas y Ynara Web.
- ViteHerramientas. Desde 2025 · 1 año. Tooling ultra veloz basado en Rollup y esbuild para HMR instantáneo en desarrollo. También en ARG Piscinas.
- Vue 3Frameworks. Desde 2025 · 1 año. Elegido por reactividad quirúrgica, Composition API limpia y tipado estricto sin sobrecarga de boilerplate. También en ARG Piscinas.
Sitio editorial menu-first para un restaurante frente al mar en Chiclana. Cliente real, en producción.
Encargo
La Rúcula necesitaba dejar de ser un PDF escaneado colgado de un QR. El brief real: que la carta se sienta tan cuidada como el plato, y que el dueño pueda editarla sin llamar a nadie.
Proceso
Encargo
De un encargo de "página de restaurante" a una experiencia menu-first pensada para el QR en la mesa. La carta tenía que sentirse tan cuidada como el plato.
Taller
Arquitectura menu-first: el sitio se reduce a /, /menu y /menu/:slug. La mayoría del tráfico entra por QR, así que el menú es el producto. El contenido del shell vive en un CMS propio con fallback local: si la API duerme, el sitio no. Antes de cerrar una sección, review visual con Playwright en tres viewports y baseline de accesibilidad con axe.
Pieza
Home inmersiva de dirección de arte mediterránea: editorial, calma, lejos del layout genérico de restaurante. Motion con significado: reveals de línea, stagger tipográfico y acentos SVG de trazo manual. La regla del proyecto: cohesión sobre novedad.
Resultado
En producción en laruculagastrobar.es. Modo QR optimizado para llegada directa desde la mesa. Multi-locale con preservación del idioma entre rutas. Review UX y accesibilidad automatizadas antes de cada deploy.
Métricas
- 0,8 sLCPLCP. Cuánto tarda en pintarse el elemento más grande de la primera pantalla.
- 100SEOSEO. Puntaje de indexación y metadatos para buscadores, de 0 a 100.
- 2IdiomasIdiomas. Idiomas en los que se publica el sitio.
- 42 KBBundleBundle. Peso del JavaScript inicial comprimido que descarga el navegador.
- 99PerformancePerformance. Puntaje de rendimiento de carga, de 0 a 100.
- 100AccesibilidadAccesibilidad. Puntaje de accesibilidad automática, de 0 a 100.
- 100Buenas prácticasBuenas prácticas. Puntaje de seguridad y buenas prácticas web, de 0 a 100.
En el teléfono
