Transforme o modelo no seu portfólio: personalizando textos, links e projetos
Aprenda a trocar textos genéricos por dados próprios e inserir links de GitHub, LinkedIn, e-mail, currículo, projetos online e repositórios no portfólio.
Trilha: Projeto Portfólio Profissional
Este conteúdo é a Parte 5 de 6 da trilha Projeto Portfólio Profissional. Acompanhe o hub da trilha: /projetos/criar-portfolio-profissional
Depois de montar a estrutura, aplicar CSS, adicionar JavaScript e ajustar a responsividade, chegou a hora de trocar o modelo genérico por informações próprias, links reais e projetos que você quer mostrar.
Introdução
Um portfólio não precisa ter dezenas de projetos para ser útil. Ele precisa ser claro: quem é você, o que está estudando, quais tecnologias pratica, onde seus projetos estão publicados e como alguém pode encontrar seus perfis profissionais.
Nesta etapa, vamos focar em personalização segura e organizada. Use seus dados reais quando fizer sentido, mas evite expor informações sensíveis. Para começar, um e-mail profissional, GitHub, LinkedIn e links dos projetos já são suficientes.
O que personalizar primeiro
Comece pelas áreas que aparecem logo no início da página: título, descrição curta, botões principais e links sociais. Depois atualize sobre, habilidades, projetos e contato.
<!-- Hero: troque o texto genérico por uma apresentação curta e direta. -->
<section id="inicio" class="hero">
<div class="hero-content">
<p class="eyebrow">Desenvolvedor Front-end em formação</p>
<h1>Crio interfaces simples, responsivas e organizadas.</h1>
<p>
Estou construindo projetos com HTML, CSS e JavaScript para praticar
fundamentos de desenvolvimento web e montar meu portfólio profissional.
</p>
</div>
</section>Evite frases muito vagas. Em vez de dizer apenas que você ama tecnologia, diga o que você está aprendendo, que tipo de projeto está criando e qual é seu foco atual.
Como colocar links externos
Links para GitHub, LinkedIn, projetos publicados e currículo devem usar endereço completo, começando com https. Quando o link abre em nova aba, use também rel="noopener noreferrer".
<!-- Links externos: use endereço completo, nova aba e rel de segurança. -->
<div class="social-links">
<a href="https://github.com/seu-usuario" target="_blank" rel="noopener noreferrer">
GitHub
</a>
<a href="https://www.linkedin.com/in/seu-perfil" target="_blank" rel="noopener noreferrer">
LinkedIn
</a>
</div>Troque seu-usuario e seu-perfil pelos seus endereços reais. Se você ainda não tiver LinkedIn pronto, deixe apenas o GitHub por enquanto e adicione o restante depois.
Como colocar link de e-mail
Para abrir o aplicativo de e-mail da pessoa, use mailto. O texto visível pode ser o próprio e-mail ou uma chamada como “Enviar e-mail”.
<!-- Contato por e-mail: mailto abre o cliente de e-mail padrão do visitante. -->
<a class="btn btn-primary" href="mailto:seu-email@exemplo.com">
Enviar e-mail
</a>Use um e-mail profissional e fácil de ler. Se preferir separar vida pessoal e portfólio, crie um e-mail específico para contatos profissionais.
Como criar links internos
Links internos levam para seções da mesma página. Eles usam o id da seção como destino. Se a seção tem id="projetos", o link deve apontar para #projetos.
<!-- Links internos: conectam o menu e os botões às seções da própria página. -->
<nav class="nav-links" id="navLinks">
<a href="#inicio">Início</a>
<a href="#sobre">Sobre</a>
<a href="#habilidades">Habilidades</a>
<a href="#projetos">Projetos</a>
<a href="#contato">Contato</a>
</nav>Esse padrão combina com o JavaScript da Parte 3, porque os links do menu usam as seções para marcar o item ativo durante a rolagem.
Como colocar links nos cards de projeto
Cada projeto pode ter dois links principais: um para ver o projeto funcionando e outro para abrir o repositório no GitHub. Se o projeto ainda não estiver publicado, mostre apenas o repositório.
<!-- Card de projeto: apresente objetivo, tecnologias e links úteis. -->
<article class="project-card reveal">
<span class="project-tag">JavaScript</span>
<h3>Calculadora simples</h3>
<p>
Projeto criado para praticar eventos, funções, manipulação do DOM e
organização de interface com HTML, CSS e JavaScript.
</p>
<div class="project-links">
<a href="https://seu-projeto-online.com" target="_blank" rel="noopener noreferrer">
Ver projeto
</a>
<a href="https://github.com/seu-usuario/calculadora" target="_blank" rel="noopener noreferrer">
Repositório
</a>
</div>
</article>Não escreva só “projeto 1” ou “teste”. Dê um nome claro, explique o que você praticou e mostre as tecnologias usadas. Isso ajuda quem está avaliando seu portfólio a entender sua evolução.
Organizando a seção de contato
A seção de contato deve ser objetiva. Para um portfólio inicial, não é obrigatório criar formulário. Um botão de e-mail e links profissionais já resolvem bem.
<!-- Contato: deixe claro como a pessoa pode falar com você. -->
<section id="contato" class="contact">
<div class="container">
<div class="contact-box reveal">
<p class="eyebrow">Contato</p>
<h2>Vamos conversar sobre projetos e oportunidades.</h2>
<p>
Você pode me chamar por e-mail ou acessar meus perfis profissionais
para acompanhar meus estudos e projetos.
</p>
<div class="contact-actions">
<a class="btn btn-primary" href="mailto:seu-email@exemplo.com">
Enviar e-mail
</a>
<a class="btn btn-secondary" href="https://github.com/seu-usuario" target="_blank" rel="noopener noreferrer">
Ver GitHub
</a>
</div>
</div>
</div>
</section>Se você ainda não quer divulgar telefone, cidade ou dados pessoais, não coloque. Um portfólio profissional pode funcionar muito bem com canais digitais básicos.
Checklist antes de publicar
- Troque todos os textos genéricos por informações suas.
- Teste todos os links externos em uma nova aba.
- Confira se os links internos rolam para as seções corretas.
- Use mailto apenas no e-mail que você quer receber contatos.
- Remova projetos vazios ou cards que ainda não dizem nada.
- Abra o portfólio no celular e confira se os botões continuam fáceis de tocar.
Exemplo completo de links do portfólio
Use este bloco como referência para revisar os principais links do seu projeto. Ele não substitui seu HTML inteiro, mas mostra os padrões que você deve repetir.
<!-- Menu: links internos apontam para ids existentes na própria página. -->
<nav class="nav-links" id="navLinks">
<a href="#inicio">Início</a>
<a href="#sobre">Sobre</a>
<a href="#habilidades">Habilidades</a>
<a href="#projetos">Projetos</a>
<a href="#contato">Contato</a>
</nav>
<!-- Links sociais: perfis externos usam https, target blank e rel de segurança. -->
<div class="social-links">
<a href="https://github.com/seu-usuario" target="_blank" rel="noopener noreferrer">
GitHub
</a>
<a href="https://www.linkedin.com/in/seu-perfil" target="_blank" rel="noopener noreferrer">
LinkedIn
</a>
</div>
<!-- Projeto: cada card deve ter contexto e links que realmente funcionam. -->
<article class="project-card reveal">
<span class="project-tag">HTML, CSS e JavaScript</span>
<h3>Relógio digital</h3>
<p>
Projeto criado para praticar datas, horários, atualização de tela e
organização visual com CSS.
</p>
<div class="project-links">
<a href="https://seu-relogio-online.com" target="_blank" rel="noopener noreferrer">
Ver projeto
</a>
<a href="https://github.com/seu-usuario/relogio-digital" target="_blank" rel="noopener noreferrer">
Repositório
</a>
</div>
</article>
<!-- Contato: mailto abre o aplicativo de e-mail configurado no dispositivo. -->
<a class="btn btn-primary" href="mailto:seu-email@exemplo.com">
Enviar e-mail
</a>Próximo passo da trilha
Agora o projeto já tem conteúdo próprio, links úteis e cards mais próximos de um portfólio real. A última parte da trilha será publicar esse portfólio online.
A Parte 6 está disponível na URL /projetos/portfolio-publicar-online. Nela, vamos preparar o repositório e publicar o portfólio estático pelo GitHub Pages.