Oii, Gabriel!
Que legal que você tá se dedicando ao projeto de currículo, e é ótimo saber que você está gostando do resultado. Vamos tentar resolver as questões que você mencionou.
Problema de Zoom/Distorção: Isso pode estar acontecendo devido a unidades fixas de medida no seu CSS, como pixels, que não se ajustam bem em diferentes tamanhos de tela ou níveis de zoom. Uma solução seria usar unidades relativas, como em
, rem
, %
ou vw
(largura da viewport) e vh
(altura da viewport). Por exemplo, em vez de definir a largura de um elemento como width: 800px;
, você pode tentar width: 80vw;
para que ele se ajuste melhor ao tamanho da tela.
Código Extenso e pesado: Uma maneira de simplificar e otimizar seu código CSS é através do uso de variáveis CSS e da organização do CSS em seções. As variáveis CSS permitem que você defina valores que podem ser reutilizados em todo o seu arquivo. Por exemplo:
:root {
--primary-color: #3498db;
--font-size: 16px;
}
body {
font-size: var(--font-size);
color: var(--primary-color);
}
Além disso, considere separar seu CSS em arquivos menores ou seções lógicas, como "estilos de layout", "tipografia", "cores", etc. Isso pode ajudar a manter tudo organizado e mais fácil de gerenciar. Sobre códigos no HTML, o tamanho infelizmente vai ser grande mesmo porque está utilizando somente HTML e CSS, mais para frente nos seus estudos aprenderá sobre JavaScript que irá ajudar a deixar o código mais enxuto.
O link que mandou não está funcionando, mas você pode testar essas modificações que comentei.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!