<!-- index.html -->
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Idaamo</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js' crossorigin='anonymous'></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    

    <nav>
        <div class="nav-content">
            <a href="#accueil">Home</a>
            <a href="#competences">Skills</a>
            <a href="#projets">Projects</a>
            <a href="#passions">Passions</a>
            <a href="#contact">Contact</a>
        </div>
    </nav>

    <section id="accueil">
        <div class="container">
            <div class="pseudo pseudo-glow">Idaamo</div>
            <h1>Adam</h1>
            <p class="subtitle">Full Stack Developer</p>
            <p class="description">Passionate about web development </p> <p class="description" style="white-space: pre-line;">and new technologies.</p>
        </div>
    </section>
    <section id="competences">
        <div class="container">
            <h2>Skills</h2>
            <div class="skills-container">
                <div class="skills-category">
                    <h3>Programming languages</h3>
                    <div class="skills" id="programming-skills">
                        <!-- Rempli dynamiquement par JavaScript -->
                    </div>
                </div>
                <div class="skills-category">
                    <h3>Languages</h3>
                    <div class="skills" id="languages">
                        <!-- Rempli dynamiquement par JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="projets">
        <div class="container">
            <h2>My Projects</h2>
            <div class="projects-grid" id="projects-container">
                <!-- Rempli dynamiquement par JavaScript -->
            </div>
        </div>
    </section>

    <section id="passions">
        <div class="container">
            <h2>My Passions</h2>
            <div class="hobbies-grid" id="hobbies-container">
                <!-- Rempli dynamiquement par JavaScript -->
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container">
            <h2>Contact</h2>
            <div class="contact-info">
                <h3>You can find me on:</h3>
                <div class="discord-tag">
                    <span class="discord-icon"><i class='fab fa-discord' style='font-size:24px'></i></span>
                    <span class="discord-username">idaamo</span>
                </div>
                <a href="https://github.com/Idaamo" target="_blank">
                    <div class="github-tag" href="https://github.com/Idaamo">
                        <span class="github-icon"><i class='fab fa-github' style='font-size:24px'></i></span>
                        <span class="github-username">Idaamo</span>
                    </div>
                </a>
            </div>
        </div>
    </section>

    <script src="data.js"></script>
    <script src="main.js"></script>
</body>
</html>