Custom Cursor
Diseño UI/UX

Desarrollo Frontend

Una selección de productos digitales construidos de extremo a extremo, donde la coherencia estética de la interfaz y la eficiencia técnica del código convergen.

Proyectos Seleccionados

AI Product & Dashboard Mayo 2026

Terranova

El problema

Las agencias inmobiliarias reciben cientos de leads diarios fragmentados en diversos canales (WhatsApp, emails, formularios). Clasificarlos manualmente consume tiempo crítico, retrasando la respuesta comercial y perdiendo oportunidades de conversión.

La solución

Desarrollo de un pipeline inteligente que unifica la recepción de leads y automatiza la categorización mediante Inteligencia Artificial (GPT-4o-mini). Clasifica cada contacto según la urgencia y la intención del cliente, exponiendo los datos en un panel interactivo optimizado para agentes inmobiliarios.

Proceso de trabajo e implementación

  1. [01]

    Fase 1 - Branding: Idealización de la identidad de marca, colores corporativos y diseño del logotipo e isotipo.

  2. [02]

    Fase 2 - Descubrimiento: Entrevistas con asesores de venta para identificar cuellos de botella en la recepción.

  3. [03]

    Fase 3 - Diseño UX/UI: Arquitectura de información del panel de control y definición de flujos de notificaciones urgentes.

  4. [04]

    Fase 4 - Desarrollo Back-End: Integración de webhooks de mensajería, scraping de correos y llamadas asíncronas a OpenAI.

  5. [05]

    Fase 5 - Desarrollo Front-End: Implementación del dashboard interactivo con actualización en tiempo real.

  6. [06]

    Fase 6 - Pruebas: Test de exactitud en clasificación de urgencia (consecución de un 94% de acierto analítico).

Aprendizajes clave

“Aprendí a optimizar la latencia en llamadas a APIs de IA y a diseñar una interfaz de dashboard intuitiva capaz de simplificar conjuntos de datos extremadamente densos para usuarios no técnicos.”

Tecnologías clave utilizadas

  • React
  • Next.js
  • PostgreSQL
  • OpenAI API
  • Tailwind CSS
  • Express

Galería de concepto y referencias

Mobile App & Accessibility Febrero 2026

Kromas

El problema

Millones de personas en todo el mundo conviven con dificultades de percepción de color sin un diagnóstico accesible ni herramientas que adapten interfaces digitales a su condición de forma directa.

La solución

Una aplicación móvil fluida e inclusiva que permite ejecutar pruebas estándar de Ishihara y calibrar simulaciones cromáticas en tiempo real en la pantalla del dispositivo móvil, mejorando la comprensión de la accesibilidad digital.

Proceso de trabajo e implementación

  1. [01]

    Fase 1 - Investigación: Estudio médico de los patrones de daltonismo (Protanopía, Deuteranopía, Tritanopía).

  2. [02]

    Fase 2 - Wireframing: Simplificación de la interacción táctil asegurando targets de tamaño adecuado (>48px).

  3. [03]

    Fase 3 - Diseño UI: Alta fidelidad con estricto cumplimiento de relaciones de contraste cromático WCAG 2.2 AAA.

  4. [04]

    Fase 4 - Desarrollo: Uso de React Native para asegurar compatibilidad multiplataforma y manipulación rápida de paletas de color.

Aprendizajes clave

“Comprendí profundamente los estándares WCAG 2.2 aplicados al espacio móvil y la importancia de diseñar interfaces que no dependan exclusivamente del color para transmitir información.”

Tecnologías clave utilizadas

  • React Native
  • Expo
  • JavaScript
  • Tailwind CSS (NativeWind)

Galería de concepto y referencias

Data Visualization & Web App Febrero 2026

Skilltree

El problema

La gran cantidad de recursos de aprendizaje técnico en la web está desorganizada y carece de un camino didáctico claro, lo que provoca fatiga de decisión y pérdida de tiempo en autodidactas.

La solución

Creación de un mapa interactivo de habilidades estructurado como un árbol jerárquico dinámico. Mediante visualizaciones personalizadas en D3.js, el usuario puede explorar ramas de conocimiento, guardar progresos y acceder a recursos curados de calidad.

