v0.11.0 Pass personal data as an object after retrieving it
This commit is contained in:
parent
734b3fcf14
commit
c7ab612ec6
6 changed files with 80 additions and 61 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
<img src={personalInfo.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 />
|
||||
{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>
|
||||
Hey there! I'm <span className={styles.name}>{personalInfo.name}</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.
|
||||
{personalInfo.about_me}
|
||||
</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>
|
||||
{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}>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
{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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
0.10.1
|
||||
0.11.0
|
||||
Loading…
Add table
Add a link
Reference in a new issue