Tous les projets

Créer, tester, améliorer

Site web de GM Microcementos

Site web de GM Microcementos

Développement complet d'une plateforme web d'entreprise pour GM Microcementos, une société spécialisée dans l'application du microciment. Site web professionnel avec 15 pages optimisées, axé sur la performance, le référencement 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 conception minimaliste. Architecture modulaire avec plus de 100 composants réutilisables et optimisée pour Core Web Vitals.

Site de l'Académie CEJ

Site de l'Académie CEJ

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

Site web du DIMAP

Site web du DIMAP

Développement du site corporate de Dimap, une application moderne basée sur Next.js 15, React 19, Redux Toolkit et TailwindCSS, axée sur une performance optimale et une expérience fluide. Le projet comprend des pages de services, un blog, des sections d'entreprise et des formulaires de suivi des prospects, tous construits sur une architecture modulaire et un chargement hautement optimisé en utilisant SSG, Lazy Loading et ClientLoader.

DevCrate

DevCrate

DevCrate est une plateforme de découverte de ressources de développement (outils, bibliothèques, actifs, documentation et défis). N'avez-vous jamais eu besoin d'une ressource pour votre projet, ou simplement d'un peu d'inspiration, et n'avez-vous jamais fini par naviguer à travers une myriade de pages ? C'est pourquoi j'ai créé cette plateforme : pour organiser et ne perdre aucune des ressources que j'ai découvertes au fil des ans, et pour pouvoir les retrouver rapidement sans dépendre de signets éparpillés. Elle comprend une recherche avancée, des filtres d'étiquettes et une zone d'administration pour gérer tout le contenu. Il accepte également les suggestions de la communauté pour continuer à rassembler des outils utiles. Il est construit avec Next.js, React, TypeScript et MongoDB, avec une authentification sécurisée et une interface moderne basée sur shadcn/ui.

Cmd+kit

Cmd+kit

Cmd+kit est un système de palette de commandes réutilisable pour les produits web, conçu pour fournir une recherche rapide, une navigation au clavier et l'exécution d'actions à partir d'une interface cohérente et accessible. Il est conçu pour s'intégrer facilement dans différentes piles avec des adaptateurs officiels pour React, Vue, Preact et Astro, tout en conservant la même base de comportement et de personnalisation visuelle. Il comprend une documentation complète et un terrain de jeu interactif pour configurer les thèmes, la structure des commandes et exporter du code prêt à l'emploi. Peut être installé avec npm, pnpm, yarn ou bun en fonction du flux de chaque projet.

Contract-kit - Générateur de contrats API

Contract-kit - Générateur de contrats API

Zod SVG Icon

Boîte à outils CLI + bibliothèque publiée dans npm qui permet de définir des contrats d'API dans un seul fichier JSON typé et de générer automatiquement des types TypeScript partagés, un client Angular, une validation d'exécution avec Zod et des contrôleurs pour NestJS. Élimine la désynchronisation entre le frontend et le backend, évite le code dupliqué et détecte les changements de rupture grâce à des instantanés de contrat. Inclut la génération de mock pour les tests et une architecture modulaire basée sur de multiples packages réutilisables.

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.

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.

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.

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.

Cashback Agrooe

Cashback Agrooe

Dans ce projet, j'ai travaillé avec une équipe pour développer à partir de zéro une plateforme dédiée à la vente de produits de qualité et 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, nous avons incorporé des intégrations telles que jwt pour le contrôle des comptes d'utilisateurs et des connexions, un tableau de bord pour le contrôle de toutes les données... Des fonctionnalités telles que la possibilité de se connecter avec différents réseaux sociaux, la création d'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 en question peut être trouvé, entre autres choses. Pour des raisons de confidentialité, le code n'est pas affiché.

Apprenez à mieux me connaître

Bonjour ! Je m'appelleFran Développeur Full Stack | Développeur logiciel

J'ai de l'expérience dans l'utilisation d'un large éventail de technologies web. Cela dit, ma spécialité et mon domaine de prédilection sont le développement front-end.

Dès mon plus jeune âge, je me suis intéressé aux ordinateurs et aux appareils mobiles, que j'ai explorés et testés, en m'attachant à comprendre leur fonctionnement tant au niveau logiciel que matériel. Au fil des ans, j'ai beaucoup appris en bricolant et en résolvant des problèmes par moi-même, une expérience qui a renforcé ma curiosité et mes compétences techniques.