Project · la-rucula
La Rúcula Gastrobar
- Role
- Freelance · design and development
- Client
- La Rúcula Gastrobar · Chiclana de la Frontera, ES
- Year
- 2026
- Status
- Live
- Technologies
- GSAPMotion. Since 2026. Deterministic timeline orchestration for high-precision interfaces and spatial micro-interactions. Also in ARG Piscinas and Ynara Web.
- LenisMotion. Since 2026. Normalized cross-platform inertial scrolling without breaking the browser's native behavior. Also in Ynara Web.
- Tailwind CSSTooling. Since 2026. A composable, utility-first design system with aggressive purging for ultra-light bundles. Also in ARG Piscinas and Ynara Web.
- ViteTooling. Since 2025 · 1 year. Ultra-fast tooling built on Rollup and esbuild for instant HMR in development. Also in ARG Piscinas.
- Vue 3Frameworks. Since 2025 · 1 year. Chosen for surgical reactivity, a clean Composition API and strict typing without boilerplate overhead. Also in ARG Piscinas.
Menu-first editorial site for a seafront restaurant in Chiclana. Real client, in production.
Brief
La Rúcula needed to stop being a scanned PDF hanging off a QR code. The real brief: make the menu feel as carefully crafted as the dish, and let the owner edit it without calling anyone.
Process
Commission
From a "restaurant page" commission to a menu-first experience designed for the QR code on the table. The menu had to feel as carefully crafted as the dish.
Workshop
Menu-first architecture: the site comes down to /, /menu and /menu/:slug. Most traffic arrives through the QR code, so the menu is the product. The shell content lives in a custom CMS with a local fallback: if the API sleeps, the site doesn't. Before closing a section, a visual review with Playwright in three viewports and an accessibility baseline with axe.
Piece
An immersive home with Mediterranean art direction: editorial, calm, far from the generic restaurant layout. Motion with meaning: line reveals, typographic stagger and hand-drawn SVG accents. The project's rule: cohesion over novelty.
Outcome
In production at laruculagastrobar.es. QR mode optimized for arrivals straight from the table. Multi-locale, with the language preserved across routes. Automated UX and accessibility review before every deploy.
Metrics
- 0.8 sLCPLCP. How long the largest element of the first screen takes to paint.
- 100SEOSEO. Search indexing and metadata score, from 0 to 100.
- 2LanguagesLanguages. Languages the site is published in.
- 42 KBBundleBundle. Compressed size of the initial JavaScript the browser downloads.
- 99PerformancePerformance. Load performance score, from 0 to 100.
- 100AccessibilityAccessibility. Automated accessibility score, from 0 to 100.
- 100Best practicesBest practices. Security and web best-practice score, from 0 to 100.
On the phone
