Footer component #31

.gitignore

@@ -0,0 +1,21 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

README.md

@@ -1,33 +1,53 @@
-> _Fork_ deze leertaak en ga aan de slag. 
-Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. 
-De instructie vind je in: [docs/INSTRUCTIONS.md](docs/INSTRUCTIONS.md)
-
-# Titel
-<!-- Geef je project een titel en schrijf in één zin wat het is -->
+# Mediahuis
 
 ## Inhoudsopgave
+  * [✏️ Beschrijving](#beschrijving)
+  * [💻 Gebruik](#gebruik)
+  * [🔎 Kenmerken](#kenmerken)
+  * [🔧 Installatie](#installatie)
 
-  * [Beschrijving](#beschrijving)
-  * [Kenmerken](#kenmerken)
-  * [Installatie](#installatie)
-  * [Gebruik](#gebruik)
-  * [Bronnen](#bronnen)
-  * [Licentie](#licentie)
-
-## Beschrijving
-<!-- In de Beschrijving staat hoe je project er uit ziet, hoe het werkt en wat je er mee kan. -->
+## ✏️ Beschrijving
+De opdracht was om een pagina te bouwen waarin een overzicht te zien is van alle radioshows en op welke datum en tijdstip deze zijn.
 <!-- Voeg een mooie poster visual toe 📸 -->
-<!-- Voeg een link toe naar Github Pages 🌐-->
+<a href="https://lose-your-head-the-client-case-5q6r.vercel.app/" alt="link naar de website">Bekijk hier de website</a>
+
+## 💻 Gebruik
+<!-- Bij Gebruik staat de user story, hoe het werkt en wat je er mee kan. -->
+### User story
+Als gebruiker wil ik kunnen zien wanneer alle radioshows spelen en welke dj er draait.
+
+### Gebruik van de week planner
+Door op de dagen te klikken kun je het overzicht van de radioshows die op die dag spelen ophalen.
+
+## 🔎 Kenmerken
+
+### Ontwerp
+We hebben een ontwerp van Triple gekregen de desktop view hebben we in een horizontale lijn gezet zodat er meer radiostations in een keer te bekijken zijn.
 
-## Kenmerken
-<!-- Bij Kenmerken staat welke technieken zijn gebruikt en hoe. Wat is de HTML structuur? Wat zijn de belangrijkste dingen in CSS? Wat is er met Javascript gedaan en hoe? Misschien heb je een framwork of library gebruikt? -->
+### Features
 
-## Installatie
+#### Responsive page
+Doormiddel van media queries is de pagina responsive en te gebruiken op elk scherm formaat!
 
-## Gebruik
+#### Image optimalisatie (layout shifting)
+De images hebben een standaard width en height, zodat dit layout shifting voorkomt.
 
-## Bronnen
+### Technieken
+- HTML
+- CSS
+- JS
+- Svelte
 
-## Licentie
+### Tools
+- Visual studio code (code editor)
+- Vercel (hosting)
+- Figma (Design tool)
 
-This project is licensed under the terms of the [MIT license](./LICENSE).
+## 🔧 Installatie
+<!-- Bij Instalatie staat hoe een andere developer aan jouw repo kan werken -->
+1. Clone deze repository
+2. Open de repository met een code editor naar keuze
+3. Open het terminal in de code editor
+4. Typ **npm install** in om alle benodigdheden voor het project te installeren
+5. Gebruik de link <a href="http://localhost:5173/">http://localhost:8001/</a> om het project lokaal te bekijken
+6. Mocht je het project online bekijken dan kan dat via <a href="https://lose-your-head-the-client-case-5q6r.vercel.app/" alt="link naar de website">deze link</a>

docs/INSTRUCTIONS.md

@@ -1,6 +1,6 @@
 # Lose Your Head - the Client Case
 
-Ontwerp en maak een website voor een opdrachtgever op basis van een Headless CMS API 
+Ontwerp en maak een website voor een opdrachtgever op basis van een Headless CMS API
 
 ## Context
 Deze leertaak hoort bij sprint 14: Lose your Head. Dit is een opdracht die je individueel uitvoert voor een opdrachtgever.
@@ -28,7 +28,7 @@ De development lifecycle kent de volgende stappen:
 
 1. Kies een user story uit de backlog van het project waar je aan gaat werken, of schrijf een nieuwe user story.  De projecten staan bij [FDND Agency](https://github.com/fdnd-agency).
 2. Maak een fork van [deze leertaak](https://github.com/fdnd-task/lose-your-head-the-client-case).
-3. Kopieer de user story waar jij aan gaat werken naar de Wiki van de geforkte repository. Deze user story ga je gedurende deze sprint beantwoorden/ verwerkelijken/ realiseren. **NB: Een user-story moet vaak nog opgesplitst worden in taken!** 
+3. Kopieer de user story waar jij aan gaat werken naar de Wiki van de geforkte repository. Deze user story ga je gedurende deze sprint beantwoorden/ verwerkelijken/ realiseren. **NB: Een user-story moet vaak nog opgesplitst worden in taken!**
 4. Plan een gesprek met de opdrachtgever, maak verkennende schetsen en bereid vragen voor en zorg dat je de opdracht helder hebt voor je aan de slag gaat.
 5. Hanteer de fases uit de dev-lifecycle om jouw project in te richten, bespreek vooraf met een docent welke stappen je denkt te gaan hanteren.
 6. Documenteer doorlopend jouw proces, alle (technische en ontwerp) beslissingen dienen onderbouwd te worden en je verwijst naar alle bronnen die je bij de verschillende fases gebruikt hebt.
@@ -50,5 +50,3 @@ DOD's deeltaak Content First
 - [ ] Per pagina een content model is gedocumenteerd.
 - [ ] Herhaalde elementen zijn aangegeven
 -->
-
-

docs/infromation-architecture.md

@@ -3,7 +3,7 @@
 ## Information Architecture
 _In het college S14W2-02-informatie-architectuur wordt behandeld hoe het structureren en organiseren van informatie op de frontend invloed heeft op de Content modelling._
 
-Analyseer de content stuctuur van de bestaande website(s) van de opdrachtgever en schets een datamodel waarmee de API kan worden ingericht. 
+Analyseer de content stuctuur van de bestaande website(s) van de opdrachtgever en schets een datamodel waarmee de API kan worden ingericht.
 
 
 
@@ -22,12 +22,12 @@ Bekijk de bestaande website(s) van het door jou gekozen project en breng de stru
 
 #### Aanpak
 
-1. Documenteer uit welke (mogelijke) pagina’s jouw opdracht bestaat en welke pagina's op elkaar lijken wat betreft de structuur. 
+1. Documenteer uit welke (mogelijke) pagina’s jouw opdracht bestaat en welke pagina's op elkaar lijken wat betreft de structuur.
 2. Schets wireframes van de verschillende paginastructuren
 3. Schets het datamodel van de content.
 4. Bespreek dit met een docent of medestudent
 
-#### Materiaal 
+#### Materiaal
 
 - [8 steps to content first design @ UX-Design](https://uxdesign.cc/8-steps-to-content-first-design-fa2885b9caee)
 - [Content modelling (in Hygraph)](https://hygraph.com/docs/getting-started/fundamentals/content-modeling)
@@ -40,5 +40,3 @@ Deze opdracht is done als:
 - [ ] Aan de hand van schetsen is gedocumenteerd welke pagina's in jouw project voorkomen.
 - [ ] Per pagina een content model is gedocumenteerd.
 - [ ] Herhaalde elementen zijn aangegeven
-
-