87 lines
2.6 KiB
JavaScript
87 lines
2.6 KiB
JavaScript
import React, { useEffect, useState, useSyncExternalStore } from "react";
|
|
|
|
import Header from "./components/header/Header";
|
|
import Footer from "./components/footer/Footer";
|
|
import Hero from "./components/hero/Hero";
|
|
import InfoSection from "./components/info/InfoSection";
|
|
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";
|
|
|
|
function App() {
|
|
const [educationData, setEducationData] = useState([]);
|
|
const [experienceData, setExperienceData] = useState([]);
|
|
const [projectsData, setProjectsData] = useState([]);
|
|
const [personalData, setPersonalData] = useState([]);
|
|
|
|
useEffect(() => {
|
|
const fetchEducationData = async () => {
|
|
const response = await fetch("/assets/data/educationData.json");
|
|
const data = await response.json();
|
|
setEducationData(data);
|
|
};
|
|
|
|
const fetchExperienceData = async () => {
|
|
const response = await fetch("/assets/data/experienceData.json");
|
|
const data = await response.json();
|
|
setExperienceData(data);
|
|
};
|
|
|
|
const fetchProjectsData = async () => {
|
|
const response = await fetch("/assets/data/projectsData.json");
|
|
const data = await response.json();
|
|
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 (
|
|
<div className={styles.app}>
|
|
<Header />
|
|
<main className={styles.main}>
|
|
<section id="home">
|
|
<Hero />
|
|
</section>
|
|
<section id="aboutme">
|
|
<AboutMe />
|
|
</section>
|
|
<section id="experience">
|
|
<InfoSection title="Experience" data={experienceData} isEducation={true} />
|
|
</section>
|
|
<Separator width="70%" thickness="3px" />
|
|
<section id="projects">
|
|
<Projects title="Projects" data={projectsData} />
|
|
</section>
|
|
<Separator width="70%" thickness="3px" />
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export default App;
|