Proceso de trabajo e implementación

  1. [01]

    Fase 1 - Investigación: Mapeo de currículas estándar para disciplinas como Frontend, Backend y Diseño UX/UI.

  2. [02]

    Fase 2 - Diseño Editorial: Configuración de jerarquías minimalistas y guías de color para representar avance académico.

  3. [03]

    Fase 3 - Desarrollo D3: Codificación de diagramas de nodos reactivos, colisiones de fuerza y transiciones fluidas.

  4. [04]

    Fase 4 - Desarrollo Core: Integración en Astro para velocidad ultrarrápida y SEO óptimo.

Aprendizajes clave

“Consolidé mis habilidades en algoritmos de diseño visual con D3 y aprendí a integrar visualizaciones complejas y dinámicas en estructuras de contenido estático generadas por Astro.”

Tecnologías clave utilizadas

  • Astro
  • D3.js
  • TypeScript
  • Tailwind CSS
  • Git

Galería de concepto y referencias

Education & Visual Tool Enero 2026

Eco Tips

El problema

La información de reciclaje local suele ser engorrosa, aburrida y poco accesible para personas con discapacidades o en dispositivos móviles de baja gama.

La solución

Un portal web interactivo hiperligero que utiliza un diseño editorial impecable y de alto contraste para presentar consejos ecológicos rápidos. Cuenta con un generador dinámico de tarjetas ecológicas mediante conversión HTML-to-PNG para compartir logros en redes sociales de manera instantánea.

Proceso de trabajo e implementación

  1. [01]

    Fase 1 - UX Research: Análisis heurístico de webs gubernamentales de reciclaje para simplificar la toma de decisiones.

  2. [02]

    Fase 2 - Diseño Visual: Tipografía editorial pura, uso extensivo de espacios en blanco, ilustraciones minimalistas.

  3. [03]

    Fase 3 - Desarrollo: Implementación de accesibilidad WCAG 2.2 AA (focos de teclado, lectura por voz semántica, ARIA).

  4. [04]

    Fase 4 - Exportación Gráfica: Programación del Canvas de exportación dinámica de HTML a tarjetas PNG en el cliente.

Aprendizajes clave

“Diseñar con restricciones estrictas de accesibilidad y peso de bundles me enseñó que la belleza editorial y el rendimiento técnico no solo son compatibles, sino que se potencian mutuamente.”

Tecnologías clave utilizadas

  • React
  • Tailwind CSS
  • HTML to PNG (html2canvas)
  • Vite

Galería de concepto y referencias

E-commerce & Custom Experience Diciembre 2025

Orac

El problema

Los sitios web de lecturas místicas y espirituales carecen de una estética sofisticada y contemporánea, apoyándose a menudo en diseños antiguos y sistemas de pago poco fiables.

La solución

Plataforma de comercio electrónico y lecturas digitales con una estética editorial de revista de lujo. Integra un sistema de lectura interactivo con animaciones físicas de cartas fluidas, registro seguro de usuarios y una pasarela de pago minimalista.

Proceso de trabajo e implementación

  1. [01]

    Fase 1 - Investigación: Documentación sobre el Tarot y el significado de las cartas. Determinar el público objetivo para idear un diseño de interfaz adecuado.

  2. [02]

    Fase 2 - Diseño Gráfico: Selección curada de ilustraciones con tema cósmico, diseño de las cartas e ilustraciones complementarias utilizando Adobe Illustrator.

  3. [03]

    Fase 3 - Prototipado en Figma: Definición de una dirección de arte de lujo espiritual (inspirada en marcas de perfumería fina).

  4. [04]

    Fase 4 - Workflow en Stitch: Integración ágil del flujo interactivo de reparto de cartas antes del código.

  5. [05]

    Fase 5 - Desarrollo Front-End: Implementación de animaciones tridimensionales de cartas utilizando React y CSS transform.

  6. [06]

    Fase 6 - Ajustes de Predicciones: redacción de archivos JSON para determinar las predicciones de las cartas del tarot, acorde a sus significados y creación de variables.

  7. [07]

    Fase 7 - Desarrollo en React: Implementación de apis para mostrar los ciclos lunares y un calendario interactivo.

  8. [08]

    Fase 8 - Integración E-commerce: Módulos de pasarela de pago, persistencia de compras y lecturas anteriores en la cuenta.

  9. [09]

    Fase 9 - Interactividad: Creación de un sistema de login para una experiencia más personalizada en la navegación.

