Last Updated in: August 3rd, 2022

Portifolio

dogs

  • HTML
  • CSS
  • JavaScript
  • Figma

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 possibe to add users (using an API developed in another course), reset the password, post photos, delete photos, comment in photos throughout the plataform and check user stats.

The API that is being used is hosted by Origamid. So, the data is resete 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.

There are still improvement points that will be addressed in the future.

The pages are responsive.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot dogs home Screenshot dogs adding photos

Bikcraft

  • HTML
  • CSS
  • JavaScript
  • Figma

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot Bikcraft

Animais
Fantasticos

  • HTML
  • CSS
  • JavaScript

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot Animais Fantásticos

Surfbot

  • HTML
  • CSS
  • Figma

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

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

The page is responsive.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot surfbot

Flexblog

  • HTML
  • CSS

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot Flexblog

Wildbeast

  • HTML
  • CSS

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot Wildbeast

Elements
with JS

  • JavaScript
  • HTML
  • CSS

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot Apps com JS

expensesApp

  • JavaScript
  • React
  • CSS

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot expenses app

loginAPP

  • JavaScript
  • React
  • CSS

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot login app Screenshot login app tela de boas-vindas

goalApp

  • JavaScript
  • React
  • CSS

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot goal app

usersApp

  • JavaScript
  • React
  • CSS

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 its 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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot users app

produtosApp

  • JavaScript
  • React
  • CSS

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 avaliable in the API.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot users app Screenshot users app

testApp

  • JavaScript
  • React
  • CSS

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot users app

formApp

  • JavaScript
  • React
  • CSS

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 differente INPUTS. It is possible to select elements from an imaginary product and we can view the selected elements before submitting the form.

SOURCE CODE AT GITHUB LINK FOR THE PAGE
Screenshot formulario app

Pokedex

  • HTML
  • CSS
  • JavaScript

The Pokedex project is a simple version where we can get information (such as pokedex number, type, photo, status and moves) on a given Pokémon when we click in its thumbnail.

HTML, CSS and JavaScript were used to design and code the page.

The page is responsive.

SOURCE CODE AT GITHUB LINK FOR THE PAGE

RPG:
Os Trapalhões

  • HTML
  • CSS
  • JavaScript

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.

SOURCE CODE AT GITHUB LINK FOR THE PAGE

My portifolio at Behance

In my portifolio 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.

LINK FOR THE PAGE
Screenshot Behance