Utveckla en Mind-Blowing Personal Portfolio i 3 veckor

Så du bestämde dig för att du ska utforma och utveckla dig själv en personlig portfölj. Toppen! Du ligger långt före hälften av webbdesign och utvecklingssamhället. Men hur är det med de återstående 50%? Du måste visa exklusiva färdigheter i ett litet utrymme för att skina i denna snabbväxande industri.

Under de senaste tre veckorna - sedan jag fattade det beslutet lärde jag mig mycket om att utveckla en unik portfölj. Nu känner jag att det är dags att dela med dig av denna nyförvärvda kunskap.

Det jag kom upp efter de tre veckorna är en cool spelinspirerad portfölj.

Vecka # 1: Sök efter vad du ser

Minst en gång i halvåret är en ny webbutveckling född. Det är så svårt att följa alla dessa trender, oavsett hur många bloggar och utvecklare du följer på dina sociala nätverk. En sida webbplatser, parallax, reglage, minimalistisk design och så vidare? Listan över webbtrender är oändlig och vi kan fortsätta räkna dem hela dagen.

Så det första du ska göra är ett kort forskningsprojekt om vad som är? In? när det gäller webbdesign och webbutvecklingstrender. En bra sak om denna typ av forskning är att du får idéer och kanske ett första utkast till hur din portfölj ska vara. Problemet är att det kan få dig att försegla ditt sinne till kreativitet och innovativa idéer på egen hand.

En viktig sak som du inte bör glömma i denna vecka är att skriva allt ditt marknadsföringsmaterial. Jag tycker att detta är en av de svåraste delarna som du kommer att hantera. Det är inte lätt att skriva de saker som i grunden kunde avgöra om en klient kommer att kontakta dig eller inte. Skriv ner det på papper och fråga dig följande fråga: • Om jag var en potentiell kund, vad skulle få mig att kontakta mig ??

Glöm inte att denna portfölj kommer att presentera dig för världen. Du måste komma med ursprungliga idéer, nyskapande tänkande och ett portföljkoncept som kommer att blåsa människor bort.

Vad jag kom fram efter den första veckan var ett beslut:? Oavsett hur svårt det kommer att bli, kommer jag att utveckla mig ett webbspel baserat på front-programmering ?. Tre veckor var tiden jag gav mig själv att göra det?

Vecka # 2: Kodning som det finns ingen morgon

När du har en grundläggande idé, och inte ett ögonblick innan, är det dags att börja tänka på utvecklingsfasen.

Jag bestämde mig för att min portfölj ska fungera som ett webbaserat spel, så jag började leta efter JavaScript-ramar som kan hjälpa mig att spara tid och arbete. Saken med ramverk är att de vanligtvis kommer att vara bra för start - men på lång sikt passar de inte dina behov.

Ett bra exempel i min portfölj är ljuslådorna som ger information om mig och aktiverar när en användare går in i ett hus. Den typen av funktionalitet finns inte på en vanlig JS-spelmotor.

Nu finns det alltid ett alternativ att ta en befintlig ram och förbättra den genom att lägga till din egen kod, men överväga att ibland dykning till någon annan kod tar längre tid än att skriva egna. Om du skriver om någon annans kod kan det dessutom vara ett problem på nya versioner.

När jag passerade några spelmotorramar kände jag mig som om jag inte har något annat än att bygga min egen spelmotor som passar mina behov.

Låt oss ta en snabb översikt över de huvudsakliga metoderna som jag kör i spelet.

För att hantera tangentbordshändelserna på pilarna använde jag följande kod:

Som du kan se är koden mycket enkel. Om användaren trycker på? Upp? eller? Down? pilar jag kallar "moveY" funktion, och om? eller? Vänster? Jag kallar? MoveX? fungera.

En snabb titt på en av dem kommer att avslöja var allt magi händer:

För varje användar steg kontrollerar jag med en särskild metod kallad? CanImove? (Kan jag flytta?) Om tecknet kan röra sig över spelens duk. Denna metod inkluderar skärmgränser, huspositioner, vägaregel och så vidare? Om det kan, återvänder jag True och karaktären fortsätter att flytta, annars returnerar jag False och karaktären stannar i sin nuvarande position.

Nu, för att vi fortfarande pratar om webben, hade jag tankar att det inte räcker med att flytta med tangentbordspilen. Du måste alltid tänka på slutanvändaren - din potentiella kund som kanske inte har tid att? Hänga i din värld ?. Därför har jag lagt till både en navigeringsfält och ett alternativ till? Teleport? tecknet direkt till en viss punkt i spelet.

The? Teleport? Metoden ser så här ut:

Jag får? X? och? y? parametrar från musklickshändelsen med? event.pageX? och? event.pageY?, efter att jag har båda, byter jag spelarens CSS? kvar? och? topp? egenskaper och använd jQuery? animera? metod för att animera spelarens opacitet - så att jag kunde skapa? Fade? effekt.

Ett bra tips som jag kan berätta för er att jag tyvärr har lärt mig det svåra sättet är att hålla din kod så dynamisk som möjligt. Skriv kod på ett sådant sätt att om du vill lägga till mer innehåll i din portfölj i framtiden - kommer din kod att stödja den.

Vecka # 3: Feedback är din nya bästa vän

Den sista veckan i min portföljutveckling var väldigt knepigt. Jag var tvungen att stänga slutliga designdetaljer och koda saker medan jag kämpade för att inte publicera den redan. Det var som att hålla en hemlighet som du inte är säker på är helt sant.

Jag hittade en lösning på denna irriterande motsägelse. Ta tio personer du känner och litar på, visa dem ditt arbete och be dem om feedback. Företrädesvis bör de tio personerna vara helt olikt varandra. Här är de tio personer jag valde för detta topphemliga uppdrag:

  • Min mamma
  • Min chef
  • Min bästa vän
  • Min 6 år gamla brorson
  • En äldre webbdesigner
  • En senior front end utvecklare
  • En potentiell kund
  • En klient jag arbetade med
  • En QA ingenjör
  • En annan super-multi-ninja webbutvecklare (Just in case)

Be dem ge dig feedback om vad som helst. Från din mamma som berättar för dig? Det fungerar inte på min dator !? (Tja, du använder IE5.5?) Som påminner dig om att du måste skriva några IE-fallbackar till din 6-åriga brorson som otroligt nog kan ge dig ett gratis användbarhetstest och slutligen till din chef och? ninja webbutvecklare? vem kommer att ge dig en noggrann detaljkodsgranskning som kan hjälpa dig att förbättra din kod och göra den ännu effektivare.

Du har ingen aning om hur många bra ändringar feedback kan få dig. Hålla fast vid det.

Slutsats

Trots att man utvecklar en personlig portfölj är definitivt inte en lätt uppgift, det är värt vartenda öre. Jag lärde mig mycket av denna process och fick lite riktigt bra feedback.

Ta dig tid och tänka på din egen unika och? Mind-blowing? idé för din portfölj, tveka inte att samråda med andra människor om design, användargränssnitt och marknadsföring, och kom alltid ihåg det viktigaste? ha så kul!