Projeto: o portfólio vestido e publicado · CSS do zero

O que você já construiu

Nada aqui é novo. As treze aulas anteriores escreveram a folha inteira, um pedaço por sábado. Esta aula junta, confere e publica.

meu-portfolio/
├── index.html
├── sobre.html
├── portfolio.html
├── stack.html
├── carreira.html
├── contato.html
├── estilos/
│   └── main.css
└── imagens/

Um arquivo de CSS, umas trezentas linhas, escritas à mão, sem framework. Você entende cada uma - e isso é mais raro do que parece.

Se você chegou aqui sem o curso de HTML

Precisa das seis páginas. O curso de HTML do zero as constrói nas doze aulas dele, e é o caminho mais curto. Se você já sabe HTML, monte-as com o que os exemplos deste curso mostraram: <header> com <nav>, <main id="conteudo">, seções com <h2> e id, cartões de projeto em <article>, a tabela de stack, o formulário de contato e o <footer> com dois <nav>.

A folha, seção por seção

1. Variáveis - o :root da aula 3, completo: superfície, texto, realce, borda, escala de seis espaços, raios, medida, fontes, curva e tempo.

2. Reset - o da aula 12: box-sizing, margin: 0 no body, as três linhas de imagem, font: inherit nos campos e ul[class].

3. Base - as tags cruas: body com fonte, tamanho e altura de linha; os títulos com clamp(), line-height curto e text-wrap: balance; os links; o :focus-visible global.

4. Layout - .envelope, .prosa, o header grudado com sticky, o footer em colunas, e as três ou quatro media queries que sobraram.

5. Componentes - .abertura, .selo, .acao e .acao--fantasma, .cartao, .grade, .bento, .etiqueta, .situacao, a tabela zebrada e o formulário.

6. Utilidades e preferências - .apenas-leitor, .pular, o bloco de tema claro e o bloco de movimento reduzido.

O que cada página deve estar mostrando

index.html - a abertura com o selo pulsando, o nome em clamp(), os dois botões e a entrada escalonada; o bento de "Como trabalho"; a grade de projetos selecionados; a trajetória; o bloco final de chamada.

sobre.html - a biografia em .prosa com 65 caracteres por linha, o retrato, as listas de ferramentas em etiquetas.

portfolio.html - a grade de cartões com auto-fit, cada um com a captura em aspect-ratio, a ficha em <dl>, as etiquetas e o link preso embaixo.

stack.html - a tabela zebrada, com scroll próprio se não couber.

carreira.html - a tabela de formação e os cargos em cartões.

contato.html - a <dl> de canais e o formulário com os estados de foco e de erro.

A lista de conferência

Cores e contraste

tinta, texto suave e realce acima de 4,5:1 nos dois temas
texto suave sobre a superfície do cartão também
nenhuma informação depende só de cor
nenhuma cor escrita fora do :root

Texto

pelo menos 16px no corpo
line-height por volta de 1.6
linhas com no máximo uns 70 caracteres na .prosa
tamanhos em rem ou clamp(), não em px
os campos do formulário na mesma fonte do resto

Layout

funciona em 320px, 768px e 1280px
nada vaza para a direita, em largura nenhuma
as capturas não estouram o contêiner
o conteúdo tem largura máxima na tela grande
o menu de seis itens não espreme no celular

Interação

o foco é visível em tudo o que recebe Tab, nos dois temas
nenhum outline: none sem substituto
alvos de toque com pelo menos 44px
nada importante escondido atrás de :hover
o link "pular para o conteúdo" aparece no primeiro Tab

Movimento

transições entre 150ms e 300ms
só transform, opacity e filter animados
uma única animação contínua na página
prefers-reduced-motion respeitado

Peso

menos de 300 KB por página, imagens incluídas
nenhuma captura acima de 1200px de largura

Organização

variáveis no topo
arquivo na ordem geral → específico
classes com nome de papel, não de aparência
nenhum !important fora do bloco de movimento
um comentário de decisão em cada regra não óbvia

Os cinco testes finais

Estreite a janela até 320px. Nada deve vazar.
Navegue só com Tab. Você sempre sabe onde está?
Alterne o tema do sistema. Continua legível nos dois?
Abra no celular, ao sol, nos dados móveis. Dá para ler? Em quanto tempo carregou?
Desligue o CSS: nas ferramentas do navegador. A página ainda faz sentido? Se não fizer, o problema está no HTML, e o CSS não conserta.

Publicar

Se você já publicou no curso de HTML, o endereço é o mesmo: envie os arquivos novos e pronto. Se não, as duas opções gratuitas continuam sendo GitHub Pages e Netlify, e nos dois casos o arquivo precisa se chamar index.html e estar na raiz.

Depois de publicado:

abra o endereço no celular, nos dados móveis;
mande o link para três pessoas: alguém da área, alguém de fora e alguém da família;
ponha o endereço no seu perfil do GitHub, do LinkedIn e na assinatura do e-mail. Um portfólio que ninguém encontra é um exercício, não um portfólio.

O que vem depois

Três coisas ficaram faltando, e as três são JavaScript:

o menu que abre e fecha no celular, com o botão de hambúrguer;
a mensagem de erro escrita embaixo do campo, que fica lá até a pessoa corrigir;
o formulário que realmente envia, e o botão de alternar tema que guarda a escolha.

O curso de JavaScript do zero resolve as três no mesmo portfólio. Nenhuma delas é obrigatória: o que você tem agora funciona, é acessível, é rápido e é seu.

E há um quarto passo, que não é de código: manter. Um portfólio publicado envelhece. Marque uma data a cada três meses para acrescentar o projeto novo, atualizar a situação e conferir se os links ainda abrem.

Exercícios

Monte a folha inteira nas seis seções e confira que as seis páginas estão vestidas.
Percorra a lista de conferência inteira, item a item.
Faça os cinco testes finais e anote o que cada um revelou.
Peça a alguém para abrir o portfólio no celular e, em dez segundos, dizer o que você faz e como te achar.
Publique e mande o endereço para três pessoas diferentes.
Ponha o endereço no seu perfil do GitHub e do LinkedIn.
Marque no calendário, daqui a três meses, o dia de acrescentar o próximo projeto.

Referências

Guia de CSS - MDN - o curso completo, em português
Modern CSS Solutions - soluções curtas para problemas comuns
Every Layout - layouts que se acomodam sem media query