Crie um site de portfólio 3D com React Three Fiber

React Three Fiber / Drei - Framer Motion - Swiper.js - Email.js

Avaliação: 5.0 de 52 avaliações

Duração Total: 3 horas

Total de Aulas: 17

Nível de Dificuldade: Intermediário

Neste curso, você aprenderá como construir um site de portfólio 3D único usando React Three Fiber, React, Drei, Framer Motion e Swiper.js. Essas ferramentas ajudarão você a criar uma experiência visualmente impressionante e amigável ao usuário. Utilizaremos o React Three Fiber e o Drei para importar modelos glTF em nosso projeto. Esses modelos incluem um logotipo animado do React.js e um modelo da Terra que escala com base na posição do usuário na página. Com o React Three Drei, podemos incorporar facilmente um fundo estrelado e animá-los usando componentes personalizados. Para adicionar animações cativantes ao nosso site, combinaremos o Framer Motion com o React Intersectional Observer. Essa combinação nos permite criar entradas animadas impressionantes para vários elementos em nosso site. O Swiper.js será usado para criar carrosséis bonitos e únicos em nosso site. Criaremos dois tipos de carrosséis: um para mostrar nossos projetos de portfólio e outro para exibir nosso histórico de trabalho. Além disso, integraremos o Email.js para permitir que nosso formulário de contato envie e-mails. Como bônus, este curso inclui dois vídeos que abordam técnicas de otimização para nossos projetos. Você aprenderá como otimizar modelos glTF e monitorar o desempenho de suas aplicações React Three Fiber. O que você aprenderá: - Obter conhecimento sobre o React Three Fiber e o React Three Drei - Utilizar o Framer Motion para criar animações incríveis - Criar carrosséis 3D usando o Swiper.js - Aprender técnicas de otimização para projetos React Three Fiber