跳到正文
DEV Community· Taina Costa·· 4 小時前AI 評分55

為何即使 AI 替你寫程式,網頁作品集仍然重要

Por que seu portfólio web ainda importa (mesmo que a IA escreva o código por você)

AI 導讀

作者指出,即使 AI 能代寫網站程式,作品集仍然重要,因為項目取捨、決策脈絡和成果影響仍須由開發者呈現。作者建議挑選 3-4 個案例,説明解決的問題而非只列技術堆疊,並展示實務程式碼和有效連結。作者以 Cursor 撰寫約 70% 程式碼、自己撰寫全部內容為例,説明 AI 可加快建置,但作品集內容仍由人決定。

正文

Você já viu aqueles vídeos onde alguém pede para o ChatGPT ou Cursor construir um site inteiro e em 5 minutos está no ar? Eu vi. E não é impressionante pela técnica — é impressionante porque expõe uma verdade desconfortável: a parte difícil de ter um portfólio nunca foi escrever o HTML.

O hard skill de montar um site virou commodity. Mas o que você coloca nele? Como você conta sua história sem parecer mais um template genérico? Isso nenhuma IA resolve por você.

O problema não é fazer, é decidir o que mostrar

Em 2026, qualquer pessoa pode gerar um portfólio responsivo, acessível e otimizado em minutos. O Cursor autocompleta seus componentes React. O v0 da Vercel monta layouts a partir de prompts. O GitHub Copilot praticamente escreve o CSS por você.

Mas aqui está o ponto: 100 desenvolvedores usando as mesmas ferramentas vão produzir 100 sites parecidos — a menos que tenham algo único para dizer.

O portfólio não é uma prova de que você sabe fazer um site. É a prova de que você sabe o que vale a pena mostrar.

O que mudou (e o que não mudou)

Antes, o portfólio era um sinal técnico: "Veja, eu sei CSS Grid. Veja, eu sei fazer um fade suave." Hoje, todo mundo sabe — ou pelo menos tem acesso a quem sabe (a IA).

O que não mudou:

  • Curadoria. Você tem 8 projetos no GitHub. Qual deles conta a melhor história? Qual mostra que você entende o problema do usuário, não só a solução técnica?
  • Contexto. Um link para o repo não explica por que você tomou aquela decisão de arquitetura, ou como você lidou com aquela limitação do cliente.
  • Priorização. O recrutador vai gastar 30 segundos no seu site. O que você quer que ele veja primeiro?

A IA pode montar a estrutura, mas essas decisões são suas.

Um portfólio que funciona em 2026

Aqui está o que eu coloco no meu (e o que eu procuro quando estou contratando):

1. Casos, não catálogo

Não liste todos os seus projetos. Escolha 3-4 e explique o problema que você resolveu, não a stack que você usou.

Exemplo ruim:

E-commerce em React

Frontend em React, backend em Node, deploy na Vercel.

Exemplo bom:

Checkout em 2 cliques para loja de nicho

Reduzi o abandono de carrinho de 68% para 34% removendo campos desnecessários e implementando autofill inteligente. React + Stripe. Ver case

A diferença é que o segundo mostra impacto. Stack é footnote.

2. Code samples que você comentaria em code review

Se você vai mostrar código, mostre o tipo de código que você escreveria em produção, não um exercício de algoritmo.

// ❌ Não mostre isso
function reverseString(str) {
  return str.split('').reverse().join('');
}

// ✅ Mostre isso
export function validateCPF(cpf) {
  // Remove não-dígitos
  const cleaned = cpf.replace(/\D/g, '');

  // CPF deve ter 11 dígitos
  if (cleaned.length !== 11) return false;

  // Rejeita sequências conhecidas (111.111.111-11, etc)
  if (/^(\d)\1{10}$/.test(cleaned)) return false;

  // Valida dígitos verificadores
  const digits = cleaned.split('').map(Number);
  const validators = [
    calcValidator(digits.slice(0, 9), 10),
    calcValidator(digits.slice(0, 10), 11)
  ];

  return validators[0] === digits[9] && validators[1] === digits[10];
}

