Por que parei de fazer "landing pages" e transformei meu portfólio num Sistema Operacional
Se você é desenvolvedor(a) Front-end ou Full Stack, provavelmente já passou por isso: você constrói um portfólio bonitão, coloca uma foto sua, lista suas skills com barras de progresso (que não significam muita coisa) e coloca links para o GitHub.
O problema desse modelo padrão de "página institucional" é que ele apenas fala o que você sabe fazer. Eu queria um portfólio que provasse que eu sei fazer. O famoso "Show, don't tell".
Foi com esse pensamento que decidi sair do óbvio e reconstruir meu portfólio do zero. O objetivo não era apenas ter uma vitrine para recrutadores, mas me forçar a enfrentar desafios arquiteturais reais que encontro no dia a dia de trabalho.
A ideia: Um portfólio interativo (Réplica do macOS)
Decidi criar um ecossistema rodando direto no navegador, simulando um sistema operacional.
Link do projeto: https://www.alexlan.com.br/
Repositório: https://github.com/lancao2/portfolio-alexlan.com
Mais do que a estética, o que me motivou foram as "dores" técnicas que um projeto desse traz. Desenvolver um portfólio altamente interativo simula problemas complexos de engenharia. Separei aqui alguns dos principais desafios que enfrentei e como os resolvi:
- O inferno dos re-renders em cascata (Drag & Z-Index)
O gerenciador de janelas foi, de longe, a parte mais espinhosa. Como lidar com dezenas de janelas que precisam de foco, z-index dinâmico e arraste simultâneo sem matar o React com re-renders?
A solução foi dividir as responsabilidades. A lógica de orquestração (qual app está aberto, qual tem o foco) eu mantive em um Context API tradicional. Mas a física do arraste (as coordenadas X/Y) foi isolada. Deleguei o movimento para o Framer Motion, que faz a mutação do transform via CSS direto na DOM (requestAnimationFrame).
Ou seja: eu posso arrastar uma janela pela tela a 60fps constantes sem que o React tome conhecimento disso. O estado global só é atualizado no exato momento do clique, para alterar a prioridade da janela.
- Funcionalidade real vs "Mockup bonito"
Eu não queria que fosse apenas um brinquedo visual, precisava ter utilidade.
Agendador Integrado: Na própria Menu Bar (o relógio superior), embuti minha agenda do Google Calendar. Qualquer pessoa pode abrir e marcar um bate-papo de 30min comigo ali mesmo, sem atrito.
App de Mensagens: Um chat funcional conectado a um banco MySQL (hospedado no Aiven via Prisma ORM) onde é possível me enviar uma mensagem direta pelo "sistema".
Mobile First Híbrido: Uma interface de desktop não cabe numa tela de celular. Em vez de bloquear o usuário mobile, o sistema reestrutura o layout (o "Finder" vira uma navegação em abas inferior nativa).
Por que recomendo fazer portfólios fora da caixa?
Projetos institucionais são fáceis. Eles raramente vão testar seus limites sobre gerenciamento de estado global, otimização de performance, componentização avançada ou interação com o DOM.
Quando você tenta construir algo fora do padrão (um sistema de janelas, um jogo simples, uma ferramenta interativa de visualização de dados), você esbarra em problemas arquiteturais que empresas grandes enfrentam o tempo todo. Você treina para o mercado enquanto constrói sua própria marca pessoal.
Fica o convite para testarem a aplicação e, principalmente, darem uma olhada no código fonte! Adoraria ouvir a opinião de vocês sobre a arquitetura que usei e como vocês resolveriam o problema do gerenciamento de janelas.
Um abraço!