Passo 3: Seções em Grid
Com o cabeçalho pronto, é hora de organizar o conteúdo: a seção 'Sobre mim' lado a lado com a foto, e os projetos numa grade responsiva.
Estudar esta lição interativa →A seção "Sobre mim" ganha display: flex com a imagem arredondada via border-radius: 50%, e aqui o raciocínio é mobile-first (Módulo 7): o estilo base é o da tela estreita (foto acima do texto, centralizada), e uma @media (min-width: 561px) só acrescenta o que muda quando há espaço (foto ao lado do texto). Já a seção "Projetos" usa o Grid do Módulo 6: grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)), que organiza os cartões de projeto numa grade que se reacomoda sozinha, sem media query nenhuma, dependendo de quanto espaço existe disponível.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Sobre mim em flex (foto + texto lado a lado); projetos em grid, com auto-fit reacomodando os cartões conforme o espaço.
Repare também no :hover de cada cartão de projeto (Módulo 8): um leve translateY para cima, combinado com box-shadow e transition, o mesmo efeito de "cartão que reage ao mouse" praticado no Módulo 8, aqui aplicado num contexto de produto real.