# Portefólio de programador: um site que mostra bom gosto

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

Um portefólio de programador é julgado pelo código a que ligas e pelo cuidado que se vê. Aqui ficam uma estrutura, um fundo de herói para colar, cartões de projeto que se leem depressa e pré-visualizações de links com ar de acabado.

## The short version

- Um bom portefólio de programador tem quatro partes: um herói curto que diz o que constróis, três a seis cartões de projeto, uma secção breve sobre ti e uma forma fácil de te contactarem.
- Um fundo de herói feito com gradientes CSS em camadas carrega instantaneamente e mostra bom gosto visual sem uma imagem pesada.
- Cada cartão de projeto deve dizer o problema, o que construíste e o resultado, com links para o projeto em funcionamento e para o código.
- Uma imagem Open Graph de 1200×630 faz o link do teu portefólio parecer acabado quando é partilhado em candidaturas, conversas e publicações sociais.
- Menos projetos, mas bem explicados, formam um portefólio mais forte do que uma grelha longa de tutoriais.

Um bom **portefólio de programador** é um site pequeno e rápido com quatro partes: um herói que diz numa linha o que constróis, três a seis cartões de projeto que explicam o problema e o teu papel em o resolver, uma secção breve sobre ti e um link de contacto. O bom gosto está nos detalhes: um fundo de herói calmo, cartões consistentes, tipografia legível e uma pré-visualização de link com ar de acabado quando um recrutador cola o teu endereço num canal de contratação. Não precisas de uma montra de frameworks. Precisas de uma página que se note que foi cuidada.

## A estrutura de um portefólio de programador

| Secção | O que faz | Limita-te a |
| --- | --- | --- |
| Herói | O teu nome e o que constróis | Uma linha, uma frase de apoio |
| Projetos | Prova de que consegues entregar | Três a seis cartões |
| Sobre | Como trabalhas, o que queres a seguir | Um parágrafo curto |
| Artigos ou palestras | Mostra como pensas (opcional) | Três links |
| Contacto | Facilita o passo seguinte | Email, GitHub, LinkedIn |

Uma página basta à maioria dos programadores. Acrescenta páginas de projeto só para trabalhos que mereçam uma história mais longa.

