BProgetti web04 progetti · 04 online

Siti che si caricano, si leggono, si aggiornano.

Ogni progetto parte da un problema concreto e finisce online: qui trovi obiettivo, soluzione, tecnologie e — quando il sito è pubblico — il link per provarlo.

Home page di rivaltasulmincio.it, pagina intera
Home page di rivaltasulmincio.it su tablet
Home page di rivaltasulmincio.it su smartphone, pagina intera

01 / 04AP-26-W012026

Rivalta sul Mincio

Un paese sul Mincio, letto luogo per luogo

Cliente
Progetto indipendente
Settore
Territorio e informazione locale
Obiettivo
Serve a chi abita a Rivalta, a chi ne è originario e a chi ci passa, per sapere cosa c’è in paese, dove si trova e da quale fonte arriva ogni informazione.
Soluzione
Prima delle pagine ho scritto le regole: diciannove documenti di specifica, dal contratto architetturale ai colori. I dati vivono in file JSON separati dall’interfaccia e ogni pagina è HTML statico generato al build, senza framework. L’aspetto è quello di uno strumento da consultare: carta crema a quadretti, pannelli marrone scuro, etichette in monospace, coordinate e date di aggiornamento accanto ai numeri.
  • Vite
  • TypeScript
  • OpenStreetMap
  • Leaflet
  • Web Animations API
  • Vercel
Home page di cascinafontana.xyz, pagina intera
Home page di cascinafontana.xyz su tablet
Home page di cascinafontana.xyz su smartphone, pagina intera

02 / 04AP-26-W022026

Cascina Fontana

Sessantatré biolche tra l’Oglio e il Mincio

Cliente
Progetto di famiglia
Settore
Agricoltura
Obiettivo
Far sapere a chi cerca fieno, legna o fiori in zona cosa produce la cascina e in quale mese, e portarlo a una telefonata.
Soluzione
Ho tenuto solo ciò che è documentato e ho fatto della telefonata l’unica azione del sito: un numero, una PEC, nessuna mappa e nessun modulo. Ogni prodotto ha il suo calendario dei dodici mesi, così la stagione si legge prima di chiamare. Sotto ci sono cinque file HTML veri, senza framework né dipendenze a runtime.
  • Vite
  • HTML
  • CSS
  • JavaScript
  • AVIF/WebP
  • Vercel
Home page di Alberto Pecchini, pagina intera
Home page di Alberto Pecchini su tablet
Home page di Alberto Pecchini su smartphone, pagina intera

03 / 04AP-26-W032026

Alberto Pecchini

Il sito che stai guardando

Cliente
Progetto personale
Settore
Studio professionale
Obiettivo
Presentare lavori tecnici, web e grafici con un linguaggio unico, veloce da caricare e facile da aggiornare: aggiungere un progetto deve voler dire scrivere dei dati, non del markup.
Soluzione
Prendere in prestito il linguaggio delle tavole: squadrature, cartigli, quote, codici progetto. Le illustrazioni — piante, sezioni, nuvole di punti — sono SVG generati in fase di build dallo stesso codice che impagina il sito.
  • Vite
  • JavaScript
  • CSS
  • SVG
  • HTML statico
Home page di dariodonelli.vercel.app, pagina intera
Home page di dariodonelli.vercel.app su tablet
Home page di dariodonelli.vercel.app su smartphone, pagina intera

04 / 04AP-26-W042026

Ing. Dario Donelli

Un sito composto come la targa dello studio

Cliente
Ing. Dario Donelli
Settore
Ingegneria e progettazione edilizia
Obiettivo
Far capire in pochi secondi, a chi deve costruire, ristrutturare o mettere in sicurezza un edificio nel mantovano, chi è lo studio, cosa fa e come contattarlo.
Soluzione
Ho preso come riferimento la targa sull’ingresso dello studio: incisione nera su metallo chiaro, filetti sottili, nessun colore. Da lì vengono il bianco e nero, il nome in maiuscolo e la «D» del logo che torna come punto elenco, marcatore e cursore. Al posto delle referenze ho messo dati verificabili: l’iscrizione all’albo, la sede, il territorio su una carta.
  • React
  • Vite
  • CSS scroll-driven
  • SVG
  • OpenStreetMap
  • Vercel