DLC - SCNMC/your-tribe-for-life-squad-page GitHub Wiki

🔬 Analyseren

In de analysefase hebben wij samen als groepje besproken wat er gedaan moest worden. Het volgend kwam eruit:

• Projectboard aanmaken
• Data model maken
• Prismic repo maken met data
• Ontwerpen maken
• Taken verdelen

Doormiddel van een projectboard aan te maken hebben wij een overzicht over de taken die gedaan moeten worden, al in progress zijn en degene die al af zijn. Door er een label aan te plakken met de persoon aan wie de taak behoort weten wij waarover het gaat en door wie dit gemaakt word. Doordat we al eerder een visitekaartje hadden gemaakt met Sveltekit was het niet nodig om de installatie te analyseren

✏️ Ontwerpen

Mijn Data model:

Digitale ontwerpen

⚒️ Bouwen

Ik had de volgende taken die ik moest bouwen:

• Detailpage
• About us page

De detailpage heb ik gebouwd doormiddel van het design wat ik gemaakt had in figma. Ik heb een mapje gemaakt met de naam Detailpage wat later {uid}.svelte is geworden om de pagina dynamisch te maken. Daarna heb ik een +page.svelte aangemaakt en hierin de HTML geschreven en scope css voor de styling. Verder is er ook een +page.js bestand waarin ik de prismic api fetch. Ik heb de header gebruikt van Finn. Vervolgens hebben wij de data uit prismic opgehaald en deze gecombineerd met de detailpage.

Voorbeeld van data uit prismic:

Vervolgens heb ik de about us page gemaakt. Hiervoor had ik geen design maar heb ik dit doormiddel van inspiratie op dribble en behance in browser designed waardoor ik uiteindelijk op een ontwerp ben gekomen. Ik ben voor beide pagina mobile first begonnen heb dit daarna uitgewerkt voor grotere schermen.

🖥️ Integreren

Om het visitekaartje live te zetten heb ik gebruik gemaakt van Vercel.

✅ Testen

De pagina werkte naar behoren.