index.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio Daniel Leite</title>

    <!-- Normalize css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
        integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Meus css -->
    <link rel="stylesheet" href="./assets/css/global.css">
    <link rel="stylesheet" href="./assets/css/styles.css">
    
</head>

<body>

    <main class="main">
        <header class="header">

            <img class="photo" id="profile.photo" src="./assets/img/my-photo.png" alt="Foto de Perfil">

            <div class="text">
                <h1 class="title">
                    Olá,<br>
                    eu sou o <span id="profile.name">Carregando...</span>
                </h1>

                <div class="information">
                    <p class="job" id="profile.job">Carregando...</p>
                    <p class="location" id="profile.location">Carregando...</p>
                    <p class="phone">
                        <a href="tel:(16) 122443534" id="profile.phone">Carregando...</a>
                    </p>
                    <p class="email">
                        <a href="mailto:email@email.com" id="profile.email">Carregando...</a>
                    </p>
                </div>
            </div>
        </header>

        <section class="acordeon">
            <button class="trigger" type="button">
                <h2>Skills</h2>
            </button>

            <div class="content">
                <div class="skills">
                    <section class="tools">
                        <h3>Habilidades Profissionais:</h3>
                        <ul id="profile.skills.hardSkills">
                            <li>Carregando...</li>
                        </ul>
                    </section>
                    <section class="personal">
                        <h3>Habilidades Pessoais:</h3>
                        <ul id="profile.skills.softSkills">
                            <li>Carregando...</li>
                            <li>Carregando...</li>
                            <li>Carregando...</li>
                        </ul>
                    </section>
                </div>
            </div>
        </section>

        <section class="acordeon">
            <button class="trigger" type="button">
                <h2>Idiomas</h2>
            </button>

            <div class="content">
                <ul class="languages" id="profile.languages">
                    <li>Carregando...</li>
                </ul>
            </div>
        </section>

        <section class="acordeon">
            <button class="trigger" type="button">
                <h2>Educação</h2>
            </button>

            <div class="content">
                <section class="dio">
                    <h3>Minhas conquistas na DIO</h3>
                    <div id="dioEducation">
                        Carregando...
                    </div>
                </section>
                <section class="school">
                    <ul id="schoolEducation">
                        <li>Carregando...</li>
                    </ul>
                </section>
            </div>
        </section>

        <section class="acordeon">
            <button class="trigger" type="button">
                <h2>Portfólio</h2>
            </button>

            <div class="content">
                <ul class="portfolio" id="profile.portfolio">
                    <li>
                        Carregando...
                    </li>
                </ul>
            </div>
        </section>

        <section class="acordeon">
            <button class="trigger" type="button">
                <h2>Experiência Profissional</h2>
            </button>

            <div class="content">
                <ul class="experience" id="profile.professionalExperience">
                    <li>Carregando...</li>
                </ul>
            </div>
        </section>

        <footer>
            <a href="https://www.dio.me/" target="_blank">
                <img src="assets/img/dio.svg" alt="DIO">
            </a>
        </footer>
    </main>

    <script src="assets/js/acordeon.js" defer></script>
    <script src="assets/js/api.js" defer></script>
    <script src="assets/js/main.js" defer></script>
</body>

</html>