From 592d10830656f9648a39cf7a219958c9372321d2 Mon Sep 17 00:00:00 2001
From: Ali <alifmohamed121@gmail.com>
Date: Sat, 13 Sep 2025 15:16:58 -0400
Subject: [PATCH] Finish

---
 package-lock.json              | 42 +++++++++++++++-------------------
 package.json                   |  4 ++--
 src/App.jsx                    | 26 +++++++++++++--------
 src/components/Footer.jsx      |  3 ++-
 src/components/Navbar.jsx      |  9 +++++---
 src/components/ProjectCard.jsx |  1 +
 src/pages/Home.jsx             | 34 +++++++++++++++++++++------
 src/pages/Projects.jsx         | 38 +++++++++++++++++++++++-------
 8 files changed, 102 insertions(+), 55 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 02b1a70..e11758a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,12 @@
       "name": "devsphere",
       "version": "0.0.0",
       "dependencies": {
-        "axios": "^1.8.4",
+        "axios": "^1.12.1",
         "lucide-react": "^0.501.0",
         "moment": "^2.30.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-router-dom": "^7.5.1"
+        "react-router-dom": "^7.9.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.22.0",
@@ -1467,13 +1467,13 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
-      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.1.tgz",
+      "integrity": "sha512-Kn4kbSXpkFHCGE6rBFNwIv0GQs4AvDT80jlveJDKFxjbTYMUeB4QtsdPCv6H8Cm19Je7IU6VFtRl2zWZI0rudQ==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.0",
+        "form-data": "^4.0.4",
         "proxy-from-env": "^1.1.0"
       }
     },
@@ -2116,14 +2116,15 @@
       }
     },
     "node_modules/form-data": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
