PublicadoDesarrollo web2026

Sitio Mining Hair

Diseño y desarrollo full-stack de un sitio de salón de belleza en operación. Una interfaz centrada en fotografías combina diseños adaptables, galerías animadas y un sistema de contenido editable creado con Next.js.

Trabajo para cliente
Sitio en operación

Experiencia del producto

Diseñamos y desarrollamos el sitio oficial de Mining Hair, que ya está en operación. La pantalla de inicio usa una fotografía de ancho completo, tipografía destacada y navegación compartida. Next.js y React organizan las páginas; Tailwind CSS proporciona diseños ajustados a la pantalla, elementos en capas y tipografía que cambia con el tamaño de pantalla. Las capturas de abajo muestran la implementación de la presentación, la galería en movimiento, el archivo de imágenes y la escena interactiva de reseñas.

Sección Acerca de: retrato, tipografía en capas y diseño fijo — Acerca de — Next.js Image muestra el retrato, mientras Tailwind CSS combina un área fija en pantalla, texto en capas y tamaños de fuente adaptables. La imagen y el texto avanzan por la sección cuando el visitante desplaza la página.

Sección Gallery Snippets con tarjetas fotográficas en movimiento horizontal — Gallery Snippets — GSAP mueve pistas duplicadas de tarjetas en un ciclo continuo y recalcula la distancia cuando cambia el diseño. Las transiciones CSS cambian la foto de cada tarjeta al pasar el mouse o recibir el foco del teclado; seleccionar una tarjeta abre su categoría de galería.

Sitio Mining Hair: cuadrícula de galería y navegación por categorías — Galería — React gestiona la selección de categorías y carga las imágenes en páginas de 12. Tailwind CSS organiza la cuadrícula adaptable, y Next.js Image trabaja con marcadores de carga y transiciones al pasar el mouse.

Sección de reseñas Street Notes con panorama ilustrado y controles de personajes — Street Notes — Un área fija mediante CSS mantiene la escena ilustrada a la vista. Las imágenes de fondo en capas y los botones de personajes forman la interfaz, con controles para cambiar de calle, desplazarse por la escena y abrir reseñas.

Qué puedes hacer

Inicio y Acerca de: tipografía adaptable, fotografías en capas y diseños de secciones fijas.
Gallery Snippets: ciclo GSAP, transiciones de imágenes y enlaces a vistas de galería filtradas.
Galería: filtros por categoría, carga paginada y cuadrícula adaptable de imágenes.
Street Notes: panorama ilustrado con botones de personajes y navegación por la escena.
Gestión de contenido: edición de texto en la página, carga de imágenes y almacenamiento en el servidor.

Cómo funciona

El servidor prepara el contenido principal para la primera renderización y lo comparte con el estado de contenido del cliente. Las solicitudes de edición pasan por una API del servidor, y Prisma persiste el contenido de las secciones en PostgreSQL. Redis guarda los resultados de lectura en caché; guardar una sección invalida la caché relacionada para que las lecturas posteriores usen el contenido actualizado.

Privacidad y modelo operativo local

La navegación pública y la edición de contenido tienen responsabilidades separadas. Los controles de edición aparecen en modo administrador, y la API de guardado también comprueba la sesión administrativa. La entrega incluye tanto el diseño para visitantes como el flujo de contenido del operador.

Estado de publicación

El sitio está en operación en mininghair.com. Las imágenes mostradas aquí son capturas del sitio en funcionamiento. Este caso de estudio aborda su implementación, arquitectura y diseño.