When Recipes Become Protest: A Chilean Comfort Food Landing Page

This is a submission for Frontend Challenge – Comfort Food Edition, Perfect Landing.

What I Built

I built Comfort Food Funa, an interactive landing page inspired by a Chilean internet tradition known as a “funa gastronómica.”

A funa gastronómica is a humorous collective intervention in which people fill an institution's social media comments with traditional Chilean recipes. Instead of insults or destructive actions, the comment section becomes an unexpected cookbook filled with dishes that evoke home, memory, and shared identity.

My landing page recreates that phenomenon as a completely fictional and peaceful simulation.

A fictional museum post appears beside a live comment feed. New recipes gradually arrive as if a community were taking over the comment section in real time.

The recipes include:

• Cazuela de Vacuno
• Pastel de Choclo
• Completo Italiano
• Sopaipillas Pasadas
• Empanadas de Pino

The default interface is in English so an international audience can understand the concept. However, the comments remain intentionally in Spanish to preserve their original Chilean voice. Each recipe also includes a short, optional English summary.

The site does not contact any social network, publish real comments, or interact with a real museum.

Demo

🌐 Live English experience:

https://comfort-food-funa.pages.dev/

🇨🇱 Spanish experience:

https://comfort-food-funa.pages.dev/es/

💻 Source code:

https://github.com/ContardoRM/comfort-food-funa

Desktop experience

The desktop layout places the fictional publication beside the live recipe feed, allowing the original post and the collective response to be understood together.

Mobile experience

On mobile, the experience becomes a single-column flow while preserving the language selector, theme control, live feed, pause action, and readable recipe content.

The live experience includes:

• English and Spanish routes
• Light and dark themes
• Keyboard navigation
• Pause and resume controls
• Progressive recipe comments
• Optional English summaries
• Accessible simulation feedback
• Responsive mobile and desktop layouts
• Reduced-motion support
• A strict maximum of 24 live comments in the DOM

Journey

Finding a different interpretation of comfort food

I did not want to create another restaurant menu or conventional recipe collection.

For me, comfort food is not only about ingredients. It is also about memory, family language, regional identity, and the feeling of returning home.

The idea of a funa gastronómica allowed me to connect those emotions with a distinctly Chilean digital tradition. In this experience, recipes become a collective voice.

The social media interface is therefore not just decoration. It is the narrative mechanism of the project.

Translating context without erasing the culture

One of the main design challenges was making the concept understandable to English-speaking judges without removing what made it authentic.

I decided to:

• Make English the default interface language
• Provide a complete Spanish route at /es/
• Keep usernames, recipes, dish names, idioms, and emojis in Spanish
• Mark each recipe comment with lang="es-CL"
• Explain visibly why the comments remain untranslated
• Offer short, optional English summaries

This approach translates the context, but not the voices participating in the fictional intervention.

Progressive enhancement

The application is statically generated with Astro.

Two complete recipe comments are included in the original HTML before JavaScript runs. The language navigation, hero, museum post, image, cultural explanation, recipes, and footer remain available without client-side JavaScript.

Svelte then enhances the page with:

• The live feed
• Pause and resume behavior
• Relative timestamps
• Like and save states
• Accessible feedback messages
• English summary controls
• Dark-mode persistence
• Visibility-aware scheduling

If JavaScript fails, the core story remains understandable.

Accessibility

Accessibility was treated as part of the architecture rather than a final checklist.

The project includes:

• Semantic landmarks
• A keyboard-accessible skip link
• Visible focus indicators
• Localized document languages
• lang="es-CL" on Spanish comments
• Accessible language navigation with aria-current
• aria-pressed for toggle states
• aria-expanded and aria-controls for summaries
• Accessible live regions
• Keyboard-operable controls
• Reduced-motion support
• Responsive reflow
• Localized alternative text
• Automated axe checks on both language routes

The feed announces important state changes without making the entire scrolling region constantly live.

Usability and performance

The desktop interface uses two columns: the fictional post on the left and the live recipe feed on the right. On smaller screens, the layout becomes a single readable column.

