Site institucional com painel administrativo para a empresa Limp Service VR, empresa de Volta Redonda no setor de Limpeza Geral.

01-site-limpservice.png

02-cms-limpservice-dashboard.png

03-perfil-usuario-limpservice.png

04-configurações-site-limpservice.png

05-servicos-limpservicevr.png

06-post-servicos-limpservicevr.png

07-perfil.png

Durante o desenvolvimento de projetos mais simples sempre busquei solu&ccedil;&otilde;es pr&aacute;ticas para manipular o DOM, mas n&atilde;o estava t&atilde;o disposto a utilizar o jQuery nos novos projetos, ent&atilde;o durante minhas pesquisas me deparei com o Alpine JS que possui uma sintaxy parecida com o Vue JS e com um curva de aprendizado muito pequena. Descobri que o framework Laravel na qual eu j&aacute; desenvolvia meus projetos havia agregado o alpine js nas instala&ccedil;&otilde;es de Starter Kits, o que foi mais um motivo para come&ccedil;ar a utilizar nos projetos de menos complexidade.
&nbsp;
O Alpine.js &eacute; um framework JavaScript bastante leve (pesando apenas 7kb) que permite adicionar interatividade &agrave;s p&aacute;ginas web sem a necessidade de carregar bibliotecas JavaScript pesadas e complexas, como o Vue.js ou o React sendo uma excelente op&ccedil;&atilde;o para desenvolvedores que desejam adicionar interatividade a uma p&aacute;gina web de forma f&aacute;cil, r&aacute;pida e leve, sem a necessidade de carregar bibliotecas JavaScript pesadas e complexas.

Alpine JS

Tailwind CSS

Livewire

Laravel

Java Script

HTML 5

CSS 3

Limp Service VR

Plataforma EAD desenvolvida para o Instituto Teol&oacute;gico John Knox, localizado na Igreja Presbiteriana do Retiro em Volta Redonda, com o objetivo de proporcionar aos alunos acesso aos materiais das aulas presenciais e oferecer cursos 100% online. O projeto foi desenvolvido por mim em todas as etapas, incluindo o banco de dados, o back-end, o front-end e o deploy. Al&eacute;m disso, a plataforma possui um sistema de ACL (Access Control List) com fun&ccedil;&otilde;es e permiss&otilde;es para cada tipo de usu&aacute;rio.

01.png

02.png

Plataforma Ead - Instituto John Knox

Este &eacute; o meu portf&oacute;lio pessoal, que nasceu do estudo e pr&aacute;tica do Next JS. Eu sempre fui muito acostumado a trabalhar com PHP e Laravel como fullstack na maioria dos projetos. No entanto, com o tempo, me interessei em estudar frameworks JavaScript front-end para desenvolver sistemas cada vez mais perform&aacute;ticos e que proporcionassem uma melhor experi&ecirc;ncia do usu&aacute;rio.
Depois de um tempo estudando algumas tecnologias front-end, como React, VueJS e LiveWire para o Laravel, decidi estudar uma tecnologia que me permitisse ter muito mais performance, melhor experi&ecirc;ncia do usu&aacute;rio e ainda assim manter o SEO sem preju&iacute;zos, como ocorre com aplica&ccedil;&otilde;es renderizadas do lado do cliente. Foi ent&atilde;o que me deparei com o Next JS e fiquei muito interessado e impressionado com as possibilidades de gerar p&aacute;ginas est&aacute;ticas automaticamente, utilizar Webhooks para revalidar essas p&aacute;ginas quando algo &eacute; atualizado no backend e, dessa forma, ter uma carga muito menor no servidor e banco de dados.
Para colocar em pr&aacute;tica todo o estudo realizado, decidi fazer um projeto simples para validar todas as funcionalidades aprendidas. Por isso, criei um portf&oacute;lio que eu j&aacute; precisava, mas n&atilde;o apenas um front-end est&aacute;tico, mas tamb&eacute;m um pequeno CMS (Content Management System) backend criado em PHP com Laravel, que exp&otilde;e APIs para fornecer os dados para a aplica&ccedil;&atilde;o front-end criada em Next JS.
Embora n&atilde;o houvesse necessidade de desenvolver um portf&oacute;lio com todos esses detalhes, tomei essa decis&atilde;o para facilitar a aplica&ccedil;&atilde;o do que foi aprendido e, da mesma forma, aproveitar esse exerc&iacute;cio para algo &uacute;til.

01-portfolio-home.png

02-sobre.png

03-tecnologias.png

04-projetos.png

05-contatos.png

06-dashboard.png

07-tecnologias.png

08-projetos.png

09-contatos.png

