Skip to content

lisavanmansom/tribeforlife-profilecard

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

28 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

TRIBE4LIFE PROFILECARD

Inhoudsopgave

Beschrijving

Mijn visitekaartje laat zien wie ik ben, wat ik leuk vind en wat ik niet leuk vind. Er staat een korte biografie met daarin belangrijke informatie zoals woonplaats en leeftijd. Voor dit visitekaartje wou ik een eclactisch design toepassen, hierdoor kon ik mijzelf uitdagen met grid, matrix3d() en animaties in het kaartje. Als inspiratie had ik tijdschriften uit Azië gebruikt waarin vintage en cyberpunk terugkwam wat ik heb gecombineerd met mijn eigen stijl.

Scherm­afbeelding 2024-09-16 om 12 15 21

Kenmerken

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

De HTML is opgedeeld in <section> met daarin een <h>'s, <p>'s en <div>'s. Met CSS keyframes en matrix3d / matrix heb ik verschillende animaties gemaakt. Ik ben mobile first begonnen, en het kaartje is responsive tot aan het kleinste scherm van 350px.

Installatie

Volg onderstaande stappen om zelf aan deze code te werken:

  • Installeer NodeJs;
  • 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

  • Svelte 72.0%
  • JavaScript 15.2%
  • CSS 9.1%
  • HTML 3.7%