Tienda Salvadoreña: Digital Preservation of a 30-Year Legacy
A comprehensive case study exploring the technical architecture, design decisions, and cultural impact of Denver's oldest Salvadoran grocery store website.
Tienda Salvadoreña: Preservación Digital de un Legado de 30 Años
Un caso de estudio exhaustivo que explora la arquitectura técnica, las decisiones de diseño y el impacto cultural del sitio web de la tienda de comestibles salvadoreña más antigua de Denver.
Project Overview
Purpose
Created as a comprehensive digital presence for Denver's oldest Salvadoran grocery store (30+ years). Built for CIS 3030 at MSU Denver, demonstrating professional web development while honoring Jorge and Delia Romero's story.
Goals
Preserve cultural heritage, provide bilingual business information, showcase advanced web development without frameworks, increase SEO visibility, and maintain WCAG 2.1 AA accessibility standards.
Descripción del Proyecto
Propósito
Creado como una presencia digital integral para la tienda salvadoreña más antigua de Denver (más de 30 años). Construido para CIS 3030 en MSU Denver, demostrando desarrollo web profesional mientras honra la historia de Jorge y Delia Romero.
Objetivos
Preservar el patrimonio cultural, proporcionar información comercial bilingüe, mostrar desarrollo web avanzado sin frameworks, aumentar la visibilidad SEO y mantener los estándares de accesibilidad WCAG 2.1 AA.
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-i18nattributes 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
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.
Translation engine code (click to zoom)
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-i18nen 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
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.
Código del motor de traducción (clic para ampliar)
Spanish Version (click to zoom)
Versión en Español (clic para ampliar)
English Version (click to zoom)
Versión en Inglés (clic para ampliar)
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
Mobile View (375px)
Desktop View (1440px)
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
Vista Móvil (375px)
Vista de Escritorio (1440px)
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)
Product filtering interface (click to zoom)
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)
Interfaz de filtrado de productos (clic para ampliar)
Impact & Technical Highlights
Cultural Preservation
Documented 30+ years of Salvadoran heritage in Denver
Performance
Fast load times with optimized images and lazy loading
Accessibility
WCAG 2.1 AA compliant with proper ARIA labels
Zero Dependencies
Pure HTML, CSS, and JS – no frameworks or libraries
6-Page Architecture
Unified design system across all pages
SEO Optimized
Semantic HTML and bilingual meta tags
Impacto y Aspectos Técnicos Destacados
Preservación Cultural
Documentados más de 30 años de herencia salvadoreña en Denver
Rendimiento
Tiempos de carga rápidos con imágenes optimizadas
Accesibilidad
Cumple con WCAG 2.1 AA con etiquetas ARIA adecuadas
Cero Dependencias
HTML, CSS y JS puros – sin frameworks ni librerías
Arquitectura de 6 Páginas
Sistema de diseño unificado en todas las páginas
Optimizado para SEO
HTML semántico y etiquetas meta bilingües
Contact
Have a project in mind or need bilingual consulting?
Contacto
¿Tienes un proyecto en mente o necesitas asesoría bilingüe?