Una fonte per i dati
Titolo, anno e copertina dell'edizione precedente vengono risolti dal catalogo. Evita di mantenerli a mano in più pagine.
// freelance, from Piacenza
Hello, human.
Sono Riccardo
Interfacce sopra.
API, dati e automazioni sotto.
Sono un Full Stack Developer freelance con partita IVA. Lavoro con Node.js, API e automazioni. In Wedoit ho contribuito a una piattaforma corsi MERN e React Native, dal frontend al supporto su backend e database.
01const developer = {
02 name: "Riccardo Ferri",
03 role: "Full Stack Developer",
04 focus: [
05 "backend",
06 "web interfaces",
07 "automation"
08 ],
09 stack: ["JS/TS", "Python"],
10 lookingFor: "progetti + un buon team"
11}; Nuovi incarichi e opportunità in teamRemoto · Ibrido · In sede
Node.jsExpressAstroSvelteReactMongoDBGit+ curiosità
// sito-astro · 2025 → 2026
Un sito eventi.
Più di una homepage.
Ho creato il nuovo sito CESO nel 2025 su comitatoeventisportivioltrepo.it, integrando il vecchio dominio. Nel 2026: migliorie funzionali e proposta di redesign grafico e parzialmente architetturale. Un caso concreto: aggiungere un’edizione usando catalogo, componenti condivisi e controlli sui riferimenti.
Percorso e caso completo ↗
Confronta le due versioni online.
Esplora il sito attuale e la proposta di redesign del 2026. I link si aprono in nuove schede.
- before
Il vecchio sito su eventisportivioltrepo.it era gestito da un'altra azienda.
- 2025 / create
Nuovo sito e integrazione del dominio precedente.
- 2026 / iterate
Funzionalità, interfaccia e revisione di parte dell'architettura.
Architettura, validazioni e scelte tecniche
function composeEventPage()
01 / INPUT
Catalogo + contenuti
Dati evento, testi IT/EN e configurazione editoriale condivisa.
02 / BUILD
Astro + validazioni
Layout, componenti riutilizzabili e controllo dei riferimenti.
03 / OUTPUT
HTML + interattività
Pagine statiche e componenti Svelte dove serve interazione.
Errori prima della pagina
Riferimenti a edizioni sconosciute, autoreferenziali e date non valide fermano la generazione con un errore esplicito.
Fallback intenzionali
Se manca la copertina, resta una scheda testuale. Guide per i contenuti e test dedicati accompagnano lo sviluppo.
Apri il diff visivo del 2026
Schermate reali del 25 settembre 2026, entrambe del mio sito; possono differire dalle versioni online aggiornate, raggiungibili dai link sopra. La ricostruzione condivideva alcuni asset. Questo confronto non rappresenta il vecchio sito dell'altra azienda né risultati misurati di traffico o conversione. Contesto e archivio storico ↗
// backend & automazioni
Collegare servizi.
Organizzare dati.
Due progetti, due approcci: eventi e API sul server, interazione con le pagine nel browser.
01 / backend & integrations
webhook-server.js
Eventi in ingresso, operazioni sui dati e servizi esterni. Un server Express per collegare Notion, Google Calendar e notifiche email, con attività pianificate tramite cron.
- 01 / RECEIVEWebhook
Ricezione evento e risposta HTTP 202.
- 02 / PROCESSCoda in memoria
Le funzioni vengono eseguite in sequenza.
- 03 / INTEGRATEServizi esterni
Aggiornamenti su Notion, calendario e email.
Scelte tecniche e limiti
Separare i compiti
Route, servizi e logica delle integrazioni sono moduli distinti. I job pianificati usano la stessa coda delle attività.
Leggere oltre la prima pagina
Il servizio Notion percorre i risultati con un cursore, raccogliendo anche i record delle pagine successive.
Il compromesso della coda
I task falliti possono essere rimessi in coda dal pannello amministrativo. La coda è in memoria: non offre persistenza al riavvio né garanzie di consegna durevole.
02 / personal automation
universita_helpbot.py
Un progetto personale di automazione del browser: acquisizione e organizzazione di domande e risposte, salvataggio in JSON e creazione di flashcard attraverso interfacce web.
Pagine web→Selenium + Python→JSON / flashcard
Cosa c'è nel progetto
Interazione con le pagine
WebDriver, selettori DOM e attese esplicite per leggere contenuti e interagire con le interfacce.
Dati riutilizzabili
Raccolta e raggruppamento delle informazioni in file JSON, poi riutilizzate nei flussi dedicati alle flashcard.
Dipendenza dall'interfaccia
Un'automazione del browser segue la struttura delle pagine. Modifiche a selettori e flussi richiedono manutenzione: è uno dei limiti del progetto.
// webhook-server · dal codice al comportamento
Un evento.
Un flusso da seguire.
Un record cambia, il server accetta l’evento e il lavoro entra in coda. Questa simulazione rende visibili attesa, completamento e recupero di un errore. Puoi inviare più eventi e farli avanzare uno alla volta.
{
"event": "meeting.updated",
"recordId": "demo-record",
"title": "Call di progetto"
}Ogni invio genera un task distinto. Nessuna richiesta viene inviata a Notion o Google Calendar.
- In attesa
- 0
- Completati
- 0
- Falliti
- 0
// Nessun aggiornamento completato.Un task fallito resta separato. La risposta 202 conferma la ricezione, non il successo dell’elaborazione.
La demo interattiva richiede JavaScript. Il flusso e le scelte tecniche sono descritti anche qui sotto.
Registro degli eventi
- In attesa di eventi.
Scelte, limiti e codice della demo
Cosa riprende dal progetto
Risposta 202 delle route specifiche, esecuzione sequenziale e possibilità di rimettere manualmente i task falliti in fondo alla coda. Il sorgente separa route, coda e servizi esterni.
Il limite che conta
La coda vive in memoria: al riavvio lo stato si perde. Il nuovo tentativo riesegue il task e non garantisce assenza di duplicati. Persistenza e idempotenza sarebbero evoluzioni da progettare.
Come leggere questa prova
È una simulazione autonoma scritta per il portfolio, con massimo sei eventi. Il servizio fittizio torna disponibile al secondo tentativo. Il codice del backend privato non viene eseguito né distribuito.
Leggi il codice della demo ↓// il lato sperimentale
Codice per
curiosità.
Giochi, mondi 3D e interazioni in rete.
Dodici progetti di apprendimento, dalle basi dei tutorial alle mie rielaborazioni. E due piccoli pezzi da provare qui.
Live fragment / Three.js
Dal mio portfolio 3D.
Una superficie che si muove e cambia colore al passaggio del puntatore. Ripresa da my-portfolio, adattata a questo piccolo spazio.
Si anima solo quando la attivi.
01Giochi & interazioneMovimento, collisioni e sistemi di gioco6 progetti
In evidenza / JavaScript + Canvas
Fight.
fight · due giocatori, tastiera o touch
Un picchiaduro nato dal tutorial di Chris Courses, che ho poi continuato a migliorare.
- In questa versione
- Doppio salto, salto sulle pareti, attrito e reazione ai colpi.
- Dentro il codice
- Stati dei combattenti, sprite animati e collisioni degli attacchi.
Round da 60 secondi · 2 giocatori locali
Base di Chris Courses ↗
JavaScript / Canvas / GSAP
Stanze e passaggi
js_multiroom_game
Tre stanze, collisioni, porte animate e transizioni tra livelli. Alla base del tutorial ho aggiunto il movimento automatico verso la porta, coordinando input, posizione del personaggio e animazione d'ingresso.
Tutorial di riferimento ↗
JavaScript / Canvas / Tiled
Tower defense
js_towerdefense_game
Percorsi a waypoint, torri posizionabili, selezione dei bersagli e proiettili. Ondate, monete e vite collegano il ciclo di gioco all'interfaccia: uno studio di sistemi che interagiscono in tempo reale.
Tutorial di riferimento ↗
JavaScript / Canvas / Tiled
Avventura a tile
js_pokemon
Prototipo 2D con mappa a tile, sprite animati, collisioni e combattimenti a turni. Studio del ciclo di gioco e delle transizioni tra scene.
Tutorial di Chris Courses ↗JavaScript / Canvas / Camera
js_vertical_platformer
Platformer con gravità, collisioni, piattaforme e camera che segue il personaggio sui due assi. Un prototipo per studiare il rapporto tra coordinate del mondo, movimento e inquadratura.
Tutorial ↗Three.js / JavaScript
js_threejs_game
Movimento da tastiera, gravità, collisioni e comparsa progressiva dei nemici. Un prototipo per esplorare il ciclo di aggiornamento di un gioco 3D.
Tutorial ↗02Grafica 3D & shaderGeometria, luce e interazioni con il mouse5 progetti
Three.js / GLSL / GSAP
Globo interattivo
three-globe
Globo texturizzato, alone atmosferico con shader GLSL, stelle e rotazione che segue il mouse.
Tutorial di riferimento ↗
Three.js / Audio / Shaders
Morphing visualizer
morphing-visualizer-starter_n13
Deformazione procedurale, colori animati e post-processing. Nel codice, l'analisi audio alimenta gli shader e l'effetto glitch.
Tutorial di Visionary 3D ↗Three.js / Raycaster / GSAP
my-portfolio
Primo esperimento di portfolio 3D: una superficie triangolata animata, colori dei vertici che reagiscono al mouse e parametri regolabili con dat.GUI. Un laboratorio di geometria e interazione.
Tutorial ↗GLSL / Uniforms / Varyings
intro_to_GLSL
Esperimenti con vertex e fragment shader, tempo passato tramite uniform e deformazioni a onde. Il sorgente contiene anche prove personali delle formule.
Tutorial ↗Three.js / OrbitControls / GSAP
three_crash_course_n12
Scena, camera e luci; controllo orbitale, gestione del ridimensionamento e variazione del colore con il mouse.
Tutorial ↗03Multiplayer & reteStato condiviso, sincronizzazione e latenza1 progetto
Node.js / Express / Socket.IO
multiplayer_game
Stato dei giocatori gestito dal server, sincronizzazione dei movimenti, interpolazione sul client, proiettili e classifica. Un esercizio per studiare il rapporto tra rete e gameplay.
Tutorial ↗Input del client→Stato sul server→Interpolazione sul client
Schermate reali delle copie locali; nella preview i font remoti sono sostituiti da font locali. Le basi sono attribuite nei link, le rielaborazioni personali nelle schede. Gli asset dei tutorial appartengono ai rispettivi autori.
// un edge case vale più di tre buzzword
E se manca qualcosa?
Un esempio interattivo delle regole per l'edizione precedente: riferimenti validi, contenuti incompleti e dati da correggere. Dati dimostrativi, esecuzione nel browser.
{
"slug": "evento-2026",
"lastEdition": "evento-2025",
"previousCover": "cover.jpg"
}OK / RIFERIMENTO VALIDO
L'edizione precedente c'è.
Il catalogo risolve titolo, anno e copertina. La pagina può essere generata.
→ scheda con titolo + anno + copertinaUn altro modo
di conoscermi.
Prova help, whoami o coffee.
La shell vive soltanto in questa pagina.
Benvenuto nel lato developer.
Digita help per la lista dei comandi. Tab e Invio funzionano come ti aspetti.
↑ ↓ cronologia · Tab completa
// niente ticket per dire ciao
Apriamo una
conversazione.
Freelance con partita IVA, disponibile per nuovi incarichi.
Interessato a entrare in un team: da remoto, in modalità ibrida o in sede.