finished

package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "axios": "^1.8.4",
+    "axios": "^1.11.0",
     "lucide-react": "^0.501.0",
     "moment": "^2.30.1",
     "react": "^19.0.0",

src/App.jsx

@@ -2,6 +2,10 @@ 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 Projects from "./pages/Projects";
+
 
 import Footer from './components/Footer';
 import './styles/App.css';
@@ -14,6 +18,10 @@ function App() {
         <main className="main-content">
          {/* TODO: Add react router dom routes here */}
 
+        <Routes>
+          <Route path="/" element={<Home />} />
+           <Route path="/projects" element={<Projects />} />
+          </Routes>
         </main>
         <Footer />
       </div>

src/components/Navbar.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 // TODO: Import LINK from react router dom components
+import { Link } from "react-router-dom"
 import { useLocation } from 'react-router-dom'
 
 import { Github } from 'lucide-react';
@@ -20,9 +21,14 @@ const Navbar = () => {
         <ul className="navbar-menu">
           <li className="navbar-item">
            {/* TODO: Add the home route here */}
+           <Link to="/">Home</Link>
+
           </li>
           <li className="navbar-item">
             {/* TODO: Add the projects route here */}
+             <Link to="/projects">Projects</Link>
+
+
           </li>
         </ul>
       </div>

src/pages/Home.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
 // TODO: Import axios here
-
+import axios from "axios";
 import moment from 'moment';
 import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
 import '../styles/Home.css';
@@ -16,6 +16,32 @@ const Home = () => {
     // API: https://api.github.com/users/YOUR_USERNAME
 
 
+    useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        setLoading(true);
+        await axios
+          .get("https://api.github.com/users/alqazimi")
+          .then((response) => {
+           setUser(response.data);
+            setLoading(false);
+          })
+          .catch((err) => {
+            setError(err.message);
+            setLoading(false);
+          });
+      } catch (error) {
+        console.log(error);
+        setLoading(false);
+      }
+    };
+
+
+    fetchUser();
+  }, []);
+
+
+
 
   if (loading) {
     return <div className="loading">Loading profile data...</div>;

src/pages/Projects.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 // TODO: Import axios here
 
-
+import axios from "axios";
 import ProjectCard from '../components/ProjectCard';
 import '../styles/Projects.css';
 
@@ -15,6 +15,31 @@ const Projects = () => {
  // API: https://api.github.com/users/YOUR_GITHUB_USERNAME/repos?per_page=10&sort=updated
 
 
+    useEffect(() => {
+const fetchrepositories = async () => {
+      try {
+        setLoading(true);
+        await axios
+          .get("https://api.github.com/users/alqazimi/repos?per_page=10&sort=updated")
+          .then((response) => {
+            setRepos(response.data);
+            setLoading(false);
+          })
+          .catch((err) => {
+            setError(err.message);
+            setLoading(false);
+          });
+      } catch (error) {
+        console.log(error);
+        setLoading(false);
+      }
+    };
+
+
+    fetchrepositories();
+  }, []);
+
+
 
   if (loading) {
     return <div className="loading">Loading repositories...</div>;