updated react-router-dom and changed the class attribute to className.

Portfolio_Website_React JS/package.json

@@ -11,7 +11,7 @@
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-router-dom": "5.1.2",
+    "react-router-dom": "^6.2.1",
     "react-scripts": "3.3.0",
     "react-typing-effect": "^2.0.2"
   },

Portfolio_Website_React JS/src/App.css

@@ -11,27 +11,28 @@
   margin:0;
   padding: 0;
 }
-body{
-  font-family: 'Raleway';
-}
+
 .App
 {
   display: flex;
   width: 100vw;
   min-height: 100vh;
+;
 }
 nav
 {
   padding:60px 30px 0px 30px ;
   flex:var(--sidebar-flex);
   background: rgb(238,103,143);
   background: linear-gradient(180deg, rgba(238,103,143,1) 50%, rgba(132,124,252,1) 80%);
+
 }
 .condiv
 {
-  padding: 100px ;
+  padding: 50px ;
   background-color: #f4f5f9;
   flex:var(--condiv-flex);
+
 }
 
 .home
@@ -41,12 +42,14 @@ nav
   flex-direction: column;
   align-items: center;
 
+
 }
 .profilepic
 {
   border-radius: 50%;
   width: 200px;
   margin: 30px;
+
 }
 .typingeffect
 {
@@ -60,10 +63,12 @@ nav ul{
   list-style-type: none;
   text-decoration: none;
   color: white !important;
+
 }
 nav ul li
 {
   margin:40px;
+
 }
 
 a
@@ -130,13 +135,16 @@ h1,h2,h3,h4,p{
   .App
   {
     flex-direction: column;
+
   }
   .sidebar
   {
-    padding: 30px;
+
+    padding: 30px; 
     background: rgb(238,103,143);
     background: linear-gradient(90deg, rgba(238,103,143,1) 50%, rgba(132,124,252,1) 80%);
-  }
+
+  } 
   .condiv
   {
     padding: 50px ;

Portfolio_Website_React JS/src/App.js

@@ -2,7 +2,7 @@ import React from 'react';
 import './App.css';
 import {
   BrowserRouter as Router,
-  Route,
+  Route,Routes
 } from "react-router-dom";
 import Navbar from './components/Navbar';
 import Home from './contents/Home';
@@ -18,21 +18,21 @@ function App() {
     <Router>
     <div className="App">
     <Navbar />
-    <Route exact path="/">
-    <Home />
-    </Route>
-    <Route path="/about">
-    <About />
-    </Route>
-    <Route path="/education">
-    <Education />
-    </Route>
-    <Route path="/skills">
-    <Skills />
-    </Route>
-    <Route path="/contact">
-    <Contact />
-    </Route>
+
+    <Routes>
+      <Route exact path="/" element={ <Home />} />
+
+      <Route path="/about" element={<About />} />
+
+      <Route path="/education" element={<Education />} />
+
+      <Route path="/skills" element={<Skills />} />
+
+      <Route path="/contact" element={<Contact />} />
+
+
+    </Routes>
+
     </div>
     </Router>
     );

Portfolio_Website_React JS/src/components/Social.js

@@ -3,13 +3,13 @@ import React, { Component } from 'react';
 class Social extends Component {
     render() {
         return (
-            <div class="social">
-            <a href="https://codepen.io/naafi" target="_blank" rel="noopener noreferrer"><i class="fab fa-codepen"></i></a>
-            <a href="https://github.com/naaficodes" target="_blank" rel="noopener noreferrer"><i class="fab fa-github"></i></a>
-            <a href="https://Instagram.com/iam_naafi" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a>
-            <a href="https://www.facebook.com/abdul.w.naafi" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>
-            <a href="https://Linkedin.com/in/naafi" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>
-            <a href="https://medium.com/@iam_naafi" target="_blank" rel="noopener noreferrer"><i class="fab fa-medium-m"></i></a>
+            <div className="social">
+            <a href="https://codepen.io/naafi" target="_blank" rel="noopener noreferrer"><i className="fab fa-codepen"></i></a>
+            <a href="https://github.com/naaficodes" target="_blank" rel="noopener noreferrer"><i className="fab fa-github"></i></a>
+            <a href="https://Instagram.com/iam_naafi" target="_blank" rel="noopener noreferrer"><i className="fab fa-instagram"></i></a>
+            <a href="https://www.facebook.com/abdul.w.naafi" target="_blank" rel="noopener noreferrer"><i className="fab fa-facebook-f"></i></a>
+            <a href="https://Linkedin.com/in/naafi" target="_blank" rel="noopener noreferrer"><i className="fab fa-linkedin-in"></i></a>
+            <a href="https://medium.com/@iam_naafi" target="_blank" rel="noopener noreferrer"><i className="fab fa-medium-m"></i></a>
             </div>
             )
         }

Portfolio_Website_React JS/src/components/Widecard.js

@@ -3,11 +3,11 @@ import React, { Component } from 'react'
 class Widecard extends Component {
     render() {
         return (
-            <div class="widecard">
-            <div class="compdet">
+            <div className="widecard">
+            <div className="compdet">
             <h3>{this.props.title}</h3>
-            <h4 class="secondtext">{this.props.where}</h4>
-            <h4 class="secondtext">{this.props.from} - {this.props.to}</h4>
+            <h4 className="secondtext">{this.props.where}</h4>
+            <h4 className="secondtext">{this.props.from} - {this.props.to}</h4>
             </div>
             </div>
             )

Portfolio_Website_React JS/src/contents/Skills.js

@@ -14,8 +14,8 @@ class Skills extends Component {
             <div className="condiv skills">
             <h1 className="subtopic">My Skills</h1>
             <ul>
-            {this.state.myskills.map((value)=>{
-                return <li>{value}</li>
+            {this.state.myskills.map((value,index)=>{
+                return <li key={index}>{value}</li>
             })}
             </ul>
             </div>

Portfolio_Website_React JS/src/index.css

@@ -1,13 +1,8 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Raleway';
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+