Portfólio Profissional: Clone Sites Famosos
Monte um portfólio de dev impressionante recriando sites famosos com IA. Passo a passo para iniciantes.
Por que isso é importante
Portfólio Profissional: Clone Sites Famosos. Monte um portfólio de dev impressionante recriando sites famosos com IA. Passo a passo para iniciantes.
Um tech recruiter me disse uma vez que passa em média 47 segundos no portfólio de um candidato antes de decidir se vai continuar ou fechar a aba. 47 segundos. Nem lê o código — olha o visual, clica num projeto, vê se carrega, vê se parece profissional. É injusto? Talvez. É a realidade? Com certeza.
A boa notícia é que dá pra construir um portfólio visual impressionante mesmo sendo iniciante, usando IA pra recriar layouts de sites famosos. A má notícia é que tem um jeito certo e um jeito que vai afundar sua candidatura. Vou te mostrar os dois.
Por que recrutadores olham portfólio antes de currículo
Currículo é texto. Portfólio é evidência. Qualquer pessoa pode escrever "experiência em React" no currículo. Mas mostrar uma aplicação React funcionando em produção? Isso prova. E recrutadores técnicos sabem disso — por isso o portfólio passou a ser o primeiro filtro na maioria das empresas de tecnologia sérias.
Outro ponto que muita gente ignora: o portfólio também mostra capricho. Se você tem um portfólio com links quebrados, projetos que não carregam e README vazio, o sinal que passa é que você não liga pro acabamento. Nenhuma empresa quer contratar alguém que entrega projetos incompletos.
O que recrutadores procuram em 47 segundos
O site do portfólio em si: limpo, rápido, profissional? Ou template genérico do Bootstrap 2015?
Projetos com live demo funcionando — link que abre e mostra algo real
Variedade razoável: pelo menos 2-3 projetos diferentes em tipo
README com contexto: o que é, como rodar, tecnologias usadas
GitHub com commits reais — não um repositório com 1 commit gigante
5 sites famosos ideais para clonar como exercício
Não escolha aleatório. Esses cinco sites têm características específicas que tornam o exercício valioso pro aprendizado e impressionante no portfólio.
Linear.app
Ensina dark mode bem feito, uso de gradientes sutis e tipografia hierárquica. O resultado final fica visualmente impressionante mesmo sendo "só" uma landing page.
Stripe.com
Complexidade gerenciável, gradientes característicos, grid de produtos. Mostra que você consegue lidar com layouts multi-seção e design sofisticado.
Notion.so
Excelente pra praticar seções de features com ilustrações, animações de scroll e social proof. O desafio das ilustrações te força a pensar em alternativas criativas.
Vercel.com
Tipografia e espaçamento magistrais. Simples na aparência, mas replicar o nivel de refinamento é um desafio real que vai te ensinar muito sobre CSS.
Tailwind CSS site (tailwindcss.com)
Irônico, mas funcionou pra mim. O site deles usa Tailwind de formas avançadas. Clonar te força a entender as classes mais sofisticadas do framework.
Passo a passo: do clone ao portfólio publicado
Esse é o fluxo que funciona. Não pule etapas — cada uma tem um motivo.
- Escolha um dos 5 sites acima e passe 20 minutos estudando o design antes de abrir qualquer IA
- Capture screenshots em alta resolução usando GoFullPage (hero, features, footer separados)
- Crie um repositório GitHub pro projeto com nome descritivo: 'linear-clone-react' ou 'stripe-landing-tailwind'
- Use Bolt.new ou v0 pra gerar o HTML/React inicial com a screenshot como referência
- Ajuste o resultado manualmente: corrija cores, spacing e tipografia nas 2-3 principais diferenças
- Substitua todas as imagens e textos originais por placeholders e conteúdo próprio fictício
- Faça deploy no Vercel ou Netlify e teste em mobile antes de publicar
- Escreva um README detalhado descrevendo o projeto, tecnologias e o processo
- Adicione o live demo no README e cole o link no portfólio principal
Um detalhe que faz diferença enorme: faça commits incrementais durante o processo. Commit da estrutura básica, commit do CSS, commit dos ajustes responsivos. Isso mostra no histórico do GitHub que você trabalhou de forma metódica, não jogou um bloco de código gerado por IA sem pensar.
Como apresentar os projetos (README, live demo, processo)
Essa parte é onde a maioria dos devs iniciantes falha. O código pode ser bom, mas se o README está vazio e o live demo não carrega, o projeto não existe pra um recrutador.
O README perfeito pra esse tipo de projeto tem: título e descrição em uma frase, screenshot do resultado (sim, screenshot do seu clone), tecnologias usadas como badges visuais, link pro live demo bem destacado, instruções de como rodar localmente em 3 passos, e uma seção "Sobre o projeto" onde você explica que é uma recriação de estudo inspirada no design do [site original].
Pra o portfólio principal (aquela página que é seu portfólio), crie uma seção de projetos onde cada card tem: thumbnail do projeto (screenshot), nome, tecnologias usadas, e dois botões: "Live Demo" e "Ver Código". Ambos os links precisam funcionar. Sem live demo, sem projeto no portfólio.
Estrutura de README que funciona
# Nome do Projeto — Clone de [Site Original] com React + Tailwind
Breve descrição do que o projeto é (1-2 frases)
🔗 [Live Demo](link) | [Repositório](link)
Screenshot do resultado em desktop e mobile
## Tecnologias: badges do React, Tailwind, Vite, etc.
## Como rodar localmente: git clone → npm install → npm run dev
## Sobre: mencione que é clone educacional, o que você aprendeu
O que NÃO fazer (não minta que é projeto original)
Essa seção é a mais importante do artigo. Leio relatos quase toda semana de devs que foram reprovados em entrevistas porque mentiram no portfólio. Não faça isso.
Nunca apresente um clone como projeto original. Qualquer dev experiente que olhar vai reconhecer o Linear, o Stripe, o Notion. E quando descobrem que você apresentou como "meu projeto de gerenciamento de tasks" sendo que é clone do Linear, você perde a vaga e a reputação. Simples assim.
O que fazer: ser transparente e orgulhoso disso. "Clone do Linear.app recriado com React e Tailwind pra praticar dark mode e CSS Grid" é muito mais honesto e, na prática, impressiona mais. Mostra que você tem critério nas referências, que sabe analisar um design de qualidade e que tem humildade de aprender com os melhores.
Outro erro comum: portfolio com 5 clones e zero projetos originais. Clones são excelentes pra treinar, mas em algum momento você precisa mostrar que consegue criar algo do zero. Use os clones como base — depois que você souber recriar o Linear, crie sua própria ferramenta usando os mesmos princípios de design que você absorveu.
Portfólio pronto para enviar ao recrutador
- Pelo menos 2 projetos com live demo funcionando agora (não 'em construção')
- Todos os READMEs têm descrição, tecnologias e instruções de setup
- Clones são identificados como clones — sem mentira sobre origem
- Commits incrementais em cada repositório (não um único commit gigante)
- Portfólio principal carrega em menos de 3 segundos
- Funciona em mobile sem layout quebrado
- Email de contato ou link pro LinkedIn visível sem precisar scrollar
- Nenhum link quebrado — teste todos antes de enviar
Agora que você sabe o que construir, volte ao início e aprenda o processo completo de como clonar um site com IA passo a passo em /como-clonar-site-com-ia-passo-a-passo — é o complemento perfeito pra esse guia de portfólio.
Se quiser comparar as ferramentas antes de escolher qual usar nos seus projetos de portfólio, veja o comparativo completo de Bolt.new vs Lovable vs v0 em /bolt-new-vs-lovable-vs-v0-clone-site