Portfolio

The Dogs project was elaborated within the React course at Origamid.

CSS, JavaScript and React were used to code and create the application.

In this application (that uses mainly React), it is possible to add users (using an API developed in another course), reset the password, post photos, delete photos, comment on photos throughout the platform and check user stats.

The API that is being used is hosted by Origamid. So, the data is reset after a while. In this sense, if you are testing the application and you get logged off or your photos disappear, that is the reason.

The pages are responsive.

The Bikcraft project was elaborated within the Basic HTML/CSS and Basic UI courses at Origamid.

HTML, CSS, JavaScript, Figma and UI design concepts were used to draw the pages and code them.

The pages are responsive.

The Animais Fantasticos project was elaborated within the Complete JavaScript ES6 course at Origamid.

HTML, CSS and JavaScript were used to draw the pages and code them.

JavaScript was used to adjust the softer scroll that led to sections, to make the text appear according to the chosen image, to make the accordion for the FAQ section, to make the sections appear with the user's scroll movement through the page and the drop-down menu. Besides, the photo slide was created separately and added to the project, FETCH was used to access the number of animals and the value of bitcoin, there is a calculus being performed in the opening hours to check if the company is open or not, a tooltip was added in the map to show additional information and there is a modal with a login window. The majority of the project was refactored and transformed into classes so the modules could be used in other projects.

The page is responsive.

The Surfbot project was elaborated within the Advanced UI Design course at Origamid.

Figma, HTML and CSS were used in it to design and code the page.

The page is responsive.

The Flexblog project was elaborated within the CSS: Flexbox course at Origamid.

HTML and CSS (CSS display: Flex) were used to code the page.

The page is responsive.

The Wildbeast project was elaborated within the CSS: Grid Layout course at Origamid.

HTML and CSS (CSS display: Grid) were used to code the page.

The page is responsive.

The Elements with JavaScript project was elaborated within the JavaScript Course at Origamid.

HTML and CSS were used, but the main goal was to use JavaScript in order to create different elements.

Here is a list of the elements: 1 - a button generator in which it is possible to copy the CSS code generated from the choices made; 2 - a timer that starts, pauses, resets and stops; 3 - a die that generates random values when clicked; 4 - an element that uses FETCH to get information about the price of bitcoins in Reais (R$); 5 - an element that uses FETCH to get information on a provided CEP (address code); 6 - an element that uses FETCH to get Chuck Norris' jokes.

The page is responsive.

The expensesApp component was elaborated within a React course at Udemy.

React, JavaScript and CSS were used to code and style the page.

It is a simple component that receives information on expenses and shows them in another area. It also contains a filter to select the expenses per year and graphs are used to compare the amount spent within a month.

The loginAPP component was elaborated within a React course at Udemy.

React, JavaScript and CSS were used to code and style the page.

It is a simple component that receives an email and a password. It checks the email internally and if the password contains 7 characters to see if they are valid inputs. If the user uses a valid login and reloads, the page keeps the login active. You need to logout so you can login again.

The goalApp component was elaborated within a React course at Udemy.

React, JavaScript and CSS were used to code and style the page.

It is a simple component that receives goals and shows them in another field. When we click on a goal, it is deleted.

The usersApp component was elaborated within a React course at Udemy.

React, JavaScript and CSS were used to code and style the page.

It is a simple component that receives a user and their age and shows the information in another field. If a negative age is provided or nothing is added to the input, error messages will pop-up.

The produtosApp component is a simple exercise created during the React course from Origamid.

React, JavaScript and CSS were used to code and style the page.

It is a simple component. It uses react-router-dom to use routes in the pages and it uses fetch to gather information on products from an API from a course at Origamid. It uses this information to show on the screen photos and details for each product available in the API.

The testApp (questionarioApp) component is a simple exercise created during the React course from Origamid.

React, JavaScript and CSS were used to code and style the page.

