[Projeto] Projeto Final | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Boa tarde pessoal! Segue meu projeto:

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>Portfolio</title>
    <link rel="stylesheet" href="style.css"> 
</head>
<body>
    <main>
        <div class="container">
        <h1>Eleve seu negócio digital a outro nível <span>com um Front-end de qualidade!</span></h1>
        <div class="social-buttons">
        <button><a href="https://www.instagram.com/_tavariuss/" target="_blank">Instagram</a></button> 
        <button><a href="https://www.linkedin.com/in/jonas-tavares-984315160/" target="_blank">Linkedin</a></button>
        </div>
        <div class="profile-container">
        <img src="img-20180330.jpg" alt="Foto do Jonas lendo" class="profile-picture">
        <p>Olá! Sou Jonas Tavares, desenvolvedor Front-end em formação e com bacharelado em Publicidade e Propaganda.<br> Atualmente me especializando em <span>React, HTML e CSS</span>.<br> Meu background em Publicidade me permite trazer uma abordagem criativa e estratégica para os projetos, unindo a estética à funcionalidade. Vamos criar algo incrível juntos?
        </div>
        <footer>
        <div class="contact-info">
        <h3><span>Contato:</span></h3>
        <p>Telefone: (21) 97457-1187</p>
        <p>E-mail: jonastavares98@gmail.com</p>
        </div>
    </footer>
    </main>
</body>
</html>

CSS

h1{
    color: white;
    font-style: normal 17px arial;
}
.container{
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}
.profile-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.profile-picture{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-top: 30px;
    margin-bottom: 10px;
}
.contact-info{
    margin-bottom: 20px;
}
.social-buttons{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    flex-direction: row;
    align-items: center;
    margin-top: 30px;
}
span{
    color: rgb(36, 127, 131);
    font-style: normal 17px arial;
}
h3{
    color: rgb(36, 127, 131);
    font-style: normal 17px arial;
}
p{
    color: white;
    font-style: normal 17px arial;
}
button{
    background-color: rgb(36, 127, 131);
    color: white; 
    border: 1px solid white;
    border-radius: 50px;
    padding: 10px 20px;
    cursor: pointer;
} 
button a{
    color: white;
    text-decoration: none;
}
img{
    border: 3px solid rgb(36, 127, 131);
    border-radius: 35px;
    padding: 15px;
    width:200px;
}
body{
    background-color:#3c3c3c
}

Foto do projeto final