🚀 Evolução constante
Este é o projeto do meu Web Portfólio que consiste em uma aplicação construída em NextJs com os conceitos aprendidos em minha caminhada.
Construído no estilo de design minimalista e totalmente responsivo para qualquer pessoa acessar no dispositivo e no momento que desejar.
O minimalismo não é falta de algo, é simplesmente a quantidade exata de alguma coisa. Não diz respeito ao uso de poucos componentes e estilos da composição, mais sim ao máximo aproveitamento dele em si, em conjunto com o apelo estético da aplicação.
- URL da Solução : danilocalegaro.dev.br
Tudo iniciou com a proposta de construir algo simples e objetivo. O estilo minimalista foi o método ideal para o projeto pois todas a informações que eu queria transmitir ficou muito clara e foi possível criar um esboço.
Com a base criada, o próximo passo foi a implementação de todo o projeto em NextJS com o css-in-js usando Styled-Components, mais com o detalhe de ele ser totalmente responsivo as diversas resoluções, assim nasceu um desafio, independente da resolução a página inicial teria que ser a mesma, mais isso foi resolvido com o cálculo vh com margin-top no css para sempre deixar o elemento na posição desejada.
Após criado todo landing page fui em busca da animação perfeita, eu queria algo suave, sem muito efeitos, assim descobri o Motion-Frame que é uma biblioteca de movimento para ReactJS que possui uma sintaxe declarativa muito simples, foi uma ótima oportunidade de aprender.
Outro detalhe para todo o portfólio é necessário ter algo dedicada as pessoas enviarem sua mensagem além das redes sociais, para isso surgiu a necessidade de criar uma página de contato. Construindo esta página descobri o EmailJS uma ótima ferramenta de envios de e-mails diretamente do JavaScript sem nenhum código de servidor necessário. Mergulhei em sua documentação e montei toda a conexão com API de serviço e ficou excelente, agora qualquer mensagem enviada do portfólio chegará em meu e-mail.
No formulário de contato foi utilizado o React Hook Form juntamente com YUP para validação dos campos.
Contudo foram várias semanas para desenvolvimento e grandes desafios que foram superados, muito ainda pode ser melhorado, por isso a evolução é constante.
- yarn - Gerenciador de pacotes do projeto.
- NextJS - Framework React.
- TypeScrip - Uma linguagem de programação fortemente tipada que se baseia em JavaScript.
- PhosphorIcons - Pacote de ícones
- Framer Motion - Animações de movimento.
- React Hook Form - Validação dos campos do formulário.
- YUP - Construtor de esquema para análise e validação
- EmailJS - Envios de e-mails diretamente do JavaScript
- Rocketseat - Ignite - Estudos de ReactJS/NextJS
Para visualizar a página hospedada basta clicar no link disponível acima nesta página.
Para executar o projeto local utilizamos os comandos:
yarn install
Será nacessario criar na raiz do projeto um arquivo .env.local com as chaves criadas pelo EmailJS, este arquivo deverá ter o seguinte código:
NEXT_PUBLIC_REACT_APP_SERVICE_ID = 'seu id service emailjs'
NEXT_PUBLIC_REACT_APP_TEMPLATE_ID = 'seu id templete emailjs'
NEXT_PUBLIC_REACT_APP_USER_ID = 'seu id publico emailjs'
Para qualquer dúvida a documentação por ser acessada neste link www.emailjs.com/docs/ ou neste outro link com um ótimo exemplo passo a passo How to send emails using React through EmailJs
Logo em seguida:
yarn run dev
E a aplicação poderá ser visualizada nas suas respectivas rotas:
http://localhost:3000/
http://localhost:3000/contact
Danilo Calegaro - danilocalegaro.dev.br