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

Your tribe for life - Profile card

Redesign je visitekaartje op basis van een headless CMS en een framework.

📋 Inhoudsopgave

• Beschrijving
• Kenmerken
• Installatie
• Gebruik
• Bronnen
• Licentie

📄 Beschrijving

Dit visitekaartje laat zien wie ik ben, wat ik leuk vind en waar ik te vinden ben. Er staat een korte biografie over wat ik doe en overige belangrijke informatie zoals mijn huidige woonplaats, leeftijd, github profiel en codepen profiel. Voor dit visitekaartje wilde ik mezelf kwa design uitdagen, en heb gekozen voor een speelse layout met grid, en een passende animatie rondom het kaartje. Als inspiratie voor dit visitekaartje heb ik Y2K en Cyberpunk genomen en deze gecombineerd tot een geheel. Door de animatie blijft het interessant om naar te kijken. Er is tot slot ook een dark mode, deze kun je aanzetten door op het maantje links onder in het kaartje te klikken.

Light mode

Dark mode

Link naar mijn visitekaartje

📍 Kenmerken

Voor dit visitekaartje gebruik ik het framework Sveltekit en haal ik data op uit Directus.

De HTML is opgedeeld in een <article> met daarin een <h1>, <ul>'s met daarin <li>'s, <p>'s en waar nodig een paar <div>'s en <span>'s voor CSS styling. Met CSS keyframes heb ik mijn zelfgemaakte ster svg's laten animeren over een orbit om mijn visitekaartje heen. Elke ster heeft een andere animatie snelheid zodat ze niet tegelijkertijd animeren. Met Javascript toggle ik dark mode en het wel/niet laten zien van de juiste icoontjes.

Ik ben mobile first begonnen, en het kaartje is responsive vanaf het kleinste scherm van 320px. Op kleine mobiele schermen staat de animatie uit, omdat daar geen ruimte er voor is.

📲 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] Ga naar de directory 'frontend' door in de terminal cd frontend te typen
• [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 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

• 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.