Portfólio

O projeto Dogs foi elaborado dentro do curso de React da Origamid.

Nele foram utilizados CSS, JavaScript e React para codificar a aplicação.

Na aplicação (que utiliza basicamente React) é possível adicionar usuários (utilizando uma API desenvolvida em outro curso), resetar senha, postar fotos, deletar fotos, comentar em fotos da rede social e checar estatísticas do usuário.

A API que está sendo utilizada é hosteada pelo curso Origamid, dessa forma, os dados são deletados periodicamente. Portanto, se você estiver testando o site e for deslogado ou se suas fotos desaparecerem, esse é o motivo.

As páginas são responsivas.

O projeto Bikcraft foi elaborado dentro dos cursos de HTML/CSS Básico e UI básico da Origamid.

Nele foram utilizados HTML, CSS, JavaScript, Figma e conceitos de UI design para desenhar as páginas e para codificá-las.

As páginas são responsivas.

O projeto Animais Fantasticos foi elaborado dentro do curso de JavaScript Completo ES6 da Origamid.

Nele foram utilizados HTML, CSS e JavaScript para desenhar a página e para codificá-la.

O JavaScript foi utilizado para ajustar o scroll mais suave para as seções, fazer aparecer texto de acordo com a imagem clicada, fazer o accordion para a seção de FAQ, fazer com que as seções apareçam suavemente conforme o scroll do usuário pela página e o menu drop-down. Além disso, o slide de fotos foi criado de forma separada e adicionado ao projeto, FETCH foi utilizado para acessar aos números dos animais e o valor da bitcoin, há um cálculo feito no horário de funcionamento da loja e o horário local da máquina para verificar se a loja está aberta ou não, uma tooltip para inserir informação extra sobre o mapa e um modal para login. Grande parte do projeto foi refatorado e transformado em classes para que os módulos possam ser utilizados em outros projetos.

A página é responsiva.

O projeto Surfbot foi elaborado dentro do curso de UI Design avançado da Origamid.

Nele foram utilizados Figma, HTML e CSS para desenhar e codificar a página.

A página é responsiva.

O projeto Flexblog foi elaborado dentro do curso de CSS: Flexbox da Origamid.

Nele foram utilizados HTML e CSS (com foco no display Flex) para codificar a página.

A página é responsiva.

O projeto Wildbeast foi elaborado dentro do curso de CSS: Grid Layout da Origamid.

Nele foram utilizados HTML e CSS (com foco no display Grid) para codificar a página.

A página é responsiva.

O projeto Elementos com JavaScript foi elaborado dentro do curso de JavaScript da Origamid.

Nele foram utilizados HTML e CSS, mas o foco foi utilizar o JavaScript para criar diferentes elementos.

Os elementos criados são: 1 - Um criador de botões onde é possível copiar o código CSS gerado a partir do que foi criado; 2 - Um cronômetro que inicia, pausa e pode ser resetado; 3 - Um dado que gera valores aleatórios quando clicado; 4 - Um elemento que utiliza FETCH para buscar informações sobre o preço do BITCOIN em reais; 5 - Um elemento que utiliza FETCH para buscar um CEP informado e retorna dados sobre o CEP; 6 - Um elemento que utiliza FETCH para buscar piadas sobre o Chuck Norris que retorna uma piada diferente quando clicado o botão de Next Joke.

A página é responsiva.

O componente expensesApp foi elaborado dentro do curso de React da Udemy.

Nele foram utilizados React, JavaScript e CSS para codificar e estilizar a página.

É um componente simples que recebe informações sobre despesas e as mostra em uma área. Ele também contém um filtro para selecionar despesas por ano e gráficos para comparar o total de gastos por mês.

O componente loginAPP foi elaborado dentro do curso de React da Udemy.

Nele foram utilizados React, JavaScript e CSS para codificar e estilizar a página.

É um componente simples que recebe um usuário e uma senha. Ele faz uma checagem simples interna apenas para verificar se há um e-mail válido e uma senha de 7 caracteres. Caso o usuário use um login válido e atualize a página, a página continua com o login ativo. É preciso deslogar para que se possa logar novamente.

O componente goalApp foi elaborado dentro do curso de React da Udemy.

Nele foram utilizados React, JavaScript e CSS para codificar e estilizar a página.

É um componente simples que recebe objetivos e os mostra abaixo em um outro campo. Ao clicarmos em um objetivo, ele é excluído.

O componente usersApp foi elaborado dentro do curso de React da Udemy.

Nele foram utilizados React, JavaScript e CSS para codificar e estilizar a página.

É um componente simples que recebe um usuário e sua idade e os mostra em uma área abaixo do campo. Caso nada seja colocado nos campos ou uma idade negativa seja colocada no campo, uma mensagem de erro aparece em formato pop-up.

O componente produtosApp foi elaborado dentro do curso de React da Origamid.

Nele foram utilizados React, JavaScript e CSS para codificar e estilizar a página.

É um componente simples que usa react-router-dom para estabelecer rotas dentro da aplicação. Também usa FETCH para buscar informação sobre produtos em uma API de um curso da Origamid. Ele usa a informação encontrada para mostrar na tela fotos e detalhes de cada produto disponível na API.