-      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
       "license": "MIT",
       "dependencies": {
         "asynckit": "^0.4.0",
         "combined-stream": "^1.0.8",
         "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
         "mime-types": "^2.1.12"
       },
       "engines": {
@@ -2770,14 +2771,13 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.1.tgz",
-      "integrity": "sha512-/jjU3fcYNd2bwz9Q0xt5TwyiyoO8XjSEFXJY4O/lMAlkGTHWuHRAbR9Etik+lSDqMC7A7mz3UlXzgYT6Vl58sA==",
+      "version": "7.9.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.1.tgz",
+      "integrity": "sha512-pfAByjcTpX55mqSDGwGnY9vDCpxqBLASg0BMNAuMmpSGESo/TaOUG6BllhAtAkCGx8Rnohik/XtaqiYUJtgW2g==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
-        "set-cookie-parser": "^2.6.0",
-        "turbo-stream": "2.4.0"
+        "set-cookie-parser": "^2.6.0"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -2793,12 +2793,12 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.1.tgz",
-      "integrity": "sha512-5DPSPc7ENrt2tlKPq0FtpG80ZbqA9aIKEyqX6hSNJDlol/tr6iqCK4crqdsusmOSSotq6zDsn0y3urX9TuTNmA==",
+      "version": "7.9.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.1.tgz",
+      "integrity": "sha512-U9WBQssBE9B1vmRjo9qTM7YRzfZ3lUxESIZnsf4VjR/lXYz9MHjvOxHzr/aUm4efpktbVOrF09rL/y4VHa8RMw==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.5.1"
+        "react-router": "7.9.1"
       },
       "engines": {
         "node": ">=20.0.0"
@@ -2956,12 +2956,6 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/turbo-stream": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
-      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
-      "license": "ISC"
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 8447a07..2bd9e8a 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.8.4",
+    "axios": "^1.12.1",
     "lucide-react": "^0.501.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.5.1"
+    "react-router-dom": "^7.9.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.22.0",
diff --git a/src/App.jsx b/src/App.jsx
index f3deba0..003a1e1 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,24 +1,30 @@
 import React from 'react';
-import Navbar from './components/Navbar';
 
 // TODO: Import react router dom here
-
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import Navbar from './components/Navbar';
+import Projects from "./pages/Projects";
 import Footer from './components/Footer';
+import './styles/Navbar.css';
 import './styles/App.css';
 
 function App() {
   return (
     <Router>
-      <div className="app">
-        <Navbar />
-        <main className="main-content">
-         {/* TODO: Add react router dom routes here */}
-         
-        </main>
+      <div className="App">
+        <Navbar /> 
+        <main className='main-content'>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/projects" element={<Projects />} />
+          </Routes>
+          </main>
         <Footer />
-      </div>
+        </div>
+      
     </Router>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index bbf18f6..169dcfe 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Heart, Github } from 'lucide-react';
+
 import '../styles/Footer.css';
 
 const Footer = () => {
@@ -10,7 +11,7 @@ const Footer = () => {
           Built with <Heart size={16} className="heart-icon" /> using React
         </p>
         <a
-          href="https://github.com/duraanali"
+          href="https://github.com/anshur970"
           target="_blank"
           rel="noopener noreferrer"
           className="github-link"
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index c371cae..0ee7565 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 
 // TODO: Import LINK from react router dom components
-import { useLocation } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 
-import { Github } from 'lucide-react';
+import { Github, Utensils } from 'lucide-react';
 import '../styles/Navbar.css';
 
 const Navbar = () => {
@@ -13,16 +13,19 @@ const Navbar = () => {
     <nav className="navbar">
       <div className="navbar-container">
         <Link to="/" className="navbar-logo">
-          <Github size={24} />
+          <Utensils size={24} />
           <span>DevSphere</span>
         </Link>
 
         <ul className="navbar-menu">
           <li className="navbar-item">
            {/* TODO: Add the home route here */}
+           <Link to="/" className='nav-link'>Home</Link>
+           
           </li>
           <li className="navbar-item">
             {/* TODO: Add the projects route here */}
+            <Link to="/projects" className='nav-link'>Projects</Link>
           </li>
         </ul>
       </div>
diff --git a/src/components/ProjectCard.jsx b/src/components/ProjectCard.jsx
index 2d9f3e3..ce23f7a 100644
--- a/src/components/ProjectCard.jsx
+++ b/src/components/ProjectCard.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import moment from 'moment';
+import { Link } from 'react-router-dom';
 import { Star, GitFork, Eye, Clock } from 'lucide-react';
 import '../styles/ProjectCard.css';
 
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index aaac8db..6846ba5 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,22 +1,42 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, } from 'react';
 import { Link } from 'react-router-dom';
+import moment from 'moment';
 
 // TODO: Import axios here
 
-import moment from 'moment';
+import axios from 'axios';
 import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
 import '../styles/Home.css';
 
-const Home = () => {
-  const [user, setUser] = useState(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
   // TODO: Fetch user data from GitHub API using axios and useEffect and set the user state, also handle the loading and error states
     // API: https://api.github.com/users/YOUR_USERNAME
+    
+
+    function Home() {
+      const [user, setUser] = useState(null)
+      const [loading, setLoading] = useState(false)
+      const [error, setError] = useState(null)
+      
+      useEffect( () => {
+        const fetchData =  async () => {
+          try {
+            setLoading(true)
+            const response = await axios.get("https://api.github.com/users/anshur970")
+            setUser(response.data)
+            setLoading(false)
+
+          } catch(error) {
+            setError(error)
+            console.log(error)
+          }
 
+        }
+        fetchData()
 
+      }, [])
+    
 
+      
   if (loading) {
     return <div className="loading">Loading profile data...</div>;
   }
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
index def4d8a..b27a073 100644
--- a/src/pages/Projects.jsx
+++ b/src/pages/Projects.jsx
@@ -1,20 +1,42 @@
-import React, { useState, useEffect } from 'react';
-
+import React, { useState, useEffect, } from 'react';
+import { Link } from 'react-router-dom';
 // TODO: Import axios here
-
-
+import axios from 'axios';
+import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
 import ProjectCard from '../components/ProjectCard';
 import '../styles/Projects.css';
 
-const Projects = () => {
-  const [repos, setRepos] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
 
  // TODO: Fetch repositories from GitHub API using axios and useEffect and set the repos state, also handle the loading and error states
  // API: https://api.github.com/users/YOUR_GITHUB_USERNAME/repos?per_page=10&sort=updated
 
 
+ function Projects() {
+      const [repos, setRepos] = useState([])
+      const [loading, setLoading] = useState(false)
+      const [error, setError] = useState(null)
+      
+      
+      useEffect(() => {
+        const fetchRepos =  async () => {
+          try {
+            setLoading(true);
+            const response = await axios.get("https://api.github.com/users/anshur970/repos?per_page=10&sort=updated")
+            setRepos(response.data)
+            setLoading(false)
+
+          } catch(error) {
+            setError(error)
+            console.log(error)
+          }
+
+        }
+        fetchRepos()
+
+      }, [])
+    
+
+
 
   if (loading) {
     return <div className="loading">Loading repositories...</div>;