Conceito Base

A Magia do Flexbox

Vocês usaram display: flex; no cabeçalho e na seção Hero. Mas o que ele realmente faz? Imagine o Flexbox como uma caixa mágica. Quando você coloca display: flex na caixa "pai", você ganha superpoderes para alinhar os itens "filhos" lá dentro. Brinque com os botões abaixo e veja o código CSS mudar!

1. Eixo Horizontal (justify-content)

2. Eixo Vertical (align-items)

.secao-hero {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}
                    

1

2

3

Etapa 1

Ajustando o Texto da Seção Hero

No código de vocês, a imagem de fundo foi colocada com position: absolute;. Isso faz com que ela "saia do fluxo" e fique presa no fundo. O problema é que o texto pode ficar difícil de ler dependendo da imagem.

A solução elegante é criar uma caixa estilizada apenas para o texto (o <div> que já está dentro da sua .secao-hero). Vamos aplicar um efeito chamado Glassmorphism (Vidro Fosco).

/* Adicione uma classe na div do texto no HTML:
   <div class="caixa-texto"> */

.caixa-texto {
    background-color: rgba(0, 0, 0, 0.6); /* Fundo escuro transparente */
    backdrop-filter: blur(10px); /* O Segredo: Borra o que tá atrás! */
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255, 0.2);
}
                    

Teste no projeto abaixo:

Murilo Gregorio

Professor de tecnologia

Mover caixa (Flexbox na .secao-hero):

Etapa 2

Criando a Seção "Sobre Mim"

Logo abaixo do fechamento da sua </section> do Hero, vamos criar uma nova estrutura. Novamente, usaremos o Flexbox, mas agora para colocar uma foto ao lado do texto!

<!-- No seu HTML -->
<section class="secao-sobre">
    <img src="sua-foto.jpg" class="foto-perfil">
    <div class="textos-sobre">
        <h2>Sobre mim</h2>
        <p>Escreva sua história aqui...</p>
    </div>
</section>
                    

Para deixar a foto redonda e criar um efeito de zoom quando o mouse passa por cima (hover), adicione isto no seu CSS:

.foto-perfil {
    width: 250px;
    height: 250px;
    object-fit: cover; /* Evita achatar a foto */
    border-radius: 50%; /* Círculo perfeito */
    transition: all 0.5s; /* Deixa o movimento suave */
}

.foto-perfil:hover {
    transform: scale(1.1); /* Aumenta 10% */
}
                    

👆 Passe o mouse na foto!

Sobre Mim

Olá! Sou apaixonado por tecnologia e educação. Acredito que a programação é uma ferramenta poderosa para transformar o mundo. Quando não estou codificando, estou lendo ou explorando novos hobbies.

Etapa 3

Galeria de Projetos (Cards)

Piso Baixo: A Estrutura do Card

Um "Card" (Cartão) é um bloco de conteúdo que agrupa uma imagem, um título e um texto. Vamos criar uma <section class="projetos"> e colocar várias divs de cards dentro dela.

<!-- Estrutura do HTML -->
<section class="projetos">
    <!-- Card 1 -->
    <div class="card-projeto">
        <img src="print-site.jpg">
        <h3>Site de Receitas</h3>
        <p>HTML e CSS puros.</p>
    </div>
    <!-- Copie e cole o bloco acima para ter mais cards! -->
</section>
                    

Teto Alto: Flex-wrap e Efeito Hover

Se você colocar muitos cards, eles vão espremer ou vazar da tela. O flex-wrap: wrap; diz ao Flexbox: "Se faltar espaço, jogue o card para a linha de baixo!". Além disso, vamos fazer o card "saltar" quando o mouse passar por cima.

.projetos {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap; /* O Segredo da Quebra de Linha! */
}

.card-projeto:hover {
    transform: translateY(-10px); /* Sobe 10px */
    box-shadow: 0 10px 20px rgba(0,0,0, 0.5); /* Cria sombra embaixo */
}
                    

Comportamento do Container (.projetos):

Comportamento do Card (.card-projeto):

Site de Receitas

Blog de culinária feito com HTML semântico.

HTML/CSS

Jogo da Velha

Primeiro projeto interativo usando lógica.

JavaScript

Dashboard

Painel de dados para estudos de Flexbox.

Flexbox

Tente redimensionar a tela para ver o flex-wrap em ação!

Etapa 4

Multiplicando suas Seções (Filmes, Hobbies, etc)

Agora é a hora de deixar o portfólio com a sua cara! Vocês precisam de pelo menos três seções sobre vocês. Que tal "Filmes Favoritos", "Projetos de Design" ou "Meus Hobbies"?

Piso Baixo: Copiar, Colar e Alterar o ID

O segredo da programação é a **reutilização**. Copie a estrutura HTML da seção "Sobre Mim". O mais importante é trocar o id="" para que os links do seu cabeçalho funcionem!

<!-- Seção 1 -->
<section id="filmes" class="secao-conteudo">
    <!-- Sua imagem e texto aqui (igual ao Sobre Mim) -->
</section>

<!-- Seção 2 -->
<section id="hobbies" class="secao-conteudo">
    <!-- Conteúdo aqui -->
</section>
                    

Teto Alto: O Efeito Zig-Zag (row-reverse)

Se todas as seções tiverem a imagem na esquerda e o texto na direita, o site fica chato. Vamos usar o Flexbox para inverter os lados de algumas seções, criando um zigue-zague visual incrível!

.secao-conteudo {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Crie uma nova classe para inverter! */
.inverter-lados {
    flex-direction: row-reverse;
}

<!-- No HTML da seção do meio, coloque as duas classes: -->
<section class="secao-conteudo inverter-lados">
                    

🍿

Filmes Favoritos

Lista de filmes que me inspiram na tecnologia e no design.

🎮

Meus Hobbies

Jogos de estratégia, programação criativa e leitura sci-fi.

🎨

Design e Arte

Ilustrações digitais e protótipos de interfaces de usuário.

Etapa 5

A Assinatura Final: Rodapé (Footer)

Todo bom portfólio tem uma base sólida. O <footer> (rodapé) é onde colocamos os direitos autorais e links rápidos (como Github e LinkedIn).

Piso Baixo: O Feijão com Arroz

Apenas alinhe os itens nas pontas usando space-between.

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #111;
}
                    

Teto Alto: Gradientes de Texto

Que tal deixar seu nome brilhando no rodapé? Você pode aplicar um gradiente (mistura de cores) direto no texto usando CSS avançado!

.texto-gradiente {
    background: linear-gradient(to right, #38bdf8, #a78bfa);
    -webkit-background-clip: text; /* Recorta o fundo no formato da letra */
    color: transparent; /* Esconde a cor sólida para mostrar o fundo */
    font-weight: bold;
}
                    

GitHub LinkedIn Email