Portfolio Challenge

Portfolio Challenge – Persoonlijke website

De uitdaging

Ontwerp en bouw een complete persoonlijke website waarmee je laat zien wie je bent, wat je kunt en waar je naartoe wilt. Je website bestaat uit vier inhoudelijk verschillende pagina’s. De pagina’s hebben samen één herkenbare huisstijl en werken goed op een computer, tablet en telefoon.

Geschatte tijd: 6 tot 8 lesuren, inclusief ontwerp, bouw en testen.

🎯 Leerdoelen

Na deze challenge kun je:

• een website met meerdere gekoppelde HTML-pagina’s bouwen;
• HTML-elementen op de juiste manier gebruiken;
• een eigen huisstijl uitwerken in één externe stylesheet;
  
• rekening houden met toegankelijkheid en privacy;
• je website controleren met concrete testgevallen;
• je ontwikkelproces aantoonbaar maken met Git-commits.

📦 Het eindproduct

Je levert een persoonlijke website op met minimaal deze bestanden:

portfolio/
├── index.html
├── profiel.html
├── overmij.html
├── visie.html
├── css/
│   └── style.css
└── images/
    └── jouw-afbeeldingen

Je gebruikt geen CSS-framework zoals Bootstrap of Tailwind. In deze challenge moet jouw eigen CSS zichtbaar en beoordeelbaar zijn.

✏️ Deel 1 – Ontwerp voordat je bouwt

Maak eerst twee eenvoudige wireframes:

1. een wireframe van de homepage op een breed desktopscherm;
2. een wireframe van dezelfde homepage op een mobiel scherm.

In de wireframes moeten minimaal de header, navigatie, hoofdinhoud, belangrijke onderdelen en footer herkenbaar zijn. Een wireframe mag op papier of digitaal worden gemaakt.

Style Guide

Kies daarna:

• een kleurenpalet met minimaal drie kleuren;
  
• vaste stijlen voor knoppen, links, kaarten en tussenruimtes;
• een zelfgemaakt logo of persoonlijk woordmerk.

Deze drie punten samen met jouw wireframe vormen samen jouw style guide. 

🛠️ Deel 2 – Bouw vier verschillende pagina’s

Alle pagina’s hebben dezelfde header, navigatie, huisstijl en footer. De inhoud en hoofdindeling verschillen per pagina.

1. Home – index.html

De homepagina is de etalage van je portfolio. Een bezoeker moet binnen enkele seconden begrijpen wie je bent en wat er op de website te vinden is.

Verplicht op deze pagina:

• een opvallende introductie of hero-sectie met jouw naam of gekozen presentatienaam;
• een korte introductietekst;
• minimaal drie visuele kaarten die doorlinken naar de andere pagina’s;
• minimaal één relevante afbeelding of illustratie;
• een duidelijke call-to-action, bijvoorbeeld “Bekijk mijn profiel”.

2. Mijn profiel – profiel.html

Deze pagina laat jouw kwaliteiten en interesses zien.

Verplicht op deze pagina:

• een profielfoto, avatar of zelfgemaakte illustratie;
• een korte persoonlijke introductie;
• minimaal vier vaardigheden of kwaliteiten;
• minimaal drie interesses;
• een overzichtelijke layout met minimaal twee kolommen op een breed scherm.

3. Doelen stellen – doelenstellen.html

Plaats hier de portfolio-opdrachten van Persoonlijk Leiderschap.

Voor onderwijsperiode 1 (OP1) zijn dat:

1. Mijn voorbeeld van persoonlijk leiderschap
2. Mijn tegeltje
3. Vooruitkijken
4. Weekplanning
5. Zelfcheck persoonlijk leiderschap
6. Terugkijken

Zorg ervoor dat alle opdrachten goed leesbaar zijn op je website.

Zet deze onderdelen niet als één lange tekst onder elkaar. Gebruik een bewuste presentatievorm, bijvoorbeeld een tijdlijn, kaarten, hoofdstukken of een combinatie daarvan. Elk onderdeel heeft een eigen kop en korte introductie.

4. Jezelf ontwikkelen – jezelfontwikkelen.html

Plaats op deze pagina een titel, een korte tekst waarin je uitlegt dat de pagina later wordt aangevuld en gebruik dezelfde navigaite als op de ander pagina's.

5. Kritisch nadenken – kritischnadenken.html

Plaats op deze pagina een titel, een korte tekst waarin je uitlegt dat de pagina later wordt aangevuld en gebruik dezelfde navigaite als op de ander pagina's.

6. Samenwerken – samenwerken.html

Plaats op deze pagina een titel, een korte tekst waarin je uitlegt dat de pagina later wordt aangevuld en gebruik dezelfde navigaite als op de ander pagina's.

