Carreira
Como Criar um Portfolio de Dev Clonando Sites
Clones de sites são os projetos de portfolio que mais impressionam recrutadores — quando feitos do jeito certo. Aqui está como.
CrazyStack
11 min de leitura
compartilhar
Portfolio Dev
Carregando
Clones de sites são os projetos de portfolio que mais impressionam recrutadores — quando feitos do jeito certo. Aqui está como.
Como Criar um Portfolio de Dev Clonando Sites. Clones de sites são os projetos de portfolio que mais impressionam recrutadores — quando feitos do jeito certo. Aqui está como.
Tutorial completo de como usar o v0.dev pra clonar e customizar landing pages profissionais.
Análise completa das melhores ferramentas de screenshot-to-code disponíveis em 2026.
Aqui vai a lógica que convence qualquer recrutador técnico: para clonar o site da Stripe com fidelidade, você precisa entender animações com Framer Motion ou GSAP, gradientes complexos com CSS, layout responsivo em múltiplas breakpoints, tipografia cuidadosa, e performance de carregamento — porque o original é rápido e o seu clone também precisa ser. São habilidades reais, demonstradas num projeto que qualquer pessoa reconhece.
Comparado ao to-do list ou ao blog pessoal, um clone bem feito demonstra muito mais domínio técnico. O recrutador olha pro seu clone do Linear e pensa: 'essa pessoa conseguiu replicar uma interface complexa de uma empresa de produto de US$ 50 milhões. Sabe o que tá fazendo.' Não tem jeito de fingir esse resultado — ou você sabe fazer ou não sabe.
Agora, quando clones não funcionam bem pra portfolio: quando o clone é superficial — só o visual sem nenhuma funcionalidade. Quando o README não explica o que você aprendeu. Quando o clone usa um template gerado por IA sem você ter entendido e modificado nada. Recrutadores técnicos vão revisar seu código no GitHub — se não tiver commits progressivos, histórico de decisões e código que você claramente escreveu, vai cair por terra.
O segredo é clonar com intenção de aprendizado, não de enganar. Use técnicas de screenshot-to-code pra criar o esqueleto inicial (confira /2025/3-ways-to-perfectly-clone-webs pra referências completas), mas mergulhe em cada seção, entenda por que cada escolha foi feita, e adicione algo seu. O clone é o ponto de partida, não o destino.
Não escolhi esses cinco aleatoriamente. Cada um testa habilidades específicas que empregadores de produto valorizam — e são empresas cujos designs qualquer dev reconhece. Implementar um desses bem já coloca seu portfolio num nível diferente.
A Stripe é provavelmente o site mais admirado tecnicamente na indústria. Os gradientes animados do hero, as partículas sutis de fundo, a tipografia impecável, e a performance absurda são resultado de uma equipe de engenharia e design de elite. Clonar a homepage da Stripe com fidelidade de 90%+ vai requerer: CSS custom properties avançadas, canvas animations ou WebGL pra os gradientes, Intersection Observer pra animações no scroll, e atenção obsessiva a detalhes tipográficos.
Se quiser ir além, adicione um fluxo de checkout funcional usando a própria API do Stripe. Você aprende a integrar pagamentos reais, lidar com webhooks, e mostrar uma feature que tem valor de negócio real. Um clone da Stripe com checkout funcionando é um dos projetos de portfolio mais impressionantes que existem.
O Linear tem um dos designs de produto mais refinados da indústria. A homepage deles é repleta de micro-interações elegantes, efeitos de parallax sutis, e uma apresentação de produto que usa animações pra comunicar funcionalidade. Clonar o Linear testa sua capacidade de trabalhar com animações baseadas em scroll, componentes de UI complexos, e performance em páginas com muito JavaScript.
O desafio técnico maior é replicar os efeitos de 3D e as transições de camera que o Linear usa pra mostrar o produto em ação. Isso envolve CSS 3D transforms, perspective, e timing functions customizadas. Quando você consegue fazer isso rodar a 60fps em mobile, você provou que sabe o que tá fazendo com performance de animações.
O site da Vercel é um masterclass em design system coerente. O tema escuro com acentos de branco e verde, os componentes de código com syntax highlighting, e a organização da documentação são exemplares. Clonar a Vercel testa sua capacidade de implementar um design system do zero — tokens de design, variantes de componentes, modo escuro implementado corretamente com CSS variables.
O mais valioso pra portfolio é clonar a seção de templates deles — uma grade de cards com preview, filtros por categoria, e animações de hover. Parece simples mas implementar bem requer atenção a muitos detalhes. Adicione filtros funcionais com animação de layout (usando Framer Motion's AnimatePresence) e você vai se destacar.
O GitHub é onde o projeto vai ser julgado, não o site ao vivo. Recrutadores técnicos vão olhar: o histórico de commits (você foi construindo incrementalmente ou jogou tudo de uma vez?), a qualidade do código (está organizado, legível, com nomes bons?), e o README (explica o projeto de forma que eu entenda o que você aprendeu?).
Faça commits frequentes e descritivos. 'feat: add hero section with gradient animation' é muito melhor que 'update'. O histórico de commits conta a história de como você construiu o projeto. Pra um clone, você quer que essa história mostre que você foi seção por seção, entendendo cada parte, não que você copiou e colou de uma vez.
Organize o código em pastas que fazem sentido: /components pra componentes React, /hooks pra custom hooks, /utils pra funções utilitárias, /styles pra arquivos de estilo globais. Use TypeScript — projetos de portfolio sem TypeScript em 2026 parecem datados. Adicione ESLint e Prettier configurados pro projeto — mostra que você se preocupa com qualidade de código.
Se tiver testes, melhor ainda. Não precisa ter 100% de cobertura — alguns testes de componentes críticos com Testing Library já mostram que você conhece o processo. Pra maioria dos devs iniciantes, ter testes no portfolio já é diferencial real.
O README é sua carta de apresentação pra quem vai revisar o projeto. Muita gente escreve READMEs que só falam sobre como rodar o projeto localmente. Isso é informação necessária, mas não suficiente. O que recruiter quer saber: por que você escolheu esse projeto, o que você aprendeu fazendo, e quais foram os desafios técnicos.
Estrutura que funciona: comece com uma descrição de uma linha sobre o que é o projeto e o site de referência. Adicione um link pra demo ao vivo — sem isso, muita gente nem abre. Depois uma seção 'O que aprendi' com bullet points dos conceitos técnicos que o projeto te ensinou. Uma seção 'Desafios' onde você descreve um problema específico que encontrou e como resolveu. E por fim, as instruções de instalação.
O recruiter vai ler a seção 'O que aprendi' primeiro, depois vai olhar o código pra ver se o que você escreveu faz sentido. Se você escreve 'Aprendi a implementar animações de scroll com Intersection Observer' e o código tem isso implementado de forma clara, ponto pra você. Se você escreve mas o código não condiz, ponto negativo.
Galera, evita exagerar. Não escreve que 'implementei um sistema de design completo seguindo as melhores práticas de acessibilidade e performance' se você só fez um arquivo CSS. Seja honesto sobre o que é um projeto de aprendizado. Recruiter experiente vai perceber a verdade quando ver o código — e prefere honestidade.
Um clone que vira um produto real — ou pelo menos demonstra capacidade de criar um — é o nível seguinte. Depois de replicar o design base, adicione algo que o original não tem ou que você imagina que seria útil. Isso mostra iniciativa de produto, não só habilidade técnica.
No clone do Spotify, adicione uma feature de estatísticas do seu histórico de músicas — quantas horas você ouviu cada artista, qual é seu gênero mais ouvido na última semana. Use a API do Spotify que já está integrada e apresente os dados num dashboard visual. É uma feature genuinamente útil que não existe no Spotify web de graça.
No clone do Linear, adicione um modo de planejamento de sprint visual — um quadro kanban com drag and drop que o Linear não tem na mesma interface. Montre que você entende o produto suficiente pra imaginar onde ele poderia melhorar. Isso é o tipo de pensamento que times de produto valorizam em candidatos.
No clone do Notion, adicione exportação pra Markdown ou PDF. Parece simples, mas requer entender a estrutura de dados do editor e fazer uma conversão correta. E é uma feature que usuários do Notion realmente pedem. Mostrar que você sabe criar features que resolvem problemas reais é o que diferencia um dev de produto de um dev que só implementa tickets.
O portfolio de dev mais forte que já vi tinha três projetos: um clone do Linear com features adicionadas, um projeto original de nicho específico com usuários reais, e um projeto open source com contribuições documentadas. Não tinha to-do list, não tinha blog clone, não tinha 10 projetos mediocres. Tinha três projetos excelentes e bem documentados. Esse dev recebeu oferta de empresa de produto no terceiro dia de entrevistas.
Esse aqui é o mais desafiador da lista. O Notion tem um editor de rich text que é um dos mais sofisticados da web. Recriar a homepage deles é relativamente simples. Mas se você quiser realmente impressionar, implemente um editor de rich text básico — com negrito, itálico, headings, listas, e blocos arrastáveis. Isso demonstra domínio de DOM manipulation, contenteditable, drag and drop APIs, e gestão de estado complexo.
Dá pra usar a biblioteca Tiptap ou Slate.js como base pra não reinventar a roda completa — e deixar isso claro no README. O que você precisa demonstrar é que sabe integrar e customizar uma biblioteca complexa, não que sabe reescrever tudo do zero. Capacidade de usar bem as ferramentas certas é uma skill valorizada.
O cliente web do Spotify tem uma UI de streaming com player persistente, navegação complexa, sidebars redimensionáveis, e animações de transição entre páginas. Clonar isso testa habilidades de gerenciamento de estado global — o player precisa continuar tocando enquanto você navega. Zustand ou Jotai são ótimas escolhas pra gerenciar o estado do player sem Redux boilerplate.
Use a API pública do Spotify pra trazer dados reais — playlists, tracks, artistas. Com dados reais e autenticação OAuth funcionando, você tem um projeto que demonstra conhecimento de autenticação, chamadas de API, gerenciamento de estado e UI complexa tudo num lugar só. É um dos projetos mais completos que você pode adicionar ao portfolio.