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

[Canonical HTML page](https://gradiently.design/pt-br/guide/developer-portfolio-design)

Um portfólio de desenvolvedor é julgado pelo código que você linka e pelo cuidado visível que você teve. Aqui estão uma estrutura, um fundo de hero para colar, cards de projeto que se leem rápido e prévias de link bem acabadas.

## The short version

- Um bom portfólio de desenvolvedor tem quatro partes: um hero curto que diz o que você constrói, de três a seis cards de projeto, uma seção sobre você breve e um jeito fácil de entrar em contato.
- Um fundo de hero feito com camadas de gradientes CSS carrega na hora e mostra gosto visual sem uma imagem pesada.
- Cada card de projeto deve dizer o problema, o que você construiu e o resultado, com links para o projeto no ar e para o código.
- Uma imagem Open Graph de 1200×630 faz o link do seu portfólio parecer bem acabado quando é compartilhado em candidaturas, chats e redes sociais.
- Menos projetos, mais bem explicados, fazem um portfólio mais forte do que uma longa grade de tutoriais.

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

| Seção | O que faz | Limite a |
| --- | --- | --- |
| Hero | Seu nome e o que você constrói | Uma linha e uma frase de apoio |
| Projetos | Prova de que você entrega | De três a seis cards |
| Sobre | Como você trabalha, o que quer a seguir | Um parágrafo curto |
| Textos ou palestras | Mostra como você pensa (opcional) | Três links |
| Contato | Facilita o próximo passo | E-mail, GitHub, LinkedIn |

Uma página basta para a maioria dos desenvolvedores. Crie páginas de projeto só para trabalhos que merecem uma história mais longa.

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](https://gradiently.design/pt-br/guide/hero-section-design) 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](https://gradiently.design/pt-br/guide/website-hero-background) e [mesh gradient em CSS](https://gradiently.design/pt-br/guide/css-mesh-gradient) vão além.

Fundo de hero índigo profundo: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

A camada de base: um único brilho índigo que se dissolve num quase preto. Calmo o bastante para texto branco em qualquer ponto.

```css
.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;
}
```

Um hero com dois brilhos em CSS puro. Mantenha o brilho mais forte longe de onde fica o título, para que o texto continue legível.

Se quiser movimento, anime devagar, mantenha o texto parado e respeite `prefers-reduced-motion`; [movimento reduzido](https://gradiently.design/pt-br/guide/reduced-motion) explica como. Um pouco de granulado por cima esconde o banding em gradientes escuros grandes, assunto de [textura de ruído em CSS](https://gradiently.design/pt-br/guide/css-noise-texture).

## 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.

### Card fraco

- “App de clima” com uma captura de tela
- Uma lista de oito tecnologias
- Nenhuma ideia do que você fez pessoalmente
- Um link de demo quebrado

### Card forte

- “Rota: troca de turnos para a equipe de um café”
- O problema numa frase
- Sua parte e um resultado mensurável
- Link no ar funcionando e um repositório organizado

```css
.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;
}
```

Uma grade de cards responsiva. Uma proporção fixa de imagem mantém todos os cards no mesmo formato, mesmo quando as capturas de tela variam.

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](https://gradiently.design/pt-br/guide/dynamic-og-images) mostra como gerá-las no build; [tamanho da imagem Open Graph](https://gradiently.design/pt-br/guide/open-graph-image-size) trata dos recortes.

Uma imagem Open Graph horizontal para um portfólio de desenvolvedora com o nome dela e uma descrição de uma linha

A prévia da página inicial: o nome e a linha principal, nada mais.

Uma imagem Open Graph combinando para um projeto de portfólio chamado Rota, sobre o mesmo gradiente

A prévia de uma página de projeto no mesmo layout e fundo.

## 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](https://gradiently.design/pt-br/guide/personal-branding) 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.

## FAQ

### O que um portfólio de desenvolvedor deve incluir?

Um hero de uma linha sobre o que você constrói, de três a seis cards de projeto com problema, solução e resultado, uma seção sobre você curta e links de contato. Linke os projetos no ar e o código deles.

### Quantos projetos um portfólio de desenvolvedor deve ter?

De três a seis projetos bem explicados são mais fortes do que uma grade longa. Escolha trabalhos que mostrem o tipo de vaga que você quer a seguir.

### Qual deve ser o tamanho da imagem Open Graph de um portfólio?

1200×630 pixels. Mantenha o nome e a descrição de uma linha no centro para que nada seja cortado em prévias quadradas.

### Um portfólio de desenvolvedor deve ter fundo animado?

Só se for sutil, não atrasar a página e respeitar as configurações de movimento reduzido. Um gradiente CSS em camadas dá o mesmo acabamento quase sem custo de desempenho.