Je portfolio bijhouden

Gedurende het eerste jaar krijg je elke periode nieuwe portfolio-opdrachten. Voeg deze steeds toe aan je website, zodat je portfolio blijft groeien.

Aan het einde van jaar 1 wordt je volledige portfolio gecontroleerd op volledigheid. Zorg er daarom voor dat alle opdrachten van alle periodes op je website staan.

🧭 Gedeelde onderdelen

Elke pagina bevat:

• een <header> met logo of woordmerk;
• een <nav> met links naar alle vier de pagina’s;
• een <main> met de unieke pagina-inhoud;
• een <footer> met copyrightregel en minimaal één extra link;
• een herkenbare actieve status bij het menu-item van de geopende pagina.
• je kunt op een eenduidige manier tussen de pagina's navigeren. Dit betekent dat de navigatiestructuur op alle pagina's dus hetzelfde is.

Alle links moeten vanaf iedere pagina correct werken. Controleer dit ook wanneer de website in een aparte projectmap staat.

⚙️ Technische eisen

1. Gebruik geldige HTML5 met <!doctype html>, lang="nl", charset, een viewportinstelling en een unieke paginatitel.
2. Gebruik elementen zoals header, nav, main, section, article en footer.
3. Gebruik op elke pagina precies één logische <h1>. De overige koppen volgen een logische volgorde.
4. Alle eigen styling staat in css/style.css. Gebruik geen grote blokken interne of inline CSS.
   
5. Gebruik classes voor herbruikbare componenten zoals knoppen, kaarten en secties.
6. Voeg minimaal twee zichtbare interactiestijlen toe, bijvoorbeeld voor :hover en :focus-visible.
   
7. De website veroorzaakt op een mobiel scherm geen horizontale scrollbar.
   

♿ Toegankelijkheid

• Elke betekenisvolle afbeelding heeft een passende alt-tekst.
• Decoratieve afbeeldingen hebben een lege alt="".
• Tekst en achtergrond hebben voldoende kleurcontrast.
• Links zijn niet alleen door kleur herkenbaar.

🤖 AI gebruiken

Je mag AI gebruiken om uitleg, feedback of hulp bij een deelprobleem te vragen. Jij blijft verantwoordelijk voor de code die je inlevert.

• Vraag AI bij voorkeur om één duidelijk onderdeel tegelijk.
• Lees en test gegenereerde code voordat je deze gebruikt.
• Verwijder code die je niet begrijpt of niet nodig hebt.
• Deel geen privégegevens met een AI-assistent.
• Bewaar de prompts die je daadwerkelijk hebt gebruikt.

Als je AI gebruikt, lever je minimaal twee gebruikte prompts in en leg per prompt uit wat je met antwoord heb gedaan en wat jezelf hebt aangepast.

🧪 Deel 4 – Test jouw website

Test de website pas wanneer alle pagina’s aanwezig zijn. Leg de resultaten vast in een testtabel met de kolommen Test, Verwacht, Werkelijk resultaat en Opgelost?.

Los gevonden fouten op en test het betreffende onderdeel daarna opnieuw. Een testverslag waarin alles direct “goed” is zonder uitleg, is niet voldoende.

HTML validator kan je op het internet vinden en controleert of de HTML aan alle formele eisen voldoet.

🚀 Uitdaging (minimaal één kiezen)

Ben je eerder klaar en voldoe je aantoonbaar aan alle eisen? Kies dan één verdieping:

1. voeg met JavaScript een themawisselaar (light/dark) toe en onthoud de keuze;
2. maak een filter waarmee onderdelen van de pagina “Over mij” kunnen worden gefilterd;
3. voeg subtiele animaties toe en respecteer prefers-reduced-motion;
   
4. Maak een uitklapmenu dat ook met je toetsebord werkt.

📤 Inleveren

Lever één duidelijk benoemde projectmap of ZIP-bestand in met:

1. de vier HTML-bestanden: index.html, profiel.html, overmij.html en visie.html;
2. de externe stylesheet css/style.css;
   
3. het desktop- en mobiele wireframe;
4. jouw style guide;
5. schermafdruk van alle pagina's.
   

De docent kan/zal je vragen de website op je laptop te demonstreren.

--

Doelenstellen (OP1)

📤 Inleveren

Duidelijke schermafdruk(ken) van de pagina "doelen stellen".

Jezelf Ontwikkelen (OP2)

📤 Inleveren

Duidelijke schermafdruk(ken) van de pagina "doelen stellen".

Kritisch Nadenken (OP3)

📤 Inleveren

Duidelijke schermafdruk(ken) van de pagina "kritisch nadenken".

Samenwerken (OP4)

📤 Inleveren

Duidelijke schermafdruk(ken) van de pagina "samenwerken".