From c7ab612ec670d0f28429f262eaed78426b83c098 Mon Sep 17 00:00:00 2001
From: Murtadha <mnisyif@gmail.com>
Date: Fri, 19 Jul 2024 16:48:55 -0400
Subject: [PATCH] v0.11.0 Pass personal data as an object after retrieving it

---
 src/App.jsx                        |  9 ++--
 src/components/aboutMe/AboutMe.jsx | 78 ++++++++++++++++++------------
 src/components/contact/Contact.jsx | 10 ++--
 src/components/footer/Footer.jsx   | 31 ++++++------
 src/components/hero/Hero.jsx       | 11 +++--
 version.txt                        |  2 +-
 6 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index dbea55a..f5b29a7 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -41,6 +41,7 @@ function App() {
 			const response = await fetch("/assets/data/personalData.json");
 			const data = await response.json();
 			setPersonalData(data);
+			console.log(data)
 		};
 
 		fetchEducationData();
@@ -54,10 +55,10 @@ function App() {
 			<Header />
 			<main className={styles.main}>
 				<section id="home">
-					<Hero />
+					<Hero data={personalData}/>
 				</section>
 				<section id="aboutme">
-					<AboutMe />
+					<AboutMe data={personalData}/>
 				</section>
 				<section id="experience">
 					<InfoSection title="Experience" data={experienceData} isEducation={true} />
@@ -76,10 +77,10 @@ function App() {
 				</section>
 				<Separator width="70%" thickness="3px" />
 				<section id="contact">
-					<Contact />
+					<Contact data={personalData}/>
 				</section>
 			</main>
-			<Footer />
+			<Footer data={personalData}/>
 		</div>
 	);
 }
diff --git a/src/components/aboutMe/AboutMe.jsx b/src/components/aboutMe/AboutMe.jsx
index 964709c..e0da465 100644
--- a/src/components/aboutMe/AboutMe.jsx
+++ b/src/components/aboutMe/AboutMe.jsx
@@ -2,9 +2,7 @@ import React from "react";
 import styles from "./AboutMe.module.css";
 import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
 
