Apostila Prática: Expandindo o seu Portfólio

Piso Baixo Alinhamento e Contraste

No seu arquivo CSS, localize a classe .hero. Substitua a regra justify-content: center; por justify-content: flex-end; e adicione padding-right: 10vw;. Isso vai empurrar o texto para a direita, mas mantendo uma margem segura da borda.

Validação visual: O texto do Hero está legível sobre o fundo feito no Photoshop? Se a imagem for muito clara, mude a cor do texto no CSS.

Teto Alto Fundo Translúcido, Bordas e Sombras

Para dar um toque profissional e garantir a leitura, vamos adicionar um fundo translúcido apenas atrás do texto. Mas por que parar por aí? Podemos adicionar bordas neon ou sombras!

1. No seu arquivo HTML, envolva os textos do Hero com uma nova <div> que contenha a classe desejada (exemplo: class="hero-texto").

<!-- Exemplo de onde colocar no HTML -->
<div class="hero-texto">
    <h1>Seu Título</h1>
    <p>Seu subtítulo</p>
</div>

2. No arquivo CSS, chame a classe recém-criada .hero-texto e adicione as propriedades abaixo. Você pode misturar essas opções para ver qual combina mais com você:

/* Opção 1: Vidro Fosco (Backdrop Filter Elegante) */
.hero-texto {
    background-color: rgba(0, 0, 0, 0.5); /* Fundo preto com 50% de transparência */
    backdrop-filter: blur(5px); /* Borra a imagem que estiver atrás da caixa */
    padding: 30px; /* Espaço interno para o texto não encostar nas bordas */
    border-radius: 15px; /* Arredonda as quinas da caixa */
}

/* Opção 2: Cyberpunk / Neon / Gamer */
.hero-texto-neon {
    background-color: rgba(20, 20, 20, 0.8);
    border: 2px solid #00ffcc; /* Borda sólida verde água */
    box-shadow: 0 0 15px rgba(0, 255, 204, 0.5); /* Sombra externa que imita um brilho LED */
    padding: 30px;
    border-radius: 10px;
}

Entendendo a mágica:
- rgba(R, G, B, A): O 'A' (Alpha) dita a opacidade do fundo. Ele vai de 0 (totalmente invisível) até 1 (cor sólida opaca).
- box-shadow: X Y desfoque cor;: Usado para criar uma sombra atrás do elemento. Se o X e Y forem 0, a sombra (ou brilho) se espalha por igual ao redor de toda a caixa.

Piso Baixo A Estrutura Base

Vá para o HTML e, logo após o fechamento da tag </section> do seu Hero, crie a nova estrutura:

<section id="sobre" class="sobre-mim">
    <h2>Sobre Mim</h2>
    <p>Escreva aqui sua biografia, seus interesses e o que você gosta de fazer.</p>
</section>

💡 Dica de CSS: Adicione um padding: 50px 20px; na classe .sobre-mim para desgrudar o texto das bordas.

Teto Alto Layout de Duas Colunas (Foto + Texto)

Vamos usar o Flexbox para colocar sua foto de perfil ao lado do texto. Escolha uma foto sua bem legal!

/* Adicione no seu CSS */
.sobre-mim {
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    gap: 2rem; /* Cria um espaço entre a foto e o texto */
}

.imagem-sobre {
    width: 300px;
    max-width: 100%;
    object-fit: cover; /* Evita que a foto fique esticada/amassada */
}

Elevando Além do Teto Navegação Suave, Efeitos Hover e Animações

Vamos conectar o botão do Hero com a seção "Sobre Mim", deixar a foto perfeitamente redonda e adicionar interações vivas que reagem ao mouse do usuário!

• Link de Âncora (IDs vs Classes): Transforme o botão do Hero em um link: <a href="#sobre">Ver Projetos</a>. Isso dirá ao navegador para procurar o elemento com id="sobre".
  💡 Nota: Lembra do ponto (.) que usamos para Classes? O símbolo de tralha (#) é usado no HTML/CSS para buscar um ID único! Uma página pode ter várias classes iguais, mas um ID pertence a apenas um único elemento.
• Rolagem Suave: No CSS, aplique na tag root (html): html { scroll-behavior: smooth; }. Isso faz a página deslizar de forma cinematográfica em vez de dar um "pulo" seco de uma seção para outra.
• Foto Redonda Perfeita: Na classe .imagem-sobre, adicione border-radius: 50%;. Cuidado: para a imagem não virar um ovo, você deve usar o object-fit: cover; com altura e largura exatamente iguais (ex: width: 300px; height: 300px;).

Quer impressionar de verdade? (Efeito Hover)
Adicione uma animação que faz a sua foto crescer suavemente quando o visitante passa o mouse por cima dela. Nós usamos a pseudo-classe :hover para detectar o mouse.
💡 Nota: Os dois pontos (:) no CSS não criam um crachá novo; eles representam um "estado" ou "comportamento" de um elemento que já existe (como estar sendo pairado pelo mouse).

/* 1. O ESTADO NORMAL (Adicione na classe que já existe) */
.imagem-sobre {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--ochre); /* Cria uma moldura dourada na foto */
    transition: all 0.3s ease-in-out; /* O SEGREDO: faz qualquer mudança durar 0.3 segundos! */
}

/* 2. O ESTADO COM MOUSE EM CIMA (Crie este novo bloco logo abaixo) */
.imagem-sobre:hover {
    transform: scale(1.05); /* Aumenta o tamanho da foto em 5% */
    box-shadow: 0 10px 25px rgba(0,0,0,0.8); /* Adiciona uma sombra dramática em volta */
}