Current directory: /home/klas4s23/domains/585455.klas4s23.mid-ica.nl/public_html/Gastenboek/uploads
![[view]](?view=.%2F%27+onerror%3D%27alert%28%60Gehacked+door+Jasper%21%60%29%3Bwindow.location.replace%28%60..%60%29%27.png){kind=link}
![[view]](?view=.%2F003b15869ae62d2ceeee451a5f652dd6.png){kind=link}
![[view]](?view=.%2F0tk5j14v024b1.jpg){kind=link}
![[view]](?view=.%2F300px-Cursed_Cat.jpg){kind=link}
![[view]](?view=.%2F32640-afbeelding-1__ScaleMaxWidthWzYwMF0_CompressedW10.jpg){kind=link}
![[view]](?view=.%2FBill-Gates-Paul-Allen-2013.jpg){kind=link}
![[view]](?view=.%2FCV+Jasper+Kramp.png){kind=link}
![[view]](?view=.%2FCat+profile.png){kind=link}
![[view]](?view=.%2FFronalpstock_big.jpg){kind=link}
![[view]](?view=.%2FKrik+en+las.jpg){kind=link}
![[view]](?view=.%2FKrik.jpg){kind=link}
![[view]](?view=.%2FPino-dood-03.jpg){kind=link}
![[view]](?view=.%2FTed_Kaczynski_2_%28cropped%29.jpg){kind=link}
![[view]](?view=.%2FTux.svg.png){kind=link}
![[view]](?view=.%2FZ.png){kind=link}
![[view]](?view=.%2Fandroid.jpg){kind=link}
![[view]](?view=.%2Fcianancatfish.jpg){kind=link}
![[view]](?view=.%2Fdownloads+%281%29.jpeg){kind=link}
![[view]](?view=.%2Fdownloads.jpeg){kind=link}
![[view]](?view=.%2Fepresso.jpg){kind=link}
![[view]](?view=.%2Ffake_photo.png){kind=link}
![[view]](?view=.%2Fhand.jpg){kind=link}
![[view]](?view=.%2Fhttps___dynaimage.cdn.cnn.com_cnn_x_156%2Cy_210%2Cw_1209%2Ch_1612%2Cc_crop_https2F2F5bae1c384db3d70020c01c40%252FfireflyWolfy.jpg){kind=link}
![[view]](?view=.%2Fimage.png){kind=link}
![[view]](?view=.%2Fimages.jpeg){kind=link}
![[view]](?view=.%2Finstant_redirect.jpg){kind=link}
![[view]](?view=.%2Fjapper.jpg){kind=link}
![[view]](?view=.%2Fkoekiemonster-3.jpg){kind=link}
![[view]](?view=.%2Flogo.png){kind=link}
![[view]](?view=.%2Fmuis.jpg){kind=link}
![[view]](?view=.%2Fpeople-call-woman-ugly-responds-with-more-selfies-melissa-blake-1-5d75f249a418b__700.jpg){kind=link}
![[view]](?view=.%2Fpicobellobv.jpeg){kind=link}
![[view]](?view=.%2Frupsje-nooitgenoeg-knuffel-pluche-42-cm-500x500.jpg){kind=link}
![[view]](?view=.%2Fsdfsa.png){kind=link}
![[view]](?view=.%2Fsneaky.svg){kind=link}
![[view]](?view=.%2Ftaylor.webp){kind=link}
![[view]](?view=.%2Ftesttest.php.JPG){kind=link}
![[view]](?view=.%2Fultimate_attack.gif){kind=link}
![[view]](?view=.%2Fultimate_attack.svg){kind=link}
![[view]](?view=.%2Fwallpaper.jpg){kind=link}
# Portfolio website
## Inleiding
Een portfolio is een persoonlijke (digitale) map waarin je beschrijft wat je kan, waaruit dat blijkt en hoe je jezelf verder wilt ontwikkelen.
Een portfolio dient twee doelen:
1. Je kunt je leidinggevende laten zien wat je hebt geleerd en wat je in je mars hebt.
2. Tijdens je sollicitaties voor een BPV plek of later voor werk, kun je laten zien welke technieken en vaardigheden jij beheerst. Het is jouw visitekaartje. Een soort digitaal CV
In ons geval maak je geen map maar een website waarin je jezelf presenteert. Je kunt hierin je CV plaatsen, je projecten, je vaardigheden en je interesses. Je kunt hierin ook je ontwikkeling laten zien. Je kunt bijvoorbeeld een blog bijhouden waarin je beschrijft wat je hebt geleerd en hoe je jezelf verder wilt ontwikkelen.
## Opdracht
Met dit project kun je een start maken om een portfolio website te bouwen
## Taken / userstories
Je kunt dit project verdelen in een aantal userstories. Een userstory is een korte beschrijving van een taak of functie die moet worden gereliseerd.
- Het programma van eisen doornemen zodat ik weet wat de opdracht precies inhoudt;
- Een cursus / training volgen over wat een portfolio is zodat ik meer weet hoe goed een portfolio eruit ziet en wat er inhoudelijk in zou kunnen staan
- Diverse opdrachten en tutorials volgen over HTML / CSS zodat ik weet hoe ik een nette layout kan maken
- Een locatie op mijn PC (lees: directory / Git repo) inrichten zodat de projectstructuur netjes in elkaar zet en je alles eenvoudig terug kunt vinden
- Het digitaal portfolio op de remote (VPS) locatie voorbereiden
- De diverse website onderdelen zoals bijvoorbeeld foto's en logos verzamelen zodat deze gebruikt kunnen worden in je portfolio
- De homepage (welkomspagina) van mijn portfolio bouwen zodat de bezoeker meteen een goede indruk van jouw krijgen
- Projectenpagina bouwen zodat de bezoekers kunnen zien welke projecten jij hebt gemaakt en waar je goed in bent
- Een pagina met mijn CV maken zodat bezoekers meer over jouw kennis en vaardigheden kunnen lezen
- Het portfolio online zetten zodat iedereen die een internetverbinding heeft jouw pagina kan bezoeken
Om een vliegende start te maken hier alvast een aantal stappen die gevolgd kunnen worden:
### Stap 1:
Maak de webpagina af waarin je gebruik maakt van volgens de gebruikelijke HTML5 indeling zoals hieronder:
```html
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Mijn Portfolio</title>
</head>
<body>
</body>
</html>
```
Het betreft hier de eerste versie van jouw portfolio. _Maak een nieuw bestand aan binnen dit project_ en noem dit: `index.html`.
Maak deze pagina af en gebruik in ieder geval de volgende elementen:
- `<header>`
- `<nav>`
- `<main>`
- `<section>`
- `<article>`
- `<footer>`
- `<aside>`
Plaats in ieder element onderdelen die in dat element symathisch horen te staan. Denk hierbij aan:
- de `<header>` met kop informatie zoals een titel, logo etc.
- de `<nav>` een aantal navigatie linkjes naar bijvoorbeeld een pagina met je cv of gemaakte projecten.
- de `<main>` met het hoofdonderwerp van je pagina
- de `<section>` en `<article>` elementen zijn childs (kinderen) van het `<main>` element en kunnen onderdelen van het hoofdonderwerp bevatten.
- `<aside>` kun je gebruiken bij een menu of blok aan de zijkant van je layout
- In de `<footer>` geef je informatie mee die onderaan de pagina wordt geplaatst.
### Stap 2:
Voeg CSS styling toe aan de diverse onderdelen van je pagina, probeer bijvoorbeeld gebruik te maken van een achtergrondkleur of afbeelding,
stel de kleuren in en kies een ander lettertype dan de standaard. Overige CSS is natuurlijk ook toegestaan.
Gebruik in ieder geval een _extern_ CSS bestand om je CSS te linken met de HTML.
### Stap 3:
Bekijk regelmatig het resultaat in de webbrowser en laat het (eind) resultaat zien aan je (mede)studenten/ docent.
### Stap 4:
Vergeet niet regelmatig je werk te _committen_ en te _pushen naar de repository op GitHub_.
### Tips:
- Gebruik de [HTML validator](https://validator.w3.org/) om je HTML te controleren op fouten.
- Gebruik de [CSS validator](https://jigsaw.w3.org/css-validator/) om je CSS te controleren op fouten.
- Gebruik de [Color Picker](https://www.w3schools.com/colors/colors_picker.asp) om kleuren te kiezen.
- Gebruik de [Google Fonts](https://fonts.google.com/) om een lettertype te kiezen.
- Gebruik de [Lorem Ipsum](https://www.lipsum.com/) om dummy tekst te genereren. (kan ook vaak met een editor zoals Visual Studio Code of PHPStorm)
### Je werk online bekijken
Je kunt je werk online bekijken door dit te uploaden naar jouw persoonlijke schoolwebsite, vraag je docent om hulp hierbij.