Todos los proyectos

Creando, probando, mejorando

GM Microcementos Website

GM Microcementos Website

Desarrollo completo de plataforma web corporativa para GM Microcementos, empresa especializada en aplicación de microcemento. Website profesional con 15 páginas optimizadas, enfocado en performance, SEO y experiencia de usuario excepcional. Incluye calculadora de presupuestos, galería de proyectos filtrable, formularios avanzados y sistema de diseño minimalista. Arquitectura modular con 100+ componentes reutilizables y optimización para Core Web Vitals.

Academia CEJ Website

Academia CEJ Website

Plataforma web para Academia CEJ, academia especializada en oposiciones de justicia en Málaga. Website completamente responsive con blog, campus virtual, prueba de conocimientos, sistema de matriculación y gestión de cursos. Desarrollado con Next.js 14, React 18, Tailwind CSS, Framer Motion y Docker.

DIMAP Website

DIMAP Website

Desarrollo del sitio corporativo de Dimap, una aplicación moderna basada en Next.js 15, React 19, Redux Toolkit y TailwindCSS, enfocada en ofrecer un rendimiento óptimo y una experiencia fluida. El proyecto incluye páginas de servicios, blog, apartados corporativos y formularios con seguimiento de leads, todo construido sobre una arquitectura modular y una carga altamente optimizada mediante SSG, Lazy Loading y ClientLoader.

Agrooe Cashback

Agrooe Cashback

En este proyecto trabajé junto a un equipo para desarrollar desde cero una plataforma comprometida con la venta de productos de calidad y el comercio local. Trabajamos desde cero con el concepto hasta la práctica creando tanto el back-end como el front-end. A parte de diferentes tecnologías se incorporaron integraciones como jwt para el control de cuentas de usuario e inicio de sesión, un dashboard para el control de todos los datos... Funcionalidades como poder iniciar sesión con diferentes redes sociales, creación de cuenta como usuario para comprar productos o como empresa para añadirlos, mapas del lugar más cercano donde se podría encontrar el producto en cuestión, entre otras cosas. Por motivos de confidencialidad no se muestra el código.

DevCrate

DevCrate

DevCrate es una plataforma para descubrir recursos de desarrollo (herramientas, librerías, assets, documentación y retos). ¿No te ha pasado que necesitabas un recurso para tu proyecto, o simplemente inspiración, y terminabas navegando por una infinidad de páginas? Por eso creé esta plataforma: para organizar y no perder ninguno de los recursos que he descubierto a lo largo de los años, y poder encontrarlos rápidamente sin depender de marcadores dispersos. Incluye búsqueda avanzada, filtros por etiquetas y una zona admin para gestionar todo el contenido. También permite sugerencias de la comunidad para seguir recopilando herramientas útiles. Está construida con Next.js, React, TypeScript y MongoDB, con autenticación segura y una interfaz moderna basada en shadcn/ui.

Clon AirPods Pro 2 Website

Clon AirPods Pro 2 Website

Recreación del hero oficial de Apple para los AirPods Pro 2, centrada en dominar animaciones avanzadas con GSAP y ScrollTrigger. Implementé una secuencia de 65 imágenes renderizadas en Canvas sincronizada con el scroll, junto a transiciones suaves, navegación dinámica y efectos visuales inspirados en la experiencia original de Apple. Un proyecto orientado a perfeccionar animación web de alto rendimiento con un enfoque fiel y fluido.

PWA de detección de objetos con Angular

PWA de detección de objetos con Angular

tensorflow
ionicons-v5_logos

Desarrollo de una PWA de detección de objetos en tiempo real con Angular 19 y TensorFlow.js. Incluye configuración de PWA, integración de TensorFlow.js para detección de objetos, captura y procesamiento de imágenes en vivo, optimización con Web Workers y Lazy Loading, almacenamiento offline con IndexedDB y despliegue en dispositivos móviles.

Clon Landing GTA VI

Clon Landing GTA VI

Landing page clon de Grand Theft Auto VI creado exclusivamente para fines educativos y demostración de habilidades de desarrollo web. Recomendable visualización de la demo en resolución desktop (4K). Incluye menú desplegable con animaciones avanzadas usando GSAP, sistema de visualización de personajes y lugares con imágenes dinámicas, sección de tráilers con previews interactivos y sección de descargas con cards animadas. Proyecto sin ánimo de lucro desarrollado con Astro, Tailwind CSS y JavaScript.

