Renovei Meu Portfólio: da estética ao pensamento de produto

👋Fala Galera Dev!🧑‍💻

Nos últimos meses, decidi fazer algo que muita gente na área adia por tempo (e por medo de mexer no que “já tá funcionando”): refatorar meu próprio portfólio. E quando falo refatorar, não é só trocar cor, fonte e colocar um efeito bonito.

A ideia foi tratar o portfólio como um projeto real: melhorar navegação, deixar tudo mais confortável no celular, organizar o código e, principalmente, fazer com que ele mostrasse como eu penso quando construo uma aplicação web.

https://carlos-cgs.github.io/CGS/

💻Por que mexer no portfólio de novo?

Se você é dev júnior, provavelmente já ouviu (ou já pensou): “Vou fazer um portfólio e pronto”. Só que, na prática, portfólio bom é portfólio que evolui.

Ele não serve só pra “mostrar projetos”. Ele mostra também se você se preocupa com experiência de quem vai navegar, entende o básico bem feito e sabe organizar as coisas sem virar uma bagunça com o tempo.

Eu quis que o meu refletisse isso, sendo assim o que eu melhorei (e por que isso importa)?

A primeira coisa que eu ataquei foi a responsividade de verdade. Eu ajustei o layout pensando primeiro no celular (mobile-first), porque é onde muita gente abre link rápido. Fiz breakpoints mais claros (700px e 768px) e cuidei de detalhes que parecem pequenos, mas mudam tudo: espaçamento melhor pros botões, menus que não ficam apertados, clique mais “amigável” no toque.

Depois veio o menu. Eu implementei um hamburger menu com animação e transição suave, e me preocupei com o comportamento: ele fecha sozinho quando você clica em um link, e também se adapta quando a tela muda de tamanho. Isso parece simples, mas é o tipo de coisa que deixa a navegação mais “redondinha”.

Outro ponto que eu queria muito era o tema claro/escuro funcionar do jeito certo. Não só “trocar cor”, mas ser algo consistente: o botão fica sempre visível, a preferência é salva no navegador, e ainda respeita o tema do sistema quando a pessoa entra pela primeira vez.

Isso dá uma sensação de cuidado. E cuidado é um diferencial.

📱Pequenas mudanças que deram um salto no visual

Teve uma parte do portfólio que eu reorganizei só pra ficar mais “limpo” e profissional: Sincronizei as animações pra evitar aquele efeito de “um aparecendo antes do outro”, que às vezes passa uma sensação meio travada.

Teve também na parte dos cursos, onde implementei filtros de busca dos cursos que exponho, afinal agora são mais de 115, e as vezes filtrar por data, nome ou tecnologia facilita.

Na seção de tecnologias, eu removi um scroll vertical que estava me incomodando e ajusteis os espaçamentos. Parece detalhe, mas quando você olha o conjunto, tudo fica mais leve.

E na parte “Sobre mim”, eu tomei cuidado com o mobile: texto um pouco menor, e os “stats” em uma linha só (sem quebrar tudo). Meu objetivo aqui foi simples: quem estiver lendo no celular não pode ter que “brigar” com o layout.

Adicionei vídeos de alguns projetos que já tinha finalizado, mas devido a correria, não tinha subido no meu portfólio, inlcusive sobre o game WorldWar, que vou apresentar em um artigo na semana que vem.

Acessibilidade: eu parei de ignorar o que eu mesmo adiava, essa parte eu vou ser bem sincero: por muito tempo, acessibilidade ficava num “depois eu vejo”. Só que, quando você começa a aplicar de verdade, você percebe que não é um “extra”. É parte do produto.

Eu adicionei um skip link (pra navegação por teclado), labels e ARIA em botões e inputs e organizei melhor a semântica do HTML. E coloquei também uma barra de progresso de leitura (bem discreta), que além de UX, dá um toque de produto de verdade.

📈Performance: o básico bem feito já ajuda muito

Eu também dei uma atenção boa para performance, sem complicar: preconnect e dns-prefetch pra fontes/CDNs, scripts com defer, CSS mais organizado e sem “código morto”.

Aqui não tem segredo: quando você deixa o projeto mais enxuto, ele responde melhor e isso aparece na experiência.

🤔O que eu aprendi com essa refatoração

O mais legal desse processo é que ele não foi só “mexer no portfólio”. Foi um treino real de como a gente trabalha em projeto de verdade: ajustar layout, pensar no usuário, organizar código, evitar gambiarra, revisar decisões. E para descontrair e ser bem sincero, aquele famoso alinhamento de div que nunca conseguimos realizar do jeito que desejamos aconteceu aos montes, kkkk. com muita correção e verificando se ficou do jeito que eu desejava.

Se eu tivesse que resumir em uma frase, seria:

Portfólio não é vitrine. É produto.

E, pra quem é dev júnior, eu acho que essa mentalidade muda muita coisa. Porque você começa a construir pensando em consistência e evolução, não só em “entregar algo rápido”.

Para quem quiser ver tudo funcionando na prática, publiquei um vídeo curto do site aqui no 🔗 LinkedIn.

O portfólio completo está acessível pelo 🔗 link do meu perfil, e todo o código-fonte está disponível no meu 🔗 GitHub para quem quiser explorar a implementação com mais profundidade e ver qual código usei para cada parte do site!

Vamos começar 2026 com o pé direto!