Migrar um projeto não é apenas mudar a extensão dos arquivos; é repensar a arquitetura para ganhar escala e performance. Recentemente, finalizei a refatoração do site da Maker Mourão, saindo de uma estrutura estática para uma SPA (Single Page Application) moderna com React e Vite.
Neste post, compartilho os desafios e as decisões técnicas tomadas para esta tarefa.
🎯 O Objetivo
O site originalmente modelado puramente em HTML/JS: Maker Mourão Foi feita a migração para o React.
🛠 A Nova Stack
Optei pelo Vite como ferramenta de build pela sua velocidade no desenvolvimento e pelo React pela facilidade de trabalhar com componentes.
As principais mudanças técnicas:
Componentização: O que antes eram blocos colados em um arquivo único, agora são componentes reutilizáveis como <Header />, <Hero /> e <PortfolioGrid />.
Hooks e Estado: Utilizei o useState para controlar o Menu Mobile e o useTheme (um hook customizado) para gerenciar o modo escuro, garantindo uma transição suave de cores.
Consumo Dinâmico de Dados: O site consome a API do meu blog de forma assíncrona. Isso significa que, quando posto um novo projeto de impressão 3D no Blogger, ele aparece automaticamente no portfólio do site, sem que eu precise editar uma linha de código.
UX Aprimorada: Implementei o Scroll Suave e tratei a acessibilidade dos botões, elevando o nível de profissionalismo da entrega.
Confira o código completo no meu GitHub e veja o projeto rodando em dev.mourao.info.
Github: github.com/devmourao/maker-mourao
Site: maker.mourao.info/