It is a simple component. It contains 4 questions, it receives the user's input, updates it all reactively, counts the amount of correct responses (it considers blank answers as wrong answers) and provides the final result for the user.

The formApp (formularioApp) component is a simple exercise created during the React course from Origamid.

React, JavaScript and CSS were used to code and style the page.

It is a simple component that uses FORM and different INPUTS. It is possible to select elements from an imaginary product and we can view the selected elements before submitting the form.

The Pokedex project simulates the real device: the site loads with the Pokédex closed and, once clicked, it flips open revealing the list with all 1025 Pokémon on one side and the selected Pokémon's information on the other (on phone screens, the two halves stack vertically).

All the data comes from PokéAPI: description, stats, moves with learn levels, a clickable evolution chain, regional forms (like Alolan Vulpix), type weaknesses and resistances, shiny artwork and even each Pokémon's cry. You can search by name or number, filter by generation, and deep links work too (for instance, #25 opens straight on Pikachu).

A second device, inspired by the RotomDex, hosts the minigames: guess the Pokémon by its silhouette or its cry, build your team of six, compare two Pokémon's stats, and try to name every Pokémon of a generation against the clock.

HTML, CSS and JavaScript (ES modules, no frameworks) were used in this project. The idea and the original implementation are mine; the recent improvements (the PokéAPI integration, the devices and the minigames) were made with AI assistance.

The page is responsive.

The RPG: As Aventuras dos Trapalhões - A ilha dos Dinossauros project is a text adventure based on a 1993 Os Trapalhões magazine.

It was possible to go through the story, face challenges, attack enemies, suffer penalties, be defeated, be victorious and restart the game as many times as necessary in order to get to the end of the adventure!

The goal was to make an updated virtual version (it is still not a final version, I still want to implement more elements) so my little brother could play it (he didn't do it much though... as there is much reading involved...).

So, I edited some things in the story and changed some terms used to make it easier to follow the story and to make him more interested in it.

HTML, CSS and JavaScript were used to draw and code the pages. The code is super simple because the main focus was on the story. So, it is basically just a copy and paste of pictures and organizing them. However, it was a lot of work to place them in the correct order.

The pages are responsive.

Cachos da Clara is the conversation and appointment system for the hair salon of the same name, in San Martin, Recife/PE. The goal was to move scheduling out of WhatsApp without making anyone learn a new tool.

On the customer side there is no sign-up: she opens the site, types her name and phone number, and the conversation starts. A secure link sent by e-mail restores that same conversation on any device later.

On the salon side, at /salao, the owner gets Conversations, Agenda and Clients in one place, plus settings for services, opening hours, CSV export and password.

React, TypeScript, Vite and Cloudflare (Workers and D1) were used in this project. The whole application runs on a single Worker serving both the UI and the API, backed by SQLite on D1, with confirmation e-mails and push notifications. There is no other infrastructure.

The interface was designed mobile-first, which is how the customers actually use it, and it is responsive.

Hotaru is a storefront mockup for a collectibles shop in Recife, Brazil: sealed product (boosters, blisters and boxes), singles, protection accessories (binders, sleeves, toploaders and playmats), K-Pop photocards and keychains.

The project started from an existing brand guide — navy, metallic gold, lime green and ivory, with a firefly inside a trading card — and the point was to see how that identity would behave across a real store, with 17 pages: home, a filtered catalogue, twelve product pages, cart, about and help.

HTML, CSS and JavaScript were used, with no framework and no dependencies. The gold card frames, the diamond background pattern and the product icons are all hand-drawn CSS and SVG; a small Python script assembles the pages from a single catalogue, so a price or a product changes in one place.

It is a visual prototype: no real cart, search, login or payment, and the products and prices are fictional.

The pages are responsive, designed mobile-first.

In my portfolio at Behance (Adobe) it is possible to check some of my works with digital art/illustration/sound design/animation/photography that I have created throughout the years.