Portfolio Website

🏆 Het Eindproject

Bouw een complete portfolio website die je webontwikkeling vaardigheden toont. Dit project combineert alles wat je geleerd hebt: HTML, CSS en JavaScript.

✅ Vereisten

Pagina's (4 verplicht)

Technische Vereisten

• Semantische HTML5 elementen
• Extern CSS bestand
• Responsive design (mobielvriendelijk)
• JavaScript voor interactiviteit (minstens 2 functies)
• Consistente navigatie op alle pagina's

JavaScript Functies (kies er minstens 2)

• Mobiele navigatie toggle
• Contact formulier validatie
• Vloeiend scrollen
• Scroll animaties
• Donker/Licht modus toggle
• Afbeelding gallery lightbox

📁 Bestandsstructuur

portfolio/
├── index.html
├── about.html
├── projects.html
├── contact.html
├── css/
│   └── style.css
├── js/
│   └── main.js
└── images/
    └── (schermafdrukken, avatar)

🎨 Voorgesteld Kleurenschema

🔧 Mobiele Navigatie Toggle (Verplicht)

<button class="menu-toggle">☰</button>
<nav class="nav-links">
    <a href="index.html">Home</a>
    <a href="about.html">Over</a>
    <a href="projects.html">Projecten</a>
    <a href="contact.html">Contact</a>
</nav>

const menuToggle = document.querySelector('.menu-toggle');
const navLinks = document.querySelector('.nav-links');

menuToggle.addEventListener('click', () => {
    navLinks.classList.toggle('active');
});

.menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background: #2c3e50;
        flex-direction: column;
    }
    
    .nav-links.active {
        display: flex;
    }
}

📝 Contact Formulier Validatie

const formulier = document.getElementById('contact-formulier');

formulier.addEventListener('submit', function(e) {
    e.preventDefault();
    
    const naam = document.getElementById('naam').value;
    const email = document.getElementById('email').value;
    
    if (naam === '' || email === '') {
        alert('Vul alle verplichte velden in');
        return;
    }
    
    if (!email.includes('@')) {
        alert('Voer een geldig email adres in');
        return;
    }
    
    alert('Bericht succesvol verzonden!');
    formulier.reset();
});

🏗️ Project Checklist

🎉 Gefeliciteerd!

Je hebt alle cursus projecten voltooid!