10 - Login.png

React JS

O Next.js é um framework de desenvolvimento web em JavaScript que permite criar aplicativos e sites com renderização do lado do servidor (SSR) e renderização do lado do cliente (CSR) de forma fácil e rápida. É baseado no React, outro popular framework JavaScript para a criação de interfaces de usuário.

Algumas das principais vantagens do Next.js incluem:

Renderização híbrida: o Next.js permite a renderização híbrida de páginas, o que significa que uma página pode ser renderizada no servidor antes de ser enviada ao cliente, o que melhora significativamente o tempo de carregamento e a experiência do usuário. Isso é especialmente útil para páginas que exibem conteúdo dinâmico e para melhorar a indexação do conteúdo pelos mecanismos de busca.

Menor tempo de desenvolvimento: o Next.js inclui muitos recursos e funcionalidades integrados que reduzem o tempo de desenvolvimento. Por exemplo, o framework oferece suporte para rotas dinâmicas, pré-renderização, carregamento progressivo, entre outras funcionalidades, que permitem que os desenvolvedores criem aplicativos e sites rapidamente.

Integração com outras bibliotecas: o Next.js é compatível com várias bibliotecas e frameworks, como o React, o GraphQL, o TypeScript e o Styled Components, o que permite que os desenvolvedores utilizem outras ferramentas e recursos para criar aplicativos e sites personalizados.

Escalabilidade: o Next.js é altamente escalável e pode lidar facilmente com grandes quantidades de tráfego e dados, tornando-o ideal para projetos grandes e complexos.

Fácil hospedagem: o Next.js pode ser hospedado em vários provedores de hospedagem na nuvem, como a Vercel, que oferece hospedagem gratuita e escalável para projetos Next.js.

Em resumo, o Next.js é um framework de desenvolvimento web poderoso e flexível que oferece várias vantagens, como renderização híbrida, menor tempo de desenvolvimento, integração com outras bibliotecas, escalabilidade e facilidade de hospedagem.

Next JS

Portfólio

Este &eacute; um projeto de controlador MIDI que desenvolvi na faculdade, quando o professor nos deixou livres para escolhermos o que quer&iacute;amos desenvolver como trabalho bimestral na disciplina de Automa&ccedil;&atilde;o e Controle. Como sou m&uacute;sico e gosto muito de tecnologia, decidi criar algo que relacionasse os dois mundos. Utilizei um Arduino Uno e alguns potenci&ocirc;metros para criar um prot&oacute;tipo de controlador MIDI com 4 faders (controladores de volume), que, quando conectado a um computador, pode controlar os volumes dentro de softwares de m&uacute;sica, como sistemas de grava&ccedil;&atilde;o em est&uacute;dio ou softwares de DJs. Dessa forma, n&atilde;o &eacute; necess&aacute;rio utilizar o mouse ou o teclado do computador para alterar os volumes, o que facilita todo o controle em tempo real de v&aacute;rios par&acirc;metros simultaneamente.

Arduino

Controlador MIDI para Softwares de Música

Realiza o c&aacute;lculo do valor final a ser recebido com base nas taxas de cada modelo de m&aacute;quina de cart&atilde;o. Foi criada para o site de um cliente que vendia v&aacute;rias marcas de m&aacute;quina de cart&atilde;o e sempre era questionado pelos clientes compradores das m&aacute;quinas sobre as taxas e quanto receberiam. Foi ent&atilde;o que dei a ideia de criar essa calculadora para facilitar, incorporando-a ao site. Dessa forma, quando um cliente precisasse de informa&ccedil;&otilde;es sobre os valores, bastava acessar o site e calcular tudo em um s&oacute; lugar. O cliente gostou muito da ideia e de fato a calculadora ajudou bastante nos processos de venda dele.
Esse foi o primeiro projeto que fiz com JavaScript puro e que me ajudou a colocar em pr&aacute;tica os conhecimentos iniciais em JavaScript.

tela.png

Bootstrap &eacute; uma excelente biblioteca principalmente em casos onde &eacute; necess&aacute;rio criar um prot&oacute;tipo ou levantar um projeto r&aacute;pido com componentes j&aacute; estilizados, bastando utilizar os recursos prontos.
&nbsp;
O Bootstrap &eacute; uma ferramenta gratuita para desenvolvimento HTML, CSS e JS. Crie prot&oacute;tipos r&aacute;pidamente ou aplica&ccedil;&otilde;es completas com nossas vari&aacute;veis e mixins Sass, sistemas de grid responsivo, componentes pr&eacute;-constru&iacute;dos.

Bootstrap

Simulador de taxas de maquinas de cartão