DEV Community

Cover image for React Portfolio Website with Theme Customization Functionality - React JS Portfolio Website (2022)

Posted on


React Portfolio Website with Theme Customization Functionality - React JS Portfolio Website (2022)

This course is for ALL levels of React Developers looking to build THE PERFECT PORTFOLIO website to showcase their work!

My approach to this course is simple. I will explain every step needed to create this amazing responsive portfolio website (without wasting your time). You will learn modern React and CSS best practices, together with easy-to-use tools that'll add astonishing functionalities to the project.

>> Watch Full Video With Source Code

Throughout the course, you will learn:

  • How to Build Modern and Responsive Apps/Websites using React 18
  • How to use React Hooks like (useState, useEffect, useRef, useReducer, and more)
  • How to Create and use Custom React Hooks
  • How to use the Context API and the useContext Hook
  • How to use React Portals How to create Re-Usable Components
  • How to add a Theme Customization feature that persists to LocalStorage
  • How to Create carousel/slides with SwiperJS
  • How to add Filtering to your portfolio projects
  • How to use CSS3 Variables for efficient project customization CSS Positioning
  • How to use Flexbox and Grid System
  • How to use CSS Media Queries to create responsive websites
  • How to use Responsive units like rem, %, vh, and vw
  • How to create an elegant Floating Navbar for your website, and more!

By the end of the course, you will have a full-featured, modern, responsive portfolio website with:

Complete theme customization functionality that stores theme state/value in your browser's local storage. This way your clients will have their last theme settings saved even if they close their browser or refresh the page.

  • Animate-On-Scroll feature
  • Convenient Contact Options (WhatsApp, messenger, mail)
  • Auto-scroll carousel/slides for testimonials
  • Filterable portfolio projects
  • FAQs toggle feature Elegant Floating Navbar (for tablets and phones), and more!

Latest comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesnโ€™t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.