I developer hanno la cattiva abitudine di costruire dei coltellini svizzeri quando avrebbero solo bisogno di una lama affilata. Ci ricorriamo a pesanti framework frontend prima ancora di aver scritto la prima riga di HTML. Aggiungiamo librerie di animazione, strumenti di gestione dello stato e pipeline di build abbastanza potenti da gestire una piccola azienda. Poi ci chiediamo perché i nostri siti portfolio impiegano tre secondi per renderizzare, perché la navigazione si rompe su mobile e perché i recruiter abbandonano la pagina prima ancora di vedere i progetti su cui abbiamo lavorato per mesi.
Ho intrapreso una strada diversa per il mio ultimo portfolio. Mi sono allontanato dall'ecosistema di dipendenze infinite e ho costruito l'intero sito con HTML semantico e CSS pulito. Nessun framework JavaScript. Nessun processo di build. Nessun motore di animazione di terze parti. Solo la piattaforma stessa, layout gestito con CSS Grid e Flexbox, e una filosofia di design che tratta velocità e chiarezza come funzionalità e non come pensieri postumi.
Il risultato è leggero, veloce e professionale. Ecco esattamente come ho affrontato la cosa.
Partire dalle fondamenta
La maggior parte dell'over-engineering inizia dalle fondamenta. Un portfolio non deve essere una single-page application. Deve mostrare il tuo lavoro, spiegare alle persone come contattarti e non ostacolare l'utente. Ho usato l'HTML semantico perché il browser sa già come renderizzare un nav, un article e un footer. Quando usi l'elemento giusto per il compito giusto, ottieni accessibilità, visibilità sui motori di ricerca e comportamento responsive essenzialmente gratis. Inoltre, scrivi meno codice. Un div con cinque attributi ARIA è solo un'imitazione prolissa di un button. Ho evitato completamente questa cosa.
Per il layout, CSS Grid e Flexbox sono più che sufficienti. Grid gestisce la macrostruttura: le sezioni generali della pagina, la galleria dei progetti, l'allineamento dei blocchi principali. Flexbox gestisce le micro-interazioni: i link di navigazione all'interno di quella capsula, il centraggio del testo nelle card, lo spostamento del footer in fondo alla viewport. Insieme sostituiscono ogni motivo per cui potresti aver sentito il bisogno di importare un framework di griglia a dodici colonne nel 2018. Il codice rimane leggibile. Il file CSS rimane piccolo.
Colore, tipografia e sobrietà
Volevo che il portfolio trasmettesse calma nel momento in cui veniva caricato. Lo sfondo utilizza una base chiara con sottili gradienti radiali. Nulla di aggressivo. Il gradiente ha una bassa opacità, creando una morbida profondità che evita che la pagina sembri piatta senza urlare per attirare l'attenzione. Si carica istantaneamente perché è puro CSS. Non ci sono hero image da comprimere, non ci sono fallback WebP da gestire, non ci sono librerie di lazy-loading JavaScript da configurare.
La tipografia conferisce la personalità. Ho abbinato Outfit con Ovo. Outfit, un sans-serif geometrico, gestisce tutto il testo dell'interfaccia utente: etichette di navigazione, testo dei pulsanti, corpo del testo, dettagli meta. È nitido sugli schermi e rimane leggibile anche a dimensioni ridotte. Ovo, un serif a contrasto medio, serve per gli header e i titoli principali. L'abbinamento conferisce alla pagina una sobria sensazione editoriale. Sembra progettato, non basato su un tema predefinito. Cosa più importante, entrambi i font vengono caricati da una singola chiamata a un servizio font o da file ospitati localmente. Non c'è layout shift, non c'è un flash di testo non stilizzato, non ci sono script che cambiano il peso del font dopo il rendering iniziale.
Il menu a capsula flottante
La navigazione è il punto in cui i portfolio spesso crollano sotto il proprio peso. Menu overlay a tutto schermo, script di animazione sfalsata e icone hamburger che richiedono quaranta righe di JavaScript per attivare una classe. Non volevo nulla di tutto ciò.
Ho costruito un menu a capsula flottante in stile glassmorphic. È un singolo contenitore orizzontale, arrotondato ai bordi, posizionato in modo fisso vicino alla parte superiore della viewport. Il glassmorphism deriva da un colore di sfondo semi-trasparente e da una proprietà backdrop-filter: blur(). Fluttua sopra il contenuto senza oscurarlo, fornisce un accesso immediato a ogni sezione e si contrae elegantemente su viewport più piccoli senza richiedere un ridisegno completo. L'effetto appare moderno perché è il browser a gestire il compositing, non una libreria canvas.