Ciao mondo: come ho costruito questo sito

Come tutto è cominciato#

Nel 2019 decisi di creare il mio primo sito personale. Non avevo in mente nulla di particolarmente complesso: volevo semplicemente avere un posto dove presentare il mio CV online. Non era ancora il momento di mostrare progetti o di costruire un portfolio tecnico, ma piuttosto di avere uno spazio che mi rappresentasse.

Da sempre ho una forte attrazione per i generi fantasy e cyberpunk, e in generale per tutto ciò che mescola futuro e immaginazione. Film come Ritorno al Futuro, The Matrix e Ready Player One hanno avuto un impatto enorme sulla mia visione creativa, così come opere cyberpunk come Alita e Ghost in the Shell. Anche i videogiochi che hanno segnato la mia crescita — Chrono Trigger, Final Fantasy VII e World of Warcraft — hanno contribuito a formare il mio immaginario.

A queste influenze se ne sono aggiunte altre nel tempo. Stranger Things, in particolare, mi affascina per un’idea che oggi ritrovo molto nel modo in cui sto costruendo questo portfolio: un luogo apparentemente normale può nascondere un altro mondo, vicino al nostro eppure completamente diverso. Hawkins e il Sottosopra occupano quasi lo stesso spazio, ma basta attraversare il confine giusto perché tutto cambi. È un concetto che oggi ritorna nei portali, negli Easter Egg e nei diversi livelli di realtà che sto introducendo nella città 3D.

Per quella prima versione, però, non volevo strafare. L’unico dettaglio estetico e tecnico che mi aveva davvero preso era lo scrolling parallax. Mi affascinava l’idea di dare movimento e profondità a un semplice sito di presentazione e, in un certo senso, fu proprio quella la scintilla creativa: tutto il resto del sito sarebbe nato intorno a quell’effetto.

La prima versione#

La prima versione del mio sito l’ho realizzata con WordPress. Era una scelta naturale: avevo già avuto modo di usarlo in altri progetti personali e, non avendo ancora deciso se trasformare il sito in un vero e proprio blog, mi sembrava una soluzione sensata e soprattutto future proof. Mi garantiva la flessibilità di partire semplice, ma anche la possibilità di espandere facilmente in futuro.

Al di là della struttura base, la parte che più mi divertì fu costruire una piccola API interna che mostrava curiosità in ambito tecnologico e informatico, basata sulla timeline dei pionieri del settore. Ogni volta che si accedeva al sito compariva in intro una curiosità generata in modo randomico, con un dettaglio temporale calcolato rispetto ad oggi. Una di queste, ad esempio, raccontava di quando Tommy Flowers sviluppò un sistema di valvole termoioniche ridondanti, rendendo più affidabili i primi computer. È un’idea che ancora oggi mi stuzzica, tanto che un giorno mi piacerebbe realizzare un’API dedicata e renderla pubblica per chi, come me, è curioso di queste chicche tecnologiche.

Dal lato più estetico, rimasi affascinato dalla libreria particles.js, che usai nella homepage. Quelle particelle in movimento erano un modo per dare respiro visivo e, al tempo stesso, rappresentare me stesso: attratto da tutto ciò che può essere decifrato in 0 e 1, dal mondo elettronico e informatico che mi ha sempre affascinato.

Lo stile di quella prima versione vive ancora nell’edizione legacy del sito: legacy.angelo-dagostino.com.

Il salto verso nuovi stack#

Col tempo mi sono reso conto che la mia prima versione in WordPress era diventata il mio personale monolite. Proprio come nel lavoro, dove stiamo passando da una gigantesca piattaforma in PHP nativo a tanti microservizi containerizzati, anche nel mio spazio personale avevo bisogno di qualcosa di più flessibile e moderno.

La scintilla è arrivata girovagando su GitHub, dove mi sono imbattuto nel portfolio di Hamish Williams, che mi ha ispirato moltissimo, e nel sito di Wawa Sensei, che mi ha aperto un mondo di possibilità. Non potevo restare ancorato a un concetto di sviluppo che ormai sentivo limitante, sia a livello personale che professionale.

La prima vera migrazione è stata mentale: de-PHPizzarmi. Ho cominciato a studiare i principi di React, capire la logica dei componenti e da lì approdare a Remix, lo stesso framework verso cui si era evoluto anche il progetto di Hamish.

Ho colto l’occasione per imparare tecnologie nuove:

• Tailwind CSS, dopo anni di CSS puro e Bootstrap
• React e Three.js per il 3D
• Remix, come framework full-stack
• Storybook, per costruire e testare componenti UI
• Prisma, come ORM per il database

