PHOTOGRAPHY / IDENTITY

Anto Grispo: fotografía recuperada y convertida en portfolio narrativo

Una obra recuperada y convertida en portfolio narrativo, accesible y autoadministrable.

Recuperación · Narrativa · Identidad · Portfolio · Administración · Publicación

Abrir ANTO GRISPO en vivo

Compartir este caso por WhatsApp

Tecnologías y funciones del proyecto

React 19: Construye portfolio, galerías, lightbox y panel.
TypeScript 7: Tipa secciones, piezas y contenido administrable.
Vite 8: Compila y publica la experiencia recuperada.
Firebase Auth: Protege el panel con una lista cerrada de cuentas.
Cloud Firestore: Sincroniza el portfolio mediante `onSnapshot`.
WriteBatch: Publica la edición completa sin dejar un estado parcial.
Firebase Hosting: Sirve el portfolio y fue fuente de la recuperación original.
Canvas + WebP: Reduce y convierte imágenes antes de guardarlas.
CSS Grid + Scroll Snap: Construye bento, retratos y colecciones con ritmos distintos.
Keyboard Navigation: Abre y recorre el lightbox con Enter, espacio, Escape y flechas.
Reduced Motion: Respeta la preferencia de movimiento del sistema.
WhatsApp Deep Link: Compone la consulta y abre `wa.me` sin fingir un backend.
JSON-LD + Open Graph: Presenta identidad profesional y previews sociales.
Font Awesome: Aporta iconografía vectorial accesible.

Necesidades, decisiones y resultados

NECESIDAD / RESCATE

Recuperar antes de rediseñar

La fuente se había perdido, pero la obra publicada seguía hablando.

Necesidad: El repositorio original estaba vacío y no existía una base editable confiable para continuar el portfolio.
Decisión de producto: Reconstruí la fuente desde Firebase Hosting, preservando textos, estructura visual y 30 recursos locales.
Resultado: La obra volvió a tener código, contexto y continuidad sin inventar un historial que no existía.
Evidencia: El contexto canónico documenta la recuperación y el nuevo repositorio conserva los recursos reconstruidos.

Tecnologías aplicadas en este track

Firebase Hosting: Fue la evidencia pública utilizada para recuperar la obra existente.
React: Convirtió la recuperación en una base editable y mantenible.
Vite: Provee un build moderno para continuar el producto recuperado.

DIRECCIÓN / EXPERIENCIA

Un portfolio que narra

La fotografía se recorre como una historia, no como un inventario.

Necesidad: Shows, retratos y colecciones necesitaban ritmos distintos para que la obra no quedara aplastada en una única grilla.
Decisión de producto: Diseñé hero de siete imágenes, bento para escenas, retratos editoriales y colecciones horizontales con scroll snap.
Resultado: Cada cuerpo de trabajo conserva su escala y el recorrido alterna impacto, detalle y pausa.
Evidencia: La experiencia pública combina reproducción automática y elección manual en hero con tres sistemas de galería diferentes.

Tecnologías aplicadas en este track

React: Coordina selección, reproducción y composición de las distintas colecciones.
CSS Grid: Construye el bento de escenas sin sacrificar comportamiento responsive.
Scroll Snap: Da cadencia táctil a las colecciones horizontales.

INTERACCIÓN / ACCESO

Exploración fotográfica accesible

La ampliación también funciona con teclado y movimiento reducido.

Necesidad: Una galería visual no podía depender exclusivamente del mouse ni imponer animación a todas las personas.
Decisión de producto: Implementé lightbox descriptivo, anterior/siguiente, navegación móvil, Escape, flechas y activación por teclado.
Resultado: La obra se explora con mouse, toque o teclado y respeta la preferencia de movimiento reducido.
Evidencia: Las cards responden a Enter y espacio; el lightbox acepta Escape y flechas; las revelaciones contemplan `prefers-reduced-motion`.

Tecnologías aplicadas en este track

