mnisyif/mnisyif_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

v0.11.0 Pass personal data as an object after retrieving it

Browse source
This commit is contained in:
Murtadha 2024-07-19 16:48:55 -04:00
parent 734b3fcf14
commit c7ab612ec6
6 changed files with 80 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/App.jsx
View file

@ -41,6 +41,7 @@ function App() {
const response = await fetch("/assets/data/personalData.json"); const response = await fetch("/assets/data/personalData.json");
const data = await response.json(); const data = await response.json();
setPersonalData(data); setPersonalData(data);
console.log(data)
}; };
fetchEducationData(); fetchEducationData();
@ -54,10 +55,10 @@ function App() {
<Header /> <Header />
<main className={styles.main}> <main className={styles.main}>
<section id="home"> <section id="home">
<Hero /> <Hero data={personalData}/>
</section> </section>
<section id="aboutme"> <section id="aboutme">
<AboutMe /> <AboutMe data={personalData}/>
</section> </section>
<section id="experience"> <section id="experience">
<InfoSection title="Experience" data={experienceData} isEducation={true} /> <InfoSection title="Experience" data={experienceData} isEducation={true} />
@ -76,10 +77,10 @@ function App() {
</section> </section>
<Separator width="70%" thickness="3px" /> <Separator width="70%" thickness="3px" />
<section id="contact"> <section id="contact">
<Contact /> <Contact data={personalData}/>
</section> </section>
</main> </main>
<Footer /> <Footer data={personalData}/>
</div> </div>
); );
} }

78
src/components/aboutMe/AboutMe.jsx
View file

