Fascinado por tecnologia e jogos desde criança, comecei a aprofundar meus conhecimentos em desenvolvimento web com foco em front-end na vida adulta. Adquiri experiência estudando conteúdos de diversas formas, através de documentações técnicas, artigos, tutoriais e vídeos, aplicando os conhecimentos de forma prática desenvolvendo vários projetos no processo. Com uma base sólida em HTML5, CSS3, e JavaScript, tanto na forma vanilla quanto em bibliotecas e frameworks como Tailwind CSS, React, e Next.js, busco criar interfaces que seguem padrões, metodologias, e boas práticas, combinando design moderno com alta performance, usabilidade, responsividade e acessibilidade.
Também possuo conhecimentos em UI/UX, back-end e fundamentos de cibersegurança. Sou entusiasta de gamificação e open source, sempre buscando evoluir e colaborar ativamente em projetos open source para aprimorar minhas habilidades e contribuir com melhorias.
Projetos
Explore meus projetos de desenvolvimento web com código aberto e demonstração ao vivo, criando soluções funcionais conforme os estudos das tecnologias
Playground WEB / HTML | CSS | JavaScript
Projetos simples desenvolvidos junto aos estudos dos fundamentos de front-end, utilizando HTML, CSS e JavaScript de forma pura/vanilla, sem frameworks ou bibliotecas. Aborda tópicos como manipulação do DOM, Web APIs, eventos, drag and drop, arrays, objetos, funções, SVG, canvas, estrutura de repetições, formulários, entre outros.
Principais tecnologias utilizada:
HTML5
CSS3
JavaScript
Kobe Bryant Tribute
Projeto de uma landing page criado para estudar e praticar design e desenvolvimento front-end. Utilizando Figma para o design e tecnologias como HTML, CSS, SASS e Bootstrap para o desenvolvimento, a página presta homenagem ao ex-jogador de basquete Kobe Bryant.
Principais tecnologias utilizada:
Bootstrap
SASS
Figma
30 Dias De CSS/SASS
Animações diárias em CSS utilizando pré-processador SASS, criadas durante um desafio de 30 dias. O projeto explora propriedades e tópicos como responsividade, variáveis, nesting, partials, módulos e mixins, com foco no aprendizado e compartilhamento diário no LinkedIn.
Principais tecnologias utilizada:
HTML5
CSS3
SASS
21 Dias de Código
Desafio comunitário para codificar por 21 dias seguidos. Os projetos incluem criação de páginas personalizadas, formulários, consumo de APIs e funcionalidades com React, Next.js e TailwindCSS, visando aprendizado, disciplina e networking.
Principais tecnologias utilizada:
React
Next.js
SASS
Tailwind CSS
Country Insights
Desafio de front-end focado em React e React Router, com consumo de uma API de países usando Axios. O projeto inclui navegação, filtros e uma página detalhada para cada país, praticando habilidades de desenvolvimento de interfaces.
Principais tecnologias utilizada:
React
React Router
Axios
SASS
Habilidades
Descubra minhas competências técnicas e interpessoais, incluindo boas práticas, acessibilidade, optimização, desempenho, usabilidade e práticas ágeis desde a prototipagem e design até o desenvolvimento front-end
Principais conhecimentos
Desenvolvimento Front-end:
Axios
Detalhes sobre Axios
Axios
Biblioteca JavaScript para fazer requisições HTTP(GET, POST, PUT, DELETE) de forma simplificada. Facilita o consumo de APIs RESTful e permite manipular respostas com promessas, seguindo boas práticas de modularidade e tratamento de erros.
BEM CSS
Detalhes sobre BEM CSS
BEM CSS
Metodologia de nomenclatura de classes CSS que promove código limpo e organizado. Facilita a criação de estilos de componentes reutilizáveis, manutenção e a escalabilidade do CSS em projetos grandes, separando blocos, elementos e modificadores.
Bootstrap
Detalhes sobre Bootstrap
Bootstrap
Framework CSS que facilita o desenvolvimento de interfaces responsivas. Oferece componentes prontos e um sistema de grid, seguindo boas práticas de design consistente e acessível.
CSS3
Detalhes sobre CSS3
CSS3
Linguagem de estilo utilizada para definir a aparência de documentos HTML. Aplicado para estilizar layouts de maneira responsiva e acessível, seguindo boas práticas de modularização e reutilização de código.
HTML5
Detalhes sobre HTML5
HTML5
Linguagem de marcação usada para estruturar layouts e apresentar documentos de hipertexto em websites, utilizando-o de forma apropriada através de elementos semânticos a favor da acessibilidade e SEO.
JavaScript
Detalhes sobre JavaScript
JavaScript
Linguagem de programação essencial para a web, que permite interatividade e dinamismo nas páginas. Seguir boas práticas de modularização, manipulação do DOM e tratamento de eventos é fundamental.
JSON(JavaScript Object Notation)
Formato leve de intercâmbio de dados, amplamente utilizado para enviar e receber informações entre cliente e servidor. Facilita a organização e manipulação de dados estruturados, com foco na simplicidade e legibilidade.
ES6(ECMAScript)
Versão do JavaScript que introduz recursos modernos, como arrow functions, classes e promessas. Permite escrever código mais conciso e legível, adotando boas práticas como a modularização e o uso de let e const para variáveis.
Next.js
Detalhes sobre Next.js
Next.js
Framework React para desenvolvimento de aplicações web com renderização híbrida e rotas dinâmicas. Segue boas práticas de SEO, otimização de performance e desenvolvimento de aplicações escaláveis.
React
Detalhes sobre React
React
Biblioteca JavaScript para construção de interfaces de usuário. Promove a criação de componentes reutilizáveis e a manutenção de um estado previsível, seguindo boas práticas de modularidade e imutabilidade.
JSX(JavaScript XML)
Sintaxe que permite escrever HTML dentro do JavaScript em aplicações React. Facilita a criação de interfaces de usuário declarativas e componentes reutilizáveis, promovendo um código mais limpo e organizado.
React Hooks
APIs do React que permitem o uso de estado e outros recursos sem a necessidade de classes. Promove a reutilização de lógica de componentes e um código mais limpo e funcional.
React Icons
Biblioteca de ícones para projetos React, que facilita a inclusão de ícones em interfaces. Permite uma integração simples e uma personalização fácil, mantendo a consistência visual.
React Router
Detalhes sobre React Router
React Router
Biblioteca de roteamento para React, usada para criar navegações dinâmicas em aplicações de página única (SPAs). Segue boas práticas de gerenciamento de rotas e acessibilidade.
SASS
Detalhes sobre SASS
SASS
Pré-processador CSS que adiciona recursos como variáveis, mixins e aninhamento, facilitando a escrita de CSS modular e reutilizável. Promove boas práticas de manutenção e organização do código CSS.
Tailwind CSS
Detalhes sobre Tailwind CSS
Tailwind CSS
Framework CSS utilitário que permite a criação de interfaces rapidamente, através de classes utilitárias. Promove boas práticas de design responsivo e consistência visual, facil de customizar e adaptar para qualquer design.
Design e Prototipação:
Figma
Detalhes sobre Figma
Figma
Ferramenta de design colaborativa para criar interfaces e protótipos. Facilita a colaboração entre designers e desenvolvedores, seguindo boas práticas de design UI/UX e garantindo consistência visual.
Ferramentas de desenvolvimento:
ESLint
Detalhes sobre ESLint
ESLint
Ferramenta de linting para identificar e corrigir problemas no código JavaScript. Promove boas práticas de codificação, garantindo consistência e reduzindo erros em projetos colaborativos.
Git
Detalhes sobre Git
Git
Sistema de controle de versão distribuído que permite rastrear mudanças no código-fonte. Essencial para colaboração em equipe, seguindo boas práticas de versionamento, como branchs, commits frequentes e mensagens descritivas.
GitHub
Detalhes sobre GitHub
GitHub
Plataforma de hospedagem de código que utiliza Git para controle de versão. Facilita a colaboração e a revisão de código, permitindo a integração contínua e o uso de pull requests para garantir a qualidade do software.
GitHub Pages
Detalhes sobre GitHub Pages
GitHub Pages
Serviço de hospedagem gratuito da GitHub que permite publicar sites diretamente dos repositórios. Ideal para documentações, portfólios e demonstrações de projetos, com uma configuração simples.
Google Lighthouse
Detalhes sobre Google Lighthouse
Google Lighthouse
Ferramenta automatizada de auditoria que avalia o desempenho, acessibilidade, SEO e boas práticas de páginas web. Ela fornece relatórios detalhados para identificar problemas e oportunidades de melhoria, ajudando desenvolvedores a otimizar seus sites para melhor experiência do usuário e velocidade. Seguir as recomendações do Lighthouse é uma boa prática para criar websites eficientes, acessíveis e com alto ranqueamento nos motores de busca.
Prettier
Detalhes sobre Prettier
Prettier
Ferramenta de formatação de código que assegura um estilo consistente em toda a base de código, automaticamente aplicando boas práticas de formatação para várias linguagens de programação.
Vercel
Detalhes sobre Vercel
Vercel
Plataforma de deploy rápida e otimizada para aplicações front-end, especialmente para projetos com Next.js. Facilita a integração contínua e o escalonamento, com foco em performance e usabilidade.
Vite
Detalhes sobre Vite
Vite
Ferramenta de build e desenvolvimento que proporciona um ambiente de desenvolvimento rápido, utilizando ES modules. Ideal para projetos modernos com React e Vue, otimizando a experiência do desenvolvedor.
Outros conhecimentos
Desenvolvimento Front-end:
jQuery
Detalhes sobre jQuery
jQuery
Biblioteca JavaScript que simplifica a manipulação do DOM, eventos e requisições AJAX. Apesar de menos usada atualmente, ainda é útil para projetos que exigem suporte a navegadores legados.
Ferramentas de desenvolvimento:
Node.js
Detalhes sobre Node.js
Node.js
Ambiente de execução JavaScript server-side, usado para construir aplicações web escaláveis e de alto desempenho. Permite a criação de servidores e APIs com boas práticas de modularidade e event-driven architecture.
NPM
Detalhes sobre NPM
NPM
Gerenciador de pacotes do Node.js que facilita a instalação e gerenciamento de dependências em projetos JavaScript, garantindo a modularidade e reutilização de código.
Desenvolvimento Back-end:
ASP.NET Core
Detalhes sobre ASP.NET Core
ASP.NET Core
Um framework open-source e multiplataforma para o desenvolvimento de aplicações web e APIs, utilizando o C#. Segue boas práticas de arquitetura, como MVC e injeção de dependência, para criar soluções robustas e escaláveis.
C#
Detalhes sobre C#
C#
Linguagem de programação robusta e versátil usada principalmente no desenvolvimento de aplicações desktop, web e jogos. Segue boas práticas de orientação a objetos, como encapsulamento e polimorfismo.
SQL
Detalhes sobre SQL
SQL
Linguagem de consulta estruturada usada para gerenciar e manipular bancos de dados relacionais. Seguir boas práticas de normalização e escrita de consultas eficientes é fundamental para a integridade e performance dos dados.
Contato
Entre em contato para networking, troca de idéias, discussão de oportunidades ou esclarecimento de dúvidas. Ficarei feliz em colaborar!
