Il mio sito, un laboratorio di sviluppo

Sito personale · Laboratorio in Nuxt

Il mio sito, un laboratorio di sviluppo

Il mio sito era fermo da quindici anni. L'ho rifatto da zero in Nuxt 4 come un laboratorio: scena 3D, tema chiaro e scuro, animazioni, due lingue, blog, assistente AI, pubblicazione automatica, velocità e sicurezza. Ciò che so fare, in un solo progetto.

Strumenti usati

  • Nuxt 4
  • Tailwind CSS v4
  • three.js
  • Nuxt Content
  • i18n
  • Claude API
  • Netlify

Per quindici anni il mio sito è rimasto com'era: una grafica ormai superata e contenuti abbandonati, perché il tempo andava sempre ai progetti dei clienti. Alla fine ho deciso di ripartire da zero e di usare i tempi morti per studiare e sperimentare. Il risultato è un progetto di cui vado fiero: più che un sito di presentazione è un ambiente di prova, dove chi vuole capire cosa so fare lo vede in funzione, senza dover sfogliare un portfolio.

Architettura e tecnologie

Una base moderna: Nuxt 4, Tailwind e contenuti in Markdown

Il sito è costruito con Nuxt 4 e Tailwind CSS v4, con rendering lato server. Servizi, casi studio e articoli sono file Markdown gestiti con Nuxt Content e validati da uno schema, in italiano e in inglese con percorsi localizzati. Sitemap, feed RSS e paginazione del blog si generano da soli: aggiungere un contenuto significa scrivere un file, non toccare il codice.

Scena 3D, tema chiaro e scuro, animazioni

Lo sfondo è una rete di nodi in WebGL con three.js, caricata solo lato client. Ogni sezione della pagina ha una sua posa, fatta di posizione, rotazione e forma della rete, e la scena passa dall'una all'altra seguendo lo scorrimento. L'interruttore del tema cambia i token colore di Tailwind in un unico punto e anche la scena 3D si adatta, con un metodo di fusione diverso sul fondo chiaro. Le animazioni di comparsa usano un solo osservatore e rispettano chi chiede al sistema di ridurre il movimento.

SEO tecnica e assistente AI

Ogni pagina ha titoli, meta, canonical e hreflang, con dati strutturati JSON-LD per il profilo professionale, i breadcrumb, le FAQ e gli articoli, e ogni pagina punta a una sola ricerca principale, così le pagine non si fanno concorrenza. La chat risponde tramite l'API di Claude, ma solo in base a una base di conoscenza scritta a mano: ciò che non c'è, non lo inventa. La chiave resta sul server e le richieste hanno un limite.

Pubblicazione automatica, velocità e sicurezza

Ogni modifica vive su un ramo e diventa una pull request su GitHub; Netlify genera un'anteprima per controllarla e pubblica in automatico al merge. Scena 3D e librerie pesanti si caricano solo quando servono, le miniature usano immagini ridotte e i font sono ottimizzati. Le chiavi non arrivano mai al browser e il modulo contatti ha una protezione antispam.

Il risultato

Un sito fermo da quindici anni è diventato uno strumento che aggiorno davvero, e un portfolio che si può provare: le tecnologie e le soluzioni che propongo ai clienti, qui si vedono al lavoro.

Ringrazio Marzia Bianchi per l'architettura dell'informazione: l'organizzazione delle pagine e dei contenuti è nata dal confronto con lei.

// Contatti

Un progetto, un problema o solo un dubbio?

Agenzia, attività o professionista: scegli come preferisci parlarmi. Rispondo entro un giorno lavorativo, senza impegno.