Tous les projets

Créer, tester, améliorer

GM Microcementos Website

GM Microcementos Website

Développement complet d'une plateforme web d'entreprise pour GM Microcementos, une société spécialisée dans l'application de microciment. Site web professionnel avec 15 pages optimisées, axé sur les performances, le SEO et une expérience utilisateur exceptionnelle. Inclut un calculateur de budget, une galerie de projets filtrable, des formulaires avancés et un système de design minimaliste. Architecture modulaire avec 100+ composants réutilisables et optimisation Core Web Vitals.

Academia CEJ Website

Academia CEJ Website

Plateforme web pour Academia CEJ, académie spécialisée dans les concours de justice à Malaga. Site web entièrement responsive avec blog, campus virtuel, système de test de connaissances, système d'inscription et gestion de cours. Développé avec Next.js 14, React 18, Tailwind CSS, Framer Motion et Docker.

Site Web DIMAP

Site Web DIMAP

Développement du site corporate de Dimap, une application moderne basée sur Next.js 15, React 19, Redux Toolkit et TailwindCSS, conçue pour offrir des performances optimales et une expérience fluide. Le projet inclut des pages de services, un blog, des sections corporate et des formulaires avec suivi de leads, le tout construit sur une architecture modulaire avec un chargement hautement optimisé via SSG, Lazy Loading et ClientLoader.

Agrooe Cashback

Agrooe Cashback

Dans ce projet, j'ai travaillé avec une équipe pour créer à partir de zéro une plateforme axée sur la vente de produits de qualité et le soutien au commerce local. Nous avons travaillé depuis le concept jusqu'à la pratique en créant à la fois le back-end et le front-end. En plus de différentes technologies, des intégrations comme jwt pour le contrôle des comptes utilisateurs et la connexion ont été incorporées, un tableau de bord pour le contrôle de toutes les données... Des fonctionnalités comme pouvoir se connecter avec différents réseaux sociaux, créer un compte en tant qu'utilisateur pour acheter des produits ou en tant qu'entreprise pour les ajouter, des cartes de l'endroit le plus proche où le produit pourrait être trouvé, entre autres. Pour des raisons de confidentialité, le code n'est pas affiché.

DevCrate

DevCrate

DevCrate est une plateforme pour découvrir des ressources de développement (outils, bibliothèques, assets, documentation et défis). Cela vous est-il déjà arrivé d’avoir besoin d’une ressource pour votre projet, ou simplement d’inspiration, et de finir par naviguer sur une infinité de pages ? C’est pour cela que j’ai créé cette plateforme : organiser et ne perdre aucune des ressources que j’ai découvertes au fil des années, et pouvoir les retrouver rapidement sans dépendre de favoris dispersés. Elle inclut une recherche avancée, des filtres par étiquettes et une zone d’administration pour gérer tout le contenu. Elle permet aussi les suggestions de la communauté afin de continuer à rassembler des outils utiles. Elle est construite avec Next.js, React, TypeScript et MongoDB, avec une authentification sécurisée et une interface moderne basée sur shadcn/ui.

Clone du site AirPods Pro 2

Clone du site AirPods Pro 2

Recréation du hero officiel d’Apple pour les AirPods Pro 2, axée sur la maîtrise d’animations avancées avec GSAP et ScrollTrigger. J’ai implémenté une séquence de 65 images rendues en Canvas synchronisée avec le défilement, ainsi que des transitions fluides, une navigation dynamique et des effets visuels inspirés de l’expérience originale d’Apple. Un projet destiné à perfectionner l’animation web haute performance.

PWA de détection d’objets avec Angular

PWA de détection d’objets avec Angular

tensorflow
ionicons-v5_logos

Développement d’une PWA de détection d’objets en temps réel avec Angular 19 et TensorFlow.js. Comprend la configuration de la PWA, l’intégration de TensorFlow.js pour la détection d’objets, la capture et le traitement d’images en direct, l’optimisation avec Web Workers et Lazy Loading, le stockage hors ligne avec IndexedDB et le déploiement sur appareils mobiles.

Clone Landing Page GTA VI

Clone Landing Page GTA VI

Clone de la landing page de Grand Theft Auto VI créé exclusivement à des fins éducatives et de démonstration de compétences en développement web. Site web moderne avec design responsive optimisé pour toutes les résolutions desktop (1024px - 4K). Comprend un menu déroulant avec animations avancées utilisant GSAP, système de présentation de personnages et lieux avec images dynamiques, section de bandes-annonces avec aperçus interactifs et section de téléchargements avec cartes animées. Projet éducatif à but non lucratif développé avec Astro, Tailwind CSS et JavaScript.

