Del archivo de un taller a una experiencia digital con identidad propia.
Caso de estudio de diseño y desarrollo web por TELLOUNDER: una plataforma para descubrir, administrar y compartir la herrería artística y las restauraciones de Gabriel, en Buenos Aires.
Ver sitio publicado · Portfolio y contacto freelance
Las fotos de un taller muestran piezas terminadas, pero cuesta reconocer el proceso, comparar una restauración y apreciar la textura del material. Además, cada trabajo necesita poder circular con su propia imagen y descripción.
La solución organiza ese archivo en un catálogo visual: reúne etapas, acerca los detalles y conecta cada pieza con una consulta por WhatsApp. El metal funciona como un lienzo común para trabajos de autor, restauraciones y estructuras para obras y edificios.
TELLOUNDER desarrolló la dirección visual, la interfaz adaptable, las interacciones, el tratamiento de imágenes, el modelo de contenido, la administración privada, el SEO y la preparación para Firebase Hosting.
El proyecto permite evaluar cómo una misma entrega conecta criterio visual, comportamiento de producto y código que otro equipo puede ejecutar y revisar.
| Necesidad | Implementación | Código |
|---|---|---|
| Llevar la identidad del taller a la interfaz | Ventanal y símbolos en SVG; luz y materiales en Canvas. | Experiencia visual |
| Recorrer las piezas sin perder el detalle | Galerías táctiles con pausa, avance automático coordinado y respeto por el movimiento reducido. | Galerías |
| Apreciar el material de cerca | Visor a pantalla completa en móvil, navegación táctil y zoom; lupa al pasar el cursor en escritorio. | Visor de piezas |
| Compartir un trabajo concreto | Páginas estáticas por pieza y foto, Open Graph, datos estructurados y tarjetas generadas con Sharp. | Generación de SEO |
| Editar con control sobre la publicación | Acceso con Google, autorización en Firestore y borradores separados del catálogo publicado. | Administración |
| Mantener coherencia al actualizar | Validación del catálogo, rutas y archivos; rechazo de borradores privados durante el build. | Validaciones |
Ver el visor en escritorio y móvil
La lupa permite inspeccionar la superficie del metal. En móvil, la publicación ocupa la pantalla y adapta la foto a su proporción; el botón de detalle permite ampliarla y recorrerla.
HTML/CSS · React · TypeScript · SVG/Canvas · Vite · Firebase · Sharp
Un catálogo validado alimenta la interfaz y las páginas que genera el build. Los metadatos sociales están presentes en el HTML, sin depender de que un robot ejecute JavaScript. Guardar en la administración conserva un borrador; la publicación es un paso separado.
assets/ Originales, imágenes para web, detalles y vectores
src/ Experiencia visual, catálogo y administración
scripts/ Construcción, imágenes, SEO y validaciones
docs/ Desarrollo, administración y publicación de contenido
Con Node.js 22.12 o posterior:
npm ci
npm run devnpm run check
npm run build
npm run previewLa web pública funciona localmente sin credenciales. Para una administración propia, consultar .env.example y la guía de administración. La configuración de producción queda fuera del repositorio.
Desarrollo local · SEO y contenido compartido
Este caso reúne diseño a medida, frontend interactivo y una base de contenido administrable. Para proyectos freelance o colaboración con equipos de desarrollo: conocé otros trabajos y contactá a TELLOUNDER.
Obra e identidad artística: Metalmente Arte · Gabriel.
© 2026 Metalmente Arte. Todos los derechos de las imágenes reservados. Este repositorio público no concede permiso para reutilizar las fotografías, las obras ni la identidad artística.