Triper: o site de viagens que construí para aprender Next.js e animações CSS
Um projeto de estudo com conteúdo fictício e objetivo real: entender renderização no servidor, performance e como animar uma página sem pesar a navegação.
O Triper é um site de viagens — mas viagem foi só o pretexto. Eu queria aprofundar três coisas: Next.js, animações CSS e código limpo. Todo o conteúdo do site é ilustrativo; o que importava era o que acontecia por baixo.
O contexto
O Next.js resolve problemas que o React puro deixa para você: renderização no servidor e geração de páginas estáticas, que ajudam na performance e na experiência de navegação. Eu já tinha lido sobre isso, mas queria entender na prática por que e quando cada abordagem faz diferença.
Os desafios
- Animar sem atrapalhar. Animação bonita que trava a rolagem é pior do que nenhuma animação.
- Decidir quando animar. Nem todo elemento precisa se mexer, e o momento da animação muda a percepção da página.
- Organizar o código como num projeto profissional, mesmo sendo um projeto de estudo.
O que eu construí
Um site em Next.js com animações de elementos da página e keyframes para movimentos personalizados, deixando a navegação mais fluida e suave. Segui padrões de organização de código e documentação e, depois, comparei o resultado com aplicações reais do mercado para ver onde eu estava acertando e onde podia melhorar.
O que aprendi
- Next.js muda a forma de pensar performance: o que pode ser gerado antes, deve ser.
- Animação é design de tempo — a lógica de quando algo se move importa tanto quanto como.
- Projeto de estudo também merece código limpo; é nele que os bons hábitos se formam.
O resultado
O Triper virou meu laboratório: de tempos em tempos volto nele para melhorar visual, performance e navegação, comparando o antes e o depois. E ele ainda me serve de referência para dúvidas do dia a dia. Veja em tripper-landing.netlify.app.
