NotfoundPage

Author: Riddhi050803

public/data/Riddhi050803.json

@@ -4,7 +4,19 @@
   "bio": "I’m a passionate Computer Science Engineering student at Indira Gandhi Delhi Technical University for Women (IGDTUW), actively exploring and contributing to the world of web development, open-source, and problem-solving.",
   "avatar": "https://github.com/Riddhi050803.png",
   "portfolio": "https://riddhirustagiportfolio-riddhi050803s-projects.vercel.app/",
-  "skills": ["HTML", "CSS", "JavaScript","Bootstrap", "Tailwind", "React js", "Redux", "Mongo DB", "Express js", "Node js", "UI/UX"],
+  "skills": [
+    "HTML",
+    "CSS",
+    "JavaScript",
+    "Bootstrap",
+    "Tailwind",
+    "React js",
+    "Redux",
+    "Mongo DB",
+    "Express js",
+    "Node js",
+    "UI/UX"
+  ],
   "social": {
     "GitHub": "https://github.com/Riddhi050803",
     "Twitter": "https://twitter.com/RiddhiRustagii",

src/App.js

@@ -10,6 +10,7 @@ import ProjectShowcase from './Page/ProjectShowcase.jsx';
 import ResumeBuilder from './Page/ResumeBuilder.jsx';
 import Resources from './Page/Resources.jsx';
 import Discussions from './Page/Discussions.jsx';
+import NotFoundPage from './Page/NotFoundPage.jsx';
 
 function App() {
   return (
@@ -70,6 +71,8 @@ function App() {
         <Route path="/ResumeBuilder" element={<ResumeBuilder />} />
         <Route path="/Resources" element={<Resources />} />
         <Route path="/Discussions" element={<Discussions />} />
+        {/* Catch-all route for 404 page */}
+        <Route path="*" element={<NotFoundPage />} />
       </Routes>
     </BrowserRouter>
   );

src/Page/NotFoundPage.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const NotFoundPage = () => {
+  const navigate = useNavigate();
+
+  const handleHomeClick = () => {
+    navigate('/');
+  };
+
+  return (
+    <div
+      className="flex h-screen w-full items-center justify-center bg-cover bg-center"
+      style={{
+        backgroundImage: `url('https://img.freepik.com/free-vector/404-error-with-man-thinking_24908-77772.jpg?t=st=1731744528~exp=1731748128~hmac=45deb8996535d67e7b7e02a75f5eeff8388ef4d4a955f7288900dba090980121&w=740')`,
+        backgroundSize: 'cover',
+        height: '100vh',
+        width: '100vw',
+      }}
+    >
+      <div className="space-y-8 text-center">
+        <h1 className="animate__animated animate__fadeInUp text-6xl font-extrabold text-white drop-shadow-2xl">
+          Oops! Page Not Found
+        </h1>
+
+        <button
+          onClick={handleHomeClick}
+          className="transform rounded-full bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 px-8 py-4 text-xl font-semibold text-white shadow-2xl transition-all duration-300 ease-in-out hover:scale-105"
+        >
+          Go to Home
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundPage;