This is a submission for Frontend Challenge: Comfort Food Edition, Perfect Landing.
What I built
PISCA is an interactive, bilingual landing page about pisca andina, a family of breakfast soups from the Venezuelan Andes.
I did not want to build a generic food landing page and swap in a regional dish at the end. The page had to feel specific to pisca: a cold mountain morning, a clay bowl, simple ingredients, and the first warmth of the day.
That led to the central image. The soup is the only warm light source in a dark pre-dawn landscape, and its steam becomes the ridgelines of the Andes. The rest of the page follows the same idea: the landscape becomes an ingredient map, then resolves into a practical recipe.
The page is available in English and Spanish. Changing the language preserves the visitor's warmth setting, scroll position, and selected number of portions.
Demo
Open the production build on Cloudflare Pages
One interaction, one purpose
The hero contains a range control called Warm the morning.
It moves through three states:
- Mountain mist
- First steam
- Bowl passed
Moving the control raises the sun, warms the sky, strengthens the light around the bowl, and redraws the steam. Every response belongs to the same cause. I deliberately avoided a collection of unrelated hover effects and reveal animations.
The default state is complete without interaction. Keyboard, touch, and pointer input all reach the same result. When a visitor requests reduced motion, the ambient loop disappears, but the warmth control remains functional.
The design decisions that mattered
I rejected the usual food-site palette
My first direction was too familiar: cream background, serif headline, terracotta accent. It could have described almost any restaurant or recipe.
PISCA instead begins in a high-altitude blue. Warm yellow is reserved for the soup and the dawn it creates. The palette has six named roles: Páramo, Niebla, Caldo, Cilantro, Arcilla, and Leche.
I drew the subject instead of searching for a hero photo
The bowl, ingredients, steam, mountains, and material marks are original SVG and CSS work. There are no remote raster images in the production page.
That choice was not only about originality. A stock photograph would have made one recipe look definitive. Pisca is a family of Andean soups, and published versions differ. The page clearly presents one white, family-style variation rather than claiming a single canonical recipe.
I made the ingredient section spatial, not sequential
An early version placed decorative numbers on ingredient cards. That implied an order the ingredients did not have.
The final version turns them into an annotated contour basin around the bowl. Sequence appears only where it belongs: in the cooking method.
How it works
The canonical project is a small Vite and TypeScript build with no UI framework.
- Content lives separately from interaction logic.
- The language switch updates the document language and accessible names.
- Portion controls scale quantities from two to eight servings.
- CSS custom properties carry the warmth state into the illustration.
- Fonts are self-hosted and split by Unicode range.
- A deterministic build task converts the production artifact into the three files used by the CodePen version.
The CodePen is therefore not a hand-maintained imitation. It is generated from the same implementation deployed to Cloudflare Pages.
Accessibility and verification
I treated accessibility as part of the interaction design, not as a cleanup pass.
The page includes semantic landmarks, a logical heading structure, visible focus, a skip link, bilingual accessible labels, a named illustration, keyboard-operable controls, and a reduced-motion route.
Before this draft, the project passed:
- strict TypeScript checking and linting with warnings denied
- 9/9 contest-specific checks
- 40/40 Playwright tests across desktop Chrome, mobile Chrome, reduced-motion Chrome, and desktop Firefox
- automated Axe checks in English and Spanish with no violations detected in the selected WCAG A/AA rule sets
- horizontal-overflow, language-state, portion-boundary, and warmth-state checks
Those results are automation evidence, not a claim of universal accessibility. A manual screen-reader pass and Safari/WebKit verification remain on my checklist.
What I learned
The strongest change came from asking whether the hero interaction could explain the subject instead of merely decorating it.
Once the visitor could warm the morning, several smaller effects became unnecessary. The page became clearer because one metaphor took responsibility for the color, motion, illustration, and status text.
I also found a real mobile grid overflow during visual inspection. Automated checks confirmed the behavior, but looking at the full composition at 390 pixels exposed the layout problem. Both forms of testing mattered.
Originality and AI use
I began this project after the challenge opened. The visual concept, SVG artwork, interface, bilingual content system, and CodePen conversion were created for this submission.
I used AI tools for research assistance, implementation support, and iterative quality review. I made the concept, editorial direction, final selection, verification, and submission decisions, and I reviewed and tested the output before using it.
The cultural and recipe context was checked against:
PISCA is my attempt to make a regional breakfast feel like a place before it reads like a recipe.
Top comments (0)