Eu sou
João Pedro Marques Chaves
Desenvolvedor Fullstack | UI/UX Designer
Meus Projetos ->
Desenvolvedor Fullstack | UI/UX Designer
I am
João Pedro Marques Chaves
Fullstack Developer | UI/UX Designer
My Projects ->
Fullstack Developer | UI/UX Designer
EXPERIENCE
EXPERIÊNCIA
Digital House
2019 - 2020
Professor de front-end
Front-end Teacher
Meu primeiro emprego na área como professor assistente de front-end no curso Certified Tech Developer da Digital House. Nessa função eu tinha que auxiliar os alunos integralmente a realizar os projetos e entender as bases e as linguagens do front-end
My first job in the area as an assistant professor of front-end in the Certified Tech Developer course at Digital House. In this role, I had to fully help the students to carry out the projects and understand the bases and languages from the frontend
Digital House
2020 - 2021
Criador de Conteúdo
Content Creator
Na minha segunda experiência na área fui encarregado de criar os materiais do curso de front-end da Digital House, assim como traduzí-los do espanhol para o portugues. Os materiais criados por mim variam de apresentações PPT, Quizes, Exercícios, scripts de vídeo e mais.
In my second experience in the area i was in charge of creating the front-end course materials for Digital House, as well as translating them from Spanish to Portuguese. The materials created by me vary from PPT presentations, Quizzes, Exercises, video scripts and more.
Mercado Livre (Digital House)
2021 - 2023
Professor de front-end
Front-end Teacher
Fiquei encarregado de lecionar para os desenvolvedores recém contratados do Mercado Livre acerca das tecnologias utilizadas na empresa assim como boas práticas de React e de Design UI/UX Storybooking.
I was in charge of teaching the newly hired Mercado Libre developers about the technologies used in the company as well as good practices of React and Design UI/UX Storybooking.
O que eu sei?
What i know?
CONHECIMENTO
KNOWLEDGE
HTML
HTML é uma linguagem de marcação utilizada na construção de páginas na Web. Documentos HTML podem ser interpretados por navegadores.
HTML is a markup language used to build web pages. HTML documents can be interpreted by browsers.
CSS
CSS é chamado de linguagem Cascading Style Sheet e é usado para estilizar elementos escritos em uma linguagem de marcação como HTML. O CSS separa o conteúdo da representação visual do site.
CSS is called the Cascading Style Sheet language and is used to style elements written in a markup language like HTML. CSS separates content from the visual representation of the site.
JavaScript
JavaScript é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma. Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da web
JavaScript is a structured, high-level scripting, dynamically typed, multiparadigm, interpreted programming language. Along with HTML and CSS, JavaScript is one of the top three web technologies
Figma
Figma é um editor gráfico de vetor e prototipagem de projetos de design baseado principalmente no navegador web, com ferramentas offline adicionais para aplicações desktop para GNU/Linux, macOS e Windows.
Figma is a vector graphics editor and prototyping design project primarily based on the web browser, with additional offline tools for desktop applications for GNU/Linux, macOS and Windows.
Bootstrap
Bootstrap é um framework web com código-fonte aberto para desenvolvimento de componentes de interface e front-end para sites e aplicações web, usando HTML, CSS e JavaScript, baseado em modelos de design para a tipografia, melhorando a experiência do usuário em um site.
Bootstrap is an open-source web framework for developing interface and front-end components for websites and web applications, using HTML, CSS and JavaScript, based on design templates for typography, improving the user experience on a website .
Git & GitHub
Git e Github são fundamentais para o controle de versão e colaboração eficaz em projetos de software. Enquanto o Git gerencia as versões do código localmente, o Github fornece uma plataforma para compartilhar, revisar e colaborar em código de forma distribuída, tornando-o uma ferramenta indispensável para desenvolvedores em todo o mundo.
Git and Github are fundamental for version control and effective collaboration in software projects. While Git manages code versions locally, Github provides a platform for sharing, reviewing, and collaborating on code in a distributed manner, making it an indispensable tool for developers worldwide.
Adobe Photoshop
Adobe Photoshop é um software caracterizado como editor de imagens bidimensionais do tipo raster desenvolvido pela Adobe Systems. É considerado o líder no mercado dos editores de imagem profissionais.
Adobe Photoshop is a software characterized as a two-dimensional raster image editor developed by Adobe Systems. It is considered the market leader in professional image editors.
Adobe Premiere
Adobe Premiere Pro é um programa de computador, da empresa Adobe Systems, que é empregado para a edição de vídeos profissionais.
Adobe Premiere Pro is a computer program, from the company Adobe Systems, which is used for professional video editing.
Node.js
Node.js é um software de código aberto, multiplataforma, baseado no interpretador V8 do Google e que permite a execução de códigos JavaScript fora de um navegador web. A principal característica do Node.js é sua arquitetura assíncrona e orientada a eventos.
Node.js is open-source, cross-platform software based on Google's V8 interpreter that allows you to run JavaScript code outside of a web browser. The main feature of Node.js is its asynchronous and event-driven architecture.
Express
Express.js é um framework para Node.js que fornece recursos mínimos para construção de servidores web. Foi lançado como software livre e de código aberto sob a Licença MIT. É um dos mais populares frameworks para servidores em Node.js.
Express.js is a framework for Node.js that provides minimal resources for building web servers. It was released as free and open source software under the MIT License. It is one of the most popular server frameworks on Node.js.
React
O React é uma biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web.
React is an open source JavaScript front-end library focused on creating user interfaces on web pages.
SCRUM
Scrum é um framework para gerenciamento de projetos com ênfase inicial no desenvolvimento de software, embora tenha sido usado em outros campos, incluindo pesquisa, vendas, marketing e tecnologias avançadas.
Scrum is a project management framework with an early emphasis on software development, although it has been used in other fields including research, sales, marketing and advanced technologies.
SQL
Structured Query Language, lit. "linguagem de consulta estruturada", é uma linguagem de domínio específico desenvolvida para gerenciar dados relacionais em um sistema de gerenciamento de banco de dados.
Structured Query Language, lit. "structured query language", is a domain-specific language designed to manage relational data in a database management system.
Sequelize
O Sequelize é um ORM, ou seja, um mapeador objeto-relacional. Isso significa que ele permite que você crie modelos (classes) em TypeScript ou JavaScript que representam as tabelas do seu banco de dados.
Sequelize is an ORM, that is, an object-relational mapper. This means that it allows you to create models (classes) in TypeScript or JavaScript that represent your database tables.
Next.js
Next.js é uma estrutura da web de desenvolvimento front-end React de código aberto criada por Vercel que permite funcionalidades como renderização do lado do servidor e geração de sites estáticos para aplicativos da web baseados em React.
Next.js is an open source React front-end development web framework created by Vercel that enables functionality such as server-side rendering and static website generation for React-based web applications.
Prisma
O Prisma é um ORM (Object-Relational Mapping) que ajuda os desenvolvedores a criar aplicações mais rapidamente e cometer menos erros com um kit de ferramentas de banco de dados opensource, como PostgreSQL e MySQL.
Prisma is an ORM (Object-Relational Mapping) that helps developers build applications faster and make fewer mistakes with an opensource database toolkit such as PostgreSQL and MySQL.
Sass
O SASS é uma linguagem de extensão do CSS, a sigla significa “Syntactically Awesome Style Sheets” traduzindo ao pé da letra, folhas de estilo com uma sintaxe incrível. A sua ideia é adicionar recursos especiais como variáveis.
SASS is a CSS extension language, the acronym stands for “Syntactically Awesome Style Sheets” translating literally, style sheets with an amazing syntax. Your idea is to add special features like variables.
Puppeteer
Puppeteer é uma biblioteca JavaScript desenvolvida pelo Google, utilizada para automação de testes e scraping web. Sua capacidade de simular interações humanas em um navegador o torna valioso para desenvolvedores na automação de tarefas de teste e extração de dados de páginas da web de forma eficiente.
Puppeteer is a JavaScript library developed by Google, used for test automation and web scraping. Its ability to simulate human interactions in a browser makes it valuable for developers in automating testing tasks and efficiently extracting data from web pages.
Google Cloud
Google Cloud é uma plataforma de computação em nuvem abrangente, oferecendo uma ampla gama de serviços, desde hospedagem de aplicativos até análise de dados e inteligência artificial. Sua escalabilidade e confiabilidade são altamente valorizadas por empresas de todos os tamanhos em todo o mundo.
Google Cloud is a comprehensive cloud computing platform, offering a wide range of services from application hosting to data analysis and artificial intelligence. Its scalability and reliability are highly valued by businesses of all sizes worldwide.
Firebase
Firebase, da Google, simplifica o desenvolvimento de aplicativos web e móveis, oferecendo serviços como autenticação de usuários, banco de dados em tempo real e hospedagem de arquivos. Sua integração fácil e recursos prontos para uso tornam-no uma escolha popular entre os desenvolvedores.
Firebase, from Google, simplifies the development of web and mobile applications, offering services such as user authentication, real-time database, and file hosting. Its easy integration and ready-to-use features make it a popular choice among developers.
O que eu faço?
What i do?
HABILIDADES
SKILLS
Desenvolvimento Fullstack
Fullstack Development
Conhecimento em linguagens de programação Fullstack como: HTML, CSS, JavaScript, Python, Node.js, React, Express.js, SQL
Knowledge in programming and Fullstack languages like: HTML, CSS, JavaScript, Python, Node.js, React, Express.js, SQL
Design UI/UX
Conhecimentos em práticas de design de websites para uma melhor experiência do usuário, conhecimentos em Adobe Photoshop e Figma
Knowledge in website design practices for a better user experience, knowledge in Adobe Photoshop and Figma
Edição de Vídeo e Motion
Video Editing and Motion
Edição de vídeos profissionais com Adobe Premiere e criação de vídeos com motion animation, utilizando Adobe After Effects
Professional video editing with Adobe Premiere and video creation with motion animation, using Adobe After Effects
Criação Responsiva
Responsive Creation
Experiência com criação e desenvolvimento de projetos responsivos, com foco em usabilidade mobile e interatividade. Experiência na utilização de bibliotecas como Bootstrap e Materialize
Experience with creation and development responsive projects, focusing on mobile usability and interactivity. Experience using libraries such as Bootstrap and Materialize
Implementação de Bot
Bot Implementation
Estruturação, instalação e manutenção de serviços de bot, como Service Workers para WhatsApp ou Telegram como Assistentes Virtuais ou Web Crawlers para extração de dados e envio de sinais
Structuring, installing and maintaining bot services, such as Service Workers for WhatsApp or Telegram as Virtual Assistants or Web Crawlers for extracting data and sending signals
PROJECTS
PROJETOS
Image Gallery Firebase
Galeria de Imagens Firebase
Projeto de criação responsiva de uma galeria de imagens que permite o upload de imagens feita com React, Next, Framer Motion e Firebase como serviço de banco de dados.
Responsive creation project for an image gallery that allows the upload of images made with React, Next, Framer Motion and Firebase as a database service.
Tecnologias:
Techs:
Flower Garden Dashboard
Flower Garden Dashboard
Front-end de um dashboard feito em React e Scss.
Front-end of a dashboard made in React and Scss.
Tecnologias:
Techs:
Realtime Chat with Firebase Firestore
Chat em tempo real com Firebase Firestore
Projeto fullstack com integração a um banco de dados em tempo real. Utilizei Firestore da Google Firebase para desenvolver um chat em tempo real com login do Google.
Fullstack project with real-time database integration. I used Firestore from Google Firebase to develop a chat in real time with Google login.
Tecnologias:
Techs:
User signup and login with API and Sequelize integration SQL database
Cadastro e login de usuário com intergração de API e Sequelize (SQL database)
Projeto de backend completo que montei para os alunos da GamaAcademy no curso de bases de Fullstack com cadastro e login de usuário, com hash de senha, JWT secret, Salt, nodemailer para funcionalidade de esqueci a senha e Middlewares para verificação de JWT autentico.
Complete backend project that I created for GamaAcademy students in the Fullstack basics course with user registration and login, with password hash, JWT secret, Salt, nodemailer functionality for forgot password and Middlewares for verifying authentic JWT.
Tecnologias:
Techs:
A product Landing Page with Framer Motion animations
Landing Page de Produto com animações Framer Motion
Site profissional de landing page para um produto, fui contratado para montar uma landing page personalizada para a venda de um e-book. Nessa landing-page utilizei a minha biblioteca react favorita: Framer Motion
Professional landing page website for a product. I was hired to build a custom landing page for selling an e-book. On this landing page I used my favorite react library: Framer Motion
Tecnologias:
Techs:
Rexpeita Web Scrapping Data Mining
Rexpeita Web Scrapping Data Mining
Projeto que realiza o Data Mining do site da rexpeita, utilizando o Puppeter Browser do Google e consguindo extrair as html TAGS que contém o nome do produto, preço, imagem e url. Utilizei express.js para manter uma API com esses dados que foram lapidados, utilizei o Chat GPT para transformar um código raw em linhas de query para pegar os dados necessários.
Project that carries out the Data Mining of the rexpeita site, using the Google's Puppeter Browser and being able to extract the html TAGS that contains the product name, price, image and url. I used express.js to maintain an API with this data that was polished, I used the Chat GPT to transform raw code into query lines for get the necessary data.
Tecnologias:
Techs:
Pomodoro Timer Rocketseat
Pomodoro Timer Rocketseat
Projeto de Pomodoro Timer que guarda as tarefas feitas em histórico, eu usei context API nesse projeto, além disso, esse projeto tem algumas bibliotecas react como date-fns, phosphor-icons, react-router-dom, react-hook-form e framer-motion.
Pomodoro Timer project that keeps the tasks done in history, i used context API for this project. This project has some react libraries like date-fns, phosphor-icons, react-router-dom, react-hook-form and framer-motion.
Tecnologias:
Techs:
Skyrim Nightingale UI/UX Interface
Skyrim Nightingale UI/UX Interface
Design UI/UX de interface de landing page com tema de jogo digital, realizei esse protótipo interativo com Framer e animações motion
Landing page interface UI/UX design with theme of digital game, I realized this interactive prototype with Framer and motion animations
Tecnologias:
Techs:
