Alberto Pecchini
Il sito che stai guardando
01 — Overview
Volevo un sito che mostrasse le tre cose che faccio usando tutte e tre: la precisione del disegno tecnico, il mestiere del frontend e la cura della grafica.
Un portfolio statico senza framework: pagine generate dai dati, tavole tecniche disegnate dal codice, nessun tracciamento.
Servizi forniti
- 01Identità visiva
- 02Web design
- 03Sviluppo frontend
- 04Illustrazioni tecniche generate
- 05SEO tecnica
02 — 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.
03 — Problema
Tre mestieri in un sito rischiano di sembrare tre siti. E un portfolio tecnico, senza fotografie patinate, rischia di sembrare vuoto.
04 — Strategia
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.
Palette
05 — Sviluppo
- 01
Sistema
Token di design per colori, tipografia, spazi e movimento; tre famiglie di caratteri ospitate localmente.
- 02
Generatore
Un plugin Vite trasforma dati e template in pagine HTML statiche, sitemap e dati strutturati.
- 03
Interazioni
Filtri reali, lightbox, confronto prima/dopo, transizioni di pagina: JavaScript scritto a mano, senza librerie.
06 — Risultato
Pagine statiche leggere, accessibili da tastiera, senza cookie di profilazione. E un portfolio che si aggiorna modificando un solo file.
- 0Framework a runtime
- 0Cookie di tracciamento
- 1File per aggiungere un progetto
07 — Galleria
Seleziona un’immagine per aprirla a tutto schermo · frecce per scorrere · Esc per chiudere
08 — iPhone
La home di Alberto Pecchini su iPhone, pagina intera: dal saluto con la pianta del piano terra fino al piè di pagina, sotto l’isola dinamica e la barra di Safari.
Passa sopra lo schermo o raggiungilo con Tab: la pagina scorre fino in fondo · sul telefono tocca per avviare, ritocca per tornare in cima
09 — Tecnologie
Stack e strumenti
Tipologie
10 — Dati progetto
- Cliente
- Progetto personale
- Settore
- Studio professionale
- Località
- Mantova
- Anno
- 2026
- Tipologia
- Sito web · UI/UX · Sviluppo frontend · Identità visiva
- Servizi
- Identità visiva · Web design · Sviluppo frontend · Illustrazioni tecniche generate · SEO tecnica
- Tecnologie
- Vite · JavaScript · CSS · SVG · HTML statico
Hai un lavoro simile?
Parliamone