<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <title>Damien Hajji - Portfolio</title>
</head>
<body>
    <header class="header">
        <nav class="nav-container">
            <div class="logo">DH</div>
            <ul class="nav-links">
                <li><a href="#wbi" class="nav-link"><i class="fas fa-home"></i> Home</a></li>
                <li><a href="#overmij1" class="nav-link"><i class="fas fa-user"></i> Over Mij</a></li>
                <li><a href="cv.html" class="nav-link"><i class="fas fa-file"></i> Cv</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
        <div class="wbi section-card" id="wbi">
            <div class="intro-content">
                <h1 class="animated-title">Damien Hajji</h1>
                <p class="intro-text">Ik ben Damien, ik ben 16 jaar en ik zit op het ROC ICT College in Amersfoort, waar ik de opleiding
                    Expert IT volg. Passionate about technology and creating digital solutions.</p>
                <div class="skills-container">
                    <span class="skill-tag">HTML</span>
                    <span class="skill-tag">CSS</span>
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">IT Expert</span>
                </div>
            </div>
            <img src="img_8814.jpeg" alt="" class="profile-image hover-effect">
        </div>

        <div class="foto1 image-card">
            <div class="image-overlay">
                <img src="IMG_8814.JPG" alt="foto Damien" class="circular-image">
                <div class="overlay-content">
                    <h3>Damien Hajji</h3>
                    <p>Expert IT Student</p>
                </div>
            </div>
        </div>

        <div class="overmij1 section-card" id="overmij1">
            <h2 class="section-title">Mijn Passie</h2>
            <div class="hobby-card">
                <i class="fas fa-futbol hobby-icon"></i>
                <p>Naast mijn school en werk doe ik ook aan voetbal. Het helpt me fit te blijven en teamwork skills te ontwikkelen.</p>
            </div> en probeer zo ook in beweging te zijn want voor mij is fit zijn heel belangrijk. 
        </div>

        <div class="foto3 image-card">
            <img src="LeoMessi20092010_pic_fcb-arsenal62.jpg" 
                 alt="Paul Pogba" class="hover-effect">
            <div class="image-caption">Inspiratie: lionel messi</div>
        </div>

        <div class="overmij3 section-card">
            <h2 class="section-title"><i class="fas fa-briefcase"></i> Werk Ervaring</h2>
            <div class="work-card">
                <h3>Bezorger</h3>
                <p>Cafeteria 't Toetje - Hoogland</p>
                <ul class="work-details">
                    <li>Verantwoordelijk voor tijdige bezorging</li>
                    <li>Klantenservice</li>
                    <li>Team coordinatie</li>
                </ul>
            </div>
        </div>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Subjects Grid</title>
                <style>
                    .subjects-grid {
                        display: grid;
                        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                        gap: 20px;
                        padding: 20px;
                        background-color: #000000;
                        border-radius: 10px;
                    }
                    .subject-item {
                        background-color: rgb(0, 0, 0);
                        border: 1px solid #ddd;
                        border-radius: 8px;
                        padding: 15px;
                        text-align: center;
                        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                        transition: transform 0.3s ease;
                    }
                    .subject-item:hover {
                        transform: scale(1.05);
                    }
                </style>
            </head>
            <body>
                <div class="subjects-grid">
                    <div class="subject-item">MOS</div>
                    <div class="subject-item">Sport</div>
                    <div class="subject-item">HTML</div>
                    <div class="subject-item">Linux</div>
                    <div class="subject-item">Nederlands</div>
                    <div class="subject-item">Engels</div>
                    <div class="subject-item">Rekenen</div>
                    <div class="subject-item">Datacom</div>
                    <div class="subject-item">Projecten</div>
                    <div class="subject-item">Windows Server</div>
                    <div class="subject-item">Service Desk</div>
                    <div class="subject-item">LOB</div>
                </div>
            </body>  <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Favorite Games and Movies</title>
            <style>
                .favorites-container {
                    display: flex;
                    justify-content: space-between;
                    gap: 20px;
                    padding: 20px;
                    background-color: #000000;
                    border-radius: 10px;
                }
                .favorites-section {
                    flex: 1;
                    background-color: rgb(0, 0, 0);
                    border-radius: 8px;
                    padding: 15px;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                }
                .favorites-section h2 {
                    text-align: center;
                    border-bottom: 2px solid #000000;
                    padding-bottom: 10px;
                    margin-bottom: 10px;
                }
                .favorites-list {
                    list-style-type: none;
                    padding: 0;
                }
                .favorites-list li {
                    padding: 8px 0;
                    border-bottom: 1px solid #000000;
                }
                .favorites-list li:last-child {
                    border-bottom: none;
                }
            </style>
        </head>
        <body>
            <div class="favorites-container">
                <div class="favorites-section">
                    <h2>Favorite Games</h2>
                    <ul class="favorites-list">
                        <li>FIFA</li>
                        <li>Call of Duty</li>
                        <li>Minecraft</li>
                        <li>Fortnite</li>
                        <li>GTA V</li>
                    </ul>
                </div>
                <div class="favorites-section">
                    <h2>Favorite Movies</h2>
                    <ul class="favorites-list">
                        <li>Avengers</li>
                        <li>Spider-Man</li>
                        <li>Star Wars</li>
                        <li>Top Gun</li>
                        <li>Fast & Furious</li>
                    </ul>
                </div>
            </div>
            </html>
        <div class="contact-formulier section-card">
            <section id="contact">
                <div class="content">
                    <h2 class="section-title"><i class="fas fa-envelope"></i> Contact Me</h2>
                    <form action="#" method="post" class="contact-form">
                        <div class="form-group">
                            <label for="name"><i class="fas fa-user"></i> Name:</label>
                            <input type="text" id="name" name="name" required class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label for="email"><i class="fas fa-envelope"></i> Email:</label>
                            <input type="email" id="email" name="email" required class="form-input">
                        </div>
                        
                        <div class="form-group">
                            <label for="message"><i class="fas fa-comment"></i> Message:</label>
                            <textarea id="message" name="message" rows="5" required class="form-input"></textarea>
                        </div>
                        
                        <button type="submit" class="submit-btn">
                            <span>Send Message</span>
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </section>
        </div>

        <footer class="footer">
            <div class="social-links">
                <a href="#" class="social-link"><i class="fab fa-github"></i></a>
                <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
            </div>
            <p>© 2024 Damien Hajji. All rights reserved.</p>
        </footer>
    </div>
</body>
</html>
