📈Portfólio nunca está pronto: como evoluí o meu usando IA + prática real

🌌 CodeVerse2026 – Artigo #08

🧑‍💻 Fala Galera Dev! 👋

Se você acompanhou o início do CodeVerse2026, lá na segunda quinzena de janeiro eu já tinha compartilhado uma grande atualização do meu portfólio que fiz logo no inicio do ano, buscando aplicar algumas alterações que estavam apenas na minha cabeça, mas ainda não havia implementado. Ajustei layout, adicionei o tema claro e escuro, melhorei a estrutura, deixei mais organizado… enfim, dei aquele upgrade que todo dev gosta de fazer.

Mas como todo desenvolvedor sabe… 👉 nunca está pronto.

Sempre tem algo pra melhorar. Um detalhe aqui, uma experiência melhor ali, uma ideia nova que surge do nada. E foi exatamente isso que aconteceu. Depois de ver como ficou o site do GTA VI e alguns projetos que estava vendo na internet de uns sites muito interativos, resolvi voltar no projeto e dar mais uma evolução, dessa vez focando muito mais em experiência, interação e identidade visual.

🎬 Começando com impacto: a intro cinematográfica

Uma das primeiras coisas que implementei foi uma intro de carregamento estilo cinema. Quando o usuário entra no site, aparece a mensagem “Carregando modo cinematográfico…”, como se estivesse iniciando um filme. Isso não é só estética. É sensação.

A tela bloqueia a interação por alguns segundos e depois desaparece automaticamente, mas também deixei um botão para pular, porque ninguém gosta de ficar preso esperando 😄. O objetivo aqui foi criar uma experiência mais imersiva logo no primeiro contato.

⚡Identidade visual: nome com efeito glitch

Outra coisa que eu queria muito era dar mais personalidade para o topo do site. Então apliquei um efeito no nome Carlos-CGS, que reage quando o mouse passa por cima.

Esse efeito cria uma espécie de “glitch”, como se o texto estivesse distorcendo. Parece simples, mas dá uma identidade forte. O site deixa de ser só mais um portfólio e passa a ter um estilo próprio.

🟢 Disponibilidade que chama atenção

Logo abaixo da descrição principal, adicionei um selo verde com o texto “Disponível para projetos”. Mas não é só um texto parado. Ele tem um efeito de pulso, como se estivesse “vivo”. Isso chama atenção de quem entra e já passa uma mensagem clara:

👉 estou aberto para oportunidades: Pequeno detalhe, grande impacto.

👇 Navegação mais intuitiva

Também adicionei aquele clássico botão de rolagem para a próxima seção, bem no estilo “continua descendo que tem mais coisa”.

Pode parecer simples, mas isso ajuda muito na navegação. Principalmente para quem acessa rápido e não quer ficar pensando onde clicar, deixando a navegação muito mais intuitiva.

🧑‍💻 Sobre mim mais dinâmico

Na seção “Sobre Mim”, fiz dois ajustes importantes.

O primeiro foi melhorar a exibição da foto, adicionei uma foto o canto esquerdo, deixando mais alinhada, proporcional e com destaque visual. Algo simples, mas que deixa o layout mais limpo. No desktop aparece de um jeito, no mobile de outro.

O segundo foi mais interessante: 👉 os números agora são animados.

Quando o usuário chega nessa parte da página, os números começam a subir até o valor final. Isso cria movimento e chama atenção para aquilo que realmente importa.

🃏 Games com efeito 3D (esse ficou divertido)

Essa foi uma das partes que eu mais gostei de fazer. E sim, precisei da ajuda da IA, pois não imagina como iria fazer esse efeito que sempre via em outros projetos e sempre quis implementar.

Os cards dos jogos agora reagem ao movimento do mouse, inclinando em 3D. Parece que você está mexendo em uma carta de verdade.

Isso foi feito calculando a posição do mouse e aplicando rotação nos eixos. O resultado ficou bem mais interativo e dá aquela sensação de profundidade.

🎓 Cursos com mais organização (e movimento)

Na parte de cursos e bootcamps, já existia uma parte logo abaixo dos meus badges dos cursos concluídos as instituições de ensino nas quais fiz alguns dos meus cursos de programação até mesmo para divulga-las para outros devs, mas essa seção esta estática. E para melhorar um pouco esse visual, resolvi adicionar um efeito tipo carrossel contínuo.

Além disso, melhorei o um sistema de filtros. Agora dá pra buscar cursos por:

• nome
• ano
• tipo
• linguagem

