lanecodes.dev — Portfólio 2.0

O sistema é dividido em três repositórios que se comunicam por uma API REST documentada.

• Site (Next.js 15, App Router, React 19): páginas geradas estaticamente (SSG/ISR), cache de 1 hora e revalidação imediata por tags (home, projects, project:<slug>, posts) quando o painel salva algo.
• API (NestJS 11): módulos por domínio, validação com Zod, autenticação com JWT (access token de 15 minutos) e refresh token em cookie httpOnly com rotação, senha com Argon2, limite de requisições e documentação Swagger.
• Banco (PostgreSQL + Prisma 6): 20 tabelas, migrations versionadas e uma coluna translations em JSON para os textos em inglês.
• Painel (Vue 3 + Quasar + Pinia): cadastros com reordenação, editor rico com Tiptap para o blog, upload de imagens e campos em inglês lado a lado com o português.
• Imagens convertidas para WebP com Sharp e armazenadas no Cloudflare R2.
• Formulário de contato com e-mail estilizado via Resend e opção de envio direto pelo WhatsApp.

Cada seção da home tem uma animação pensada para a história que ela conta. As cenas ligadas ao scroll usam GSAP + ScrollTrigger, as entradas e loops usam CSS (@keyframes e animation-timeline: view()) e a rolagem suave é feita com Lenis.

• Preloader em terminal: digita initializing lanecodes.dev, executa 5 etapas com spinner e ✓, barra de progresso, build successful e welcome to my world_; uma cortina preta e vermelha revela o hero. Roda uma vez por sessão e pode ser pulado com um clique ou qualquer tecla.
• Hero: linhas do título sobem em sequência, cursor piscando, globo girando e seta de scroll; tudo fica pausado enquanto o preloader roda.
• Sobre: layout editorial de revista, com manchete, capitular, colunas, retrato em duotone e um leque de certificados.
• Manifesto: seção fixa em que linhas vermelhas sobem e os textos são "escritos à mão" com máscara e traço SVG, sincronizados ao scroll (pin).
• O que eu faço: cards com cantoneiras que entram conforme aparecem na tela, só com CSS (animation-timeline: view()).
• Processo: fluxograma em serpentina; um conector vermelho em SVG é desenhado pelo scroll (scrub) e acende cada etapa, com a decisão "Aprovado?" e os laços tracejados "ajustes" e "novo ciclo" em movimento.
• 100% responsivo: uma timeline com pin e scrub dá zoom para dentro do monitor, transforma o layout de desktop em celular, recua revelando o aparelho e termina com a bateria em 1% descarregando e a tela apagando.
• Projetos: no desktop, uma IDE com explorer de pastas, abas e terminal; no celular, um carrossel com scroll-snap e cards em estilo de arquivo de código.
• Stack: palavras gigantes deslizando ao fundo, cards entrando em sequência e um trilho tracejado animado ligando padrões e integrações.
• Trajetória: seção fixa em que o scroll percorre a linha do tempo e preenche a barra vermelha. Ao lado, um crachá com física: cordão elástico simulado com XPBD em canvas, balanço leve quando parado, e o visitante pode puxar, soltar e virar o crachá (frente e verso com QR code).
• Agenda e blog: palestras como ingressos, faixas "entrada liberada" correndo ao fundo e o último post como pôster.
• Fireframe: a equação Fire + Frame entra pelos lados, a chama tremula e os cards se afastam no hover.
• Pontes vermelhas: cada emenda entre seções escuras tem uma elipse em gradiente cortada ao meio, metade em cada seção, formando um brilho contínuo pela página.
• Desligar animações: um botão no header e outro no preloader gravam a preferência, e um script no <head> aplica html[data-motion='reduced'] antes da primeira pintura. O site também respeita prefers-reduced-motion.

• Só `transform` e `opacity` nas animações, para rodar na GPU sem recalcular layout.
• GSAP centralizado: ScrollTrigger.config({ ignoreMobileResize: true }) evita recálculos quando a barra do navegador do celular aparece, e as seções fixas guardam o progresso ao redimensionar, sem "pular" de posição.
• Cada cena criada em `gsap.context()` / `gsap.matchMedia()` e desfeita na desmontagem do componente.
• Imagens em WebP e AVIF com next/image e fontes servidas pelo próprio site.
• Movimento opcional em todo o site: cada animação tem uma versão parada.
• SEO bilíngue: canonical, hreflang (pt-BR, en, x-default), sitemap com as duas versões e Open Graph por página.
• Testado em 390, 768 e 1440 px, com layouts próprios para celular onde a experiência de desktop não faria sentido.

• Vercel: site e painel, com deploy automático a cada push na main.
• Render: API NestJS com migrations aplicadas antes de cada deploy (prisma migrate deploy) e health check.
• Neon: PostgreSQL gerenciado.
• Cloudflare: domínio lanecodes.dev, DNS e imagens no R2, servidas em media.lanecodes.dev.
• Resend: envio dos e-mails do formulário de contato.
• GitHub Actions: formatação, checagem de tipos e build a cada push.
• Currículo em PDF gerado sob demanda com @react-pdf/renderer, com fontes e foto embutidas para funcionar no ambiente serverless.