Portfolio

<p>

• This is a React blog app that connects to the GitHub API to search for the repository issues & user data and display them like a blog post.
• It lists my GitHub profile with avatar image, followers, name and other info, and it also lists and filters the issues from the repository with a small text preview.
• It integrates with GitHub Users API, GitHub Search API and GitHub Issues API.
• You can click the post/issue card, and you'll be redirected to a page containing the full issue/post.

</p>

<span>

• ReactJS
• TypeScript
• Styled Components
• React Router Dom
• React Hook Form
• React Markdown
• Zod
• Date FNS
• NodeJS
• HTML5
• CSS in JS
• API Rest

</span>

<ul>

• > GitHub repository
• > Demo

</ul>

<p>

• FoodExplorer is an interactive menu for a restaurant. It's a full-stack web app that I've developed for my final project in a Web Developer bootcamp.
• It has two types of user: an admin, and a standard user. The admin can create, view, edit, and remove dishes. They can also view all the orders created by all users, and change their status. The standard user can view all the dishes created by the admin and create, edit, and finish an order, and favorite any dish.
• The layout was based on a Figma prototype created by a web designer.
• I developed the front-end with React, and the back-end with Node and SQLite.
• I also developed this web app with the mobile-first concept, and it is fully responsive.
• If you want to try the application, you can create your own user. Alternativerly, you can user the credentials which I used for testing. Please check the GitHub repository link below for more details.

</p>

<span>

• ReactJS
• Styled Components
• React Router Dom
• NodeJS
• Express
• HTML5
• CSS in JS
• API Rest
• SQLite

</span>

<ul>

• > GitHub repository
• > Demo

</ul>

<p>

• Conexão Britânica is a WordPress blog about English learning for Portuguese speakers.
• In this blog, I created the layout using Figma, and then converted it to a WordPress + Elementor Pro website.
• The brand concept was designed by a graphic designer, so my purpose for this layout was to use the brand colors and concept on a simple, clean layout.
• The blog is fully responsive for mobile, desktop, and tablet.

</p>

<span>

• Blog
• WordPress
• Elementor
• CSS
• Figma
• SEO

</span>

<ul>

• > Live blog

</ul>

<p>

• This portfolio was designed by me on Figma and developed with React.
• My idea for the design was to create a "coding" theme, with elements that resemble coding tags and styles that we use in front-end development.
• You can view the full code for this portfolio web app in the GitHub link below.

</p>

<span>

• ReactJS
• Styled Components
• React Router DOM
• API Rest
• Axios
• WordPress API
• CSS in JS
• Figma
• JSON

</span>

<ul>

• > GitHub repository

</ul>

<p>

• RocketMovies is a React web app where you can create an account and register information about movies you've watched, and search through your movie database.
• The layout design was created by Rocketseat, and the app is currently only in Portuguese.
• If you'd like to try the demo, you can use the credentials I used for testing. They will allow you to navigate through all pages of the app, and see movies already registered in the database. Feel free to register your own user as well. Please check the GitHub repository link below for more details.

</p>

<span>

• ReactJS
• Styled Components
• React Router DOM
• NodeJS
• Express
• HTML5
• CSS in JS
• Figma
• JSON
• API Restful
• SQL

</span>

<ul>

• > Frontend GitHub
• > Backend GitHub
• > Demo

</ul>

<p>

• This is a landing page for an online travel English language course, with the purpose of providing all the information about the course and CTA to the checkout page.
• Since the previous version was created with WordPress + Elementor Pro, and also for quick delivery and amount of page content, I decided to keep using that combo.
• I created the layout using Figma, with the intention of using the brand colours and having a big hero section.
• The layout is fully responsive with mobile, tablet and desktop versions.

</p>

<span>

• Landing Page
• WordPress
• Elementor
• CSS
• Figma
• Photoshop

</span>

<ul>

• > Live page

</ul>

<p>

• This was my first full project with HTML, CSS and JavaScript all together.
• It's a web app timer for studying or meditating with background music options, volume control, and dark & light modes.
• The web app also features buttons with play and pause functions, buttons to add and remove 5 minutes from the timer, and a volume slider.
• The layout was based on a Figma design provided by Rocketseat. The layout is fully responsive.

</p>

<span>

• HTML
• CSS
• JavaScript (vanilla)
• ES6 Modules

</span>

<ul>

• > GitHub repository
• > Demo

</ul>

<p>

• This is a landing page for online private English lessons, with the purpose of inviting people to sign-up for a waiting list. The page provides a full description of the lessons and the teacher and has a sign-up form where people can register to join the waiting list.
• The layout was created using the combo WordPress + Elementor Pro.
• The layout is fully responsive with mobile, tablet and desktop versions.

</p>

<span>

• Landing Page
• WordPress
• Elementor
• CSS
• Photoshop

</span>

<ul>

• > Live page

</ul>