Skip to content

lisavanmansom/tribeforlife-squadpage

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Tribeforlife squadpage

Inhoudsopgave

Beschrijving

Deze squadpage laat alle squadmembers zien in een overzichtelijke pagina. Het doel van deze squadpage is dat je na de opleiding nogsteeds in contact kan komen doormiddel van de squadpage. Als je op een naam klikt dan linkt het naar het desbetreffende github profiel. Voor deze squadpage is qua design blacknwhite als thema en kleurpallette gekozen. We wouden een clean-design voor de squadpage zonder foto's. Doormiddel van een animatie hebben we het design wat spannender gemaakt.

Scherm­afbeelding 2024-09-19 om 11 13 25

Kenmerken

Voor deze squadpage is er gebruik gemaakt van het framework Sveltekit en wordt de data opgehaald uit Directus. Omdat dit een groepsopdracht was staat de code op een andere repo, we hebben hiervoor de repo van Zoë

De HTML is opgedeeld in sections met daarin headers, en een ul voor de lijst met namen. In de squadpage kan er via een toggle een light/dark-mode worden beheerd door de gebruiker. Met CSS keyframes zijn er een aantal kleine animaties. Er is mobile first gecodeerd, het kleinste scherm is 300px.

Installatie

Volg onderstaande stappen om zelf aan deze code te werken:

Installeer NodeJs; Ga naar de repo van Zoë Fork/clone deze repository; Open het in een code editor; Ga naar de directory 'my-app' door in de terminal cd my-app te typen; Run de command npm install; Run de command npm run dev; Klik op de localhost link en begin met coden.

Gebruik

Om deze pagina livelink te bekijken kan je klikken op de livelink in de About sectie van deze repository.

Op dit visitekaartje kan je lezen wie ik ben en waar ik vandaan kom, en kan je klikken op verschillende links om te naar mijn Github, Codepen of Instagram te gaan.

Bronnen

Licentie

This project is licensed under the terms of the MIT license.

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 59.5%
  • HTML 30.0%
  • Svelte 10.5%