Creare, testare, migliorare

Sviluppo completo della piattaforma web aziendale per GM Microcementos, azienda specializzata nell'applicazione del microcemento. Sito web professionale con 15 pagine ottimizzate, incentrato su prestazioni, SEO ed esperienza utente eccezionale. Include un calcolatore di budget, una galleria di progetti filtrabile, moduli avanzati e un sistema di design minimalista. Architettura modulare con oltre 100 componenti riutilizzabili e ottimizzata per Core Web Vitals.

Piattaforma web per Academia CEJ, accademia specializzata in esami di servizio civile a Malaga. Sito web completamente reattivo con blog, campus virtuale, test di conoscenza, sistema di iscrizione e gestione dei corsi. Sviluppato con Next.js 14, React 18, Tailwind CSS, Framer Motion e Docker.

Sviluppo del sito aziendale di Dimap, un'applicazione moderna basata su Next.js 15, React 19, Redux Toolkit e TailwindCSS, incentrata su prestazioni ottimali e un'esperienza fluida. Il progetto comprende pagine di servizio, blog, sezioni aziendali e moduli di lead tracking, tutti costruiti su un'architettura modulare e con un caricamento altamente ottimizzato grazie a SSG, Lazy Loading e ClientLoader.

DevCrate è una piattaforma per la scoperta di risorse per lo sviluppo (strumenti, librerie, asset, documentazione e sfide). Non vi è mai capitato di aver bisogno di una risorsa per il vostro progetto, o semplicemente di un po' di ispirazione, e di finire a sfogliare una miriade di pagine? Ecco perché ho creato questa piattaforma: per organizzare e non perdere nessuna delle risorse che ho scoperto nel corso degli anni, e per poterle trovare rapidamente senza affidarmi a segnalibri sparsi. Include una ricerca avanzata, filtri per tag e un'area di amministrazione per gestire tutti i contenuti. Permette anche di ricevere suggerimenti dalla comunità per continuare a raccogliere strumenti utili. È costruito con Next.js, React, TypeScript e MongoDB, con autenticazione sicura e un'interfaccia moderna basata su shadcn/ui.

Cmd+kit è un sistema di palette di comandi riutilizzabile per prodotti web, progettato per fornire una ricerca veloce, la navigazione da tastiera e l'esecuzione di azioni da un'interfaccia coerente e accessibile. È progettato per integrarsi facilmente in diversi stack, grazie agli adattatori ufficiali per React, Vue, Preact e Astro, mantenendo la stessa base di comportamento e personalizzazione visiva. Include una documentazione completa e un playground interattivo per la configurazione dei temi, la struttura dei comandi e l'esportazione di codice pronto all'uso. Può essere installato con npm, pnpm, yarn o bun, a seconda del flusso di ogni progetto.

Toolkit CLI + libreria pubblicata in npm che consente di definire i contratti API in un singolo file JSON tipizzato e di generare automaticamente tipi TypeScript condivisi, client Angular, validazione runtime con Zod e controller per NestJS. Elimina l'out-of-sync tra frontend e backend, evita la duplicazione del codice e rileva le modifiche di rottura attraverso gli snapshot dei contratti. Include la generazione di mock per i test e un'architettura modulare basata su più pacchetti riutilizzabili.

Ricreazione dell’hero ufficiale di Apple per gli AirPods Pro 2, focalizzata sul padroneggiare animazioni avanzate con GSAP e ScrollTrigger. Ho implementato una sequenza di 65 frame renderizzati in Canvas sincronizzata con lo scroll, insieme a transizioni fluide, navigazione dinamica ed effetti visivi ispirati al design originale di Apple. Un progetto dedicato a perfezionare animazioni web ad alte prestazioni.

Sviluppo di una PWA per il riconoscimento di oggetti in tempo reale con Angular 19 e TensorFlow.js. Include la configurazione della PWA, l'integrazione di TensorFlow.js, la cattura e l'elaborazione delle immagini in tempo reale, l'ottimizzazione con Web Workers e Lazy Loading, l'archiviazione offline con IndexedDB e la distribuzione su dispositivi mobili.

