Refatorei o meu portfolio utilizando Next.js 13. Agora, todos os dados presentes no portfolio são buscados de uma API externa que desenvolvi exclusivamente para este projeto. Essa abordagem torna o portfolio mais dinâmico, eliminando a necessidade de atualizações manuais dos projetos e habilidades diretamente no portfolio. Além da refatoração, realizei melhorias na estrutura dos componentes e implementei novas features, incluindo uma rota de contatos. Agora, qualquer pessoa pode me enviar uma mensagem ou entrar em contato por meio de diferentes opções disponíveis. Essas mudanças visam proporcionar uma experiência mais interativa e eficiente para os visitantes do portfolio.
-
Refatoração total, adotei um estilo
Mechacom um incrível modelo 3D para trazer algo mais realista no meu portfolio, junto com o framer motion para dar um toque de suavidade nas transições, eu particularmente adorei esse novo designer. -
Implementação de interceptação de rotas e criação de rotas estáticas: Implementei a interceptação de rotas e criei rotas estáticas para os projetos usando a funcionalidade de Rotas Paralelas do Next.js. Isso garante um carregamento inicial suave, sem carregamentos adicionais ao navegar entre as páginas, pois todas as páginas são pré-carregadas durante a construção
(build). O melhor de tudo é que a experiência é semelhante a um modal, mas, na verdade, é uma navegação contínua com URLs compartilháveis. -
SEO dinâmico implementado nas rotas estáticas: Cada rota estática agora inclui o nome do projeto no título da página, e ao compartilhar uma página, cada projeto terá sua própria miniatura com seu nome e descrição.
- Melhoria na obtenção de dados com react-query: Alterei o método de obtenção de dados usando o react-query, proporcionando vantagens em otimização e cache, tornando os dados mais acessíveis e resultando em
hooksmais limpos.
💻 Front-end
📚 Bibliotecas
- zustand
- zod
- react-query
- next-pwa
- react-hook-form
- react-toastify
- react-icons
- framer-motion
- gsap
- react-three-fiber
🎨 Estilização
🔋 Versionamento e Deploy
⚙️ Configuranções e Instalações
Clone do Projeto
$ git clone https://github.com/renovatt/portfolio.git
Instalando as dependências
$ npm install
Iniciando o projeto
$ npm run dev
Como contribuir?
- Você pode dar suporte me seguindo aqui no GitHub
- Dando uma estrela no projeto
- Criar uma conexão comigo no linkedin fazendo parte da minha networking e curtir o meu projeto.