How I Created My Portfolio Website (Frontend Web Developer)
I recently graduated from Flatiron Coding Bootcamp in New York and entered the job market., Als een frontend web developer op zoek naar een instap — level positie Ik denk dat het belangrijk is om een professionele portfolio website die al uw projecten weergeeft, vooral als je niet beschikt over een eerdere codering ervaring of een formele CS-graad. Het betreden van de arbeidsmarkt te midden van de coronapandemie is op zijn zachtst gezegd ontmoedigend, dus besloot ik deze tijd te gebruiken om mijn vaardigheden te oefenen, nieuwe te leren en hopelijk coole projecten te bouwen onderweg. Deze blogpost gaat over mijn allereerste project dat ik bouwde tijdens quarantaine die live ging — mijn persoonlijke portfolio website.,
voordat ik mijn website bouwde heb ik een plan gemaakt van hoe ik deze Ga benaderen. De segmenten waar ik aan moest werken zagen er als volgt uit:
- Planning — begrijp het doel, outline deliverables
- ontwerp — schetsen van ideeën, werken aan kleurenschema en typografie
- ontwikkeling — schrijven van de code
- Publishing — hosting en het verkrijgen van een aangepaste domeinnaam
Planning
om iets in het leven te bouwen is het handig om een plan of idee te hebben van wat u wilt bouwen en hoe je wilt dat het eruit ziet., Het is geweldig om te beginnen met het doel in gedachten, of hoe Simon Sinek zou zeggen — “begin met Waarom”. In mijn geval mijn doel was om een persoonlijke portfolio website die al mijn informatie zou hebben, alle projecten die ik heb gebouwd in het verleden en mijn persoonlijke bio. Deze website moet vrij eenvoudig, intuã tief, responsief en vertegenwoordigen mij als een individu, evenals een ervaren webontwikkelaar. Het moet een schoon en modern ontwerp hebben en een mooie interface hebben. Het moet uniek en creatief zijn. OEF, dat was veel!, Maar hoe meer concrete je krijgt op alle details, hoe gemakkelijker het zal zijn om uit te voeren. In het schetsen van de deliverables heb ik gebruikersverhalen als volgt geïmplementeerd:
— De gebruiker wordt begroet met een Home page (dit moet iets creatief en uniek zijn, in mijn geval heb ik er drie gebruikt.,pelling persoonlijke verhaal en informatie over het onderwijs, de huidige tech stapel, verleden werkervaring en interesses/hobby ’s — voor een persoonlijke touch)
— de gebruiker kan navigeren naar de pagina Projecten (dit is waar de beste projecten zal wonen, met beschrijvingen van de gebruikte technologieën en links naar Gitub en live video-demo’ s)
— de gebruiker kan navigeren om Contact met Mij op pagina (deze pagina alle benodigde contactinformatie en links naar sociale media en Github)
Design
Na het begrijpen van het doel en de planning van een ruwe schets is het tijd om na te denken over het ontwerp!, Ik ben een zeer visueel persoon dus dat was zeker een van mijn favoriete delen. Ik begon met het schetsen van de wireframes / blauwdrukken voor mijn pagina ‘ s. Ik gebruikte gewoon pen en papier, maar je kunt alle tools gebruiken die je wilt, bijvoorbeeld Ik hou ook van Figma, dat is een digitaal ontwerp en prototyping tool. U kunt het gebruiken om websites, apps of kleinere onderdelen van de gebruikersinterface te maken die in andere projecten kunnen worden geïntegreerd., De eerste schets van mijn wireframes zag er als volgt uit:
Net als de blauwdruk van een gebouw, een wireframe beschreven in details duidelijk en specifiek tijdens het geven van de bouwers (u, andere ontwerpers, ontwikkelaars, etc.) een overzicht van het project. Nadat de blauwdrukken klaar waren ben ik begonnen met het onderzoeken van het kleurenschema voor mijn website., Ik ben geen ontwerper, maar ik had een begrip dat het kleurenschema zeer modern en schoon moet zijn. Ik zal een lijst van een aantal grote middelen die ik vond voor kleur onderzoek aan het einde van deze blog. Na een aanzienlijke hoeveelheid onderzoek heb ik uiteindelijk het plukken van zwart als mijn primaire kleur (vooral omdat mijn Home page had een 3D-graphics van reizen door de ruimte) en neon roze als mijn secundaire pop van kleur.
typografie speelt een belangrijke rol bij het instellen van de toon, het thema en de boodschap van een website. Voor mijn website koos ik Orbitron — een geometrisch schreefloos lettertype dat bedoeld is voor displaydoeleinden., Het werkte perfect met mijn ruimte thema en het doet denken aan de science fiction films die ik gebruikte om te kijken en liefde als een kind. De tweede keuze voor het lettertype viel op Raleway-het was een van de meest populaire koppelingen met Orbitron volgens Google Fonts. Dit is mijn Over pagina met een foto van de graffiti muur die ik nam op de Flatiron school in het centrum van Manhattan, dat zegt “werk hard, wees aardig, positief, blijf hongerig en geloof dat alles zal werken — de Flatiron School” — mijn mantra tot op de dag van vandaag!,
ontwikkeling
nu is het tijd voor het meest opwindende deel — het schrijven van de code! Er is veel discussie online over het maken van een aangepaste website vs met behulp van een sjabloon en er zijn zeker voors en tegens voor beide opties., Voor zover ik begrijp is het goed om een sjabloon te gebruiken — het is sneller, eenvoudiger en minimaal en als je nog maar in het begin van je carrière als webontwikkelaar bent, zal het zeker makkelijker voor je zijn. Begrijp me echter niet verkeerd je moet het nog steeds aanpassen en functies en functionaliteit toevoegen om je programmeervaardigheden te laten zien.
Ik ben persoonlijk begonnen met een Bootstrap sjabloon, maar uiteindelijk heb ik al mijn pagina ‘ s vanaf nul aangemaakt, omdat ik het op die manier meer kon aanpassen. Het duurde zeker veel langer, maar het was allemaal de moeite waard en ik ben erg blij met de manier waarop het bleek., Het belangrijkste doel van deze portfolio website is om de projecten die je hebt gebouwd te presenteren, maar de website zelf telt natuurlijk ook als een project! Dit is mijn Projecten pagina met de projecten die ik gebouwd aan Flatiron:
Publishing
Om het publiceren van uw nieuwe website zult u moeten beslissen over de domeinnaam en web hosting., Domeinnaam is het adres van uw website dat mensen typen in de browser URL bar om uw website te bezoeken. Volgens mijn onderzoek is het belangrijk om een aangepaste domeinnaam te hebben, omdat het de geloofwaardigheid verhoogt en helpt u online gemakkelijker gevonden te worden, maar het is niet verplicht. Ik heb persoonlijk besloten om te gaan met de aangepaste domeinnaam die Ik gekocht van namecheap.com.
webhosting is de plaats waar alle bestanden van uw website zich bevinden. Het is als de thuisbasis van uw website waar het eigenlijk woont., Een goede analogie zou zijn als de domeinnaam het adres van uw huis was, dan is webhosting het eigenlijke huis waar het adres naar verwijst. Alle websites op het internet, moeten webhosting.
GitHub-pagina ’s zijn publieke webpagina’ s die gratis worden gehost via GitHub en het is de bron die ik gebruikte voor het hosten van de mijne. GitHub gebruikers kunnen zowel persoonlijke websites maken en hosten (één per gebruiker toegestaan) als websites gerelateerd aan specifieke GitHub projecten, zolang ze de broncode op een publieke repository op GitHub hebben., Nadat mijn website werd gepubliceerd, heb ik een paar wijzigingen aangebracht en elke keer dat het zonder problemen werd ingezet. Deze optie werkte geweldig voor mij, want het was gratis en gemakkelijk op te zetten.
omdat ik mijn domeinnaam van een apart bedrijf kocht en mijn website gratis Hoste met GitHub pagina ‘ s, was er een beetje setup nodig. Nadat ik mijn domeinnaam naar mijn web hosting bedrijf door het bewerken van de DNS-instellingen en wachten op een dag mijn website ging live!, If you’re interested you can find it here https://alenanikulina.nyc
