29 iteration 2 bouwen layout card images bouwen second section

.env

@@ -0,0 +1 @@
+PUBLIC_APIURL = https://fdnd.directus.app

.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

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

@@ -1,31 +1,66 @@
-> _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 -->
+# Squadpage
+<img width="1800" alt="Scherm­afbeelding 2024-09-18 om 15 00 52" src="https://github.com/user-attachments/assets/df046e81-4800-4db1-970d-146bb4fb0c24">
 
 ## 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 alle klasgenoten (squadmembers zoals wij dat noemen) elkaar kunnen zien op de pagina en zo met elkaar contact kunnen houden. 
 <!-- Voeg een mooie poster visual toe 📸 -->
-<!-- Voeg een link toe naar Github Pages 🌐-->
+<a href="https://your-tribe-for-life-squad-page-lake.vercel.app/" alt="link naar squad page">Bekijk hier de website</a>
+
+## 💻 Gebruik
+<!-- Bij Gebruik staat de user story, hoe het werkt en wat je er mee kan. -->
+### User story
+Als leerling wil ik informatie over mijn klasgenoten kunnen ophalen, en kunnen bekijken met behulp van Svelte en Directus.
+
+### Gebruik van de week planner
+Door op een leerling te klikken op de home pagina kun je zijn of haar gegevens zien.
+
+## 🔎 Kenmerken
+
+### Ontwerp
+We hebben een rustig en overzichtelijk design gemaakt die ook compatibel is met mobile.
+
+### Features
+
+#### Responsive page
+Doormiddel van media queries is de pagina responsive en te gebruiken op elk scherm formaat!
+
+#### Image optimalisatie (layout shifting)
+Ik heb de images een standaard width en height gegeven zodat dit layout shifting voorkomt.
+
+### Random card component
+Aan het begin van de pagina is een component die elke keer als de site opnieuw ingeladen wordt 5 verschillende mensen laat zien.
 
-## 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? -->
+#### Masonry grid
+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.
 
-## Installatie
+#### Zwart wit naar kleur animatie
+Het ontwerp is zwart wit maar wanneer er over een kaart gehoverd wordt krijgt deze kleur.
 
-## Gebruik
+#### Stacked card component
+De makers van de site worden getoond via profiel kaarten die de ilusie wekken alsof ze op een stapel liggen.
 
-## 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://proof-of-concept-eqsl.onrender.com/" alt="ANWB Weekplanner Website">deze link.</a>

eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import prettier from 'eslint-config-prettier';
+import globals from 'globals';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+	js.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/']
+	}
+];

jsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}