Build Your Portfolio Using ReactJs Firebase | GSAP Animation

Personal Portfolio with Custom GSAP Animation effects

I will show you how simple it is to create a full stack, PORTFOLIO using React, Firebase & Material-UI… ?

What you’ll learn

  • How to create modern UI using React Js.
  • learn how to use Firebase Cloud Storage and Firebase realtime cloud database.
  • Learn how to GSAP Animations in your websites.
  • Learn how build a modern UI and deploy it into firebase freely.

Course Content

  • Introduction –> 3 lectures • 59min.
  • Home Section Component Wireframing –> 4 lectures • 1hr 8min.
  • Services, Work & About Section Component Wireframing –> 5 lectures • 53min.
  • Porjects & Contact Section Wireframing –> 2 lectures • 35min.
  • Gsap & Scroll Reveal Animation Implementation –> 1 lecture • 16min.
  • Firebase Cloud Integration –> 2 lectures • 32min.

Auto Draft


  • Need some programming knowledge about core fundamentals.

I will show you how simple it is to create a full stack, PORTFOLIO using React, Firebase & Material-UI… ?

Course Module:

1. Project Overview – Setup & Configurations

2. Styling Home Component

3. Styling Services, About, Clients – Components

4. Styling Projects, Contact, Footer – Components

5. Animating the components using GSAP & Scrollreveal

6. Storing data in Firebase Realtime Cloud Database

7. Deploying Project in Cloud


What is Firebase ?

Firebase is a platform developed by Google for creating mobile and web applications. It was originally an independent company founded in 2011. In 2014, Google acquired the platform and it is now their flagship offering for app development.


What is React?

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.


What is GSAP ?

Professional-grade JavaScript animation for the modern web.

Crazy fast

Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any library worth its weight and GSAP outperforms old “industry standards” by literally 1000%+ under stress. What was jerky and twitchy is now fluid. It’s the result of countless optimizations made to ensure that your interactive projects are responsive, efficient, and buttery smooth. Check out the speed test for a head-to-head comparison.


What is Scroll Reveal ?

ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up



Get Tutorial