Diz o que constróis, não o que és. “Construo fluxos de pagamento rápidos para lojas online” diz mais a quem lê do que “Programador full stack”. Se estás no início da carreira, “Construo aplicações web acessíveis com React e Postgres” é honesto e específico. O guia de [design de secção herói](https://gradiently.design/pt-pt/guide/hero-section-design) tem mais sobre como escrever essa primeira linha.

## Um fundo de herói que mostra bom gosto

Muitos portefólios usam uma página branca lisa ou um fundo animado pesado que atrasa tudo o resto. Um meio-termo é um gradiente CSS em camadas: duas ou três manchas radiais suaves sobre uma base escura ou clara. São poucas linhas de código, não tem custo de rede e continua a parecer pensado. O [fundo de herói de site](https://gradiently.design/pt-pt/guide/website-hero-background) e o [gradiente mesh em CSS](https://gradiently.design/pt-pt/guide/css-mesh-gradient) vão mais longe.

Base de herói em índigo profundo: `radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%)`

A camada de base: uma única mancha índigo a esbater-se em quase preto. Calma o suficiente 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 herói com duas manchas em CSS simples. Mantém a mancha mais brilhante longe de onde fica o título, para as palavras continuarem legíveis.

Se quiseres movimento, anima devagar, mantém as palavras paradas e respeita `prefers-reduced-motion`; o guia de [movimento reduzido](https://gradiently.design/pt-pt/guide/reduced-motion) explica como. Um pouco de grão por cima esconde as bandas em gradientes escuros grandes, como se vê em [textura de ruído em CSS](https://gradiently.design/pt-pt/guide/css-noise-texture).

## Cartões de projeto que explicam o impacto

Um cartão 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 construíste e o resultado, e depois links para o projeto em funcionamento e para o código. Os resultados não precisam de ser dramáticos. “Usado todos os dias pela nossa equipa de 30 pessoas” ou “Reduziu o carregamento da página de 4 s para 1,2 s” servem, quando são verdade e teus.

### Cartão fraco

- “Aplicação de meteorologia” com uma captura de ecrã
- Uma lista de oito tecnologias
- Nenhuma ideia do que fizeste tu
- Um link de demonstração morto

### Cartão forte

- “Rota: trocas de turnos para a equipa de um café”
- O problema numa frase
- O teu papel e um resultado mensurável
- Link em funcionamento e um repositório arrumado

```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 grelha de cartões adaptável. Uma proporção de imagem fixa mantém todos os cartões com a mesma forma, mesmo quando as capturas de ecrã diferem.

As capturas de ecrã parecem mais acabadas quando assentam no mesmo fundo. Coloca cada uma sobre a base do teu herói, com um pouco de margem, em vez de mostrares capturas de browser em bruto e de tamanhos diferentes.

## Imagens Open Graph para o teu portefólio

O link do teu portefólio vai ser colado em candidaturas, mensagens de recrutadores, canais do Slack e publicações sociais. Todos mostram a **imagem Open Graph**, de 1200×630 píxeis. Um cartão em branco ou uma captura cortada deitam a perder o cuidado que pões no site. Faz uma para a página inicial e, se tiveres páginas de projeto, uma por projeto com o mesmo esquema. As [imagens OG dinâmicas](https://gradiently.design/pt-pt/guide/dynamic-og-images) mostram como as gerar na compilação; o [tamanho da imagem Open Graph](https://gradiently.design/pt-pt/guide/open-graph-image-size) trata dos cortes.

Uma imagem Open Graph horizontal para um portefólio de programador com o nome da programadora e uma descrição de uma linha

A pré-visualização da página inicial: o nome e a linha única, mais nada.

Uma imagem Open Graph igual para um projeto de portefólio chamado Rota sobre o mesmo gradiente

Uma pré-visualização de página de projeto com o mesmo esquema e fundo.

## Escrever as secções sobre ti e de contacto

Mantém a secção sobre ti num parágrafo curto, na primeira pessoa: o que gostas de construir, como gostas de trabalhar e o que procuras a seguir. Uma frase sobre a vida fora do código está bem; uma biografia inteira não. Termina a página com uma forma óbvia de chegarem a ti, normalmente um endereço de email escrito por extenso, mais GitHub e LinkedIn. Um formulário de contacto cria atrito a um recrutador que só quer copiar o teu endereço para uma mensagem. Se te candidatas a funções ligadas ao design, a [marca pessoal](https://gradiently.design/pt-pt/guide/personal-branding) ajuda-te a manter o site, o CV e os perfis com o mesmo aspeto.

## Pequenos detalhes que se leem como bom gosto

- **Uma só família tipográfica**, em dois pesos. Uma boa sem serifa para tudo e uma monoespaçada só para código.
- **Uma medida de 60 a 75 caracteres** no texto corrido, para os parágrafos serem confortáveis de ler.
- **Contraste real**: o texto corrido deve cumprir o nível AA das WCAG face ao fundo.
- **Um favicon** que combine com as cores do herói.
- **Carregamento rápido**: o portefólio de um programador que demora quatro segundos a aparecer fala por si.
- **Um tema escuro e outro claro** só se os fores manter bem.

Se preferes não desenhar à mão as imagens de pré-visualização e as molduras das capturas de ecrã, o Gradiently pode fazê-las sobre um Mark, um fundo de gradiente vivo que mantém as tuas palavras legíveis, e com o Pro redimensiona um design para a pré-visualização do link, uma publicação no LinkedIn e um cabeçalho do X num só passo. Também pode ser ligado ao ChatGPT e ao Claude, para pedires um conjunto de pré-visualizações de projetos enquanto escreves os casos de estudo.

## FAQ

### O que deve incluir um portefólio de programador?

Um herói de uma linha sobre o que constróis, três a seis cartões de projeto com problema, solução e resultado, uma secção breve sobre ti e links de contacto. Liga aos projetos em funcionamento e ao respetivo código.

### Quantos projetos deve ter um portefólio de programador?

Três a seis projetos bem explicados são mais fortes do que uma grelha longa. Escolhe trabalhos que mostrem o tipo de função que queres a seguir.

### Que tamanho deve ter a imagem Open Graph de um portefólio?

1200×630 píxeis. Mantém o nome e a descrição de uma linha ao centro, para nada ser cortado em pré-visualizações quadradas.

### Um portefólio de programador deve ter um fundo animado?

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