Your tribe for life - Squadpage
Ontwerp en maak met een team een overzicht van jouw tribe met alle online visitekaartjes, op basis van een headless CMS en een framework.
📋 Inhoudsopgave
📄 Beschrijving
Op deze squadpage staat een overzicht van onze tribe met alle leden. Vanuit de homepage kan je naar de verschillende squads gaan om specifieker te kijken. Ook is er de mogenlijkheid alleen onze teamleden te bekijken. Om meer details van een squadmember te bekijken, kun je klikken op hen kaartje in het grid. Een kaartje met nog meer details verschijnen vervolgens in beeld.
Onze squadpage is gebasseerd op de schilderijen van Mondriaan, zoals te zien is aan de primaire kleuren en de blokkige layout. Als extra zit er een custom cursor op de website van een penseel, passend bij het thema van een Mondriaan.
📍 Kenmerken
Voor deze website hebben wij gebruik gemaakt van het framework Sveltekit. Samen met Directus halen we vervolgens de data van iedereen op.
De belangrijkste CSS voor deze website is het Mondriaan grid, gemaakt met grid-template-areas.
📲 Installatie
Volg onderstaande stappen om zelf te werken aan deze code:
- [x] Installeer NodeJs
- [x] Fork/clone deze repository
- [x] Open het in een code editor naar keuze
- [x] Run de command npm install
- [x] Run de command npm run dev
- [x] Klik op de localhost link en begin met coden!
✂️ Gebruik
Om deze pagina live te bekijken kan je klikken op de livelink in de About sectie van deze repository.
Op deze squadpage kan je leden uit je tribe bekijken en informatie over hen lezen.
ℹ️ Bronnen
- SvelteKit @ kit.svelte.dev
- Svelte getting started @ MDN
- Getting Started with Directus and SvelteKit @ docs.directus.io
Licentie
This project is licensed under the terms of the MIT license.