Create Portfolio Website

React project – create a portfolio website is a great way to showcase your skills and work to potential employers. If you’re a web developer, one of the best ways to do this is to create a React-based portfolio website. React is a JavaScript library that makes creating user interfaces easy. It’s declarative, meaning you can write code that is easy to read and understand. And it’scomponent-based, meaning you can reuse code across your website. Creating a portfolio website with React will show potential employers that you have the skills to create well-designed, user-friendly websites. And because React is a popular library, it will also show that you’re up-to-date with the latest trends in web development.

What will you Learn in the React project – create a portfolio website?

1. How to work with the use State Hook?
2. How to work with the Props and passing data?
3. How to work with React Icons?
4. How to work with Modern Responsive design?
5. How to work with multiple contact options –  Email, WhatsApp, Messenger and Facebook
6. How to work with Swiper JS?
7. How to deploy the website in the Internet

Tools Used

Visual Studio Code

Tasks Performed

Task-1: Buy the hosting claiming free domain and Installing the node and VSCode. Creating the React app

Task-2: Create all the Components

Task-3: Create all the CSS variables and General Styles

Task-4: Create Header component JSX and install the React Icons and make header component Responsive Design

Task-5: Create a Floating Nav component and Floating Nav CSS and manage the Nav state using use State Hook

Task-6: Create About Component JSX and About Component CSS.

Task-7: Make About Component to Responsive Design and create Experience component of JSX and CSS.

Task-8: Create Experience Component in Responsive Design and create Services Component of JSX and CSS and make Services component to Responsive Design.

Task-9: Create Portfolio component of JSX and CSS. Make Portfolio Component to Responsive

Task-10: Create Portfolio items from array using a map and create a Testimonials component of JSX and CSS . Make the Testimonial component Responsive

Task-11: Create Testimonials items from array using the map method and create carousel Slides using Swiper JS.

Task-12: Create Contact Component JSX.
Contact options are FaceBook, Messenger, What’s App, and Email.

Task-13: Create a Contact Component of CSS and make it Responsive Design.

Task-14: Create Form Submission using Email JS

Task-15: Create a Footer Component of JSX and CSS . Make the Footer Component Responsive

Task-16: Deploy React JS portfolio website