De opdracht was om een pagina te bouwen waarin alle klasgenoten (squadmembers zoals wij dat noemen) elkaar kunnen zien op de pagina en zo met elkaar contact kunnen houden.
Als leerling wil ik informatie over mijn klasgenoten kunnen ophalen, en kunnen bekijken met behulp van Svelte en Directus.
Door op een leerling te klikken op de home pagina kun je zijn of haar gegevens zien.
We hebben een rustig en overzichtelijk design gemaakt die ook compatibel is met mobile.
Doormiddel van media queries is de pagina responsive en te gebruiken op elk scherm formaat!
Ik heb de images een standaard width en height gegeven zodat dit layout shifting voorkomt.
Aan het begin van de pagina is een component die elke keer als de site opnieuw ingeladen wordt 5 verschillende mensen laat zien.
De profiel kaarten worden weergegeven doormiddel van een masonry grid om de pagina zo een iets meer speels uiterlijk te geven, maar toch het simpele en strakke design aan te houden.
Het ontwerp is zwart wit maar wanneer er over een kaart gehoverd wordt krijgt deze kleur.
De makers van de site worden getoond via profiel kaarten die de ilusie wekken alsof ze op een stapel liggen.
- HTML
- CSS
- JS
- 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
- Gebruik de link http://localhost:8001/ om het project lokaal te bekijken
- Mocht je het project online bekijken dan kan dat via deze link.