A warm, authentic Venezuelan café website — built with earthy tones, tropical warmth, and a focus on making visitors feel at home before they even step inside.
UI Designer & Front-End Dev
Encuentro Café is a website for an authentic Venezuelan café nestled in the heart of historic Old Town, San Diego. The platform captures the warmth and cultural richness of the café — from the heartening aromas of freshly made Arepas and Cachapas to the tropical art that adorns the walls. It serves as both a digital invitation and a practical guide for visitors seeking an authentic taste of Venezuela.
The challenge: translate the cozy, earthy atmosphere of a physical Venezuelan café into a digital experience that feels warm, welcoming, and culturally genuine — without losing the soul of the place. This was a self-initiated project where I handled everything from visual storytelling to production code.
As the sole designer and developer, I owned every stage of the project — from the initial concept all the way to deployment on Vercel. Here's how I contributed:
→ Brand Storytelling: Translated the café's Venezuelan identity into a cohesive digital narrative — warm earthy tones, tropical textures, and cultural authenticity that mirrors the physical space.
→ Visual Design: Built a warm, inviting design system: rich browns and terracotta backgrounds, warm gold accents, and organic typography that evokes handcrafted tradition and tropical warmth.
→ Menu Presentation: Designed and coded an appetizing menu section showcasing Arepas, Cachapas, and traditional Venezuelan specialties — with imagery-forward layouts that make the food the hero.
→ Atmosphere & Ambiance: Created immersive sections that transport visitors to the café — from tropical wall art references to the warm, earthy interior tones that extend a cozy digital embrace.
→ Front-End Development: Coded the entire site in semantic HTML5, CSS3, and vanilla JavaScript. No frameworks — every interaction, animation, and layout built from scratch with a focus on warmth and accessibility.
01
I immersed myself in Venezuelan café culture and the specific identity of Encuentro Café. The key insight: the café's power comes from its authenticity — the warm embrace of tropical colors, the handcrafted feel of traditional food, and the storytelling woven into every wall. That became the design philosophy: warmth first, information second.
02
I mapped the content into sections that mirror a visitor's journey: Welcome → Menu → Our Story → Visit Us. The navigation follows this narrative arc, making the site feel like a guided tour of the café rather than a static brochure.
03
I built a warm, earthy design system: deep browns and terracotta (#3d2b1f to #5c4033) as the primary palette, warm gold (#c9a84c) as the accent, and cream whites for contrast. Typography was chosen for its organic, handcrafted feel — matching the homemade recipes and artisanal spirit of the café. All imagery emphasizes food, warmth, and tropical textures.
04
I wrote every line of code by hand — no templates, no frameworks. The menu section uses vanilla JS for interactive category filtering. The hero section features a warm, inviting entrance animation. The site was deployed on Vercel with optimized images for fast loading, ensuring the warm experience begins the moment the page loads.
I analyzed authentic Venezuelan cafés and Latin American restaurant websites to identify patterns that convey warmth and cultural identity. The core finding: most food sites prioritize photography over atmosphere — I wanted Encuentro to feel like stepping into the café itself. The solution: earthy color palettes, generous whitespace, and imagery that emphasizes the sensory experience of Venezuelan cuisine.
I wireframed desktop and mobile simultaneously. The most challenging section was the menu — presenting Arepas, Cachapas, and traditional specialties with appetite appeal while keeping the layout clean and scannable. The solution: a card-based menu grid with large food photography, clear pricing, and category filtering for dietary preferences (meat, vegetarian, vegan).
The Encuentro Café design system is built around warmth and authenticity — earthy tones evoke the café's interior, while organic shapes and textures reflect the handcrafted nature of Venezuelan cuisine. Every element invites the user to linger, just like the physical space.
I coded the entire site in semantic HTML5, CSS3, and vanilla JavaScript — no frameworks, no libraries. This was a deliberate choice: the site needed to feel as handcrafted as the café's recipes, with every interaction built to evoke warmth and hospitality.
Key technical decisions: CSS custom properties for the warm design token system, CSS Grid + Flexbox for responsive menu layouts, vanilla JS for menu category filtering and smooth scroll navigation, IntersectionObserver for gentle reveal animations as users scroll, and optimized image loading to ensure the warm experience begins instantly.
Lighthouse Performance score
Core sections
Frameworks used