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?
- How to work with the use State Hook?
- How to work with the Props and passing data?
- How to work with React Icons?
- How to work with Modern Responsive design?
- How to work with multiple contact options – Email, WhatsApp, Messenger and Facebook
- How to work with Swiper JS?
- 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