Come costruire un ottimo portafoglio tecnico

E un grande portafoglio in generale

I portafogli sono una tua rappresentazione e sono spesso una delle prime impressioni che un recruiter avrà di te e del tuo lavoro.

Pertanto, è indispensabile creare un portafoglio che comprenda al meglio te e il tuo lavoro.

Diamo un'occhiata ad alcuni dei miei consigli per creare un ottimo portfolio tecnico.

Nota: questi suggerimenti sono basati sulla mia esperienza personale. Esistono molti modi per creare un ottimo portfolio, quindi utilizzali come linee guida, non regole rigide. Se hai un approccio diverso che funziona per te, sentiti libero di condividerlo in basso!

I portafogli spiegano chi sei come persona e che tipo di abilità porti al tavolo. Sono anche un ottimo modo per mostrare le tue capacità di sviluppo! Ci sono alcune cose chiave che dovresti incorporare per assicurarti che il tuo portafoglio sia di prim'ordine.

I curriculum spesso non forniscono i mezzi per dire ai recruiter chi sei, quindi i portafogli sono il tuo modo di brillare! Cosa ti piace fare per divertirti? Qual è la tua storia di vita in breve? Cosa vuoi che le persone sappiano di te?

Aggiungendo alcuni tocchi personali, stai dando ai potenziali datori di lavoro un'idea di come sia lavorare con te!

Ecco un piccolo frammento della pagina sulla mia cartella. Sentiti libero di dare un'occhiata alla pagina intera qui.

Se hai progetti o lavori di cui sei orgoglioso e che esemplificano le tue capacità di programmazione o di progettazione, il tuo portfolio è il posto giusto per mostrarli.

Molte aziende producono lavori proprietari (riservati), quindi potresti chiederti come puoi incorporarli in un portafoglio pubblico.

Purtroppo la risposta è ... non puoi. Il mio suggerimento è di avere da due a tre progetti secondari che mostrino le tue abilità. So che questo non è fattibile per tutti, ma non c'è molto che puoi fare quando il tuo lavoro è riservato.

Per visualizzare il tuo lavoro, descrivi le tecnologie che hai utilizzato, quale ruolo ricoprivi nel progetto (se applicabile), includi uno screenshot o due e pubblica un link al codice (se sei in grado).

Ecco come ho definito la sezione di lavoro del mio portafoglio. Puoi dare un'occhiata alla pagina intera qui.

Un ottimo modo per attirare l'attenzione di un datore di lavoro è utilizzare il tuo portfolio come progetto secondario. Ho usato Gatsby con React.js per creare il mio portfolio semplicemente perché volevo sperimentare un generatore di siti e mostrare le mie capacità di React.

Ho anche progettato il mio intero portfolio in Sketch prima di costruirlo. Ti consiglio di tracciare una gerarchia di come desideri visualizzare le tue informazioni.

Dai un'occhiata alla sezione "Quale tecnologia dovrei usare per costruire il mio portafoglio?" Di seguito per maggiori dettagli sui diversi modi in cui puoi costruire il tuo portafoglio!

Reclutatori e potenziali datori di lavoro potrebbero cercare nel tuo portfolio, anche se non lo aggiorni da anni. Pertanto, è importante mantenere le tue informazioni il più aggiornate possibile.

Se assumi un nuovo ruolo, aggiorna il tuo portafoglio. Se crei una nuova fantastica app, aggiorna il tuo portfolio!

Vuoi che questa sia una rappresentazione di te e del tuo attuale set di abilità. Pertanto, è importante creare qualcosa di facilmente gestibile e che duri nel tempo.

Devi sempre fornire un metodo di contatto nel tuo portafoglio. Sinceramente, in questo momento, non ho un metodo di contatto elencato nel mio (peccato per me!).

Se non fornisci un metodo di contatto, i recruiter non possono contattarti per potenziali ruoli.

Quindi includi un link ai tuoi social media (se lo usi come mezzo di comunicazione principale), la tua email o il tuo numero di telefono (se non ti dispiace ricevere una moltitudine di chiamate).

Dai loro un modo per mettersi in contatto con te.

Progettare un portfolio può essere il compito più difficile, specialmente se sei uno sviluppatore di back-end o hai poca o nessuna esperienza di progettazione.

Quando creo un sito o un'applicazione, uso dribbble per ispirazione e tavolozze di colori. Inoltre, puoi controllare Wix e Squarespace per vedere alcuni dei loro modelli. Non ti consiglio di strappare i disegni di qualcun altro, ma è un buon punto di partenza per trarre ispirazione.

Consiglio di mantenere il design abbastanza semplice. Vuoi qualcosa che sembrerà buono tra cinque o anche dieci anni da oggi. Scegli colori semplici ma accessibili. Usa caratteri leggibili di dimensioni adeguate.

Aiuta anche a scrivere un'architettura di informazioni. Quali informazioni vuoi sul tuo portafoglio? Come lo vuoi presentare? Pagina singola? Percorsi multipli? Prendi queste decisioni prima della codifica e risparmierai un sacco di tempo.

Se hai bisogno di grafica, ti consiglio unDraw. Sono gratuiti e facili da personalizzare!

Esistono molte tecnologie diverse con le quali puoi scegliere di costruire il tuo portafoglio. Diamo un'occhiata ad alcune delle scelte per gli sviluppatori back-end e front-end.

Sviluppatori back-end

Se sei uno sviluppatore di back-end o non ti senti a tuo agio nel costruire un'interfaccia utente, hai diversi percorsi che puoi seguire.

1. Sfrutta un CMS

