[Projeto] Projeto Final - Portfólio

Olá Julia!

Espero que esteja tudo bem contigo.

Seu projeto ficou caprichado, parabéns pelo resultado.

Gostaria de compartilhar uma pequena dica que pode melhorar ainda mais a experiência dos usuários que visitarem seu projeto. Em relação aos links para o Github e Linkedin, sugiro que você adicione o atributo target=_blank para que esses links abram em uma nova página. Isso proporcionará uma navegação mais fluída e sem interrupções para quem acessar o seu trabalho. Exemplo:

<a class="apresentacao__links__navegacao" href="https://github.com/buenojulia" target="_blank">
    <img src="./assets/github.png"> 
    Github
</a>

Com essa pequena modificação, seus visitantes poderão explorar seu perfil no Github e Linkedin sem sair da página do seu projeto.

Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos 🚀

Ah, entendi.

Obrigada pela dica, vou acrescentar esse atributo! Aproveitando, você conseguiria me ajudar a identificar o porquê da imagem não estar centralizada ao abrir o projeto em telas menores?

Boa noite, Júlia!

Encontrei o seu repositório no Github e fiz os testes. A imagem não está centralizada em telas menores porque a classe apresentacao__foto não possui estilos específicos para centralização na propriedade media.

Para resolver, podemos utilizar a propriedade margin: 0 auto, onde:

• margin: A propriedade margin controla o espaço ao redor de um elemento HTML. No nosso caso, estamos definindo margin: 0 auto, o que significa que estamos aplicando 0 margem superior e inferior e uma margem automática para a esquerda e direita do elemento.

• auto: A palavra-chave auto é usada para distribuir o espaço restante igualmente em ambos os lados de um elemento. Quando combinada com margin, ela centraliza horizontalmente um elemento dentro de seu contêiner.

Exemplo de código:

@media (max-width:920px) {

    /* Restante do código omitido para focar apenas na mudança */
    
    .apresentacao__foto {
        border: 35px solid var(--cor-mobile3);
        width: 50%;
        margin: 0 auto; /* MUDANÇA AQUI: Centraliza a imagem */
}

A seguir, o GIF com o resultado, onde a imagem fica alinhada ao centro em telas menores:

Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos 🚀