Projeto curriculo | HTML e CSS: cabeçalho, footer e variáveis CSS

As informações como habilidades e experiencias são fictícias (por enquanto)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="Style/stylemycerrear.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
</head>
<body>
    <header>
        <nav class="cabecalho">
            <img class="imagem__perfil" src="./Assets/imagem 1.jpg" alt="">
            <div class="apresentacao__links" >
                <h1 class="tittle">Vinicius Stoc</h1>
                    <a class="apresentacao__links__link" href="https://www.instagram.com/vinicius.stoc/">
                        <img class="icons" src="./Assets/icons mycarrear/instagram.png" alt="">Instagram</a>
                    <a  class="apresentacao__links__link" href="https://www.linkedin.com/in/vinicius-martins-stoc-100959267"> 
                        <img class="icons"  src="./Assets/icons mycarrear/linkedin.png" alt=""> Linkedin</a>
                    <a  class="apresentacao__links__link" href="https://www.linkedin.com/in/vinicius-martins-stoc-100959267"> 
                        <img class="icons"  src="./Assets/icons mycarrear/gmail.png" alt=""> Gmail</a>
            </div>
        </nav>
    </header>
    <main>
        <section class="apresentacão__section">
            <div class="apresentacao__sobre__mim">
                <h2 class="sobre__mim">SOBRE MIM</h2>
                <p>
                    Desenvolvedor Web com 1 ano de experiência em criação de sites e aplicativos web dinâmicos e responsivos. Especializado em tecnologias front-end como HTML, CSS, JavaScript e frameworks modernos como React e Angular. Experiência comprovada na integração de APIs, otimização de desempenho e desenvolvimento de interfaces de usuário intuitivas e acessíveis. Habilidades sólidas em back-end com Node.js, Express e bancos de dados relacionais e não-relacionais. Apaixonado por resolver problemas complexos e entregar soluções eficientes e escaláveis. Comprometido com o aprendizado contínuo e a aplicação de melhores práticas no desenvolvimento de software.
                </p>
            </div>

            <div class="apresentacao__experiencia">
                <h3 class="experiencia__1">EXPERIÊNCIA</h3>
                <p><strong>FORMAÇÃO ALURA</strong></p>
                <div class="lista__experiencia__1">
                    <ul><li>HTML e CSS</li></ul>
                    <ul><li>JavaScript</li></ul>
                    <ul><li>Node JS</li></ul>
                    <ul><li>React</li></ul>
                    <ul><li>Angular</li></ul>
                    <ul><li>back-end</li></ul>
                </div>
            </div>
            
        </section>
    </main>
    <footer></footer>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CABEÇALHO - HEADER */

.cabecalho{
    display: flex;
    align-items: center;
    height: 300px;
    gap: 100px;
    background-color: #1b1d2d;
}

.imagem__perfil{
    margin-left: 200px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: solid white 3px;
}

.tittle{
    font-size: 60px;
    margin-bottom: 20px ;
    font-family: "Roboto", sans-serif;
    font-weight: 100px;
}

.apresentacao__links{
    color: white;
    flex-direction: column;
    display: flex;
    font-size: 30px;
    font-family: "Roboto", sans-serif;
    font-weight: 50px;
}

.apresentacao__links__link{
    color: white;
    display: flex;
    gap: 10px;
    text-decoration: none;
    margin: 5px;
    align-items: center;
}

.icons{
    width: 25px;
    height: 25px;
}


/* MAIN  */


.apresentacão__section{
    margin: 70px 200px;
    font-family: "Open Sans", sans-serif;
}

.sobre__mim{
    font-family: "Roboto", sans-serif;
    font-weight: 100px;
    width: 200px;
    height: 50px;
    background-color: #bbbb;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 3px;
    margin-bottom: 15px;
    transform: skew(-10deg);
    border-radius: 2px;
}


.apresentacão__section p{
    line-height: 30px;
}


.experiencia__1 {
    font-family: "Roboto", sans-serif;
    font-weight: 100px;
    width: 200px;
    height: 50px;
    background-color: #bbbb;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 3px;
    margin: 50px 0 20px 0;
    transform: skew(-10deg);
    border-radius: 2px;
}

.apresentacao__experiencia p {
    font-size: 23px;
    margin: 40px 0 30px 0;

}

.lista__experiencia__1{
    line-height: 30px;
    font-weight: 400px;
}