Kako izgraditi sjajan tehnički portfelj

I sjajan portfelj općenito

Portfelj su reprezentacija vas i često su jedan od prvih dojmova koji će regrut imati o vama i vašem radu.

Stoga je neophodno sastaviti portfelj koji u najboljem slučaju obuhvaća vas i vaš rad.

Pogledajmo nekoliko mojih savjeta za izgradnju odličnog tehničkog portfelja.

Napomena: Ovi prijedlozi nadolaze se iz mog osobnog iskustva. Mnogo je načina stvaranja sjajnog portfelja, pa ih koristite kao smjernice, a ne pravila stroga i brza. Ako imate drugačiji pristup koji djeluje za vas, slobodno to podijelite u nastavku!

Portfelji objašnjavaju tko ste osoba i kakvu vještinu donosite za stol. Oni su ujedno i sjajan način prikazivanja vaših razvojnih vještina! Nekoliko je ključnih stvari koje biste trebali uključiti kako biste osigurali da vaš portfelj bude vrhunski.

Životopisi često ne daju način da zaposlite regrut koji ste, pa su vam portfelj sjajni! Što voliš raditi za zabavu? Koja je vaša životna priča? Što želite da ljudi znaju o vama?

Dodavanjem nekih osobnih dodira dajete potencijalnim poslodavcima predstavu o tome kako raditi s vama!

Evo malo isječka sa stranice mog portfelja. Provjerite cijelu stranicu ovdje.

Ako imate bilo kakve projekte ili radove na koje ste ponosni i koji ukazuju na vaše kodne ili dizajnerske sposobnosti, vaš portfelj mjesto je za njihovo prikazivanje.

Mnoge tvrtke proizvode vlasničke (povjerljive) radove, pa se možda pitate kako ih možete uključiti u javni portfelj.

Nažalost, odgovor je ... ne možete. Moj je prijedlog da imate dva do tri sporedna projekta koji pokazuju vaše sposobnosti. Znam da to nije izvedivo svima, ali ne možete puno učiniti kada vaš posao bude povjerljiv.

Da biste prikazali svoj rad, opišite tehnologije koje ste koristili, koja je uloga bila u projektu (ako je primjenjivo), uključite snimku zaslona ili dvije i pošaljite vezu (ako možete).

Evo kako sam odredio dio svog portfelja. Cijelu stranicu možete pogledati ovdje.

Jedan sjajan način privlačenja pogleda poslodavca je korištenje vašeg portfelja kao sporedni projekt. Gatsbyja sam koristio s React.js kako bih izgradio svoj portfelj jednostavno zato što sam želio eksperimentirati s generatorom web mjesta i pokazati svoje vještine React.

Također sam dizajnirao čitav svoj portfelj u Sketchu prije nego što sam ga izgradio. Preporučujem da nacrtate hijerarhiju načina na koji želite prikazati svoje podatke.

Pogledajte niži odjeljak „Koju tehnologiju da upotrijebim za izgradnju svog portfelja?“ Za više detalja o različitim načinima na koje možete graditi svoj portfelj!

Regrut i potencijalni poslodavci mogu pretraživati ​​vaš portfelj, čak i ako ga niste ažurirali godinama. Stoga je važno da su vaši podaci ažurirani što je više moguće.

Ako preuzmete novu ulogu, ažurirajte svoj portfelj. Ako napravite novu cool aplikaciju, ažurirajte svoj portfelj!

Želite da ovo predstavlja vašu predstavu i vaš trenutni skup vještina. Stoga je važno izgraditi nešto lako održivo i što će izdržati test vremena.

U svom portfelju uvijek trebali navesti metodu kontakta. Istina, u ovom trenutku, nemam način kontakta koji je naveden unutar mene (sramota me!).

Ako ne pružite način kontakta, regrut ne mogu kontaktirati s vama o potencijalnim ulogama.

Zato uključite vezu na svoje društvene medije (ako to koristite kao primarno sredstvo komunikacije), svoju e-poštu ili vaš telefonski broj (ako nemate ništa protiv primanja mnoštva poziva).

Dajte im neki način da stupe u kontakt s vama.

Dizajn portfelja može biti najteži zadatak, pogotovo ako ste back-end programer ili nemate malo iskustva u dizajniranju.

Kada izrađujem web lokaciju ili aplikaciju, koristim dribling za inspiraciju i palete boja. Uz to možete provjeriti Wix i Squarespace da biste vidjeli neke od njihovih predložaka. Ne savjetujem vam da skidate tuđe dizajne, ali ovo je dobra polazna točka za nadahnuće.

Preporučujem da dizajn bude prilično jednostavan. Želite nešto što će izgledati dobro za pet, pa čak i za deset godina. Odaberite jednostavne, ali pristupačne boje. Upotrijebite čitljive fontove odgovarajuće veličine.

Također pomaže u pisanju informacijske arhitekture. Koje podatke želite o svom portfelju? Kako želite to iznijeti? Single-stranica? Više ruta? Donesite ove odluke prije kodiranja i uštedjet ćete tonu vremena.

Ako vam je potrebna grafika, preporučujem uklanjanje. Oni su besplatni za upotrebu i za jednostavno prilagođavanje!

Postoji mnogo različitih tehnologija pomoću kojih možete odabrati izgradnju svog portfelja. Pogledajmo neke od izbora za napredne i napredne programere.

Back-end programeri

Ako ste razvojni programer ili vam nije udobno graditi korisničko sučelje, imate nekoliko ruta koje možete krenuti.

1. Koristite CMS

