Welkom op de website van FDND! Op deze pagina vind je een overzicht van de komende en afgelopen "We Love Webs"-evenementen. Zo mis je er nooit een en kun je je kennis op een handige manier verrijken!
- Homepagina: Bij het bezoeken van de site word je begroet met een leuke header, waarop een foto van de vorige "We Love Web" te zien is. Als je verder naar beneden scrolt, krijg je een toelichting op de "We Love Webs". Daaronder vind je een dynamische kalender met zowel de komende als de afgelopen evenementen.
- Detailpagina: ...
- SvelteKit & Directus API: De website is gebouwd met SvelteKit en haalt de data dynamisch op via de Directus API.
Hier bevind zich de live link van de website bekijk het hier!
- Homepagina: De gebruiker start op de homepagina, waar direct een prachtige hero-sectie met enkele navigatieknoppen zichtbaar is. Bij het scrollen naar beneden verschijnt de dynamische kalender, waarbij de gebruiker met twee knoppen kan kiezen om in de huidige maand te blijven, een maand vooruit te gaan of een maand terug te bladeren. Daarnaast kan de gebruiker op een specifieke "We Love Web" klikken, waarmee een detailpagina over dat specifieke evenement wordt geopend.
Informatie over de ontwerpkeuzes en branding van de We love Web pagina, inclusief kleurenpaletten, typografie en andere visuele elementen die bijdragen aan het FDND thema.
Voor deze website hebben we de nieuwe huisstijl van FDND toegepast. In de briefing werd aangegeven dat ze niet tevreden waren met de huidige huisstijl en dat er op verschillende FDND-pagina's inconsistenties waren in de stijl. Wij waren enthousiast over de nieuwe huisstijl en besloten dat alle pagina's dezelfde uitstraling en sfeer moesten krijgen, zodat er meer eenheid ontstaat.
Hier vind je de bronnen van de tools die we hebben gebruikt.
Instructies voor het lokaal opzetten van de FDND pagina, zodat ontwikkelaars het project kunnen downloaden, installeren en zelf kunnen draaien met behulp van SvelteKit.
1. Vereisten
Zorg ervoor dat je de volgende software hebt geïnstalleerd:
- Node.js
- Packetmanager zoals npm of yarn
2. git repository clonen
Je kunt op de main pagina de repo clonen en je eigen lokale versie opvragen.
3. SvelteKit en packets installeren
Om aan het project te werken, moet je eerst een nieuw SvelteKit-project opzetten. Dit kan eenvoudig gedaan worden met create-svelte.
Open je terminal.
Voer npm install of yarn install uit om de juiste packets te installeren om aan het project te werken.
4. Deployen op vercel
Op vercel.com kun je verder op weg met het deployen van een svelteproject.