Come ho costruito il mio primo portfolio digitale in pochi giorni

Un sito semplice che fa il suo mestiere vale più di un concept perfetto nel cassetto. Avevo bisogno di un curriculum online credibile, in inglese, capace di raccontare chi sono attraverso il lavoro vero. Tre obiettivi chiari: posizionarmi con professionalità, mostrare progetti verificabili, rendere semplice il contatto.

In questo articolo racconto come ho progettato e pubblicato pietrodefinis.com usando un approccio leggero, veloce e pragmatico. Niente framework complessi, niente backend, solo HTML, CSS, un po' di JavaScript e l'intelligenza artificiale come copilota strategico.

So bene che ci sono tantissime alternative gratuite e siti che ti permettono di fare lo stesso in maniera facile ma sono soluzioni chiuse e io volevo qualcosa di “mio”. La libertà di avere il tuo codice è qualcosa diversa dal solo portfolio finale.

Partire dai vincoli per trovare la strada

L’idea era semplice: pubblicare entro una settimana un sito che sostenesse candidature e collaborazioni professionali. I vincoli sono stati importanti: tempo limitato, budget zero (a parte il dominio che avevo già comprato tempo fa), necessità di una SEO pulita e di un PDF della resume stampabile direttamente dalla pagina.

Questi vincoli hanno guidato ogni scelta. Sito statico per velocità e affidabilità. Tre pagine principali per non disperdere l'attenzione. Nessun framework pesante per mantenere il controllo totale sul codice e sulle performance. Massima velocità di iterazione per testare, correggere e pubblicare senza attese.

Lo stack: semplice, affidabile, gratuito

Ho scelto HTML e CSS puri con un tocco di JavaScript per le interazioni. Controllo diretto, leggerezza, performance alte. Per l'ambiente di sviluppo, VS Code con Live Server: ogni modifica visibile in tempo reale nel browser. Linguaggi che conosco pur non essendo un coder o un esperto.

GitHub Pages ospita il sito con HTTPS automatico e deploy immediato dal branch principale. Cloudflare gestisce DNS e dominio. Tutto gratuito, tutto solido.

L'AI è entrata nel flusso come copilota: ChatGPT per strategie di comunicazione, architettura dell'informazione e copy iniziali. Codex per lavorare sulla base del codice il più velocemente possibile. Gemini per il supporto puntuale per risolvere dettagli CSS e JavaScript senza perdere ore su Stack Overflow.

Architettura dell'informazione: tre pagine, un racconto

La struttura del sito è essenziale e funzionale:

Home / About