Configurador de Escritorio 3D

Configurador de Escritorio 3D

Proyecto de práctica para aprender Three.js y TresJS trabajando con modelos 3D. Aplicación web interactiva que permite personalizar un escritorio de pie (standing desk) con diferentes opciones de acabados y colores. Incluye vista 3D con controles de órbita, modelos 3D de laptop, auriculares y planta decorativa. Personaliza el acabado de la mesa y selecciona colores para accesorios con previsualización en tiempo real. Desarrollado con Vue 3, TresJS (integración de Three.js con Vue), TypeScript, Vite y UnoCSS.

Strapi Games Store

Strapi Games Store

Proyecto pequeño orientado a practicar con Strapi como CMS y backend. Está desarrollado con React/Next.js, TypeScript y Tailwind CSS. Aunque la demo funciona con datos mockeados, en el código está implementada la integración real con Strapi para consumir y gestionar el contenido.

Realtime Chat

Realtime Chat

Proyecto de chat en tiempo real con arquitectura backend orientada a producción. Implementa Node.js + Express y Socket.IO para comunicación bidireccional, con dos modos de almacenamiento: en memoria (mock) y persistencia opcional con Supabase. El frontend (Vite) puede ejecutarse en modo demo o live, y la solución está estructurada por capas (configuración, HTTP, realtime, dominio y storage) para facilitar mantenimiento, pruebas y escalabilidad.

Super Mario Bros '85

Super Mario Bros '85

PhaserIcon

Implementación en HTML5 del clásico Super Mario Bros con Phaser 3.55.2, orientada a fines educativos y basada en el trabajo de decapapi. El proyecto replica la experiencia de plataformas 2D con lógica modular para animaciones, bloques, estructuras, entidades, control del jugador y HUD, además de utilidades como captura de pantalla con html2canvas. Incluye despliegue web y ejecución local con Vite, facilitando pruebas y contribuciones bajo licencia MIT.

Paint Windows 95'

Paint Windows 95'

Paint Win 95' recrea la experiencia clásica de Microsoft Paint con una interfaz retro estilo Windows 95 y comportamiento moderno para web. Incluye herramientas de dibujo y selección, paleta de color primario/secundario, historial de deshacer/rehacer, niveles de zoom de trabajo, apertura de imágenes locales, exportación a PNG y soporte para mouse, teclado y entrada táctil/lápiz mediante Pointer Events.

Bookshop View Transitions Demo

Bookshop View Transitions Demo

Bookshop View Transitions es una demo en React + Vite centrada en implementar transiciones fluidas entre páginas con la API View Transitions, incluyendo animaciones compartidas entre elementos (título, portada y navegación) para conseguir una navegación visualmente continua.

Clon de Tiktok

Clon de Tiktok

Clon de TikTok construido con React, TypeScript y Vite, diseñado con enfoque mobile-first. Incluye feed vertical con reproducción automática, navegación Following/For You, acciones interactivas (like, comentarios, guardados, compartir), páginas Friends/Inbox/Profile y upload con publicación en feed. Funciona con arquitectura por servicios (mock por defecto con persistencia en localStorage) y deja Supabase preparado para conexión real.

Atari Breakout Game

Atari Breakout Game

Proyecto open source inspirado en el clásico Breakout, desarrollado con Astro y lógica de juego en TypeScript sobre Canvas. Incluye selector de dificultad en el propio canvas, velocidad de bola ajustable y progresiva, ladrillos con resistencia variable y estado visual de daño, controles por teclado y reinicio tras Game Over.

Conóceme un poco más

¡Hola! Soy Fran Desarrollador de Software | Front-End & Full Stack

Tengo experiencia trabajando con una amplia variedad de tecnologías web. Aun así, mi especialidad y mi principal enfoque es en el desarrollo Front-End.

Desde muy joven he estado explorando y experimentando con ordenadores y dispositivos móviles, indagando tanto en su funcionamiento a nivel de software como de hardware. A lo largo de los años he aprendido mucho "cacharreando" y resolviendo problemas por mí mismo, experiencia que ha reforzado mi curiosidad y mis habilidades técnicas.