Filaoro

Contexto

Una tienda online de sellos de España y del mundo: piezas únicas y colecciones completas, con un gramo de oro de regalo por cada tramo de compra.

La filatelia tiene un problema de entrada: quien no colecciona no sabe qué está mirando. La web tenía que vender a coleccionistas y, a la vez, explicar a todos los demás por qué un sello vale lo que vale.

Enfoque

• Divulgación antes que catálogo. Qué es la filatelia, la temática por arte, deportes, fauna, flora, geografía e historia, la serie Europa y los sellos famosos del mundo. Cada página enseña algo y termina llevando a piezas concretas de la tienda.
• Un interruptor para el canal de venta. Toda la interfaz depende de una sola constante: con ella apagada, cada pieza se reserva por WhatsApp; encendida, aparecen carrito y pago. Las piezas que se entregan en mano siguen siempre por WhatsApp.
• El build se niega a publicar contenido a medias. Si encuentra precios provisionales, marcadores pendientes, dominios de ejemplo o un robots.txt que bloquea, falla. Además deja en health.json el commit que está sirviendo.
• Animación que nunca deja el texto a medio ver. Las entradas usan clip-path y transform, no opacidad: un titular semitransparente da un contraste de 1,24:1 durante la animación, y así no pasa. Sin smooth scroll, por decisión: el público es mayor y el scroll tiene que comportarse como siempre.
• Pensada para buscadores y asistentes de IA. Rastreadores de IA admitidos de forma explícita, llms.txt generado desde el catálogo, un catalogo.json público, preguntas frecuentes en datos estructurados e imagen social propia por página.

Trabajo realizado

• Arquitectura Astro estática con colecciones de contenido para piezas y temas
• Sección de divulgación filatélica completa, con enlaces cruzados a la tienda
• Tienda con filtros, ficha por pieza, carrito y pago con pasarela
• Interruptor único entre reserva por WhatsApp y compra online
• Guardas de build contra contenido provisional y health.json con el commit
• Sistema de diseño con Playfair Display e Inter, y una regla de dos tonos por color para cumplir contraste AA
• Formulario de contacto, cabeceras de seguridad y textos legales
• Tests unitarios y end-to-end de accesibilidad, filtros y regresión visual

Resultado

En producción sobre su dominio desde septiembre de 2026. Una tienda de nicho que también funciona como puerta de entrada a la afición.

Nota sobre el trabajo

Proyecto desarrollado en Agencia Xpandex, donde llevé el ciclo completo: diseño, desarrollo, rendimiento, accesibilidad, SEO técnico y despliegue. Después del lanzamiento, otra persona del equipo rehízo la portada y activó el pago online sobre la tienda ya construida.