Portfólio de desenvolvedor: um site que mostra bom gosto

Um bom portfólio de desenvolvedor é um site pequeno e rápido com quatro partes: um hero que diz numa linha o que você constrói, de três a seis cards de projeto que explicam o problema e o seu papel na solução, uma seção curta sobre você e um link de contato. O bom gosto aparece nos detalhes: um fundo de hero calmo, cards consistentes, tipografia legível e uma prévia de link bem acabada quando um recrutador cola sua URL num canal de contratação. Você não precisa de uma vitrine de frameworks. Precisa de uma página que obviamente recebeu cuidado.

A estrutura de um portfólio de desenvolvedor

Diga o que você constrói, não o que você é. “Eu construo checkouts rápidos para lojas online” diz mais ao leitor do que “Desenvolvedor full stack”. Se você está no começo da carreira, “Eu construo web apps acessíveis com React e Postgres” é honesto e específico. Design de seção hero fala mais sobre como escrever essa primeira linha.

Um fundo de hero que mostra bom gosto

Muitos portfólios usam uma página branca chapada ou um fundo animado pesado que atrasa todo o resto. Um meio-termo é um gradiente CSS em camadas: dois ou três brilhos radiais suaves sobre um fundo escuro ou claro. São poucas linhas de código, sem custo de rede, e ainda parecem pensadas. Fundo de hero de site e mesh gradient em CSS vão além.

.hero {
  min-height: 70vh;
  color: #f4f4f8;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgb(56 189 248 / 0.28), transparent 70%),
    radial-gradient(ellipse 50% 60% at 15% 20%, rgb(124 58 237 / 0.45), transparent 70%),
    linear-gradient(180deg, #0e1020 0%, #07080f 100%);
}

.hero h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  line-height: 1.05;
  max-width: 18ch;
}

Se quiser movimento, anime devagar, mantenha o texto parado e respeite prefers-reduced-motion; movimento reduzido explica como. Um pouco de granulado por cima esconde o banding em gradientes escuros grandes, assunto de textura de ruído em CSS.

Cards de projeto que explicam o impacto

Um card de projeto tem segundos para justificar um clique. Dê a cada um as mesmas quatro partes: um título, o problema numa frase, o que você construiu e o resultado, e depois links para o projeto no ar e para o código. Os resultados não precisam ser dramáticos. “Usado todos os dias pelo nosso time de 30 pessoas” ou “Reduziu o carregamento da página de 4 s para 1,2 s” funcionam bem quando são verdadeiros e seus.

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.card {
  border-radius: 1rem;
  padding: 1.5rem;
  background: linear-gradient(160deg, #161a2e 0%, #0f1222 100%);
  border: 1px solid rgb(255 255 255 / 0.08);
}

.card img {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

Capturas de tela parecem mais bem acabadas quando ficam sobre o mesmo fundo. Coloque cada uma sobre o fundo do seu hero com uma pequena margem, em vez de mostrar capturas cruas do navegador em tamanhos diferentes.

Imagens Open Graph para o seu portfólio

O link do seu portfólio vai ser colado em candidaturas, mensagens de recrutadores, canais do Slack e posts em redes sociais. Todos eles mostram a imagem Open Graph, de 1200×630 pixels. Um card em branco ou uma captura cortada desfaz o cuidado que você teve com o site. Faça uma para a página inicial e, se tiver páginas de projeto, uma por projeto no mesmo layout. Imagens OG dinâmicas mostra como gerá-las no build; tamanho da imagem Open Graph trata dos recortes.

Como escrever as seções sobre e contato

Mantenha a seção sobre você num parágrafo curto em primeira pessoa: o que você gosta de construir, como gosta de trabalhar e o que está procurando a seguir. Uma frase sobre a vida fora do código cai bem; uma biografia completa, não. Termine a página com um jeito óbvio de falar com você, normalmente um endereço de e-mail escrito por extenso, mais GitHub e LinkedIn. Um formulário de contato cria atrito para um recrutador que só quer copiar seu endereço para uma mensagem. Se você está se candidatando a vagas ligadas a design, marca pessoal ajuda a manter o site, o currículo e os perfis com o mesmo visual.

Pequenos detalhes que transmitem bom gosto

• Uma família tipográfica, dois pesos. Uma boa sem serifa para tudo e uma monoespaçada só para código.
• Uma largura de 60 a 75 caracteres para o texto corrido, para que os parágrafos sejam confortáveis de ler.
• Contraste de verdade: o texto corrido deve passar no WCAG AA contra o fundo.
• Um favicon que combine com as cores do hero.
• Carregamento rápido: um portfólio de desenvolvedor que leva quatro segundos para aparecer já diz muito por si.
• Um tema escuro e um claro só se você for manter os dois direito.

Se você prefere não desenhar à mão as imagens de prévia e as molduras das capturas, o Gradiently pode criá-las sobre um Mark, um fundo em gradiente vivo que mantém seu texto legível, e com o Pro redimensionar um design para a prévia de link, um post no LinkedIn e um header do X num único passo. Ele também pode ser conectado ao ChatGPT e ao Claude, para você pedir um conjunto de prévias de projeto enquanto escreve os estudos de caso.