Configurateur de Bureau 3D

Configurateur de Bureau 3D

Projet de pratique pour apprendre Three.js et TresJS en travaillant avec des modèles 3D. Application web interactive permettant de personnaliser un bureau debout (standing desk) avec différentes options de finitions et couleurs. Comprend une vue 3D avec contrôles orbitaux, modèles 3D d'ordinateur portable, casque audio et plante décorative. Personnalisez la finition du bureau et sélectionnez les couleurs des accessoires avec prévisualisation en temps réel. Développé avec Vue 3, TresJS (intégration de Three.js avec Vue), TypeScript, Vite et UnoCSS.

Strapi Games Store

Strapi Games Store

Petit projet orienté vers la pratique de Strapi comme CMS et backend. Il est développé avec React/Next.js, TypeScript et Tailwind CSS. Bien que la démo utilise des données simulées, le code inclut l'intégration réelle avec Strapi pour consommer et gérer le contenu.

Chat en temps réel

Chat en temps réel

Projet de chat en temps reel avec une architecture backend orientee production. Il utilise Node.js + Express et Socket.IO pour une communication bidirectionnelle, avec deux modes de stockage : en memoire (mock) et persistance optionnelle avec Supabase. Le frontend (Vite) peut fonctionner en mode demo ou live, et la solution est structuree en couches (configuration, HTTP, realtime, domaine et stockage) pour faciliter la maintenance, les tests et l evolutivite.

Super Mario Bros 85'

Super Mario Bros 85'

PhaserIcon

Implémentation HTML5 du classique Super Mario Bros construit avec Phaser 3.55.2 à des fins éducatives, basée sur le travail de decapapi. Le projet recrée l'expérience du jeu de plateforme 2D avec une architecture modulaire pour les animations, les blocs, les structures, les entités, les commandes du joueur et le HUD, ainsi que des extras tels que la capture d'écran avec html2canvas. Il prend en charge le déploiement Web et le développement local avec Vite, ce qui simplifie les tests et les contributions open source sous la licence MIT.

Paint Windows 95'

Paint Windows 95'

Paint Win 95' recrée l'expérience classique de Microsoft Paint avec une interface rétro inspirée de Windows 95 et un comportement web moderne. L'application inclut des outils de dessin et de sélection, une palette de couleurs primaire/secondaire, l'historique annuler/rétablir, des niveaux de zoom de travail, l'ouverture d'images locales, l'export PNG et la prise en charge de la souris, du clavier et des entrées tactiles/stylet via Pointer Events.

Bookshop View Transitions Demo

Bookshop View Transitions Demo

Bookshop View Transitions est une démo React + Vite axée sur la mise en place de transitions fluides entre les pages avec l’API View Transitions, incluant des animations partagées entre des éléments (titre, couverture et navigation) pour obtenir une navigation visuellement continue.

Clone de TikTok

Clone de TikTok

Clone de TikTok construit avec React, TypeScript et Vite, conçu avec une approche mobile-first. Il inclut un feed vertical avec lecture automatique, une navigation Following/For You, des actions interactives (like, commentaires, enregistrements, partage), des pages Friends/Inbox/Profile et un upload avec publication dans le feed. Il fonctionne avec une architecture par services (mock par défaut avec persistance via localStorage) et laisse Supabase prêt pour une connexion backend réelle.

Atari Breakout Game

Atari Breakout Game

Projet open source inspiré du classique Breakout, développé avec Astro et une logique de jeu en TypeScript via Canvas. Il inclut un sélecteur de difficulté dans le canvas, une vitesse de balle ajustable et progressive, des briques à résistance variable avec états visuels de dégâts, des contrôles clavier et un redémarrage après Game Over.

Apprenez à me connaître un peu plus

Bonjour ! Je suis Fran Développeur de Logiciels | Front-End & Full Stack

J'ai de l'expérience avec une grande variété de technologies web. Cependant, ma spécialité et mon objectif principal est le développement Front-End.

Depuis mon plus jeune âge, j'explore et expérimente avec des ordinateurs et des appareils mobiles, en étudiant leur fonctionnement au niveau logiciel et matériel. Au fil des ans, j'ai beaucoup appris en "bidouillant" et en résolvant des problèmes par moi-même, une expérience qui a renforcé ma curiosité et mes compétences techniques.