Esboço de um portifólio, com uma foto de um homem branco de oculos e camiseta cinza, um título, um parágrafo e dois botões

Esboço de um portifólio, com uma foto de um homem branco de oculos e camiseta cinza, um título, um parágrafo e dois botões, mostrando que está responsiva

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Portfólio Front-End</title>
</head>
<body>
    <header></header>
    <main class="conteudo">
        <img src="./imagem/eu222.jpg" alt="Homem branco, cabelo preto e curto, barba por fazer, camisa cinza, com ocúlos de grau, sorrindo para a câmera." class="responsive-img" loading="lazy">
        <div class="container-textos">
            <h1 class="titulo"><span class="btn-color-texto">Eleve seu negócio digital a outro nível</span> <strong class="btn-color-especial">um Front-end de qualidade!</strong></h1>
            <p class="btn-color-texto">Olá! Rodrigo Morello Junior, desenvolvedor Front-end com especialidade em JavaScript, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="container-redes-sociais">
                <a href="https://www.linkedin.com/in/rodrigo-morello-dev/" class="btn-botoes">LinkedIn</a>
                <a href="https://github.com/Seremendy" class="btn-botoes">GitHub</a>
            </div>
        </div>
    </main>
    <footer></footer>
</body>
</html>

CSS

:root {
    --main-color: #22D4FD;
    --text-color: white;
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: black;
    color: var(--text-color);
}

.conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 2rem;
    padding: 1rem;
}

.responsive-img {
    max-width: 100%;
    width: 28rem;
    height: auto;
    border-radius: 5px;
}

.btn-color-especial {
    color: var(--main-color);
}

.btn-color-texto {
    color: var(--text-color);
}

.container-textos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    max-width: 30rem;
    text-align: center;
}

.btn-botoes {
    padding: 1rem 2rem;
    background-color: var(--main-color);
    border-radius: 5px;
    color: black;
    text-decoration: none;
    margin: 0 1rem;
}

.container-redes-sociais a:hover {
    background-color: var(--text-color);
    color: var(--main-color);
}

@media (min-width: 768px) {
    .conteudo {
        flex-direction: row;
    }
}

Assim ficou meu codigo, fiz tudo no "olhometro" sem terminar de ver a sequencia dos videos assistindo 03 Projeto no Figma, nao upei o projeto porque vou assistir e concertar ou adicionar com forme as aulas.

queria saber se tem algo que eu poderia melhorar?