update in packages

package.json

@@ -3,23 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.2",
-    "@testing-library/user-event": "^12.6.0",
-    "axios": "^0.21.1",
-    "bootstrap": "^4.5.3",
-    "react": "^17.0.1",
-    "react-bootstrap": "^1.4.0",
-    "react-dom": "^17.0.1",
-    "react-github-calendar": "^2.0.2",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.26.1",
+    "bootstrap": "^5.1.3",
+    "react": "^17.0.2",
+    "react-bootstrap": "^2.2.1",
+    "react-dom": "^17.0.2",
+    "react-github-calendar": "^3.2.2",
     "react-icons": "^4.3.1",
-    "react-parallax-tilt": "^1.4.68",
-    "react-particles-js": "^3.4.1",
-    "react-pdf": "^5.4.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
-    "typewriter-effect": "^2.17.0",
-    "web-vitals": "^0.2.4"
+    "react-parallax-tilt": "^1.6.5",
+    "react-pdf": "^5.7.1",
+    "react-router-dom": "^6.2.2",
+    "react-scripts": "5.0.0",
+    "react-tsparticles": "^1.42.2",
+    "typewriter-effect": "^2.18.2",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -9,8 +9,7 @@ import Resume from "./components/Resume/ResumeNew";
 import {
   BrowserRouter as Router,
   Route,
-  Switch,
-  Redirect,
+  Routes,
 } from "react-router-dom";
 import ScrollToTop from "./components/ScrollToTop";
 import "./style.css";
@@ -34,13 +33,13 @@ function App() {
       <div className="App" id={load ? "no-scroll" : "scroll"}>
         <Navbar />
         <ScrollToTop />
-        <Switch>
-          <Route path="/" exact component={Home} />
-          <Route path="/project" exact component={Projects} />
-          <Route path="/about" exact component={About} />
-          <Route path="/resume" exact component={Resume} />
-          <Redirect to="/" />
-        </Switch>
+        <Routes>
+          <Route path="/" exact element={<Home />} />
+          <Route path="/project" exact element={<Projects />} />
+          <Route path="/about" exact element={<About />} />
+          <Route path="/resume" exact element={<Resume />} />
+          <Route path="*" element={<Home />} />
+        </Routes>
         <Footer />
       </div>
     </Router>

src/components/About/AboutCard.js

@@ -28,7 +28,7 @@ function AboutCard() {
             </li>
           </ul>
 
-          <p style={{ marginBlockEnd: 0, color: "rgb(155 126 172)" }}>
+          <p style={{ color: "rgb(155 126 172)" }}>
             "Strive to build things that make a difference!"{" "}
           </p>
           <footer className="blockquote-footer">Soumyajit</footer>

src/components/About/Github.js

@@ -3,15 +3,6 @@ import GitHubCalendar from "react-github-calendar";
 import { Row } from "react-bootstrap";
 
 function Github() {
-  const colourTheme = {
-    background: "transparent",
-    text: "#ffffff",
-    grade4: "#8400b8",
-    grade3: "#b22ff4",
-    grade2: "#b265f6",
-    grade1: "#c084f5",
-    grade0: "#ecd9fc",
-  };
   return (
     <Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
       <h1 className="project-heading" style={{ paddingBottom: "20px" }}>
@@ -21,7 +12,7 @@ function Github() {
         username="soumyajit4419"
         blockSize={15}
         blockMargin={5}
-        theme={colourTheme}
+        color="#c084f5"
         fontSize={16}
       />
     </Row>

src/components/Navbar.js

@@ -38,7 +38,7 @@ function NavBar() {
       className={navColour ? "sticky" : "navbar"}
     >
       <Container>
-        <Navbar.Brand href="/">
+        <Navbar.Brand href="/" className="d-flex">
           <img src={logo} className="img-fluid logo" alt="brand" />
         </Navbar.Brand>
         <Navbar.Toggle
@@ -52,7 +52,7 @@ function NavBar() {
           <span></span>
         </Navbar.Toggle>
         <Navbar.Collapse id="responsive-navbar-nav">
-          <Nav className="ml-auto" defaultActiveKey="#home">
+          <Nav className="ms-auto" defaultActiveKey="#home">
             <Nav.Item>
               <Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
                 <AiOutlineHome style={{ marginBottom: "2px" }} /> Home

src/components/Particle.js

@@ -1,9 +1,10 @@
 import React from "react";
-import Particles from "react-particles-js";
+import Particles from "react-tsparticles";
 
 function Particle() {
   return (
     <Particles
+      id="tsparticles"
       params={{
         particles: {
           number: {

src/components/Resume/ResumeNew.js

@@ -23,20 +23,30 @@ function ResumeNew() {
       <Container fluid className="resume-section">
         <Particle />
         <Row style={{ justifyContent: "center", position: "relative" }}>
-          <Button variant="primary" href={pdf} target="_blank">
+          <Button
+            variant="primary"
+            href={pdf}
+            target="_blank"
+            style={{ maxWidth: "250px" }}
+          >
             <AiOutlineDownload />
             &nbsp;Download CV
           </Button>
         </Row>
 
         <Row className="resume">
-          <Document file={resumeLink}>
+          <Document file={resumeLink} className="d-flex justify-content-center">
             <Page pageNumber={1} scale={width > 786 ? 1.7 : 0.6} />
           </Document>
         </Row>
 
         <Row style={{ justifyContent: "center", position: "relative" }}>
-          <Button variant="primary" href={pdf} target="_blank">
+          <Button
+            variant="primary"
+            href={pdf}
+            target="_blank"
+            style={{ maxWidth: "250px" }}
+          >
             <AiOutlineDownload />
             &nbsp;Download CV
           </Button>