In this project we are going to create and deploy a fully responsive portfolio website from scratch using React icons, hooks. We will also be adding multiple contact options in website - WhatsApp, Facebook, Messenger and Email.
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 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 map and create Testimonials component of JSX and CSS .Make Testimonial component as Responsive
Task-11: Create Testimonials items from array using map method and create carousel Slides using Swiper JS.
Task-12: Create Contact Component JSX. Contact options are Face Book, Messenger, What’s App and Email.
Task-13: Create Contact Component of CSS and make it Responsive Design.
Task-14: Create Form Submission using Email JS
Task-15: Create Footer Component of JSX and CSS .Make Footer Component as Responsive
Price Based Country test mode enabled for testing United States (US). You should do tests on private browsing mode. Browse in private with Firefox, Chrome and Safari
Report
Block Member?
Please confirm you want to block this member.
You will no longer be able to:
See blocked member's posts
Mention this member in posts
Invite this member to groups
Message this member
Add this member as a connection
Please note:
This action will also remove this member from your connections and send a report to the site admin.
Please allow a few minutes for this process to complete.