Aprendizajes clave

“Afinar la respuesta de animaciones complejas en móviles de gama media me exigió una profunda depuración de ciclos de repintado del navegador y optimización del DOM.”

Tecnologías clave utilizadas

  • React
  • Vite
  • Stitch
  • Tailwind CSS
  • Framer Motion

Galería de concepto y referencias

E-commerce & CMS Platform Octubre 2025

Aventis

El problema

Los portales de reservas de viajes de lujo suelen sobrecargar al usuario con ofertas masivas y banners ruidosos, degradando la sensación de exclusividad y con tiempos de carga pesados.

La solución

Un portal de viajes curados y boutique que prioriza la velocidad, la fotografía de gran formato y la lectura placentera. Construido sobre Astro para lograr una carga inicial instantánea (<1s FCP) y optimización SEO superior mediante metadatos estructurados dinámicos.

Proceso de trabajo e implementación

  1. [01]

    Fase 1 - Benchmark Competitivo: Análisis de la jerarquía visual de agencias de turismo de súper lujo.

  2. [02]

    Fase 2 - Estructura SEO: Planificación de URL semánticas, canonicals, y generación automatizada de sitemaps.

  3. [03]

    Fase 3 - Desarrollo Astro: Arquitectura de islas (Islands Architecture) para inyectar interactividad solo donde es necesario.

  4. [04]

    Fase 4 - Testing: Auditorías de Lighthouse obteniendo puntuación perfecta de 100/100 en SEO y Rendimiento.

Aprendizajes clave

“Dominar la arquitectura de islas de Astro y la optimización de imágenes pesadas a formatos modernos de nueva generación (WebP/AVIF) para mantener un diseño fotográfico masivo sin penalizar el rendimiento.”

Tecnologías clave utilizadas

  • Astro
  • HTML5
  • CSS3
  • JavaScript
  • Tailwind CSS

Galería de concepto y referencias

Desarrollo Web

Aventis Website

Se ha creado un sitio web para Aventis, una selecta agencia de viajes dedicada a curar experiencias turísticas y escapadas personalizadas de lujo en la Península Ibérica.

Todo comienza con un código.

Este sitio utiliza la arquitectura de islas de Astro para maximizar el rendimiento, combinando un CSS global estructurado con la agilidad de Tailwind CSS. La lógica funcional y la gestión de estado de la tienda se han implementado con JavaScript moderno, priorizando una interactividad fluida y un código tan limpio como su interfaz.

Identidad de Marca.

Para la creación de la página y en especial para el establecimiento de los estilos CSS3 respetamos los principios de identidad corporativa, tanto los colores identificativos, como las tipografías apropiadas. Aventis se concibe como una marca de lujo pero con los valores y principios españoles que son la calidez y la hospitalidad.

Resultado final.

Nos encontramos ante una plataforma equilibrada, elegante y profundamente fiel a una identidad de marca que prioriza la estética sin comprometer la función. Este sitio integra una tienda online con un carrito de compras optimizado para una conversión fluida, un blog de autor dedicado a la narrativa de viajes y un sistema de contacto personalizado diseñado para establecer conexiones directas y profesionales.

Componentes Digitales en Astro

Código del cursor personalizado en JavaScript — componente front end de John Vicent

Implementación de Cursor Personalizado

Este fragmento crea un cursor personalizado (una imagen que sigue al ratón) y lo hace moverse de forma suave, con un efecto flotante.

Ver Código
Rediseño del Isotipo Astro

Rediseño del Isotipo Astro

Para que la imagen pueda verse tanto en pantallas claras como en fondos oscuros he rediseñado ligeramente el isotipo de Astro, que es la tecnología con la que actualmente estamos trabajando.

Descargar Imagen

Resultados en Pantalla

El cursor personalizado se integra perfectamente en la interfaz, realizando un efecto visual atractivo y moderno.

Mobile

Kromas

Kromas es una aplicación móvil diseñada para evaluar y explorar la percepción del color humano. Ofrece herramientas clínicas de cribado visual, simulaciones científicas de daltonismo y recursos educativos sobre la visión cromática.