Sustavi za upravljanje sadržajem (CMS) upravljaju stvaranjem i održavanjem digitalnog sadržaja.

WordPress je jedan od najpopularnijih sustava za upravljanje sadržajem, a odličan je izbor za programere koji nisu super ugodni u izgradnji vlastitog sučelja.

2. Koristite vanilin HTML i CSS

Odličan način da se ispostavite ako znate malo osnovnog razvoja web-a je izgradnja web lokacije pomoću HTML-a i CSS-a vanilije. Ne osjećate se kao da trebate pretjerivati ​​u dizajnu / oblikovanju korisničkog sučelja ako to nije vaše mjesto. Ali izgradnja vaše web lokacije u HTML-u i CSS-u pokazuje vašu sposobnost učenja vještina izvan vaše zone komfora.

Ne morate imati JavaScript da biste stvorili fantastičan portfelj!

3. Koristite CSS okvir

Ako vam pristojno odgovara osnovni HTML i CSS, ali želite konzistentnije korisničko sučelje, možda želite provjeriti CSS okvir.

CSS okviri olakšavaju i brže dodaju elemente stila. Važno je napomenuti da ako se prijavljujete za ulogu naprednog programera, korištenje CSS okvira možda i nije najbolja opcija, jer će poslodavci tražiti programera koji će ugodno razvijati CSS. Ali za back-end programere, to mogu biti odlična opcija.

Preporučujem provjeru Foundation, Bulma, SemanticUI ili Bootstrap.

4. Koristite web stranicu za izradu web stranica

Ako samo želite što brže pripremiti svoj sadržaj, također možete krenuti putem izrade web mjesta kao što su Wix ili Squarespace.

Zahvaljujući njima, vrlo je brzo i jednostavno implementirati web mjesto. Možete čak integrirati prilagođenu domenu.

Međutim, ako se prijavljujete za ulogu razvojnog programera, upozoravam na uporabu platforme za izradu web stranica. Ovo je prilika da pokažete svoje razvojne vještine! Idi velika ili idi kući!

Front-end programeri

Ako ste razvojni programer, na raspolaganju je mnogo više mogućnosti za izgradnju vaše web lokacije.

1. Koristite vanilla HTML, CSS i JavaScript

Nikada ne možete pogriješiti s jednostavnom web stranicom od vanilije. Ne morate pretjerano komplicirati arhitekturu svog portfelja ako ne želite ili morate. Upravo jednostavna činjenica da ste napravili web lokaciju ispočetka pokazuje potencijalnim poslodavcima da ste spremni izdvojiti malo više vremena za pokazivanje svojih vještina.

2. Koristite JavaScript okvir

Možda ćete htjeti koristiti svoj portfelj kao način da vježbate (i pokažete) svoje JavaScript sposobnosti uz pomoć okvira ili knjižnice. Predlažem da odaberete onu s kojom vam je ugodno (ili je isprobajte s njom, odaberite onu koju ste željeli naučiti!) Ili koja odgovara vrsti uloga koju tražite.

Ovi okviri ili knjižnice često imaju CLI koji možete koristiti za izradu pokretačkog projekta. To vam može uštedjeti puno vremena postavljanjem okruženja, a spriječit će vas da sami sastavljate, minimizirate i vlastiti kôd.

3. Koristite statički generator mjesta

Generatori statičkih stranica dobivaju na značaju u tehnološkoj industriji usvajanjem popularnih knjižnica i okvira (React, Vue, Angular itd.). Izgradio sam svoj portfelj koristeći Gatsby: generator web mjesta za React.

Postoji mnogo različitih generatora web mjesta koje možete odabrati između Next.js za React aplikacije i VuePress za Vue.js.

One nude brojne pogodnosti poput dodataka za optimizaciju slike, reakcije prilagođene mobilnim uređajima i pristupačnosti.

Savjeti za kodiranje vlastitog portfelja

  • Osigurajte da je kôd organiziran na promišljen i učinkovit način. Iznimno je jednostavno baciti sav svoj sadržaj na jednu stranicu (i to možete učiniti), ali razbijanje različitih odjeljaka / sadržaja u izvorne web komponente ili HTML stranice može donijeti veliku razliku.
  • Osigurajte da je CSS čist i organiziran. Pokušajte se držati modernijeg CSS-a za pozicioniranje elemenata (kao što su Flexbox ili CSS-Grid preko float-a). Ovo pokazuje da ste uvijek u toku s specifikacijama.
  • Iskoristite semantički HTML. Strukturirajte svoj kôd u hijerarhiju s definiranim glavnim regijama. Pomoću ovih orijentirnih područja (,

Uvijek preporučujem da u svoj portfelj uvrstite sljedeće odjeljke:

  • O: Tko si ti? Što volite raditi u slobodno vrijeme? Zabavne činjenice?
  • Posao / Projekti / Vještine: S kojim tehnologijama ste surađivali? Koje ste projekte gradili?
  • Blog (izborno): Ako imate blog, iznesite ga ovdje.
  • Kontakt: Kako regrutori mogu stupiti u kontakt?

Opet, to je moja osobna preferencija. Možda želite samo stvoriti odredišnu stranicu koja se preusmjerava na različite platforme (društveni mediji, GitHub itd.)

Vaš portfelj trebao bi biti reprezentacija vas. Ne postoji jedinstvena veličina za portfelje. Učinite to svojim!

Nadam se da je ovaj blog bio koristan i potaknut će vas da izgradite fantastičan portfelj kako biste prikazali svoj rad. Ako imate bilo kakvih pitanja, ne oklijevajte kontaktirati na Twitteru! Sretno kodiranje!