Build Your Portfolio Using ReactJs Firebase | GSAP Animation

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… ?

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 & Scroll reveal
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.

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

Who is this course for?

  • Students who are willing to start their carrier as UI developer


  • Need some programming knowledge about core fundamentals
Course content
1. Introduction
1. Project Setup _ Configurations
2. Customizing Header section
3. Toggle Action _ Responsive Header – Using React Hooks
2. Home Section Component Wireframing
1. User Data Implementations
2. User Data Section – Customization
3. User Image Section Implementation _ Customization
4. Responsive Home Section
3. Services, Work _ About Section Component Wireframing
1. Service Data Implementation
2. Service Boxes Component Implementation
3. Responsive Services Section
4. Responsive Work Section
5. Responsive About Section
4. Porjects _ Contact Section Wireframing
1. Responsive Project Component
2. Responsive Contact Component
5. Gsap _ Scroll Reveal Animation Implementation
1. Animating Section Components
6. Firebase Cloud Integration
1. Storing form data in Firebase Cloud Realtime Database
2. Custom Alert Message _ Deploying the project in Firebase