Home pagina basics

Pas de gegevens in je HomeControler aan, maak hier iets moois van: src/View/{username}/home.twig

1. Profielfoto

• Plaats een profiel foto in je theme map public_html/themes/{username}/kies-een-naam.jpg
• Pas de URL aan in de HomeController, zoek naar data.profile.photo
• Controleer of de foto zichtbaar is http://127.0.0.1:8080
• Gebruik eventueel de developer tools om te debuggen, check de url van je profielfoto
• Pas eventueel aan, overleg met collega's

2. Details

• Op elke pagina staat nu "Software developer", bedenk iets unieks. "Creatieve duizendpoot", "Developer met oog voor detail", "Developer IO", als het maar anders is.
• Pas je locatie aan, tenzij je in Amstelveen woont
• Wijzig je beschikbaarheid in iets wat je zelf bedacht hebt
• Geef het juiste telefoonnummer op als die er nog niet staat.
• Pas de overige velden aan.

3. Skills

• Op elke pagina staat nu "Software developer", bedenk iets unieks. "Creatieve duizendpoot", "Developer met oog voor detail", "Developer IO", als het maar anders is.
• Pas je locatie aan, tenzij je in Amstelveen woont
• Wijzig je beschikbaarheid in iets wat je zelf bedacht hebt
• Geef het juiste telefoonnummer op als die er nog niet staat.
• Pas de overige velden aan.

3. Toon 3 topprojecten

• Controller: array projects met titel, korte winst, tech-stack en link.
• Per project één resultaatzin: "Portfolio-site -> 40% sneller laden."
• Gebruik stack-badges (PHP, Twig, JS, Tailwind).
• Elke kaart heeft een duidelijke link/knop: "Bekijk project".

4. Bewijs en vertrouwen

• Controller: proof-blok met aantallen, testimonials of certificaten.
• 2–3 concrete bullets: "Lighthouse 95+", "3 sprints Scrum", "GitLab CI opgezet".
• Korte quote met naam + rol van docent/klant.

5. Diensten / skills kort en krachtig

• Maak lijst skills (max 6) met skill + waarde: "React – snelle UI", "PHP – solide API".
• Iconen of simpele bullets; geen lange zinnen.

6. Call-to-action en contact

• Onderin: opvallende CTA naar mail, LinkedIn of GitLab.
• Secundaire CTA: "Download CV".
• Mailto- en social-links in de controller, niet hardcoded in Twig.

7. Microcopy en toon

• Ik-vorm en actief: "Ik bouw", "Ik help", "Ik lever".
• Vermijd clichés; gebruik resultaten.
• Kort houden: zinnen van 8–14 woorden.

8. Layout-tips voor modern gevoel

• Veel witruimte en 2–3 koloms grid voor projecten.
• Accentkleur voor knoppen/highlights, één neutrale achtergrondkleur per sectie.
• Consistente typografie (display-font voor titels, leesbaar font voor body).
• Subtiele hover-states; geen zware animaties.

9. Data invullen in controller

• Open src/Controller/{{UserName}}/HomeController.php en vul alle velden/arrays in.
• Houd content los van markup; variabelen doorgeven aan Twig.
• Check links naar GitLab/LinkedIn/CV.

10. Test je view

• Start de dev-server en bekijk de Home-pagina.
• Controleer mobiel: hero stapelt netjes, CTA zichtbaar, projectkaarten stapelen/scrolbaar.
• Kort tekst tot 1–2 regels per item.

Inspiratie-checklist (afstrepen)

• [ ] Heldere headline met doelgroep en waarde
• [ ] Eén primaire CTA boven de fold
• [ ] 3 projecten met resultaatzin + stack-badges
• [ ] Bewijsblok met cijfers/quote
• [ ] Skillslijst met max 6 items
• [ ] Contact-CTA + socials uit de controller
• [ ] Mobiel getest, geen overlappende teksten