Progetto di pratica per imparare Three.js e TresJS lavorando con modelli 3D. Applicazione web interattiva che permette di personalizzare una scrivania regolabile in altezza (standing desk) con diverse opzioni di finiture e colori. Include vista 3D con controlli orbitali, modelli 3D di laptop, cuffie e pianta decorativa. Personalizza la finitura della scrivania e seleziona i colori per gli accessori con anteprima in tempo reale. Sviluppato con Vue 3, TresJS (integrazione di Three.js con Vue), TypeScript, Vite e UnoCSS.

Clone della landing page di Grand Theft Auto VI creato esclusivamente per scopi educativi e dimostrazione di competenze di sviluppo web. Sito web moderno con design responsive ottimizzato per tutte le risoluzioni desktop (1024px - 4K). Include menu a discesa con animazioni avanzate usando GSAP, sistema di visualizzazione di personaggi e luoghi con immagini dinamiche, sezione trailer con anteprime interattive e sezione download con card animate. Progetto educativo senza scopo di lucro sviluppato con Astro, Tailwind CSS e JavaScript.

Piccolo progetto pensato per esercitarsi con Strapi come CMS e backend. È sviluppato con React/Next.js, TypeScript e Tailwind CSS. Anche se nella demo vengono usati dati mockati, nel codice è implementata l'integrazione reale con Strapi per consumare e gestire i contenuti.

Progetto di chat in tempo reale con architettura backend orientata alla produzione. Utilizza Node.js + Express e Socket.IO per comunicazione bidirezionale, con due modalita di storage: in-memory (mock) e persistenza opzionale con Supabase. Il frontend (Vite) puo essere eseguito in modalita demo o live, e la soluzione e organizzata a livelli (configurazione, HTTP, realtime, dominio e storage) per facilitare manutenzione, test e scalabilita.

Implementazione HTML5 del classico Super Mario Bros realizzato con Phaser 3.55.2 per scopi didattici, basato sul lavoro di decapapi. Il progetto ricrea l'esperienza del platform 2D con un'architettura modulare per animazioni, blocchi, strutture, entità, controlli del giocatore e HUD, oltre a extra come l'acquisizione di screenshot con html2canvas. Supporta la distribuzione web e lo sviluppo locale con Vite, rendendo semplici test e contributi open source con la licenza MIT.

Paint Win 95' ricrea l'esperienza classica di Microsoft Paint con un'interfaccia rétro in stile Windows 95 e un comportamento web moderno. Include strumenti di disegno e selezione, palette colori primaria/secondaria, cronologia annulla/ripristina, livelli di zoom di lavoro, apertura di immagini locali, esportazione PNG e supporto per input da mouse, tastiera e touch/stilo tramite Pointer Events.

Bookshop View Transitions è una demo React + Vite incentrata sull’implementazione di transizioni fluide tra pagine con l’API View Transitions, incluse animazioni condivise tra elementi (titolo, copertina e navigazione) per ottenere una navigazione visivamente continua.

Clone di TikTok costruito con React, TypeScript e Vite, progettato con approccio mobile-first. Include feed verticale con riproduzione automatica, navigazione Following/For You, azioni interattive (like, commenti, salvataggi, condivisione), pagine Friends/Inbox/Profile e upload con pubblicazione nel feed. Funziona con architettura a servizi (mock predefinito con persistenza in localStorage) e lascia Supabase pronto per una connessione backend reale.

Progetto open source ispirato al classico Breakout, sviluppato con Astro e logica di gioco in TypeScript su Canvas. Include selettore di difficoltà nel canvas, velocità della palla regolabile e progressiva, mattoni con resistenza variabile e stato visivo di danno, controlli da tastiera e riavvio dopo Game Over.

In questo progetto ho lavorato insieme a un team per sviluppare da zero una piattaforma impegnata nella vendita di prodotti di qualità e nel commercio locale. Abbiamo lavorato da zero, dal concetto alla pratica, creando sia il back-end che il front-end. Oltre a diverse tecnologie, abbiamo incorporato integrazioni come jwt per il controllo degli account utente e del login, una dashboard per il controllo di tutti i dati... Funzionalità come la possibilità di accedere con diversi social network, la creazione di account come utente per acquistare prodotti o come azienda per aggiungerli, mappe del luogo più vicino dove trovare il prodotto in questione, tra le altre cose. Per motivi di riservatezza, il codice non viene mostrato.