Sådan bygger du en fantastisk teknisk portefølje

Og en stor portefølje generelt

Porteføljer er en repræsentation af dig, og de er ofte et af de første indtryk, en rekrutterer vil have af dig og dit arbejde.

Det er således bydende nødvendigt, at du bygger en portefølje, der omfatter dig og dit arbejde på dit bedste.

Lad os se på nogle af mine tip til opbygning af en fantastisk teknisk portefølje.

Bemærk: Disse forslag er bygget ud af min personlige oplevelse. Der er mange måder at opbygge en stor portefølje på, så brug disse som retningslinjer, ikke hårde og hurtige regler. Hvis du har en anden tilgang, der fungerer for dig, er du velkommen til at dele den nedenunder!

Porteføljer forklarer, hvem du er som person, og hvilken type færdigheder du bringer til bordet. De er også en god måde at vise dine udviklingsevner på! Der er et par vigtige ting, du skal indarbejde for at sikre, at din portefølje er top.

CV giver ofte ikke midlerne til at fortælle rekrutterere, hvem du er, så porteføljer er din måde at skinne på! Hvad kan du lide at lave for sjov? Hvad er din livshistorie i en nøddeskal? Hvad vil du have, at folk skal vide om dig?

Ved at tilføje nogle personlige berøringer giver du potentielle arbejdsgivere en idé om, hvordan det er at arbejde med dig!

Her er et lille uddrag fra min porteføljes side om side. Tjek gerne den fulde side her.

Hvis du har nogle projekter eller arbejde, som du er stolt af, og som illustrerer dine kodnings- eller designevner, er din portefølje stedet at vise dem.

Mange virksomheder producerer proprietært (fortroligt) arbejde, og derfor undrer du dig måske, hvordan du kan integrere disse i en offentlig portefølje.

Desværre er svaret ... du kan ikke. Mit forslag er at have to til tre sideprojekter, der viser dine evner. Jeg ved, at dette ikke er muligt for alle, men der er ikke meget, du kan gøre, når dit arbejde er fortroligt.

For at vise dit arbejde skal du beskrive de teknologier, du brugte, hvad din rolle var i projektet (hvis relevant), medtage et skærmbillede eller to og sende et link til koden (hvis du er i stand til det).

Sådan har jeg lagt ud arbejdsafsnittet i min portefølje. Du kan tjekke den fulde side her.

En fantastisk måde at fange et arbejdsgivers øje er at bruge din portefølje som et sideprojekt. Jeg brugte Gatsby med React.js for at opbygge min portefølje, simpelthen fordi jeg ville eksperimentere med en webstedsgenerator og vise mine React-evner.

Jeg designede også hele min portefølje i Sketch, før jeg byggede den. Jeg anbefaler, at du tegner et hierarki over, hvordan du vil vise dine oplysninger.

Se afsnittet “Hvilken teknologi skal jeg bruge til at opbygge min portefølje?” Nedenfor for at få flere oplysninger om de forskellige måder, hvorpå du kan opbygge din portefølje!

Rekrutterere og potentielle arbejdsgivere søger muligvis gennem din portefølje, selvom du ikke har opdateret den i år. Det er derfor vigtigt at holde dine oplysninger så opdaterede som muligt.

Hvis du påtager dig en ny rolle, skal du opdatere din portefølje. Hvis du bygger en cool ny app, skal du opdatere din portefølje!

Du ønsker, at dette skal være en repræsentation af dig og dit nuværende færdighedsæt. Det er derfor vigtigt, at du bygger noget, der er let at vedligeholde, og som vil være tidens prøve.

Du skal altid angive en kontaktform i din portefølje. Sandheden på dette tidspunkt har jeg ikke en kontaktmetode, der er anført i min (skam mig!).

Hvis du ikke leverer en kontaktform, kan rekrutterere ikke kontakte dig om potentielle roller.

Så medtag et link til dine sociale medier (hvis du bruger det som et primært kommunikationsmiddel), din e-mail eller dit telefonnummer (hvis du ikke har noget imod at modtage en lang række opkald).

Giv dem en måde at komme i kontakt med dig på.

At designe en portefølje kan være den vanskeligste opgave, især hvis du er en back-end udvikler eller har ringe eller ingen designoplevelse.

Når jeg bygger et websted eller en applikation, bruger jeg dribler til inspiration og farvepaletter. Derudover kan du tjekke Wix og Squarespace for at se nogle af deres skabeloner. Jeg rådgiver dig ikke om at rippe en andens design af, men det er et godt udgangspunkt for at få inspiration.

Jeg anbefaler at holde designet temmelig enkelt. Du vil have noget der vil se godt ud fem eller endda ti år fra nu. Vælg enkle, men tilgængelige farver. Brug læsbare skrifttyper i en passende størrelse.

Det hjælper også med at skrive en informationsarkitektur. Hvilke oplysninger vil du have på din portefølje? Hvordan vil du have det lagt? Single-side? Flere ruter? Tag disse beslutninger inden kodning, og du sparer masser af tid.

Hvis du har brug for grafik, anbefaler jeg unDraw. De er gratis at bruge og lette at tilpasse!

Der er mange forskellige teknologier, som du kan vælge at opbygge din portefølje på. Lad os se på nogle af valgene for både back-end og front-end udviklere.

Back-end-udviklere

Hvis du er en back-end-udvikler, eller ikke har det godt med at oprette et brugergrænseflade, har du flere ruter, du kan tage.

1. Udnyt et CMS

