El frontend de Codepply está desarrollado con React 19, Vite y Tailwind CSS 4, lo que permite una experiencia rápida, fluida y optimizada desde el primer render. Está diseñado para facilitar el encuentro entre desarrolladores y recruiters a través de un sistema de registro, login, gestión de perfiles, publicación de ofertas y aplicación a proyectos en tiempo real. Utiliza herramientas modernas como: React Hook Form para formularios eficientes y accesibles Framer Motion para animaciones suaves que mejoran la experiencia del usuario React Router 7 para una navegación dinámica y clara Socket.IO para funciones en tiempo real como notificaciones e indicadores de presencia @stepperize/react para flujos multi-paso como el registro y la aplicación a ofertas El diseño es completamente responsive y tiene en cuenta diferentes roles de usuario (developers y recruiters), mostrando vistas personalizadas según permisos. Además, se han implementado filtros dinámicos, carga condicional y compresión de imágenes en cliente para mejorar el rendimiento.

Newsletter Sign Up JS FM es una solución al desafío de Frontend Mentor, donde desarrollé un formulario de suscripción por email con validación personalizada, feedback visual y diseño adaptativo. El objetivo fue recrear una experiencia realista, centrada en accesibilidad y buena práctica de código. 🧩 Características destacadas Validación con JavaScript vanilla, incluyendo regex para asegurarse del formato correcto del email y manejo de campos vacíos con mensajes claros . Accesibilidad (A11y): estructura semántica con elementos <form>, <label>, role="alert" y aria-live="assertive" que mejora la experiencia para lectores de pantalla GitHub. Seguridad en manipulación del DOM: creación dinámica de elementos mediante document.createElement y append en lugar de innerHTML, previniendo posibles vulnerabilidades XSS . Uso de variables CSS y nesting para mantener estilos limpios y manejables: :root para definir colores y estructura jerárquica en hojas de estilo moderna. Flujo UX cuidado: tras enviar correctamente el formulario, se ajusta el foco al botón de cierre y se muestra mensaje con el email ingresado, cumpliendo con mejores prácticas de experiencia de usuario.

pt-suscription-frontend-2025 es una aplicación web desarrollada en React + TypeScript como solución a una prueba técnica. Implementa una experiencia de suscripción en cuatro pasos con validaciones, diseño responsive y navegación fluida entre pantallas, sin usar frameworks de CSS externos. 🔧 Tecnologías y enfoque React 19 + TypeScript: tipado estricto para mayor seguridad y mantenibilidad del código. Vite: para un entorno de desarrollo rápido y optimizado. React Hook Form: manejo avanzado de formularios con validaciones personalizadas. React Router: navegación fluida entre pasos. Diseño responsive desde cero, sin librerías externas de UI. ✨ Funcionalidad destacada Formulario en 4 pasos: email → código de verificación → plan → confirmación. Validaciones por paso, control de errores y feedback inmediato. Persistencia temporal de datos del formulario entre pasos. Animaciones sutiles para mejorar la experiencia del usuario. Preparado para consumo de APIs REST locales. 🎯 Qué demuestra este proyecto Capacidad de construir flujos multi-paso realistas sin dependencias pesadas. Uso profesional de TypeScript en entornos de producción. Atención al detalle, UX y estructura del código. Ideal para pruebas técnicas, MVPs o flujos de onboarding modernos.

Desarrollé mi portafolio web personal como proyecto integral que demuestra mi transición del sector retail (14+ años de experiencia) al desarrollo web full-stack tras completar el Máster en Nuclio Digital School. 🚀 TECNOLOGÍAS IMPLEMENTADAS: • Frontend: Next.js 15 con App Router, React 19, TypeScript 5.8 • Styling: Tailwind CSS 4.1 + DaisyUI para diseño responsivo • Backend: Next.js API Routes con integración Resend para formularios • Optimización: SEO, Core Web Vitals, lazy loading y compresión de imágenes 💼 LOGROS DESTACADOS: • Lighthouse Score 95+ en performance, SEO y accesibilidad • Diseño mobile-first completamente responsivo • Formulario de contacto funcional con validación server-side • Arquitectura escalable con componentes reutilizables • Tiempo de carga optimizado (<2s First Contentful Paint) 🎯 VALOR DIFERENCIAL: Este proyecto refleja mi capacidad para combinar experiencia previa en atención al cliente con nuevas competencias técnicas, creando soluciones web que priorizan la experiencia del usuario y la calidad del código. El resultado es una plataforma profesional que no solo showcasea proyectos técnicos, sino que demuestra atención al detalle, organización y enfoque en resultados - habilidades transferidas de mi trayectoria en retail.

Proyecto realizado como primer reto del Máster en Desarrollo Full-Stack en Nuclio Digital School. El objetivo fue replicar de forma fiel el diseño y la estructura visual de la página de Spotify Premium, enfocándome en la maquetación responsive y la experiencia de usuario. 🔹 Tecnologías utilizadas: HTML5 con etiquetado semántico CSS3 (Mobile First, Grid, Flexbox, Media Queries) Librerías de iconos: FontAwesome y Google Material Icons 🔹 Características principales: Diseño mobile-first, optimizado para distintos tamaños de pantalla. Landing page responsive con hero, tabla comparativa de planes, tarjetas interactivas y sección de preguntas frecuentes. Uso de efectos hover y transiciones para mejorar la interacción. Inclusión de footer flexible con enlaces, redes sociales y sección legal. 🔹 Aprendizajes clave: Organización del proyecto en ramas (html y css) y control de versiones. Implementación de buenas prácticas en maquetación (reset.css de Erik Meyer, box-sizing: border-box). Construcción de componentes visuales reutilizables y adaptativos. Refuerzo de metodologías responsive y enfoque en accesibilidad y legibilidad.

Proyecto desarrollado como primera aplicación web propia, creada para optimizar el trabajo en mi anterior empleo en una tienda de compra y venta de electrónica. Se trata de una calculadora de precios que permite obtener de forma rápida tanto el precio de compra como la venta recomendada de equipos de sobremesa, agilizando la toma de decisiones y reduciendo errores manuales. 🔹 Tecnologías utilizadas: HTML5, CSS3 y JavaScript Despliegue en Vercel 🔹 Características principales: Cálculo automático de precio de compra y precio de venta recomendado. Interfaz sencilla y usable para empleados no técnicos. Implementación de validaciones básicas para evitar errores de introducción de datos. Accesible desde navegador en cualquier dispositivo. 🔹 Impacto real: Herramienta utilizada por mi equipo en tienda, ahorrando tiempo en cálculos manuales y estandarizando precios. Primer proyecto propio con aplicación práctica directa en un entorno de trabajo.