O componente testApp (questionarioApp) é um exercício simples elaborado dentro do curso de React da Origamid.

Nele foram utilizados React, JavaScript e CSS para codificar e estilizar a página.

É um componente simples que possui 4 perguntas, recebe as respostas do usuário, atualiza tudo reativamente, conta a quantidade de acertos (ele considera respostas em branco como erradas) e retorna o resultado ao final.

O componente formApp (formularioApp) é um exercício simples elaborado dentro do curso de React da Origamid.

Nele foram utilizados React, JavaScript e CSS para codificar e estilizar a página.

É um componente simples que trabalha com FORM e diferentes tipos de INPUT. É possível selecionar elementos de um suposto produto e podemos visualizar as informações selecionadas antes de enviar o formulário.

O projeto Pokedex simula o aparelho "de verdade": o site carrega com a Pokédex fechada e, ao clicar, ela se abre revelando a lista com todos os 1025 Pokémons de um lado e as informações do Pokémon selecionado do outro (em telas de celular, as duas metades se empilham na vertical).

Todos os dados vêm da PokéAPI: descrição, status, golpes com nível, cadeia de evolução clicável, formas regionais (como o Vulpix de Alola), fraquezas e resistências de tipo, arte shiny e até o grito de cada Pokémon. Há busca por nome ou número, filtro por gerações e links diretos (por exemplo, #25 abre direto no Pikachu).

Um segundo aparelho, inspirado na RotomDex, reúne os minijogos: adivinhe o Pokémon pela silhueta ou pelo grito, monte sua equipe de seis, compare os status de dois Pokémon e tente nomear todos os Pokémon de uma geração contra o relógio.

Nesse projeto foram utilizados HTML, CSS e JavaScript (módulos ES, sem frameworks). A ideia e a implementação original são minhas; as melhorias recentes (integração com a PokéAPI, os aparelhos e os minijogos) foram feitas com assistência de IA.

A página é responsiva.

O projeto RPG: As Aventuras dos Trapalhões - A ilha dos Dinossauros é uma releitura de uma revistinha de 1993 dos Trapalhões que continha uma historinha RPG do tipo aventura de texto.

Nela, era possível passar pela história e enfrentar desafios, atacar inimigos, sofrer penalidades, ser derrotado, ser vitorioso e recomeçar o jogo quantas vezes fossem necessárias para chegar até o final da aventura!

O objetivo era fazer uma versão virtual (não é a versão final ainda, ainda quero implementar mais coisas) para que o meu irmãozinho pudesse jogar.

Assim, eu editei algumas coisas na história e troquei alguns termos para que ficasse mais fácil para ele entender e para que ele se interessasse pela história.

Nesse projeto foram utilizados HTML, CSS e JavaScript para desenhar as páginas e para codificá-las. O código é super simples, pois o foco era na história e recortar e colar as figuras e montar todas as ramificações da história foi trabalhoso.

As páginas são responsivas.

O Cachos da Clara é o sistema de conversas e agendamento do salão de mesmo nome, em San Martin, Recife/PE. A ideia era tirar a agenda de dentro do WhatsApp sem obrigar ninguém a aprender uma ferramenta nova.

Do lado da cliente não existe cadastro: ela abre o site, digita nome e telefone e já está conversando. Um link seguro enviado por e-mail devolve a mesma conversa em qualquer aparelho depois.

Do lado do salão, em /salao, a cabeleireira tem Conversas, Agenda e Clientes na mesma tela, mais os ajustes de serviços, horários de funcionamento, exportação em CSV e troca de senha.

Nesse projeto foram utilizados React, TypeScript, Vite e Cloudflare (Workers e D1). A aplicação inteira roda em um único Worker que serve a interface e a API, com banco SQLite no D1, e-mails de confirmação e notificações push. Não há outra infraestrutura envolvida.

A interface foi desenhada primeiro para o celular, que é onde as clientes de fato usam, e é responsiva.

A Hotaru é uma maquete de loja virtual para um comércio de colecionáveis no Recife: selados (boosters, blisters e boxes), singles, acessórios de proteção (binders, sleeves, toploaders e playmats), photocards de K-Pop e chaveiros.

O projeto partiu de um guia de identidade visual pronto — azul-marinho, ouro metálico, verde-limão e marfim, com o vaga-lume dentro de uma carta — e a proposta era ver como aquela marca se comportaria numa loja de verdade, com 17 páginas: home, catálogo com filtros, doze páginas de produto, carrinho, sobre e ajuda.

Nesse projeto foram utilizados HTML, CSS e JavaScript, sem framework e sem dependências. As molduras douradas das cartas, o padrão de losangos do fundo e os ícones de produto são todos CSS e SVG desenhados à mão; um script em Python monta as páginas a partir de um catálogo único, então preço e produto mudam num lugar só.

É um protótipo visual: nada de carrinho real, busca, login ou pagamento, e os produtos e preços são fictícios.

As páginas são responsivas, pensadas primeiro para o celular.

No meu portfólio disponível no site da Behance (Adobe) é possível visualizar alguns trabalhos com arte digital/ilustração/sound design/animação/fotografia que eu elaborei durante esses anos.