Content Management Systems (CMS) administrerer oprettelse og vedligeholdelse af digitalt indhold.

WordPress er et af de mest populære indholdsstyringssystemer derude, og er et godt valg for udviklere, der ikke er superkomfortable med at bygge deres eget UI.

2. Brug vanilje HTML & CSS

En god måde at forgrene sig, hvis du kender en smule grundlæggende webudvikling, er at opbygge dit websted ved hjælp af vanille HTML og CSS. Må ikke føle, at du er nødt til at gå overbord i design / styling af brugergrænsefladen, hvis det ikke er her, dine evner skinner. Men at opbygge dit websted i HTML og CSS viser din evne til at lære færdigheder uden for din komfortzone.

Du behøver ikke at have JavaScript for at oprette en fantastisk portefølje!

3. Brug en CSS-ramme

Hvis du er anstændigt komfortabel med grundlæggende HTML og CSS, men ønsker et mere konsistent brugergrænseflade, kan du tjekke en CSS-ramme.

CSS-rammer gør det lettere og hurtigere at indstille elementer. Det er vigtigt at bemærke, at hvis du ansøger om en front-end-udviklerrolle, kan brug af en CSS-ramme muligvis ikke være den bedste mulighed, da arbejdsgivere vil være på udkig efter en udvikler, der er behagelig at udvikle CSS. Men for en back-end-udvikler kan disse være en fantastisk mulighed.

Jeg anbefaler at tjekke Foundation, Bulma, SemanticUI eller Bootstrap.

4. Brug en webstedsbygger

Hvis du bare ønsker at få dit indhold op så hurtigt som muligt, kan du også gå ruten for at bruge en webstedsbygger som Wix eller Squarespace.

Disse gør det ekstremt hurtigt og nemt at implementere et websted. Du kan endda integrere et brugerdefineret domæne.

Hvis du imidlertid ansøger om en front-end-udviklerrolle, advarer jeg mod at bruge en platform til oprettelse af websteder. Dette er en chance for at vise dine udviklingsevner! Gå stort eller gå hjem!

Front-end-udviklere

Hvis du er en front-end-udvikler, er der mange flere muligheder til at oprette dit websted.

1. Brug vanilje HTML, CSS og JavaScript

Du kan aldrig gå galt med et simpelt vaniljewebsted. Der er ikke behov for at komplicere arkitekturen i din portefølje, hvis du ikke ønsker eller har brug for det. Bare den enkle kendsgerning, at du byggede dit websted fra bunden, viser potentielle arbejdsgivere, som du er villig til at tage lidt ekstra tid til at vise dine evner.

2. Brug en JavaScript-ramme

Du ønsker muligvis at bruge din portefølje som en måde at øve på (og vise) dine JavaScript-evner ved at udnytte en ramme eller et bibliotek. Jeg foreslår, at du vælger en, du er tilpas med (eller pokker med den, vælger en, du har ønsket at lære!), Eller som er relevant for de typer roller, du vil være på udkig efter.

Ofte har disse rammer eller biblioteker en CLI, som du kan bruge til at oprette et startprojekt. Disse kan spare dig masser af tid med at oprette et miljø, og vil forhindre dig i at skulle kompilere, minimere og fole din kode på egen hånd.

3. Brug en statisk stedgenerator

Statiske stedgeneratorer vinder berygtelse inden for tech-branchen med vedtagelse af populære biblioteker og rammer (React, Vue, Angular, etc.). Jeg byggede min portefølje ved hjælp af Gatsby: en webstedsgenerator til React.

Der er mange forskellige stedgeneratorer at vælge imellem, fx Next.js til React-applikationer og VuePress for Vue.js.

Disse tilbyder mange fordele såsom plug-ins til billedoptimering, mobilvenlig lydhørhed og tilgængelighed.

Tip til kodning af din egen portefølje

  • Sørg for, at din kode er organiseret på en tankevækkende og effektiv måde. Det er ekstremt nemt at smide alt dit indhold på en side (og du kan gøre det), men at bryde forskellige sektioner / indhold ud i indbyggede webkomponenter eller HTML-sider kan gøre en stor forskel.
  • Sørg for, at din CSS er ren og organiseret. Prøv at holde sig til mere moderne CSS til positioneringselementer (som Flexbox eller CSS-Grid over floats). Dette viser, at du forbliver ajour med specifikationerne.
  • Gør brug af semantisk HTML. Strukturer din kode i et hierarki med de definerede hovedregioner. Brug disse milepælregioner (,

Jeg anbefaler altid at medtage følgende afsnit i din portefølje:

  • Om: Hvem er du? Hvad kan du lide at gøre i din fritid? Nogle sjove kendsgerninger?
  • Arbejde / projekter / færdigheder: Hvilke teknologier har du arbejdet med? Hvilke projekter har du bygget?
  • Blog (valgfrit): Hvis du har en blog, skal du vise den her.
  • Kontakt: Hvordan kan rekrutterere komme i kontakt?

Igen er dette min personlige præference. Du ønsker måske bare at oprette en destinationsside, der ruter til forskellige platforme (sociale medier, GitHub osv.)

Din portefølje skal være en repræsentation af dig. Der er ingen størrelser, der passer til alle til porteføljer. Gør det til dit!

Jeg håber, at denne blog var nyttig og vil opfordre dig til at opbygge en fantastisk portefølje til at vise dit arbejde. Hvis du har spørgsmål, tøv ikke med at nå ud på Twitter! God kodning!