React: Gestiona foco, índice activo y navegación entre fotografías.
Keyboard API: Conecta Escape y flechas con el lightbox sin acciones ocultas.
Reduced Motion: Reduce las transiciones cuando el sistema operativo lo solicita.

ADMIN / CONTENIDO

Portfolio autoadministrable

La fotógrafa puede editar obra sin romper las reglas de cada sección.

Necesidad: Hero, selección, retratos y colecciones no admitían exactamente la misma cantidad ni el mismo tipo de contenido.
Decisión de producto: Incorporé `/admin` con Google, cuentas cerradas, validación por sección y publicación batch en `portfolioItems`.
Resultado: La obra cambia desde un panel propio, manteniendo mínimos, máximos y orden antes de publicar.
Evidencia: El guardado valida el conjunto completo y escribe sus cambios de manera atómica.

Tecnologías aplicadas en este track

Firebase Auth: Restringe el panel a las cuentas autorizadas.
Cloud Firestore: Publica el contenido editable que consume el portfolio.
Write Batch: Evita dejar una edición a mitad de camino cuando cambia el conjunto.

MEDIA / REGLAS

Imágenes administrables sin Storage

La fotografía se optimiza antes de entrar al sistema.

Necesidad: Permitir archivos originales sin control podía volver lenta e inestable la experiencia pública.
Decisión de producto: El navegador limita el lado mayor, convierte a WebP y reduce calidad antes de guardar la Data URL.
Resultado: La administración mantiene imágenes utilizables sin sumar Firebase Storage al producto.
Evidencia: Las reglas validan estructura y tamaño, y reservan la escritura para cuentas autorizadas.

Tecnologías aplicadas en este track

Canvas API: Redimensiona y recomprime cada archivo antes de persistirlo.
WebP: Reduce transferencia conservando una calidad apropiada para portfolio.
Firestore Rules: Valida tamaño, forma y permiso fuera de la interfaz.

CONTACTO / SEO

El portfolio termina en conversación

La consulta sale estructurada y la identidad viaja con el enlace.

Necesidad: Una llamada a la acción genérica no aportaba el contexto necesario para cotizar una producción.
Decisión de producto: El formulario reúne nombre, correo, fecha, tipo y detalle; luego abre WhatsApp con la consulta preparada.
Resultado: La fotógrafa recibe un punto de partida concreto, mientras canonical, shares y datos estructurados presentan su identidad profesional.
Evidencia: El formulario funciona sin fingir un backend y la publicación incluye canonical, Open Graph, Twitter y JSON-LD.

Tecnologías aplicadas en este track

React: Valida y compone los datos de la consulta antes de salir.
WhatsApp: Abre la conversación con la producción ya contextualizada.
JSON-LD: Describe públicamente la identidad profesional para buscadores.

Proyectos y casos de estudio

AVVIVO

Sistema que muestra actividad, conecta actores, aplica reglas y registra eventos.

Producto · UX · Frontend · Backend · Datos · Cloud · Operación

CATÁLOGO AYE

Una fuente externa convertida en una experiencia comercial administrable, compartible y preparada para móvil.

Importación · Catálogo · Checkout humano · Administración · SEO · PWA

RISE DIFUSIÓN

Servicios musicales, obra administrable e identidad pública dentro de una presencia digital independiente.

Producto · Identidad · Copy · Experiencia · Administración · SEO

HEMBRA

Una marca artesanal convertida en tienda, operación administrable y sistema de universos visuales.

Marca · Catálogo · Comercio · Administración · Media · QA

MetalMente Arte

El archivo de un taller, convertido en un catálogo interactivo de herrería artística y restauraciones.

Producto · UX/UI · Frontend · Contenido · Administración · SEO técnico

Cielofinal

La música y la historia de una banda, reunidas en un archivo digital navegable y compartible.

Dirección visual · UX · Frontend · Contenido · Spotify · Administración · SEO