Bekijk mijn portfolio Hier
- ✏️ Beschrijving
- 💻 Gebruik
- 📈 Waar ben ik het meest trots op
- 🚧 Waar liep ik tegen aan
- 🎯 Wat wil ik nog maken
- 📡 Tech stack
- 🧰 Tools
- 🔧 Installatie
Dit is mijn persoonlijke portfolio, hier wil ik al mijn toffe projecten laten zien en een beter beeld van mijzelf geven. Ook kan ik op mijn portfolio al mijn creatieve code ideeën toepassen het kan niet gek genoeg!
De pagina is zowel bedienbaar met muis als met keyboard. Je kunt door de pagina scrollen om meer te weten te komen over mij. Mijn naam gaat naar mijn github, de frontend development knop heeft een leuke verassing ;). Op de tweede pagina kun je lezen over de verschillende programmeer talen waarover ik beschik. Dit kun je doen door deze aan te klikken, er komt dan een pop-up met de informatie erover. Deze kan weer gesloten worden door op het kruisje te klikken.
De pagina voelt aan alsof je door slides gaat, alle delen gaan namelijk precies in het midden van het scherm staan.
Het scrollen in de pagina is versimpeld vanwege door het slide achtige scrollen. Wanneer er op een pijl naar onder wordt gedrukt kom je gelijk in de volgende sectie van de website.
Wanneer er op de knop frontend developer wordt gedrukt vallen er html tags naar beneden.
Wanneer er over de programmeer talen gehoverd wordt komt er een soort neon effect op.
Door op de programmeer taal te klikken krijg je een popup met daarin de alle informatie over de desbetreffende programmeer taal, deze kun je vervolgens ook weer sluiten door op het kruisje te klikken.
Ik had het idee om de pagina als een grote slider aan te laten voelen. Ik had dit alleen nog nooit gemaakt. Ik ben toen gaan googelen naar css carousel, omdat mijn pagina eigenlijk een groot carousel is. Daarop kwam ik de scrollsnap mandatory tegen. Dit heb ik gebruikt om het slide effect te creeëren.
Daarna liep ik tegen het probleem aan dat er een stuk van de volgende slide in beeld kwam. Ik heb hier uiteindelijk een 100 view width en view heigth voor gebruikt.
Ik heb deze animatie gemaakt door middel van meerdere spans met html elementen. Hierbij had ik het probleem dat de browser de elementen niet als tekst maar als daadwerkelijke code zagen. Ik heb toen opgezocht of het mogelijk is om dit als tekst neer te zetten. Toen kwam ik erachter als je je texten zo: </html> neerzet je de elementen als text defineërt.
Ik heb de animatie met css keyframes gemaakt, nadat ik de animatie had gemaakt zag ik dat de elementen even snel naar beneden vielen dit was niet wat ik wilde bereiken. Om dit optelossen heb ik delay toegepast op de elementen en ze allemaal verschillende snelheid gegeven waardoor ze niet allemaal tegelijk en even snel vallen.
Ik vond het ook tof om een neon hover effect te creëren op mijn programming languages cards. Ik heb een felle kleur toegepast, alleen dit gaf nog niet echt een neon effect. Na een tijdje nagedacht en wat rond te spelen kwam ik op het idee om een box shadow toetepassen, alleen in plaats van de standaard zwart dezelfde neon kleur toetevoegen.
- Programming languages cards wil ik components maken.
- Programming languages cards wil ik beter responsive maken.
- Programming languages cards wil ik proberen met css te maken zodat deze beter ondersteund worden.
- Ik wil de pagina beter optimaliseren
- Ik wil dat je mijngithub kunt bekijken
- HTML
- CSS
- JS
- EJS
- Svelte
- Visual studio code (code editor)
- Vercel (hosting)
- Figma (Design tool)
- Clone deze repository
- Open de repository met een code editor naar keuze
- Open het terminal in de code editor
- Typ npm install in om alle benodigdheden voor het project te installeren
- Typ npm run dev om de server te starten
- Gebruik de link http://localhost:8001/ om het project lokaal te bekijken
- Mocht je het project online bekijken dan kan dat via deze link.