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

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>