Merge branch 'main' into Footer-component-#31

README.md

@@ -1,38 +1,53 @@
-# create-svelte
-
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+# Mediahuis
+
+## Inhoudsopgave
+  * [✏️ Beschrijving](#beschrijving)
+  * [💻 Gebruik](#gebruik)
+  * [🔎 Kenmerken](#kenmerken)
+  * [🔧 Installatie](#installatie)
+
+## ✏️ 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 📸 -->
+<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.
+
+### Features
+
+#### Responsive page
+Doormiddel van media queries is de pagina responsive en te gebruiken op elk scherm formaat!
+
+#### Image optimalisatie (layout shifting)
+De images hebben een standaard width en height, zodat dit layout shifting voorkomt.
+
+### Technieken
+- HTML
+- CSS
+- JS
+- Svelte
+
+### Tools
+- Visual studio code (code editor)
+- Vercel (hosting)
+- Figma (Design tool)
+
+## 🔧 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>