No celular está abrindo sem responsividade

Oi, Sandra, tudo bem?

Muito obrigado por compartilhar seu código.

Pelo que percebi ao analisar o arquivo que contém os estilos CSS, vi que a definição da largura da tela no media-query foi feito da seguinte maneira:

@media (max-widht: 1200px)

Perceba que as letras da palavra widthforam trocadas, portanto, as regras estabelecidas dentro da responsividade criada, não podem ser aplicadas.

Podemos corrigir esse problema, simplesmente corrigindo a escrita da palavra widht para width.

Espero ter ajudado. Caso tenha dúvidas estarei à disposição. Abraços e bons estudos!

Falta de atenção. E o professor ainda enfatizou esta parte. rsrs Esta parte deu certo sim, mas as letras estão muito grandes e todo o conteúdo está a partir da aba "Sobre mim". Abaixo da aba home parece ser margem e isso não deveria estar assim. Será que vc saberia me ajudar nesta parte tb?

Oi, Sandra, tudo bem?

Antes de resolvermos os problemas que você mencionou, podemos melhorar a responsividade do projeto aplicando na parte das media-queries a propriedade padding: 5%; na classe .apresentacao e width: auto; ca classe .apresentacao__conteudo. Dessa forma o código para dispositivos com telas menores que 1200 pixels, será escrito da seguinte maneira:

 @media (max-width: 1200px) {
    .cabecalho {
        padding: 10%;
    }

    .cabecalho__menu {
        justify-content: center;
    }
    .apresentacao {
        flex-direction: column-reverse;
        padding: 5%;
    }
    .apresentacao__conteudo{
        width: auto;
    }
}

Com relação ao tamanho das letras, podemos alterar a propriedade font-size manualmente dentro das media-queries para ajustar ao tamanho que acharmos conveniente em dispositivos menores. Por exemplo, para diminuir as fontes do título podemos alterar o valor de "2.25 rem" para "1.75 rem" dentro da media-query. Assim o valor seria escrito da seguinte maneira:

 .apresentacao__conteudo__titulo {
        font-size:1.75rem;
    }

Com relação ao conteúdo exibido na página sobre, ele terá todas as informações pessoais na página "Sobre mim", uma introdução às suas redes sociais e um resumo na página "Home", e as informações profissionais na página do currículo. Caso queira que todas as informações na aba sobre mim sejam adicionadas em outra página, você pode mover a estrutura HTML referente a essas informações para a página que desejar.

Para conseguir resolver o problema referente ao espaçamento abaixo da seção do cabeçalho, podemos refatorar os espaçamentos do código. Alterando o gap na classe .apresentacao de "82px" para "60px" e na media-query o padding estabelecido na classe .cabecalho teria o valor modificado de 10% para 5%. De modo que os códigos completos ficariam assim:

 .apresentacao{
    padding: 3% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

 @media (max-width: 1200px) {
    .cabecalho {
        padding: 5%;
    }

    ... o restante do código da media-query abaixo foi omitido

Outras alterações podem ser feitas para melhorar o desempenho dos botões com relação a responsividade, alterando o valor da largura (width) de 50% para 80%. Dessa forma ao usar celulares com dimensões menores que 400px as informações não ultrapassaram as bordas do botão.

Espero ter ajudado. Caso tenha outras dúvidas, peço que crie um novo tópico no fórum para que eu possa te ajudar de forma mais assertiva.

Abraços e bons estudos!

Muito obrigada pela ajuda. Deu muito pra aprender, através destas interações.