Return

Projects

Dashboard for register

Dashboard for register

Weather project cover image

This is my first Full-stack Web Application, developed using HTML, CSS, Bootstrap, Javascript, Node.js and SQLITE. The project consists of a Dashboard Panel for registering individuals and companies. Users can perfom actions such as Creating, Reading, Updating and Deleting people or companies. On the front-end, I designed the interface on Figma. After that, I developed the website using HTML, CSS and Bootstrap for the grid system. JavaScript was used to manipulate the elements and to send and fetch data from the API. On the back-end, the API was developed using Node.js and the database used was SQLite.

Repository: 🔗

URL: 🔗

Close

WEATHER Project

WEATHER Project

Weather project cover image

This is a full-stack project developed with my friend Alexandre. The project is a weather website that returns the temperature information of a city, using an API developed by us. I was responsible for the front-end, developing the interface on Figma and the website using HTML, CSS, and JavaScript. Alexandre developed the API using Express.js and Node.js and the database using SQLite. After the user enters a city, the Front-end will request the city info from the API, which will return a JSON containing the information of the city, including the date and time, temperature, wind speed, and climate. The information about the city is stored in the database and the Back-end is responsible for returning the JSON to the API which will return to the Front-end.

Repository: 🔗

URL: 🔗

Close

Advice generator

Advice generator

Weather project cover image

This project is a solution for the FrontendMentor's challenge of an Advice Generator App. The project was developed using HTML5, CSS3 and Javascript. Users can change the advice by pressing in the dice. The Advice API is providing the advices for this website. Throughtout the development of this project, I focused on developing a clean and reusable code, emphasizing on Search Engine Optimization, Accessibility and Good practices for websites. According to Lighthouse, an automated tool for measuring the quality of web pages, my website achieved 95% of performance, 100% for accessibility, 100% for best practices and 92% for SEO.

Repository: 🔗

URL: 🔗

Close

BAH Socorro landing page

BAH Socorro landing page

Bah Socorro cover image

This is a landing page developed for my Final Course Project, named BAH Socorro (Botão de Ajuda Humanitária/ Humanitarian Assistance Button). The project consists in an emergency button app, developed for women and LGTBQIA+ communities victims of violence, harassment or any threat situation. The landing page was developed using HTML, CSS and Javascript. The landing page contains an overview about the project, including images of the interface developed on Figma, an "About us" section, an interactive section with some explanation about future functionalities of the app with images and buttons, a FAQ section, and a footer.

Repository: 🔗

URL: 🔗

Close

Record of Ragnarok

Record of Ragnarok

Record of Ragnarok cover image

This is a characters selection menu developed using HTML, CSS and Javascript. The characters are from the anime called 'Record of Ragnarok'. In this project, my main focus was applying my knowledge in Javascript and DOM manipulation. Each time the user hovers the mouse over the small picture of a character, the large image, name and description will change dynamically according to the character in question. I also used Flexbox in CSS and semantic HTML5, resulting in a website responsive for both devices and easy to maintain and understand.

Repository: 🔗

URL: 🔗

Close

Notifications page

Notifications page

Record of Ragnarok cover image

This project is a solution for the challenge from Frontend Mentor. Frontend Mentor is a platform which provides challenges of Frontend. The challenge was to develop a notifications page of Junior's level. This page contains a notifications counter and an option to 'mark all as read' on the top. The page contains 3 unread notifications with a different color. If the user click on the notification, the notification must be marked as read, the color has to change to the dafault color of read notifications and the notifications counter must be reduced in 1. If the user press the option 'Mark all as read', all the notifications must be marked as read, the color has to change to the default color and the counter must be reduced to 0. I have built this project using semantic HTML5, CSS3 and Javascript. The project is responsive for all devices and screens size.

Repository: 🔗

URL: 🔗

Close