-import pp from "/assets/pp/abtme.JPG?url";
-
-const AboutMe = () => {
+function AboutMe({data}) {
 	const scrollToContact = () => {
 		const contactSection = document.getElementById("contact");
 		if (contactSection) {
@@ -12,43 +10,59 @@ const AboutMe = () => {
 		}
 	};
 
+	const personalInfo = data.length ? data[0] : {};
+
 	return (
 		<section className={styles.aboutMe} id="about">
 			<div className={styles.container}>
 				<h2 className={styles.title}>About Me</h2>
 				<div className={styles.content}>
-					<div className={styles.imageContainer}>
-						<img src={pp} alt="Murtadha Nisyif" className={styles.image} />
-						<div className={styles.socialLinks}>
-							<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
-								<FaGithub />
-							</a>
-							<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
-								<FaLinkedin />
-							</a>
-							<a href="https://twitter.com/yourhandle" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
-								<FaTwitter />
-							</a>
-						</div>
-					</div>
+				<div className={styles.imageContainer}>
+                        <img src={personalInfo.pp} alt="Murtadha Nisyif" className={styles.image} />
+                        <div className={styles.socialLinks}>
+                            {personalInfo.socials && personalInfo.socials.map((social, index) => {
+                                const platform = Object.keys(social)[0];
+                                const url = social[platform];
+
+                                let IconComponent;
+                                switch (platform) {
+                                    case 'github':
+                                        IconComponent = FaGithub;
+                                        break;
+                                    case 'linkedin':
+                                        IconComponent = FaLinkedin;
+                                        break;
+                                    case 'twitter':
+                                        IconComponent = FaTwitter;
+                                        break;
+                                    default:
+                                        return null;
+                                }
+
+                                return (
+                                    <a key={index} href={url} target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
+                                        <IconComponent />
+                                    </a>
+                                );
+                            })}
+                        </div>
+                    </div>
 					<div className={styles.textContent}>
-						<h3 className={styles.greeting}>
-							Hey there! I'm <span className={styles.name}>Murtadha Nisyif</span>
-						</h3>
-						<p className={styles.bio}>
-							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.
-						</p>
-						<div className={styles.interests}>
-							<span className={styles.interestTag}>Tech Enthusiast</span>
-							<span className={styles.interestTag}>Problem Solver</span>
-							<span className={styles.interestTag}>Sports Lover</span>
-						</div>
-					</div>
+                        <h3 className={styles.greeting}>
+                            Hey there! I'm <span className={styles.name}>{personalInfo.name}</span>
+                        </h3>
+                        <p className={styles.bio}>
+                            {personalInfo.about_me}
+                        </p>
+                        <div className={styles.interests}>
+                            {personalInfo.interests && personalInfo.interests.map((interest, index) => (
+                                <span key={index} className={styles.interestTag}>{interest}</span>
+                            ))}
+                        </div>
+                    </div>
 				</div>
 				<div className={styles.bottomSection}>
-					<a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>
+					<a href={personalInfo.resumeLink} target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>
 						Download Resume (PDF)
 					</a>
 					<button onClick={scrollToContact} className={styles.contactLink}>
diff --git a/src/components/contact/Contact.jsx b/src/components/contact/Contact.jsx
index 2f1ce05..bf23c41 100644
--- a/src/components/contact/Contact.jsx
+++ b/src/components/contact/Contact.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import styles from "./Contact.module.css";
 
-const Contact = () => {
+function Contact({data}) {
 	const [name, setName] = useState("");
 	const [email, setEmail] = useState("");
 	const [message, setMessage] = useState("");
@@ -41,6 +41,8 @@ const Contact = () => {
 		setMessage("");
 	};
 
+	const personalInfo = data.length ? data[0] : {};
+
 	return (
 		<section className={styles.contact} id="contact">
 			<div className={styles.container}>
@@ -50,13 +52,13 @@ const Contact = () => {
 						<h3>Get in Touch</h3>
 						<p>Feel free to reach out for collaborations or just a friendly hello</p>
 						<div className={styles.infoItem}>
-							<strong>Location:</strong> City, Country
+							<strong>Location:</strong> {personalInfo.location}
 						</div>
 						<div className={styles.infoItem}>
-							<strong>Email:</strong> your.email@example.com
+							<strong>Email:</strong> {personalInfo.email}
 						</div>
 						<div className={styles.infoItem}>
-							<strong>Phone:</strong> +1 (123) 456-7890
+							<strong>Phone:</strong> {personalInfo.number}
 						</div>
 					</div>
 					<div className={styles.formColumn}>
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index 634ffd0..e4771de 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import styles from "./Footer.module.css";
 import logo from "/assets/logos/logo.png";
 
-function Footer() {
+function Footer({data}) {
 	const [isVisible, setIsVisible] = useState(false);
 	const footerRef = useRef(null);
 
@@ -29,6 +29,8 @@ function Footer() {
 		};
 	}, []);
 
+    const personalInfo = data.length ? data[0] : {};
+
 	return (
 		<footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ""}`}>
 			<div className={styles.content}>
@@ -38,24 +40,23 @@ function Footer() {
 					</div>
 					<div className={styles.contact}>
 						<h3>Contact</h3>
-						<p>Email: your.email@example.com</p>
-						<p>Phone: (123) 456-7890</p>
+						<p>Email: {personalInfo.email}</p>
+						<p>Phone: {personalInfo.number}</p>
 					</div>
 					<div className={styles.social}>
-						<h3>Social</h3>
-						<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">
-							LinkedIn
-						</a>
-						<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
-							GitHub
-						</a>
-						<a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer">
-							Twitter
-						</a>
-					</div>
+                        <h3>Social</h3>
+                        {personalInfo.socials && personalInfo.socials.map((social, index) => {
+                            const platform = Object.keys(social)[0];
+                            return (
+                                <a key={index} href={social[platform]} target="_blank" rel="noopener noreferrer">
+                                    {platform.charAt(0).toUpperCase() + platform.slice(1)}
+                                </a>
+                            );
+                        })}
+                    </div>
 				</div>
 				<div className={styles.bottomSection}>
-					<a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>
+					<a href={personalInfo.resumeLink} target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>
 						Download Resume (PDF)
 					</a>
 				</div>
diff --git a/src/components/hero/Hero.jsx b/src/components/hero/Hero.jsx
index c0c3b25..24b4140 100644
--- a/src/components/hero/Hero.jsx
+++ b/src/components/hero/Hero.jsx
@@ -1,16 +1,17 @@
 import React from "react";
 import styles from "./Hero.module.css";
 
-import pp from "/assets/pp/pp.jpg";
 
-function Hero() {
+function Hero({data}) {
+	const personalInfo = data.length ? data[0] : {};
+
 	return (
 		<section className={styles.hero}>
-			<img src={pp} alt="Murtadha Nisyif" className={styles.backgroundImage} />
+			<img src={personalInfo.heropp} alt="Murtadha Nisyif" className={styles.backgroundImage} />
 			<div className={styles.content}>
 				<div className={styles.textContent}>
-					<h1 className={styles.name}>Murtadha Nisyif</h1>
-					<h2 className={styles.title}>Software Engineer</h2>
+					<h1 className={styles.name}>{personalInfo.name}</h1>
+					<h2 className={styles.title}>{personalInfo.title}</h2>
 					{/* <div className={styles.positions}>
 						<p>Current Position</p>
 						<p>Another Position</p>
diff --git a/version.txt b/version.txt
index 71172b4..142464b 100644
--- a/version.txt
+++ b/version.txt
@@ -1 +1 @@
-0.10.1
\ No newline at end of file
+0.11.0
\ No newline at end of file