v0.9.5 Move personal data to a json and then fetched it using userState

public/assets/data/personalData.json

@@ -0,0 +1,13 @@
+[
+	{
+		"id": 1,
+		"name": "Murtadha Nisyif",
+		"number": "+1(519) 502-8463",
+		"location": "Kitchener, Ontario, Canada",
+		"title": "Software Engineer",
+		"about_me": "I'm passionate about computers, technology, and sports. I love creating solutions that ease people's daily routines. My journey in the world of tech began at a young age, and ever since, I've been captivated by the endless possibilities it offers. Whether it's building innovative solutions, developing software, or diving deep into the latest tech trends, I find immense joy in it all.",
+		"interests": ["Tech Enthusiast", "Problem Solver", "Sports Lover"],
+		"socials": [{ "github": "https://git.nisyif.com/mnisyif" }, { "linkedin": "https://www.linkedin.com/in/mnisyif/" }, { "twitter": "https://x.com/mnisyif" }],
+		"resumelink": "/assets/resume.pdf"
+	}
+]

src/App.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useSyncExternalStore } from "react";
 
 import Header from "./components/header/Header";
 import Footer from "./components/footer/Footer";
@@ -8,6 +8,7 @@ import Separator from "./components/separater/Separater";
 import Projects from "./components/projects/Projects";
 import AboutMe from "./components/aboutMe/AboutMe";
 import Publications from "./components/publications/Publications";
+import Contact from "./components/contact/Contact";
 
 import styles from "./App.module.css";
 
@@ -15,6 +16,7 @@ function App() {
 	const [educationData, setEducationData] = useState([]);
 	const [experienceData, setExperienceData] = useState([]);
 	const [projectsData, setProjectsData] = useState([]);
+	const [personalData, setPersonalData] = useState([]);
 
 	useEffect(() => {
 		const fetchEducationData = async () => {
@@ -35,9 +37,16 @@ function App() {
 			setProjectsData(data);
 		};
 
+		const fetchPersonalData = async () => {
+			const response = await fetch("/assets/data/personalData.json");
+			const data = await response.json();
+			setPersonalData(data);
+		};
+
 		fetchEducationData();
 		fetchExperienceData();
 		fetchProjectsData();
+		fetchPersonalData();
 	}, []);
 
 	return (
@@ -61,9 +70,14 @@ function App() {
 				<section id="education">
 					<InfoSection title="Education" data={educationData} isEducation={true} />
 				</section>
+				<Separator width="70%" thickness="3px" />
 				<section id="publications">
 					<Publications />
 				</section>
+				<Separator width="70%" thickness="3px" />
+				<section id="contact">
+					<Contact />
+				</section>
 			</main>
 			<Footer />
 		</div>

version.txt

@@ -1 +1 @@
-0.9.4
+0.9.5