Playground · Portfolio 2021
Il primo progetto da raccontare ero io.
Mentre finivo la scuola ho progettato e sviluppato il mio primo portfolio: quattro schermate, un’identità precisa e abbastanza animazioni da far muovere persino l’elenco dei lavori.
01 · Il punto di partenza
Prima di sapere come raccontare un prodotto, dovevo capire come presentare me stesso.
L’obiettivo era arrivare ai recruiter con qualcosa di più concreto di una lista di competenze. Avevo pochi progetti, stavo ancora finendo la scuola e mi definivo front-end developer: il portfolio metteva tutto questo in scena senza cercare di sembrare già arrivato.
Robert · versione 2021
“I’m a front-end web developer working on projects while finishing school.”
La parte di cui andavo più fiero
Il contenuto era essenziale. A dargli personalità erano gli ingressi, le lettere e i piccoli movimenti.
Anime.js e GSAP gestivano il loader, l’arrivo del nome, gli angoli disegnati sullo schermo e la comparsa dei contatti. Le animazioni non decoravano soltanto il portfolio: erano il progetto dentro il progetto.
01 · Loader
Prima di Robert arrivava “Hello.”
Le lettere salivano una alla volta, uscivano lateralmente e lasciavano spazio alla pagina.
02 · Identità
Il nome veniva composto sullo schermo.
Ogni carattere era separato e animato individualmente, con un hover che ne modificava anche la dimensione.
03 · Contatto
Telefono ed email restavano nascosti fino al click.
“Let’s talk” attivava l’ingresso delle icone, adattando la direzione del movimento su mobile.
My works
Non erano card. Ogni progetto aveva una piccola dimostrazione che continuava a vivere accanto al suo nome.
Il portfolio raccoglieva i primi esercizi e li trasformava in una lista animata: numeri binari generati continuamente, un cronometro che avanzava, task che sparivano e simboli che cambiavano.
- 01Binary Converter
Una conversione casuale cambiava ogni 150 millisecondi.
- 02Todo List
Le righe scomparivano, scorrevano e tornavano in fondo alla lista.
- 03Stop Watch
Il tempo avanzava direttamente nella preview del progetto.
- 04Morisco · Tris
Asset alternati e una linea animata ricreavano due identità molto diverse.
Dietro l’esperienza
Nessun framework. Quattro sezioni a tutto schermo e JavaScript usato per dare ritmo a ogni dettaglio.
Il sito era costruito interamente con HTML, CSS e JavaScript. Media query dedicate adattavano tipografia, layout e animazioni ai dispositivi più piccoli; due librerie dividevano il lavoro sul movimento.
- Struttura
- HTML
- Identità
- CSS
- Logica
- JavaScript
- Lettere
- Anime.js
- Movimento
- GSAP
Il portfolio era completo quasi al cento per cento e prevedeva anche una versione mobile. La parte più riuscita non era una singola schermata, ma il modo in cui tutto entrava, cambiava e reagiva.
99%Cinque anni dopo
Voglio ancora mostrare ciò che so fare. È cambiato il modo in cui scelgo di dimostrarlo.
2021
Dirlo direttamente.
- “Sono un front-end developer”
- Un elenco di lavori e tecnologie
- Le animazioni come prova delle mie capacità
- “Sono disponibile per nuovi progetti”
Oggi
Lasciare che siano i progetti a dirlo.
- Nessuna lista di capacità
- Case study e progetti personali
- Problemi, scelte e risultati reali
- Il mio ruolo emerge da ciò che ho costruito
L’ultima schermata
“I’m always searching for new projects. Are you interested?”
Oggi
Nel 2021 dicevo cosa sapevo fare. Oggi lascio che siano i progetti a raccontarlo.
L’obiettivo non è cambiato: mostrare ciò che sono in grado di costruire. È cambiato il racconto. Non più una dichiarazione, ma lavori reali, decisioni ed esperimenti che permettono a chi guarda di capirlo da sé.