Web2026Herrería Don Hugo

Herrería Don Hugo: web para un herrador de caballos (en desarrollo)

En desarrollo: versión de prueba online, falta el dominio propio y el contenido final. Web institucional para una herrería de herrado de caballos de Melo, con una intro donde el herrero del logo abre el sitio a martillazos y un panel para que el dueño cambie diseño y textos sin tocar código.

Herrería Don Hugo: web para un herrador de caballos (en desarrollo)

El problema

Herrería Don Hugo hierra caballos a domicilio en Melo y alrededores y se movía solo por Instagram y WhatsApp. No tenía un lugar propio donde contar qué hace, cómo trabaja y cómo coordinar una visita.

Objetivo

Una web institucional que presente la herrería: servicios, historia, forma de trabajo, fotos y contacto directo por WhatsApp. Y que el dueño pueda actualizarla solo.

Contexto

Negocio de oficio, que atiende en el establecimiento del cliente con "la oficina móvil": una camioneta con el horno, el yunque y las herramientas. Identidad en blanco, negro y el verde del logo. No hay venta online ni cuentas de usuarios. En desarrollo: la versión de prueba está publicada en Netlify; faltan el dominio propio y los textos finales de historia y servicios, que carga el cliente desde el panel.

La solución

Sitio de una sola página: portada, servicios, la oficina móvil, frase con números, historia, cómo trabajamos, galería de trabajos, preguntas frecuentes, contacto con mapa y llamado final. Todos los botones abren WhatsApp con el mensaje ya escrito. Panel /admin protegido con contraseña, el mismo sistema que desarrollé para Jump Fit: colores, tipografías, textos, fotos, orden y visibilidad de secciones, logo, datos del negocio y cómo se ve al compartir el link, con vista previa en vivo, deshacer e historial de versiones.

Mi trabajo

Diseño y desarrollo completo: estética a partir del logo (bordes de trazo negro, sombras duras y palabras destacadas con una pincelada verde), copy, animaciones (intro con el herrero redibujado en vectores que da tres martillazos y parte la pantalla, revelados al hacer scroll, cinta de palabras), nueva sección de contacto con mapa, adaptación del panel, puesta en línea y guía de uso en PDF para el cliente.

Desafíos

La intro: el logo es una imagen chica que no se puede articular, así que redibujé la figura en SVG con brazo y martillo animados solo con CSS, para que arranque al instante y no dependa de JavaScript. Reutilizar el panel de otro proyecto con una estética totalmente distinta sin perder ninguna opción de edición.

Decisiones técnicas

Misma base técnica que Jump Fit: sitio estático sin build, más funciones de Netlify y Netlify Blobs. Lo que se publica desde el panel no requiere un nuevo deploy y entra en el plan gratuito. El verde del logo no tiene contraste para usarse como texto: se usa como pincelada detrás de texto negro y como fondo de botones.

Tecnologías

Frontend

HTMLCSSJavaScriptSVGGSAPScrollTriggerLenis

Backend

Netlify FunctionsNetlify Edge Functions

Base de datos

Netlify Blobs

Herramientas

NetlifyGitHubPlaywright

Funcionalidades

Intro animada: el herrero del logo abre el sitio a martillazos
Contacto directo por WhatsApp
Sección de contacto con mapa
Galería de trabajos
Panel para editar diseño y textos
Vista previa en vivo y deshacer
Historial de versiones
SEO y vista previa al compartir

Galería

Resultados

Estado: en desarrollo. Versión de prueba online en Netlify. Falta: dominio propio y contenido final de historia y servicios.