function calcValidator(slice, weight) {
  const sum = slice.reduce((acc, d, i) => acc + d * (weight - i), 0);
  const remainder = sum % 11;
  return remainder < 2 ? 0 : 11 - remainder;
}

Esse segundo exemplo mostra que você pensa em edge cases, documenta com comentários úteis (não redundantes), e escreve código que outro dev consegue ler. Isso vale mais do que saber inverter uma string.

3. Um link que funciona

Parece óbvio, mas metade dos portfólios que eu vejo tem projetos com links quebrados, repos privados ou deploys que expiraram.

Se o projeto não está mais no ar, coloque um screenshot ou um vídeo. Se o repo é privado, escreva um README público explicando o contexto. Não force o recrutador a adivinhar.

O que a IA não faz (e você precisa fazer)

A IA pode gerar o código, mas ela não vai:

  • Decidir que aquele projeto freelance de 2023 é mais relevante que o bootcamp de 2021
  • Escrever o parágrafo explicando por que você escolheu SSR em vez de CSR naquele caso específico
  • Remover aquele projeto "to-do list em Vue" que todo mundo tem e que não te diferencia de ninguém
  • Atualizar o portfólio quando você aprender algo novo ou mudar de direção

O portfólio é um documento vivo. A IA pode acelerar a parte braçal, mas a curadoria é humana.

Quando você realmente não precisa de um

Honestamente? Se você está aplicando para uma vaga júnior e tem um GitHub ativo com READMEs bem escritos, talvez você não precise. O GitHub é o portfólio.

Mas se você está:

  • Procurando vaga remota internacional (onde o recrutador não te conhece e precisa de contexto rápido)
  • Transicionando de carreira (e precisa explicar o gap ou a mudança de área)
  • Freelancer (e precisa mostrar que você entende o problema do cliente, não só código)

Então sim, você precisa de um lugar onde você controla a narrativa. E esse lugar é o seu site.

Como eu fiz o meu (com ajuda da IA, claro)

Usei o Astro para geração estática, Tailwind para estilo, e deploy na Cloudflare Pages. O Cursor escreveu ~70% do código. Eu escrevi 100% do conteúdo.

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const projects = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    impact: z.string(), // <- isso a IA não preenche
    stack: z.array(z.string()),
    url: z.string().url().optional(),
    featured: z.boolean().default(false),
  }),
});

export const collections = { projects };

Cada projeto é um markdown file em src/content/projects/. O Astro gera as páginas. A IA escreveu o layout. Eu decidi o que colocar em impact.

Caveats

Não caia na armadilha do over-engineering. Seu portfólio não precisa de animações em Three.js ou um sistema de design customizado. Precisa carregar rápido e contar sua história. Se você gastou mais tempo no site do que nos projetos dentro dele, repense.

Não minta. A IA facilitou inflar o portfólio com projetos que você "supervisionou" (leia-se: pediu para o ChatGPT fazer). Qualquer tech lead com 2 anos de experiência identifica isso em 30 segundos de conversa técnica.

Não esqueça de atualizar. Um portfólio de 2022 com skills de 2022 é pior do que não ter portfólio. Se você não vai manter, melhor só o LinkedIn + GitHub.

TL;DR

  • A IA democratizou a construção de sites, mas não a curadoria do que mostrar
  • Portfólio em 2026 é sobre contexto e impacto, não sobre provar que você sabe HTML
  • Mostre 3-4 casos bem explicados, não 15 repos sem contexto
  • Code samples devem parecer código de produção, não exercício de leetcode
  • Se você não vai manter atualizado, só GitHub + LinkedIn já resolve
  • Use IA para acelerar o código, mas escreva o conteúdo você mesmo

來源:DEV Community · dev.to