A versão curta
- 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.
Nesta página
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
Limita-te a
Limita-te a
Limita-te a
O que faz
Limita-te a
Limita-te a
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 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 e o gradiente mesh em CSS vão mais longe.
radial-gradient(ellipse at 20% 15%, #3b2a8f 0%, #0e1020 55%, #07080f 100%).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 quiseres movimento, anima devagar, mantém as palavras paradas e respeita prefers-reduced-motion; o guia de movimento reduzido 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.
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
.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;
}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 mostram como as gerar na compilação; o tamanho da imagem Open Graph trata dos cortes.
A pré-visualização da página inicial: o nome e a linha única, mais nada.
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 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.
Perguntas frequentes
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.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil