Sama Vintage

Rebranding de una tienda real de joyería vintage: diseño en Figma y Canva, y web estática en HTML, CSS y JavaScript

Publicada en GitHub Pages

Web Ecommerce JavaScript Figma Canva

Sobre el proyecto

Sama Vintage es una tienda real de joyería vintage. En el módulo SGE (Sistemas de Gestión Empresarial) de DAM teníamos que hacer el rebranding completo de una web que ya existiera, y la elegimos: nueva guía de estilos en Canva, prototipos en Figma y la tienda montada desde cero.

La primera versión la hicimos en equipo con Ana Núñez y Ángel Millán en WordPress con WooCommerce. Después la rehíce yo sola como web estática en HTML, CSS y JavaScript, sin CMS ni frameworks, para poder publicarla gratis en GitHub Pages y conservarla en mi portfolio. Tiene catálogo de 53 piezas, ficha de producto, carrito y un checkout simulado (sin pago real).

Evolución del proyecto

Fase 1: WordPress

Versión original hecha en equipo con Ana Núñez y Ángel Millán: WooCommerce, tema personalizado y plugins como Code Snippets, Contact Form 7 y Simple Custom CSS and JS.

Proyecto en equipo

Fase 2: Sitio Estático

Reconstrucción mía desde cero en HTML, CSS y JavaScript: carrito con localStorage, una sola plantilla de producto que lee el ?id= de la URL e imágenes en WebP. Publicada en GitHub Pages.

Portfolio personal

Catálogo de 53 piezas

Broches, pendientes y collares, con filtro por categoría y ordenación por precio.

Una plantilla para todo

La ficha lee el ?id= de la URL y pinta los datos y la galería de fotos desde data.js.

Carrito y checkout

Añadir, quitar y cambiar cantidades con localStorage, contador sincronizado en todas las páginas y checkout simulado.

Ligera y responsive

Menú hamburguesa en móvil y fotos en WebP con carga diferida: el catálogo pasó de 171 MB a menos de 10 MB.

Stack Tecnológico

Frontend

HTML5 Semántico
CSS3 + Variables
JavaScript Vanilla
localStorage
Imágenes WebP

Diseño & Prototipado

Figma (Prototipos)
Canva (Guía de estilos)
Paleta: Granate, Dorado, Crema

Deploy & Origen

GitHub Pages
WordPress (v1.0)
WooCommerce (v1.0)
Code Snippets, CF7

Galería

Versión Escritorio

Versión Móvil