12
lancao2
3 min de leitura ·

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:

  1. 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.

  1. 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!

Carregando publicação patrocinada...
5

Abri o link antes de comentar e passei um tempo só arrastando janela pela tela. A suavidade tá lá, é Mac mesmo. Sacada boa e execução caprichada, meus respeitos pelo nível de cuidado.

Já que você pediu opinião sobre a arquitetura: com o Framer Motion escrevendo o transform direto na DOM, a posição da janela passa a existir em dois lugares, e o React não fica sabendo de um deles. Daí a pergunta. Quando alguém recarrega a página, quem manda na posição? Se for o Framer Motion, beleza. Mas vale deixar isso escrito antes que você mesmo esqueça.

Rodo agentes em cron e o meu pior bug foi desse tipo: o script saía com exit 0, o log dizia que tinha publicado, e não tinha saído nada.

Outra coisa, essa bem rápida: o repo tá sem LICENSE. Você chama todo mundo pra olhar o código, mas sem licença o padrão é todos os direitos reservados, então ninguém consegue nem forkar sem estar tecnicamente errado. Um MIT resolve em dois minutos.

E posso mostrar o teu portfólio pro pessoal que me acompanha no Japão, com link pro site e pro repo? Vai ficar engraçado, porque o meu é uma página estática com cara de 2009.

4

Muito obrigado pelo crivo técnico e pelo tempo arrastando as janelas hahaha! Saber que a suavidade passou no teste é a prova de que a missão foi cumprida hahaha.

Sobre a arquitetura: que observação cirúrgica! É exatamente isso, a "fonte da verdade" visual fica com a DOM/Framer Motion. No escopo atual, decidi não persistir as coordenadas no LocalStorage, então ao recarregar a página o sistema 'reseta' as posições para o centro da tela (como se o macOS tivesse reiniciado).

Sobre a LICENSE: você me salvou! Na empolgação do deploy acabei esquecendo do principal, mas já subi o commit com a licença MIT agorinha mesmo graças ao seu aviso. Código oficialmente livre pra quem quiser brincar!

E claro, fique totalmente à vontade para mostrar pro pessoal que te acompanha no Japão! É uma honra gigante. Já aproveita e avisa pra eles que, se tiverem vagas remotas e quiserem me contratar, é só usar o agendador ali do relógio que a gente conversa! 😂

Valeu demais pelo feedback riquíssimo!

1

Reset pro centro é resposta, e das boas. O que me incomodava não era a escolha, era a posição existir em dois lugares sem ninguém ter decidido qual dos dois manda na hora de recarregar. Você decidiu. Acabou.

Vi o MIT no repo, depois de procurar no main feito bobo e descobrir que tava no master.

E o teu portfólio já foi pro Japão. Postei com link pro site e pro repo, e olha, já pegou 9 curtidas e umas 600 visualizações por lá. Deve ter japonês arrastando as tuas janelas agora.

1

Seria legal salvar a posição da janela em algum lugar para que, ao recarregar, as janelas que estavam abertas continuem abertas e na posição certa. Mas acho que agora quero focar em colocar todos os meus projetos lá; por enquanto, eu só coloquei dois.

Estou pensando em colocar no Safari todas as landing pages que desenvolvi e fazer um app para cada projeto que fiz, o que acha dessa ideia?

Que legal! E se eu te contar que já teve alguém do Japão falando comigo no LinkedIn, você acredita?!

Muito obrigado pelos feedbacks, que troca incrível, de verdade!"

4
1

Nossa, que legal! Eu não conhecia esse projeto do PostHog, vou dar uma lida no post deles.

Sobre a IA, concordo em partes com você! O que eu percebo é que delegar a construção do código para a IA exige que você já saiba bastante sobre Engenharia de Software. Vejo muita gente criando projetos que, além de ficarem com aquela 'cara e texto de IA' genéricos, acabam cheios de funcionalidades que quebram em produção ou não escalam, porque a pessoa não soube guiar a arquitetura.

Eu utilizei IA na construção de boa parte desse portfólio (e uso em grande parte dos meus projetos no dia a dia), e é uma ferramenta fantástica. Mas você precisa dominar o 'be a bá' da programação. A dinâmica hoje é exatamente como se você fosse um Sênior tendo que orientar e revisar o trabalho de um Júnior que escreve código muito rápido. Se você não souber exatamente o que pedir e como estruturar, o resultado simplesmente não se sustenta!

Valeu demais pela referência do PostHog e pelo comentário!

3

Cara, que belo trabalho. Parabéns !

Independente do momento em que vivemos, independente das ferramentas e da utilização de IA, uma coisa é certa: é possível enxergar criatividade quando ela existe em um projeto. Isso parece ser algo cada vez mais valioso.

Você não criou só uma tela bonitinha, acabou criando uma esperiência legal tanto para quem vai ver seu trabalho quanto para você se orgulhar de ter feito. Isso é valioso.

2

Muito obrigado pelas palavras! Fico realmente feliz que tenha curtido a experiência.

Você resumiu perfeitamente: no fim das contas, as ferramentas (como frameworks ou IA) são apenas os meios para alcançarmos um objetivo. O que dita o valor do que construímos é a visão inicial e a experiência que queremos entregar para o usuário final.

2

Eu acho engraçado que a maioria das pessoas parecem ainda julgar esse tipo de portfólio (pelo menos as pessoas da esfera em que eu convivo). Eu particularmente achei incrível.

Parabéns. Ficou lindo e perfeito.

2
0
1
1

Pô, muito obrigado! Fico feliz que tenha curtido. Dei uma olhada no seu link e achei o seu projeto muito bacana também, a sua identidade visual ficou bem legal. Gosto muito dessa vibe cyberpunk!