All projects

Creating, testing, improving

GM Microcementos Website

GM Microcementos Website

Complete development of corporate web platform for GM Microcementos, a company specialized in microcement application. Professional website with 15 optimized pages, focused on performance, SEO and exceptional user experience. Includes budget calculator, filterable project gallery, advanced forms and minimalist design system. Modular architecture with 100+ reusable components and Core Web Vitals optimization.

Academia CEJ Website

Academia CEJ Website

Web platform for Academia CEJ, academy specialized in justice competitive exams in Malaga. Fully responsive website with blog, virtual campus, knowledge testing system, enrollment system and course management. Built with Next.js 14, React 18, Tailwind CSS, Framer Motion and Docker.

DIMAP Website

DIMAP Website

Development of Dimap’s corporate website, a modern application built with Next.js 15, React 19, Redux Toolkit, and TailwindCSS, designed to offer optimal performance and a smooth user experience. The project includes service pages, a blog, corporate sections, and lead-tracking forms, all built on a modular architecture with highly optimized loading through SSG, Lazy Loading, and ClientLoader.

Agrooe Cashback

Agrooe Cashback

In this project, I worked with a team to build from scratch a platform focused on selling quality products and supporting local commerce. We worked from the concept to the implementation, creating both the back-end and front-end. In addition to various technologies, integrations were added, such as JWT for user account control and login, a dashboard to manage all the data... Features included the ability to log in with different social networks, account creation as a user to purchase products or as a company to add them, maps showing the nearest locations where the product could be found, among other things. Due to confidentiality reasons, the code is not displayed.

DevCrate

DevCrate

DevCrate is a platform for discovering development resources (tools, libraries, assets, documentation, and challenges). Has this ever happened to you: you needed a resource for your project, or just inspiration, and ended up browsing an endless number of pages? That's why I built this platform: to organize and keep all the resources I've discovered over the years, and find them quickly without relying on scattered bookmarks. It includes advanced search, tag filters, and an admin area to manage all content. It also supports community suggestions so I can keep collecting useful tools. It's built with Next.js, React, TypeScript, and MongoDB, with secure authentication and a modern interface based on shadcn/ui.

AirPods Pro 2 Website Clone

AirPods Pro 2 Website Clone

Recreation of Apple’s official hero for the AirPods Pro 2, focused on mastering advanced animations with GSAP and ScrollTrigger. I implemented a 65-frame Canvas-rendered sequence synchronized with scroll, along with smooth transitions, dynamic navigation, and visual effects inspired by Apple’s original experience. A project aimed at refining high-performance web animation with a faithful and fluid approach.

Object Detection PWA with Angular

Object Detection PWA with Angular

tensorflow
ionicons-v5_logos

Development of a real-time object detection PWA built with Angular 19 and TensorFlow.js. Includes PWA setup, TensorFlow.js integration for object detection, live image capture and processing, optimization using Web Workers and Lazy Loading, offline storage with IndexedDB, and deployment to mobile devices.

GTA VI Landing Page Clone

GTA VI Landing Page Clone

Grand Theft Auto VI landing page clone created exclusively for educational purposes and web development skills demonstration. Modern website with responsive design optimized for all desktop resolutions (1024px - 4K). Features dropdown menu with advanced animations using GSAP, dynamic character and location showcase system with images, interactive trailer section with previews, and animated download cards section. Non-profit educational project built with Astro, Tailwind CSS and JavaScript.

3D Desk Configurator

3D Desk Configurator

Practice project to learn Three.js and TresJS working with 3D models. Interactive web application that allows customization of a standing desk with different finish and color options. Features 3D view with orbit controls, 3D models of laptop, headphones and decorative plant. Customize desk finish and select colors for accessories with real-time preview. Built with Vue 3, TresJS (Three.js integration with Vue), TypeScript, Vite and UnoCSS.

Strapi Games Store

Strapi Games Store

Small project focused on practicing with Strapi as CMS and backend. It is built with React/Next.js, TypeScript, and Tailwind CSS. Although the demo uses mocked data, the code includes a real Strapi integration to fetch and manage content.

Realtime Chat

Realtime Chat

Real-time chat project with a production-oriented backend architecture. It uses Node.js + Express and Socket.IO for bidirectional communication, with two storage modes: in-memory (mock) and optional Supabase persistence. The frontend (Vite) can run in demo or live mode, and the solution is layered (configuration, HTTP, realtime, domain, and storage) to improve maintainability, testing, and scalability.

Super Mario Bros '85

Super Mario Bros '85

PhaserIcon

HTML5 implementation of the classic Super Mario Bros built with Phaser 3.55.2 for educational purposes, based on decapapi's work. The project recreates the 2D platformer experience with a modular architecture for animations, blocks, structures, entities, player controls, and HUD, plus extras such as screenshot capture with html2canvas. It supports web deployment and local development with Vite, making testing and open-source contributions under the MIT license straightforward.

Paint Windows 95'

Paint Windows 95'

Paint Win 95' recreates the classic Microsoft Paint experience with a retro Windows 95-style interface and modern web behavior. It includes drawing and selection tools, a primary/secondary color palette, undo/redo history, working zoom levels, local image import, PNG export, and support for mouse, keyboard, and touch/stylus input through Pointer Events.

Bookshop View Transitions Demo

Bookshop View Transitions Demo

Bookshop View Transitions is a React + Vite demo focused on implementing smooth page-to-page transitions with the View Transitions API, including shared animations between elements (title, cover, and navigation) to achieve visually continuous navigation.

Tiktok clone

Tiktok clone

TikTok clone built with React, TypeScript, and Vite, designed with a mobile-first approach. It includes a vertical feed with autoplay, Following/For You navigation, interactive actions (like, comments, saves, share), Friends/Inbox/Profile pages, and upload with feed publishing. It uses a service-based architecture (mock by default with localStorage persistence) and has Supabase ready for real backend connection.

Atari Breakout Game

Atari Breakout Game

Open-source project inspired by the classic Breakout, built with Astro and game logic in TypeScript using Canvas. It includes an in-canvas difficulty selector, adjustable and progressive ball speed, variable brick durability with damaged states, keyboard controls, and restart flow after Game Over.

Get to know me a little more

Hi! I'm Fran Software Developer | Front-End & Full Stack

I have experience working with a wide variety of web technologies. However, my specialty and main focus is on Front-End development.

Since I was very young, I have been exploring and experimenting with computers and mobile devices, investigating their operation at both software and hardware levels. Over the years, I have learned a lot by "tinkering" and solving problems on my own, an experience that has strengthened my curiosity and technical skills.