David Matthew Quintana

Complete Homepage Design

The homepage combines bilingual content, cultural imagery, and intuitive navigation to create a welcoming digital experience that reflects the store's 30+ year legacy in Denver's Hispanic community.

Diseño Completo de la Página Principal

La página principal combina contenido bilingüe, imágenes culturales y navegación intuitiva para crear una experiencia digital acogedora que refleja el legado de 30+ años de la tienda en la comunidad hispana de Denver.

Custom Translation Engine (500+ Keys)

Built a complete bilingual translation system using pure vanilla JavaScript without any external libraries. The system manages over 500 translation keys across 6 pages and persists language preference using localStorage.

How It Works

• Uses data-i18n attributes on HTML elements
• Separate translation objects for English and Spanish
• Handles text, HTML, alt text, meta descriptions, placeholders
• Language saved to localStorage for persistence
• Updates all elements dynamically without page refresh

Why This Matters

Most websites use heavy frameworks like i18next or React Context. This custom solution has zero dependencies, loads faster, and gives complete control over translation logic.

Motor de Traducción Personalizado (500+ Claves)

Construí un sistema de traducción bilingüe completo utilizando JavaScript puro sin librerías externas. El sistema gestiona más de 500 claves de traducción en 6 páginas y persiste la preferencia de idioma usando localStorage.

Cómo Funciona

• Utiliza atributos data-i18n en elementos HTML
• Objetos de traducción separados para inglés y español
• Maneja texto, HTML, texto alt, metadescripciones, marcadores
• Idioma guardado en localStorage para persistencia
• Actualiza todos los elementos dinámicamente sin refrescar

Por qué es importante

La mayoría de los sitios usan marcos pesados como i18next o React Context. Esta solución no tiene dependencias, carga más rápido y ofrece control total sobre la lógica de traducción.

Bilingual HTML Structure

The HTML architecture uses semantic lang-block containers to manage both language versions simultaneously. Each section maintains identical DOM structure with separate language data attributes, enabling instant switching without page reloads.

Estructura HTML Bilingüe

La arquitectura HTML utiliza contenedores lang-block semánticos para gestionar ambas versiones de idioma simultáneamente. Cada sección mantiene una estructura DOM idéntica con atributos de datos de idioma separados, permitiendo cambios instantáneos sin recargas de página.

Responsive CSS Grid System

Implemented modern CSS Grid and Flexbox layouts that automatically adapt from mobile (320px) to large desktop (1920px) using clamp(), minmax(), and auto-fit.

Mobile
320px-768px

Single-column layouts, stacked sections, 44px minimum touch targets

Tablet
768px-1024px

2-3 column grids, balanced spacing

Desktop
1024px+

3-4 column grids, generous whitespace

Sistema de Cuadrícula CSS Adaptable

Implementé diseños modernos de CSS Grid y Flexbox que se adaptan automáticamente desde móviles (320px) hasta escritorios grandes (1920px) usando clamp(), minmax(), y auto-fit.

Móvil
320px-768px

Diseños de una columna, secciones apiladas, objetivos táctiles de 44px

Tableta
768px-1024px

Cuadrículas de 2-3 columnas, espaciado equilibrado

Escritorio
1024px+

Cuadrículas de 3-4 columnas, espacio generoso

Design System & Color Palette

A carefully curated color palette inspired by the Salvadoran flag—featuring cobalt blue, tangerine yellow, and lincoln green—creates a cohesive visual identity that celebrates cultural heritage while maintaining modern accessibility standards.

Sistema de Diseño y Paleta de Colores

Una paleta de colores cuidadosamente seleccionada inspirada en la bandera salvadoreña—con azul cobalto, amarillo tangerina y verde Lincoln—crea una identidad visual cohesiva que celebra la herencia cultural mientras mantiene estándares modernos de accesibilidad.

Interactive Image Gallery & Product Filtering

The Items page features 29 product cards with dynamic filtering and zoom modal functionality. Users can filter by category and click images to view full-size versions.

Technical Features

• Smooth fade-in and zoom animations using CSS keyframes
• Keyboard accessible – press ESC to close modal
• Body scroll locked when modal is open
• Category filtering with JavaScript (food, drinks, clothing, wellness, nostalgia)

Galería de Imágenes Interactiva y Filtrado de Productos

La página de artículos cuenta con 29 tarjetas de productos con filtrado dinámico y funcionalidad de zoom. Los usuarios pueden filtrar por categoría y hacer clic en las imágenes para ver versiones a tamaño completo.

Características Técnicas

• Animaciones suaves de desvanecimiento y zoom mediante keyframes
• Accesibilidad por teclado – presione ESC para cerrar el modal
• Bloqueo de desplazamiento del cuerpo cuando el modal está abierto
• Filtrado por categorías con JavaScript (comida, bebidas, ropa, bienestar, nostalgia)

Image Zoom Modal & Lightbox

A fully accessible modal lightbox enables users to view product images and gallery photos at full resolution. The implementation includes keyboard navigation, focus management, and smooth animations for an enhanced user experience.

Modal de Zoom de Imagen y Lightbox

Un modal lightbox completamente accesible permite a los usuarios ver imágenes de productos y fotos de galería en resolución completa. La implementación incluye navegación por teclado, gestión del enfoque y animaciones suaves para una mejor experiencia de usuario.

Contact & Location Map Integration

An embedded Google Map displays Tienda Salvadorea's exact location with directions, business hours, and contact information. The contact page provides multiple communication channels including phone, email, WhatsApp, and Facebook for customer convenience.

Integración de Mapa de Contacto y Ubicación

Un mapa de Google integrado muestra la ubicación exacta de Tienda Salvadorea con indicaciones, horario comercial e información de contacto. La página de contacto proporciona múltiples canales de comunicación incluidos teléfono, correo electrónico, WhatsApp y Facebook para comodidad de los clientes.

Press Coverage & Community Recognition

Tienda Salvadorea has been featured in prominent Denver media outlets including El Diario El Salvadoreno, Denverite, and local journalism publications. The website documents this media presence, showcasing the store's importance as a cultural anchor in Denver's Hispanic community.

Cobertura de Prensa y Reconocimiento Comunitario

Tienda Salvadorea ha sido presentada en destacados medios de comunicación de Denver incluyendo El Diario El Salvadoreno, Denverite y publicaciones de periodismo local. El sitio web documenta esta presencia mediática, mostrando la importancia de la tienda como ancla cultural en la comunidad hispana de Denver.