[Projeto] Meu código da página | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Segue meu código HTML. Ainda estou começando e fui meio que na raça, testando e vendo o resultado.

Figma: https://www.figma.com/file/9ad4z4glKk33O2eDNjDXlS/Portfolio---Curso-1-(Copy)?type=design&node-id=0%3A1&mode=design&t=0mH6Gs7lRJk1uIOW-1

<!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">
    <link rel="stylesheet" href="estilo.css">
    <title>Portfolio</title>
</head>
<body>
    <header>
        <h1>Portfolio</h1>
    </header>

    <main>
        <div class="apresentacao">
            <h2>Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h2>
    
            <p>Olá! Sou desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>    

            <div class="botoes-wrapper">
                <span><a href="" target="_blank">Instagram</a></span>
            
                <span><a href="" target="_blank">Github</a></span>    
            </div>
        </div>

        <div class="imagem">
            <img src="/imagens/Imagem.png" alt="foto do desenvolvedor">    
        </div>
    </main>

    <footer>
        <p>Atividade do curso da Alura, desenvolvida por João Luiz</p>
        <p>2024</p>
        <div class="redes-sociais">
            <a href="https://github.com/joaoluizcienciadados"><img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="ícone Github"></a>
            <a href="https://www.linkedin.com/in/joaoluizbr/"><img src="https://cdn.icon-icons.com/icons2/2428/PNG/512/linkedin_black_logo_icon_147114.png"alt="ícone Linkedin"></a>
        </div>  
    </footer>
</body>
</html>

e CSS:

:root {
    --cor-texto: #f6f6f6;
    --cor-fundo: #000000;
    --cor-botao: #22D4FD;
    --cor-texto-destaque: #22D4FD;
    --cor-texto-botão: #000000;
}

body {
    background-color: var(--cor-fundo);
    width: 100%;
    min-width: 70%;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    color: var(--cor-texto);
    font-size: 1.5rem;
    padding-left: 30px;
}

main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px calc(20% + 10px); 
    margin: 20px;
}

.apresentacao {
    width: 45%;
}

main h2 {
    color: var(--cor-texto);
    font-size: 2.5rem;
}

strong {
    color: var(--cor-texto-destaque);
}

main p {
    color: var(--cor-texto);
    font-size: 1.2rem;
}

.botoes-wrapper {
    display: flex;
    justify-content: center;
}

.botoes-wrapper span {
    margin: 0 10px; 
}

span {
    display: inline-block; 
    width: 100%; 
    background-color: var(--cor-botao);
    border: 1px solid #22D4FD;
    font-weight: bold;
    border: solid 1px;
    border-radius: 10px;
    padding: 25px 20px 25px 20px;
    text-align: center;
}

a {
    text-decoration: none;
    color: var(--cor-texto-botão);
}

.imagem {
    width: 45%; 
    text-align: center; 
    position: relative; 
    margin-bottom: 25px; 
}

.imagem img {
    width: 100%; 
    height: auto;
    max-width: 80%; 
    border-radius: 20px; 
}

footer {
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background-color: var(--cor-fundo); 
    text-align: center; 
    color: var(--cor-texto); 
}

footer a {
text-decoration: none;
color: #0A3871;
}

.redes-sociais a img {
filter: invert(45%);
width: 30px;
height: 30px;
border-radius: 100%;
padding: 4px;
}