- - {/* TODO: Add the home route here */} + {/* TODO: Add the home route here */} + Home
- {/* TODO: Add the projects route here */} + Projects + +
- + {/* TODO: Add the projects route here */} + Contact
+
+ );
+}
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index aaac8db..4606bb8 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,21 +1,46 @@
-import React, { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import axios from "axios";
// TODO: Import axios here
-import moment from 'moment';
-import { Users, Star, GitBranch, MapPin, Calendar, ExternalLink } from 'lucide-react';
-import '../styles/Home.css';
+import moment from "moment";
+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 [loading, setLoading] = useState(false);
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
-
-
+ // API: https://api.github.com/users/YOUR_USERNAME /jamaal-Abdirahem
+ useEffect(() => {
+ async function fetchGithub() {
+ try {
+ setLoading(true);
+ await axios
+ .get("https://api.github.com/users/jamaal-Abdirahem")
+ .then((response) => {
+ console.log(response);
+ setUser(response.data);
+ setLoading(false);
+ });
+ } catch (err) {
+ setError("Failed to load user. Please try again.");
+ console.error(err.message);
+ setLoading(false);
+ }
+ }
+ fetchGithub();
+ }, []);
if (loading) {
return
+
+ Love to hear from you, Get in touch 👋
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading profile data...
;
@@ -32,10 +57,10 @@ const Home = () => {
- 
@@ -49,13 +74,15 @@ const Home = () => {
)}
-
{user.bio || 'No bio available'}
+{user.bio || "No bio available"}
@@ -91,10 +118,16 @@ const Home = () => {
)}
{user.blog && (
- Website:
-
+ Website:
+
{user.blog}