All Courses

Build Your Portfolio Using ReactJs Firebase | GSAP Animation

Build Your Portfolio Using ReactJs Firebase | GSAP Animation

Custom GSAP animation effects make this a personal portfolio.

What you’ll learn

Build Your Portfolio Using ReactJs Firebase | GSAP Animation

  • How to make a modern UI with React Js.
  • Use Firebase Cloud Storage and Firebase real-time cloud database to learn how to use these tools in your projects.
  • Find out how to put GSAP animations on your website by reading this text.
  • A modern UI can be built and then put on firebase for free, so learn how to do that.


  • Need to know some programming about the basics.


I will show you how easy it is to make a full-stack, PORTFOLIO with React, Firebase, and Material-UI.

The module is part of the course.

1. Project Overview – Setup & Configurations

The second thing to do is to style your home component.

3. Styling Services, Who We Are, and Clients – Parts

4. Styling Projects, Contact, and Footer – Parts

5. Using GSAP and scrolling to show off the parts.

Keeping data in Firebase Realtime Cloud Database is number six.

7. Putting the project in the Cloud.

Definition: Firebase is a service that allows you to store and

Firebase is a tool made by Google that lets people make apps for both mobile and web devices. It was started in 2011 as a separate business. In 2014, Google bought the platform, and it is now their main tool for making apps.

What is React, and how does it work?

This front-end JavaScript library is free and open source. It lets you build user interfaces with UI components.

People ask: What is GSAP?

Web animation that looks good on the modern web thanks to professional-quality JavaScript

A lot of speed.

Performance is very important, especially on mobile devices with slow processors. Like a good library, GSAP outperforms old “industry standards” by more than 1000 percent and more when it’s under a lot of strain! What was jerky and twitchy before is now smooth. It’s the result of a lot of work to make sure your interactive projects are quick, efficient, and buttery smooth. You can see how fast each person is by taking the speed test.

This word is used to describe what the scroll reveal is.

A JavaScript library called “ScrollReveal” makes it easy to make animations when things move into and out of the viewport.

Who this course is for:

  • Students who want to start a career as a UI developer should look into this course first.

If the links does not work, contact us we will fix them