Isso facilita muito a navegação, principalmente porque já são muitos cursos e nenhum recrutador vai querer perder tempo vendo todos os cursos que eu fiz de todas as áreas, se ele deseja saber meu conhecimento de C# ele pode buscar todos os cursos que fiz dessa área apenas.

📊 Barra de progresso (detalhe que faz diferença)

No topo da página, adicionei uma barra que cresce conforme você rola o site. Pode parecer detalhe… Mas isso dá uma noção clara de quanto conteúdo já foi visto e quanto ainda falta.

É aquele tipo de coisa que o usuário nem percebe conscientemente, mas melhora a experiência.

📱 Mobile agora está de verdade

Se tem uma coisa que eu levei a sério nessa atualização foi o mobile. Não foi só adaptar. Foi pensar no uso real. Ajustei:

• espaçamentos
• tamanhos de fonte
• botões mais fáceis de clicar
• organização geral

Agora o site funciona bem em qualquer tela. E hoje isso não é diferencial… 👉 é obrigatório.

🤖 E a IA nisso tudo?

Sim, eu usei o Copilot no VS Code. Mas aqui vai um ponto importante: 👉 eu não só “usei a IA”.

Eu tive as ideias, fui direcionando, pedindo melhorias, ajustando comportamento e corrigindo o que não ficava como eu queria. Em muitos momentos precisei refazer coisas na mão, porque nem sempre a IA entrega exatamente o que a gente imagina.

E sendo bem sincero… teve um fator que todo dev vai entender 😅 Eu estava trabalhando em outros projetos ao mesmo tempo e acabei estourando meus tokens. Ou seja, fiquei com a IA limitada em vários momentos.

Resultado? 👉 tive que voltar pro “modo raiz”.

Ir no código, entender na marra, ajustar manualmente, testar, errar e corrigir. E vou te falar… isso acabou sendo ótimo. Porque me forçou a ser mais assertivo e realmente entender o que estava acontecendo.

Quem nunca passou por isso, né? rs

🧠 Entendendo o código de verdade

Outro ponto que me ajudou muito foi a forma como organizei o JavaScript.

Meu arquivo principal hoje já está com 1188 linhas de código (sim… mil cento e oitenta e oito 😅). E mesmo assim, ele não virou uma bagunça. Isso porque eu deixei tudo setorizado e bem comentado. Cada parte do código tem explicação:

• o que faz
• por que existe
• onde atua

E aqui entra um mérito da IA também. Eu pedi para o Copilot me ajudar a estruturar melhor os comentários e organizar os blocos de código. Com isso, o script não ficou poluído… ficou legível. E isso fez toda a diferença, porque consegui entender muito melhor o código que foi sendo gerado ao longo do tempo.

🎯 A real sobre usar IA

Se eu puder deixar uma visão bem prática aqui, é essa:

👉 IA não substitui você. 👉 IA acelera você. Mas no final do dia, é você que:

• decide
• valida
• corrige
• entende

E principalmente… aprende.

🔗 Quer ver como ficou?

💻 Portfólio: https://carlos-cgs.github.io/CGS/

📂 Código no GitHub: https://github.com/Carlos-CGS/CGS

🚀 Conclusão

Essa atualização não foi sobre “deixar bonito”. Foi sobre evolução. Sobre pegar algo que já funciona e pensar: 👉 “como eu posso melhorar isso?”

E isso vale pra tudo na nossa jornada como dev. Porque na vida real, em muitos projetos, o cliente não sabe exatamente o que quer. Ele chega e fala: “quero um site”, “quero um sistema pro meu negócio”… mas raramente vem com tudo definido.

E é aí que entra o nosso papel de verdade. Nós não somos só quem escreve código. Somos quem pensa a solução. Somos nós que analisamos, organizamos as ideias, sugerimos caminhos, desenhamos como aquilo pode funcionar… e só depois de validar com o cliente, partimos para implementação.

Ou seja, desenvolver não é só executar. É interpretar, propor e evoluir junto com o projeto. E no final das contas, o seu portfólio é exatamente isso: um reflexo de como você pensa. Até porque se fosse apenas escrever código, isso a IA já faz de forma muito melhor e mais rápida que nós humanos.

🔥 Seu projeto nunca está pronto… ele está sempre na próxima versão. 🚀

• 🔗 Segue lá no GitHub: https://github.com/Carlos-CGS/CodeVerse2026
• 🔗 Segue lá no LinkedIn: https://www.linkedin.com/in/carlos-cgs/