The simulation uses recursive setTimeout scheduling instead of an uncontrolled interval.

It also:

• Pauses when the browser tab becomes hidden
• Resumes when the user returns
• Avoids forced autoscrolling while someone is reading older comments
• Keeps no more than 24 comments in the DOM
• Cleans timers and event listeners when the component is destroyed
• Uses local avatars and a locally hosted museum image
• Produces no external image requests during navigation

The museum photograph is a public-domain image served locally as an optimized WebP file.

CSS and visual identity

The project uses Tailwind CSS 4 through @tailwindcss/vite, with shared behavior defined in src/styles/global.css.

CSS is not only decorative here. It directly supports the challenge criteria.

For accessibility, the styles provide visible focus states, a focus-revealed skip link, reduced-motion fallbacks, stable image dimensions, text wrapping, responsive reflow, and contrast-aware light and dark themes.

For usability, the interface follows a mobile-first structure:

• One column on smaller screens
• A balanced post-and-feed composition on desktop
• Clear hover, focus, active, and pressed states
• Consistent spacing and hierarchy
• A constrained internal feed that avoids uncontrolled page growth

A synchronous script in the document head applies the saved theme before the first paint, preventing a flash of the wrong color scheme.

For creativity, the red and blue design tokens reference Chile without directly reproducing its flag. Warm accents, recipe labels, social cards, and subtle motion connect food, memory, digital culture, and collective participation.

The incoming-comment animation communicates the feeling of a live takeover, while reduced-motion users receive the same information without depending on animation.

Technical architecture

The project uses:

• Astro static site generation
• Svelte 5 islands
• TypeScript
• Tailwind CSS 4
• Vitest
• Playwright
• axe-core
• Cloudflare Pages

Astro produces two static routes:

• /
• /es/

Cloudflare Pages publishes the generated dist directory directly, so the project does not require a Cloudflare runtime adapter.

The site also includes localized canonical URLs, Open Graph metadata, Twitter metadata, and hreflang links.

Testing

The current test suite includes:

• 3 unit tests
• 21 Playwright end-to-end tests
• Automated axe checks on both routes

The tests cover:

• English and Spanish localization
• Keyboard navigation
• Theme switching
• Reduced motion
• Pause and resume
• Visibility API behavior
• Progressive enhancement without JavaScript
• Initial server-rendered comments
• Hydration without duplicate comments
• A maximum of 24 comments in the live DOM
• Rotation of older comments
• Responsive layouts
• Canonical and alternate-language metadata
• The locally hosted museum image
• A valid robots.txt

The final validation completed with no Astro or Svelte errors, warnings, or hints.

What I learned

The most valuable lesson was that localization is not always the same as translating every word.

Keeping the recipes in Spanish made the experience more authentic, but it required additional work to make the cultural context and interface accessible to an international audience.

I also learned how progressive enhancement can improve storytelling. Rendering the first recipes as static HTML ensures that the central idea survives before hydration and even when JavaScript is unavailable.

Finally, this project reinforced that accessibility, CSS, performance, and narrative design should not be treated as separate layers. The strongest results came from designing them together.

I designed the cultural framing, selected the interaction model, reviewed every generated change, and validated the final behavior through local tests and production checks.

AI-assisted development disclosure

AI-assisted tools, including Codex, were used during planning, implementation review, test generation, debugging, and documentation refinement.

All resulting changes were reviewed, executed, and validated locally before publication. The final architecture, cultural framing, accessibility decisions, and published result were selected and verified by me.

Image credit

The museum hero uses “Philadelphia Museum of Art, main building” by Rgordon6~commonswiki, released into the public domain.

A locally optimized copy is served by the application to avoid depending on a third-party image host during navigation. Full attribution and source information are available in the repository README.

What I am particularly proud of

I am most proud that the interaction is not separate from the idea.

The live feed, Spanish comments, English summaries, social interface, and DOM rotation all reinforce the same story: comfort food can carry memory and identity, and sometimes a recipe can become a form of collective expression.

I would love to know:

Which dish tastes like home to you, and what story would you post with its recipe?