Ciò che mi rende orgoglioso di questo progetto è la mia capacità di prendere spunti da fonti diverse e rielaborarli in qualcosa di unico e personale. Un po’ come fece Blizzard con Warcraft: Orcs & Humans, partendo dall’ispirazione di Dune II, ma trasformandolo in qualcosa di completamente nuovo. Il mio approccio è simile: non invento dal nulla, ma ricompongo, sintetizzo e porto tutto a un livello che sento mio.

Non tutto rose e fiori#

La parte più complicata di questo percorso è stata senza dubbio la gestione dell’intero processo di sviluppo. Il progetto originale di Hamish si fermava a React 18 e Remix v2, ma nel frattempo il framework è evoluto in React Router v8 (post ufficiale) e React stesso è passato alla versione 19. Migrare non è stato un passaggio banale: portare tutto in avanti ha significato affrontare molti incidenti di percorso, e ognuno ha richiesto tempo e pazienza per essere risolto.

Non sono mancati momenti di frustrazione, soprattutto quando ho deciso di spingermi oltre l’implementazione originale. Oltre al lavoro già splendido di Hamish, volevo portare il sito su un altro livello, aggiungendo una vera e propria Esperienza 3D. L’influenza del progetto ambizioso di Wawa Sensei, con il suo avatar animato in React Three Fiber, mi stuzzicava troppo: volevo assolutamente provare a integrare qualcosa di simile.

Poi ci sono stati i problemi pratici, come il componente ScrollControls del pacchetto @react-three/drei. Lì mi sono scontrato con un bug che mi ha costretto a mettere mano al codice e a proporre persino un piccolo contributo sulla pagina ufficiale del pacchetto. Non è stata una passeggiata, ma è stata anche un’occasione per restituire qualcosa alla community.

Un altro ostacolo grosso è stato il passaggio dal sistema di articoli in formato MDX (come nel progetto originale) a un approccio basato su database ORM, tenendo conto anche del fattore multilingua (italiano e inglese). È un terreno che mi piacerebbe esplorare ancora di più in futuro, magari integrando un sistema di traduzione automatica intelligente che mi aiuti a coprire anche le lingue che non conosco.

Uno sguardo indietro, e avanti#

Guardando indietro, questa esperienza mi ha insegnato che pazienza e perseveranza sono sempre ben spese quando si vogliono raggiungere dei risultati concreti. Ogni problema risolto, ogni bug sistemato e ogni migrazione portata a termine è stata una piccola vittoria che, nel tempo, ha costruito la mia crescita personale e professionale.

Quello che mi piace di più della versione attuale è la libertà: posso scrivere e gestire l’intero flusso di articoli del blog direttamente dal sito, senza appoggiarmi a un CMS esterno. Ho costruito un sistema su misura, cucito sulle mie esigenze, e questo lo rende unico. Con WordPress ero abituato a cercare plugin e soluzioni già pronte; qui invece mi sono trovato a imparare tecnologie nuove per creare qualcosa che fosse davvero mio e che raccontasse chi sono a chi mi incontra attraverso uno schermo.

Per me, avere un sito personale non è solo un biglietto da visita: è un playground, un laboratorio dove sperimento nuove tecnologie che, una volta padroneggiate, porto anche nel mio lavoro quotidiano. È uno spazio che cresce insieme a me.

Tra le cose che ho voluto ereditare dal progetto di Hamish Williams, c’è anche l’idea di lasciare un piccolo omaggio a Ghost in the Shell nella mia pagina 404. Una sottile connessione con un manga (successivamente adattato anche in un film d'animazione) che ha ispirato entrambi.

Guardando avanti, mi piacerebbe integrare un sistema di AI per migliorare la gestione del blog e semplificare processi come la traduzione automatica. Il progetto è pubblico su GitHub, così come lo erano quelli che mi hanno ispirato, perché credo molto nel valore della condivisione. Allo stesso tempo, mi intriga anche l’idea di collegarmi a API creative, come quelle dei Pokémon o di altre fonti disponibili su PublicAPI, e trovare modi originali per integrarle nel sito. Non ho ancora deciso come o perché, ma è proprio questo il bello: lasciare spazio all’immaginazione e alla sperimentazione.

Come dice Morpheus in The Matrix:

«Ti sto offrendo solo la verità, ricordalo. Niente di più.»

Il mio sito, oggi, è proprio questo: un luogo dove posso raccontare la mia verità attraverso il codice, e dove ogni nuova iterazione è un passo avanti nel mio viaggio.