Content Management Systems (CMS) gestisce la creazione e la manutenzione di contenuti digitali.

WordPress è uno dei sistemi di gestione dei contenuti più popolari in circolazione ed è un'ottima scelta per gli sviluppatori che non sono molto a proprio agio nel costruire la propria interfaccia utente.

2. Usa HTML e CSS vanilla

Un ottimo modo per espandersi se conosci un po 'di sviluppo web di base è costruire il tuo sito usando HTML e CSS vanilla. Non pensare di dover esagerare con il design / lo stile dell'interfaccia utente se non è lì che brillano le tue abilità. Ma costruire il tuo sito in HTML e CSS mostra la tua capacità di apprendere competenze al di fuori della tua zona di comfort.

Non è necessario disporre di JavaScript per creare un fantastico portfolio!

3. Utilizzare un framework CSS

Se ti senti abbastanza a tuo agio con HTML e CSS di base, ma desideri un'interfaccia utente più coerente, potresti voler dare un'occhiata a un framework CSS.

I framework CSS semplificano e velocizzano lo stile degli elementi. È importante notare che se stai facendo domanda per un ruolo di sviluppatore front-end, l'utilizzo di un framework CSS potrebbe non essere l'opzione migliore in quanto i datori di lavoro cercheranno uno sviluppatore che sia a proprio agio nello sviluppo di CSS. Ma per uno sviluppatore di back-end, questi possono essere un'ottima opzione.

Consiglio di dare un'occhiata a Foundation, Bulma, SemanticUI o Bootstrap.

4. Utilizzare un costruttore di siti Web

Se vuoi semplicemente ottenere i tuoi contenuti il ​​più rapidamente possibile, puoi anche seguire il percorso di utilizzo di un costruttore di siti Web come Wix o Squarespace.

Questi rendono estremamente veloce e facile la distribuzione di un sito Web. Puoi persino integrare un dominio personalizzato.

Se, tuttavia, stai facendo domanda per un ruolo di sviluppatore front-end, ti avverto di non utilizzare una piattaforma di creazione di siti Web. Questa è l'occasione per mostrare le tue capacità di sviluppo! Andare Grande o andare a casa!

Sviluppatori front-end

Se sei uno sviluppatore front-end, ci sono molte altre opzioni disponibili per la creazione del tuo sito web.

1. Usa HTML, CSS e JavaScript vanilla

Non puoi mai sbagliare con un semplice sito Web di vaniglia. Non è necessario complicare eccessivamente l'architettura del portfolio se non si desidera o non è necessario. Il semplice fatto che tu abbia creato il tuo sito web da zero mostra ai potenziali datori di lavoro che sei disposto a prenderti del tempo extra per mostrare le tue abilità.

2. Utilizzare un framework JavaScript

Potresti voler utilizzare il tuo portfolio come un modo per esercitare (e mostrare) le tue capacità JavaScript sfruttando un framework o una libreria. Ti suggerisco di sceglierne uno con cui ti senti a tuo agio (o, diamine, scegli uno che avresti voluto imparare!) O che sia pertinente ai tipi di ruoli che stai cercando.

Spesso, questi framework o librerie dispongono di una CLI che è possibile utilizzare per creare un progetto iniziale. Questi possono farti risparmiare un sacco di tempo con la configurazione di un ambiente e ti impediranno di compilare, ridurre al minimo e sfilacciare il tuo codice da solo.

3. Utilizzare un generatore di sito statico

I generatori di siti statici stanno guadagnando notorietà nel settore tecnologico con l'adozione di librerie e framework popolari (React, Vue, Angular, ecc.). Ho creato il mio portafoglio usando Gatsby: un generatore di siti per React.

Esistono molti generatori di siti diversi tra cui scegliere Next.js per le applicazioni React e VuePress per Vue.js.

Questi offrono molti vantaggi come i plug-in per l'ottimizzazione delle immagini, la reattività ottimizzata per i dispositivi mobili e l'accessibilità.

Suggerimenti per la codifica del proprio portafoglio

  • Assicurati che il tuo codice sia organizzato in modo ponderato ed efficiente. È estremamente facile inserire tutti i tuoi contenuti in una pagina (e puoi farlo) ma suddividere sezioni / contenuti diversi in componenti Web nativi o pagine HTML può fare una grande differenza.
  • Assicurati che il tuo CSS sia pulito e organizzato. Prova ad attenersi a CSS più moderni per gli elementi di posizionamento (come Flexbox o CSS-Grid su float). Questo dimostra che sei sempre aggiornato con le specifiche.
  • Utilizza HTML semantico. Strutturare il codice in una gerarchia con le principali regioni definite. Utilizzare queste regioni di riferimento (
    ,

Consiglio sempre di includere le seguenti sezioni nel tuo portfolio:

  • A proposito: chi sei? Cosa ti piace fare nel tempo libero? Qualche curiosità?
  • Lavoro / Progetti / Competenze: con quali tecnologie hai lavorato? Quali progetti hai realizzato?
  • Blog (opzionale): se hai un blog, mostralo qui.
  • Contatto: come possono i recruiter entrare in contatto?

Ancora una volta, questa è la mia preferenza personale. Potresti voler semplicemente creare una landing page che instrada verso piattaforme diverse (social media, GitHub, ecc.)

Il tuo portafoglio dovrebbe essere una tua rappresentazione. Non esiste una soluzione unica per tutti i portafogli. Fallo tuo!

Spero che questo blog sia stato utile e ti incoraggi a creare un fantastico portfolio per mostrare il tuo lavoro. Se hai domande, non esitare a contattarci su Twitter! Buona programmazione!