NotFound Page Added

public/index.html

@@ -5,11 +5,8 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
+    <meta name="description" content="Checkout my Portfolio!" />
-      name="description"
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <link
       href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

public/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><clipPath id="dfb47b435a"><path d="M 82 90.4375 L 293.351562 90.4375 L 293.351562 284.6875 L 82 284.6875 Z M 82 90.4375 " clip-rule="nonzero"/></clipPath></defs><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><rect x="-37.5" width="450" fill="#000000" y="-37.499999" height="449.999989" fill-opacity="1"/><g clip-path="url(#dfb47b435a)"><path fill="#ffffff" d="M 256.140625 90.4375 C 256.230469 153.992188 256.226562 176.601562 256.226562 199.214844 C 256.226562 200.023438 256.0625 200.832031 255.910156 202.296875 C 255.910156 202.296875 255.90625 202.292969 255.90625 202.292969 L 236.234375 185.234375 C 219.777344 170.863281 203.328125 156.480469 186.835938 142.148438 C 186.53125 141.882812 186.152344 141.648438 185.75 141.460938 L 169.835938 127.660156 C 171.527344 127.496094 173.25 127.386719 175.007812 127.347656 C 182.699219 127.171875 190.394531 127.117188 240.265625 127.121094 L 240.265625 90.558594 C 190.644531 90.472656 183.191406 90.492188 175.746094 90.523438 C 154.546875 90.597656 135.253906 96.671875 118.527344 109.757812 C 95.390625 127.84375 82.710938 151.675781 82.285156 181.164062 C 81.890625 208.75 82.082031 236.34375 82.128906 284.558594 L 119.011719 284.558594 C 119.011719 253.054688 119.011719 240.308594 119.011719 227.570312 C 119.011719 224.382812 119.027344 224.378906 122.160156 224.378906 C 148.136719 224.378906 174.117188 224.378906 200.09375 224.378906 C 200.898438 224.378906 201.707031 224.378906 202.507812 224.378906 C 202.675781 224.101562 202.839844 223.820312 203.007812 223.542969 C 202.375 223.125 201.6875 222.773438 201.121094 222.28125 C 188.414062 211.238281 175.710938 200.195312 163.042969 189.109375 C 161.785156 188.007812 160.496094 187.574219 158.824219 187.582031 C 146.578125 187.636719 134.335938 187.613281 122.085938 187.605469 C 119.101562 187.605469 119.039062 187.601562 118.988281 184.527344 C 118.835938 175.164062 120.652344 166.214844 125.175781 157.96875 C 127.730469 153.316406 130.617188 149.183594 133.832031 145.570312 L 176.632812 182.691406 C 196.023438 199.566406 215.417969 216.445312 234.789062 233.335938 C 253.65625 249.785156 272.492188 266.277344 291.34375 282.738281 C 291.730469 283.078125 292.203125 283.3125 293.0625 283.875 C 293.0625 282.738281 293.0625 282.0625 293.0625 281.382812 C 293.0625 231.375 293.066406 181.375 293.066406 90.425781 L 256.140625 90.425781 Z M 256.140625 90.4375 " fill-opacity="1" fill-rule="nonzero"/></g></svg>

public/manifest.json

@@ -8,13 +8,13 @@
       "type": "image/x-icon"
     },
     {
-      "src": "logo192.png",
+      "src": "logo.svg",
-      "type": "image/png",
+      "type": "image/svg",
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "logo.svg",
-      "type": "image/png",
+      "type": "image/svg",
       "sizes": "512x512"
     }
   ],

src/App.js

@@ -5,13 +5,15 @@ import About from "./routes/About";
 import Project from "./routes/Project";
 import Contact from "./routes/Contact";
 import { Routes, Route } from "react-router-dom";
+import NotFound from "./routes/NotFound";
 
 function App() {
   return (
     <Routes>
+      <Route path="*" element={<NotFound />} />
       <Route path="/" element={<Home />} />
       <Route path="/about" element={<About />} />
-      <Route path="/project" element={<Project />} />
+      <Route path="/projects" element={<Project />} />
       <Route path="/contact" element={<Contact />} />
     </Routes>
   );

src/Components/About/AboutContent.css

@@ -16,6 +16,7 @@
 
 .about .left p{
   margin: 1.2rem 0;
+  text-align: justify;
 }
 
 .about .right{

src/Components/ContactForm/ContactForm.js

@@ -55,16 +55,16 @@ const ContactForm = () => {
     <div className="form">
       <form ref={form} onSubmit={sendEmail}>
         <label htmlFor="name">Your Name</label>
-        <input type="text" name="user_name" placeholder="Your name.." />
+        <input type="text" name="user_name" placeholder="Your name" />
         <label htmlFor="email">Email</label>
-        <input type="text" name="user_email" placeholder="Your email.." />
+        <input type="text" name="user_email" placeholder="Your email" />
         <label htmlFor="subject">Subject</label>
-        <input type="text" name="subject" placeholder="Subject.." />
+        <input type="text" name="subject" placeholder="Subject" />
         <label htmlFor="message">Message</label>
         <textarea
           rows="6"
           name="message"
-          placeholder="Write something.."
+          placeholder="Write something"
         ></textarea>
         <button className="btn" type="submit">
           Submit

src/Components/Hero/Hero.js

@@ -14,7 +14,7 @@ const Hero = () => {
         <p>Hi, I'm a Freelancer</p>
         <h1>Software Developer</h1>
         <div>
-          <Link to="/project" className="btn">
+          <Link to="/projects" className="btn">
             Projects
           </Link>
           <Link to="/contact" className="btn btn-light">

src/Components/Navbar/Navbar.js

@@ -40,7 +40,7 @@ const Navbar = () => {
           <Link to="/">Home</Link>
         </li>
         <li>
-          <Link to="/project">Project</Link>
+          <Link to="/projects">Projects</Link>
         </li>
         <li>
           <Link to="/about">About</Link>

src/Components/WorkData/AcademicProjects.js

@@ -1,7 +1,3 @@
-import umbBot from "../../assets/umbreonbot.jpg";
-import pro2 from "../../assets/project2.png";
-import pro3 from "../../assets/project3.png";
-
 const AcademicProjectCardData = [
   {
     title: "Stuff&Go Web Store",

src/Components/WorkData/PersonalProjects.js

@@ -1,7 +1,3 @@
-import UmBot from "../../assets/umbreonbot.jpg";
-import MyLogo from "../../assets/logo.svg";
-import pro3 from "../../assets/project3.png";
-
 const PersonalProjectCardData = [
   {
     title: "Umbreon Discord Bot",

src/routes/NotFound.js

@@ -0,0 +1,19 @@
+import React from "react";
+import Navbar from "../Components/Navbar/Navbar";
+import HeroSec from "../Components/HeroSec/HeroSec";
+import Footer from "../Components/Footer/Footer";
+
+const NotFound = () => {
+  return (
+    <>
+      <Navbar />
+      <HeroSec
+        heading="404"
+        paragraph="The page you are looking for does not exist :("
+      />
+      <Footer />
+    </>
+  );
+};
+
+export default NotFound;