Portfólio
hamburger menu hamburger menu close

Olá, meu nome é Lucas Cavalcanti :)

Desenvolvedor Front-End

Download CV Contato

Sobre mim Sou desenvolvedor web em formação, com foco em Front-End, mais especificamente, aplicações em React.js. Possuo conhecimentos sólidos em: HTML5, CSS, JavaScript, React.js, TypeScript, Context API, Redux, Styled Components, Tailwind CSS, Bootstrap e Git. Sempre buscando expandir meus conhecimentos e aprimorando meu domínio sobre as tecnologias.

Minhas Habilidades

HTML
CSS
JavaScript
React
Bootstrap
GIT
TypeScript
Redux
Context API
Styled Components
Tailwind CSS
Firebase

Projetos Alguns dos projetos desenvolvidos por mim

E-commerce Marvel

Projeto feito utilizando React e estilizado com Styled Components. Neste projeto foi criada uma loja online 100% responsiva que pega informações dos produtos a partir de requisição fetch feita à API da Marvel. O processo de requisição foi feito com auxílio da biblioteca Axios. Após o usuário clicar no produto, abre-se um modal com mais informações sobre o mesmo e têm-se a opção de fechar o Modal ou de adicionar o produto no carrinho. Fez-se uso do React Router para criar as diferentes páginas (Home e carrinho). Além disso, usou-se o Redux Toolkit para fazer o gerenciamente de estado global entre as diferentes páginas. Dentro do carrinho, há a opção de excluir aquele produto, tudo isso feito com auxílio dos hooks do React e das actions do Redux.

Ver repositório

Clone Netflix

Projeto criado com React, 100% responsivo. Neste projeto, criou-se um clone da página inicial da Netflix, com os dados necessários enviados pela API Themoviedb.org. As informações do Json foram manipuladas para que fossem mostradas na aplicação de forma intuitiva. Além do componente com a lista dos filmes (separados por gênero) e com função de passar para o lado, criou-se o componente referente ao filme em destaque, que é pego aleatoriamente sempre que se atualliza a página. No filme em destaque, usou-se uma funçõa para limitar o tamanho da descrição, de forma que não prejudique o design caso a mesma seja muito extensa. Usou-se os atributos do CSS e do React para estilizar a página de forma funcional (como, por exemplo, o background do cabeçalho que aparece apenas quando se movimenta a barra de rolagem).

Ver repositório

Formulário Multi-etapas

Projeto feito utilizando React e estilizado com Styled Components. Formulário com várias etapas a partir do uso de React Router para que se possibilite a navegação entre as diferentes páginas. Neste projeto, foi utilizado o ContextAPI para que seja possível compartilhar as informações entre todas as telas do sistema (salvando as informações do usuário diretamente no contexto como um todo). Por fim, foi feito todo um processo de verificação interno para que só se passe para a próxima etapa do formulário após ser feita uma validação, certificando-se que o usuário preencheu os dados da etapa atual.

Ver repositório

Sistema de Finanças Pessoais

Projeito feito utilizando React e estilizado com Styled Components. Sistema que recebe receitas e despesas do usuário em determinado mês e calcula o balanço geral. Permite que o cliente indique uma nova receita/despesa, bem como a sua respectiva data, atualizando a tabela de gastos automaticamente (tendo este formulário uma validação). O projeto se baseou basicamente na extruturação dos dados enviados para o sistema, tanto da categoria (alimentação, aluguel ou salário), como das informações dos itens da tabela (data, categoria, título e valor). Dessa forma, o sistema pode ser expandido simplesmente através da modificação desses types (podendo ser acrescentadas, por exemplo, novas categorias de gastos).

Ver repositório

Pizza Shop

E-commerce 100% responsivo utilizando apenas JavaScript. Nesse projeto, além da parte visual do sistema, destaca-se o funcionamento do mesmo que monta o catálogo das pizzas automaticamente a partir de informações enviadas (podendo ser substituído o JSON utilizado por uma API com informações externas). Após o usuário selecionar o sabor da pizza, abre-se um modal para que ele determine o tamanho e a quantidade da mesma. Abrindo assim, o carrinho com as pizzas selecionadas e o cálculo do subtotal, desconto e valor total. Podendo o usuário aumentar ou diminuir a quantidade de pizzas diretamente no carrinho, fechando-o automaticamente quando fica com zero pizzas selecionadas. Todas essas funcionalidades feitas com funções do JavaScript.

Ver repositório

Verificador de Clima

Projeto simples de uma única funcionalidade, feito apenas com JavaScript. O intuito aqui é mostrar a integração que foi feita com uma API que envia externamente informações a respeito das condições climáticas das cidades que o usuário digitar. Através do seu design minimalista, ele aponta, além da temperatura, o tempo que está fazendo naquela localizaçaõ geográfica, bem como, a velocidade e a direção do vento. Tudo isso de forma intuitiva e visual, de modo que o usuário consiga entender o que está acontecendo com facilidade.

Ver repositório

Galeria de Fotos com API

Projeto feito utilizando React. Nesta galeria de fotos, os álbuns e as fotos de cada um foram enviados externamente por uma fake API (JSONPlaceholder), sendo necessário que sejam feitas requisições, demonstrando assim, o uso de blibliotecas como o Axios. Como este projeto constava com diferentes páginas, foi necessário o uso de React Router para que o usuário pudesse navegar entre os diferentes álbuns de fotos da galeria.

Ver repositório

Lista de Tarefas

Projeito feito utilizando React e estilizado com Styled Components. Neste sistema, permite-se que o usuário crie uma lista de tarefas após digitá-la em um capa específico, podendo marcar as tarefas que já forem concluídas de modo que fique intuitivo. Além disso, destaca-se neste projeto a implementação do controle de temas, criado com o Theme Provider, podendo o usuário escolher entre o tema dark e o tema light.

Ver repositório

Jogo da Memória

Projeito feito utilizando React. Jogo da memória completamente funcional, com timer e contador de movimentos que param toda vez que o usuário vence o jogo e que zeram toda vez que for pressionado o botão de reiniciar. Todas as funcionalidades do projeto foram feitas a partir dos atributos do React como o State e o Effect, bem como da lógica de programação do JavaScript e do TypeScript.

Ver repositório

Quadro de Desenho

Projeito feito utilizando JavaScript atarvés da tag canvas (colocada no arquivo html). Além de selecionar essa tag no js, selecionou-se o contexto 2D da mesma. A lógica para fazer o desenho funcionar consistiu no monitoramento (através das funções do JavaScript) do: movimento do mouse, evento de pressionar o mouse e evento de soltar o mouse.

Ver repositório