@ -2,9 +2,7 @@ import React from "react";
import styles from "./AboutMe.module.css"; import styles from "./AboutMe.module.css";
import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa"; import { FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
import pp from "/assets/pp/abtme.JPG?url"; function AboutMe({data}) {
const AboutMe = () => {
const scrollToContact = () => { const scrollToContact = () => {
const contactSection = document.getElementById("contact"); const contactSection = document.getElementById("contact");
if (contactSection) { if (contactSection) {
@ -12,43 +10,59 @@ const AboutMe = () => {
} }
}; };
const personalInfo = data.length ? data[0] : {};
return ( return (
<section className={styles.aboutMe} id="about"> <section className={styles.aboutMe} id="about">
<div className={styles.container}> <div className={styles.container}>
<h2 className={styles.title}>About Me</h2> <h2 className={styles.title}>About Me</h2>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.imageContainer}> <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}> <div className={styles.socialLinks}>
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer" className={styles.socialLink}> {personalInfo.socials && personalInfo.socials.map((social, index) => {
<FaGithub /> const platform = Object.keys(social)[0];
</a> const url = social[platform];
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer" className={styles.socialLink}>
<FaLinkedin /> let IconComponent;
</a> switch (platform) {
<a href="https://twitter.com/yourhandle" target="_blank" rel="noopener noreferrer" className={styles.socialLink}> case 'github':
<FaTwitter /> IconComponent = FaGithub;
</a> break;
</div> case 'linkedin':
</div> 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}> <div className={styles.textContent}>
<h3 className={styles.greeting}> <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> </h3>
<p className={styles.bio}> <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, {personalInfo.about_me}
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 </p>
tech trends, I find immense joy in it all. <div className={styles.interests}>
</p> {personalInfo.interests && personalInfo.interests.map((interest, index) => (
<div className={styles.interests}> <span key={index} className={styles.interestTag}>{interest}</span>
<span className={styles.interestTag}>Tech Enthusiast</span> ))}
<span className={styles.interestTag}>Problem Solver</span> </div>
<span className={styles.interestTag}>Sports Lover</span> </div>
</div>
</div>
</div> </div>
<div className={styles.bottomSection}> <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) Download Resume (PDF)
</a> </a>
<button onClick={scrollToContact} className={styles.contactLink}> <button onClick={scrollToContact} className={styles.contactLink}>

10
src/components/contact/Contact.jsx
View file

@ -1,7 +1,7 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import styles from "./Contact.module.css"; import styles from "./Contact.module.css";
const Contact = () => { function Contact({data}) {
const [name, setName] = useState(""); const [name, setName] = useState("");
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
@ -41,6 +41,8 @@ const Contact = () => {
setMessage(""); setMessage("");
}; };
const personalInfo = data.length ? data[0] : {};
return ( return (
<section className={styles.contact} id="contact"> <section className={styles.contact} id="contact">
<div className={styles.container}> <div className={styles.container}>
@ -50,13 +52,13 @@ const Contact = () => {
<h3>Get in Touch</h3> <h3>Get in Touch</h3>
<p>Feel free to reach out for collaborations or just a friendly hello</p> <p>Feel free to reach out for collaborations or just a friendly hello</p>
<div className={styles.infoItem}> <div className={styles.infoItem}>
<strong>Location:</strong> City, Country <strong>Location:</strong> {personalInfo.location}
</div> </div>
<div className={styles.infoItem}> <div className={styles.infoItem}>
<strong>Email:</strong> your.email@example.com <strong>Email:</strong> {personalInfo.email}
</div> </div>
<div className={styles.infoItem}> <div className={styles.infoItem}>
<strong>Phone:</strong> +1 (123) 456-7890 <strong>Phone:</strong> {personalInfo.number}
</div> </div>
</div> </div>
<div className={styles.formColumn}> <div className={styles.formColumn}>

31
src/components/footer/Footer.jsx
View file

@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
import styles from "./Footer.module.css"; import styles from "./Footer.module.css";
import logo from "/assets/logos/logo.png"; import logo from "/assets/logos/logo.png";
function Footer() { function Footer({data}) {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const footerRef = useRef(null); const footerRef = useRef(null);
@ -29,6 +29,8 @@ function Footer() {
}; };
}, []); }, []);
const personalInfo = data.length ? data[0] : {};
return ( return (
<footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ""}`}> <footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ""}`}>
<div className={styles.content}> <div className={styles.content}>
@ -38,24 +40,23 @@ function Footer() {
</div> </div>
<div className={styles.contact}> <div className={styles.contact}>
<h3>Contact</h3> <h3>Contact</h3>
<p>Email: your.email@example.com</p> <p>Email: {personalInfo.email}</p>
<p>Phone: (123) 456-7890</p> <p>Phone: {personalInfo.number}</p>
</div> </div>
<div className={styles.social}> <div className={styles.social}>
<h3>Social</h3> <h3>Social</h3>
<a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer"> {personalInfo.socials && personalInfo.socials.map((social, index) => {
LinkedIn const platform = Object.keys(social)[0];
</a> return (
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer"> <a key={index} href={social[platform]} target="_blank" rel="noopener noreferrer">
GitHub {platform.charAt(0).toUpperCase() + platform.slice(1)}
</a> </a>
<a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer"> );
Twitter })}
</a> </div>
</div>
</div> </div>
<div className={styles.bottomSection}> <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) Download Resume (PDF)
</a> </a>
</div> </div>

11
src/components/hero/Hero.jsx
View file

@ -1,16 +1,17 @@
import React from "react"; import React from "react";
import styles from "./Hero.module.css"; 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 ( return (
<section className={styles.hero}> <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.content}>
<div className={styles.textContent}> <div className={styles.textContent}>
<h1 className={styles.name}>Murtadha Nisyif</h1> <h1 className={styles.name}>{personalInfo.name}</h1>
<h2 className={styles.title}>Software Engineer</h2> <h2 className={styles.title}>{personalInfo.title}</h2>
{/* <div className={styles.positions}> {/* <div className={styles.positions}>
<p>Current Position</p> <p>Current Position</p>
<p>Another Position</p> <p>Another Position</p>

2
version.txt
View file

@ -1 +1 @@
0.10.1 0.11.0