Una hero section che posiziona subito il mio lavoro. Ultimi risultati tangibili, servizi principali (comunicazione della scienza e dell'innovazione, ricerca sul campo), un mini about che dà contesto senza appesantire.

Projects

Il cuore narrativo del sito. Card orizzontali con immagine, titolo, anno, sintesi e tag. Due livelli di profondità: una lettura rapida espandibile direttamente in pagina e pagine di dettaglio dedicate per i progetti più complessi. Questo permette a chi scorre veloce di farsi un'idea, e a chi vuole approfondire di trovare dati, risultati, gallery fotografiche. Il tutto grazie a un po’ di vanilla JS per dare quel sapore speziato da sito professionale.

Resume

Layout a due colonne su pc, card responsible su mobile. Sezione profilo, esperienze descritte con bullet action-to-impact, competenze, formazione, contatti. Tutto pensato per essere stampato come PDF con un click.

Contact

Footer con una citazione, email e social. Niente telefono per evitare spam.

Ho usato dei file parziali riutilizzabili per navbar e footer, iniettati via JavaScript. Modifico una volta sola e il cambiamento si propaga su tutte le pagine.

Design system leggero ma coerente

Tipografia sobria, spazi generosi, sfondo chiaro e testo scuro per mantenere coerenza con il mio tono professionale. Ho mappato tre colori di accento ai miei pilastri di lavoro: giallo per innovation, rosso per communication, teal per field research.

I componenti ricorrenti sono pochi ma riconoscibili: badge categoria, chip per i tag, bottoni con gradienti coerenti. Ho curato l'accessibilità con focus visibili, attributi ARIA nei toggle e tap target comodi anche su mobile.

La sezione progetti è il cuore dell'esperienza utente. Volevo schede immediate da scorrere rapidamente, ma anche pagine di approfondimento solide per chi vuole capire davvero come lavoro.

La lista dei progetti viene renderizzata in projects.html. Ogni card mostra le informazioni essenziali e offre due azioni: "Read more" che espande la card in loco con una transizione fluida, e "Open project" che apre la pagina di dettaglio dedicata.

Ho anche implementato i deep link: puoi condividere un URL che porta direttamente a un progetto specifico già espanso nella lista.

Navbar responsive e mobile drawer

Il menu è coerente su desktop e mobile. Su mobile, l'hamburger apre un drawer a schermo intero con overlay. I dettagli hanno fatto la differenza: altezza viewport corretta, overlay leggero, z-index espliciti, trasformazioni solo sul contenitore del drawer. Niente glitch di scorrimento, niente animazioni invasive.

Ma la cosa che per un professionista sarà banale ma per me no, è stato iniziare ad utilizzare parziali poi renderizzati in ogni pagina per navbar e footer così da semplificare le operazioni di modifiche. Fino al mio ultimo sito scrivevo e ricopiavo il tutto per ogni pagina. Da pazzi!

Deploy su GitHub Pages: da locale a online in minuti

Il flusso è immediato. Repository su GitHub, branch principale come sorgente per Pages, file CNAME con il dominio personalizzato nella root.

Sul lato DNS, Cloudflare gestisce i record A che puntano a GitHub Pages e il CNAME per il sottodominio www. Proxy disattivato durante la verifica, Enforce HTTPS attivo dopo l'emissione del certificato.

Quando qualcosa non funziona, due comandi bastano per capire dove cercare: nslookup per verificare la risoluzione DNS, curl per controllare la risposta HTTP.

Ogni pagina ha un title specifico e una meta description concreta. Un'unica immagine Open Graph riutilizzata, canonical URL sulle pagine di dettaglio. Sitemap e robots.txt minimi ma corretti.

Le immagini caricano in lazy load, il CSS è unico e minificato, niente dipendenze inutili.

L'AI come copilota, non come pilota

L'intelligenza artificiale ha accelerato tre aspetti del lavoro: decisioni di architettura iniziale, stesura e ottimizzazione visiva dei copy, micro correzioni su CSS e JavaScript.

Ho sempre scritto prompt chiari, con task definiti e contesto esplicito. Niente richieste vaghe. L'AI suggerisce, io valuto, aggiusto, decido. I dettagli che richiedono gusto, contesto e coerenza narrativa li sistemo sempre a mano.

Un agente dedicato ha popolato le pagine di dettaglio dei progetti partendo dai miei appunti di notion, trasformando bullet operativi e note sparse in blocchi narrativi leggibili.

Problemi incontrati e soluzioni concrete

Come ogni progetto non sarebbe reale se nello scontro con la realtà non avessi incontrato dei problemi. Lo sviluppo della bozza è stato questione di minuti ma poi risolvere le piccole sfide è stata la vera difficoltà.

Drawer mobile che non si vede

Questo mi ha fatto rallentare molto il deploy ma poi ho capito che la colpa era di un transform che tiene il contenitore fuori viewport o un'altezza sbagliata. Ho risolto usando altezza viewport corretta, transizioni sull'asse X, overlay e z-index chiari.

HTTPS che non parte

Quasi sempre dipende dai record DNS proxati. Impostare DNS only, verificare che i record A o CNAME siano corretti, poi attivare Enforce HTTPS.

Allineamenti strani su mobile

Margini e text-align non sempre bastano. Ho usato wrapper centrati, max-width coerenti, disattivato la sillabazione automatica e usato la giustificazione solo dove serve davvero.

Risultato: un portfolio che lavora

Il sito è online, veloce, indicizzato e stampabile. Le tre pagine lavorano insieme in modo coerente: posizionamento chiaro in Home, evidenza concreta in Projects, prova di credibilità in Resume.

Ho una base stabile da aggiornare con nuovi casi studio e una pipeline per trasformare appunti reali di campo in pagine pubbliche.

Mi sono anche divertito con qualche tag NFC creato ad hoc per reindirizzare al sito così da poterlo sfruttare in maniera professionale ai prossimi eventi, dove invece di lasciare un contatto debole, un CV che si perde e un impressione ordinaria posso fare colpo con una struttura che comunica professionalità e impatto. Dopotutto è una vetrina.

Un sito statico ben progettato è una leva professionale concreta. Mostra il lavoro vero, crea fiducia, apre conversazioni. Non serve complessità quando serve chiarezza. Il mio principio guida per questa settimana è stato “pubblicare presto, migliorare spesso”.

Se hai un progetto scientifico o di innovazione che ha bisogno di storytelling efficace, dati comprensibili e asset comunicativi solidi, la mia cassetta degli attrezzi è pronta anche per te.

Se vuoi dare un occhiata al risultato lo trovi qui: pietrodefinis.com

Pietro De Finis - Project Catalyst

Project Catalyst connecting science, innovation and communication.