Initial commit

src/components/education/Education.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import styles from './Education.module.css';
+
+const educationData = [
+  {
+    degree: "BACHELOR OF COMPUTER ENGINEERING",
+    institution: "University of Guelph",
+    duration: "2018 - 2023",
+    description: "As a graduate in Computer Engineering, my expertise encompasses a wide range of skills essential for modern computing systems. This includes circuit design and development, hardware integration, and system-level design integration. I am well-versed in the science and tools required for designing, constructing, implementing, and maintaining both software and hardware components in computing systems.",
+    courses: [
+      "Data Structures and Algorithms",
+      "Computer Networks",
+      "Operating Systems",
+      "Digital Systems Design",
+      "Embedded Systems Programming"
+    ],
+    achievements: [
+      "Dean's Honor List for 4 consecutive years",
+      "Capstone Project Winner: Innovative IoT Solution",
+      "Published paper on 'Efficient Algorithms for Edge Computing' in IEEE conference"
+    ]
+  },
+  // Add more education entries if needed
+];
+
+function Education() {
+  return (
+    <section className={styles.education}>
+      <h2 className={styles.sectionTitle}>Education</h2>
+      {educationData.map((edu, index) => (
+        <div key={index} className={styles.entry}>
+          <div className={styles.content}>
+            <h3 className={styles.degree}>{edu.degree}</h3>
+            <p className={styles.institution}>
+              {edu.institution} <span className={styles.duration}>| {edu.duration}</span>
+            </p>
+            <p className={styles.description}>{edu.description}</p>
+            <div className={styles.additionalInfo}>
+              <div className={styles.courses}>
+                <h4>Relevant Courses</h4>
+                <ul>
+                  {edu.courses.map((course, i) => (
+                    <li key={i}>{course}</li>
+                  ))}
+                </ul>
+              </div>
+              <div className={styles.achievements}>
+                <h4>Achievements</h4>
+                <ul>
+                  {edu.achievements.map((achievement, i) => (
+                    <li key={i}>{achievement}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export default Education;

src/components/education/Education.module.css

@@ -0,0 +1,103 @@
+:root {
+    --accent-color: #FF6B00; /* Change this to your preferred accent color */
+  }
+  
+  .education {
+    padding: 50px 10%;
+    background-color: #ffffff;
+    position: relative;
+  }
+  
+  .sectionTitle {
+    text-align: left;
+    font-size: 2.5rem;
+    margin-bottom: 30px;
+    color: #333;
+  }
+  
+  .entry {
+    position: relative;
+    padding-left: 20px;
+    margin-bottom: 60px;
+  }
+  
+  .entry::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 2px;
+    height: 100%; /* This will make the line extend the full height of the entry */
+    background-color: var(--accent-color);
+  }
+  
+  .content {
+    padding-left: 20px;
+  }
+  
+  .degree {
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: var(--accent-color);
+    margin-bottom: 5px;
+  }
+  
+  .institution {
+    font-size: 1.1rem;
+    margin-bottom: 10px;
+  }
+  
+  .duration {
+    color: #666;
+  }
+  
+  .description {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: #333;
+    margin-bottom: 20px;
+  }
+  
+  .additionalInfo {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+  }
+  
+  .courses, .achievements {
+    flex: 1;
+  }
+  
+  .courses h4, .achievements h4 {
+    font-size: 1.1rem;
+    color: var(--accent-color);
+    margin-bottom: 10px;
+  }
+  
+  .courses ul, .achievements ul {
+    padding-left: 20px;
+    margin: 0;
+  }
+  
+  .courses li, .achievements li {
+    font-size: 0.9rem;
+    margin-bottom: 5px;
+  }
+  
+  @media (max-width: 768px) {
+    .education {
+      padding: 30px 5%;
+    }
+  
+    .content {
+      padding-left: 15px;
+    }
+  
+    .additionalInfo {
+      flex-direction: column;
+    }
+  
+    .courses, .achievements {
+      margin-bottom: 20px;
+    }
+  }

src/components/footer/Footer.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './Footer.module.css';
+
+function Footer() {
+  const [isVisible, setIsVisible] = useState(false);
+  const footerRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1
+      }
+    );
+
+    if (footerRef.current) {
+      observer.observe(footerRef.current);
+    }
+
+    return () => {
+      if (footerRef.current) {
+        observer.unobserve(footerRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ''}`}>
+      <div className={styles.content}>
+        <div className={styles.topSection}>
+          <div className={styles.logo}>
+            LOGO
+          </div>
+          <div className={styles.contact}>
+            <h3>Contact</h3>
+            <p>Email: your.email@example.com</p>
+            <p>Phone: (123) 456-7890</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>
+        </div>
+        <div className={styles.bottomSection}>
+          <a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>Download Resume (PDF)</a>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

src/components/footer/Footer.module.css

@@ -0,0 +1,99 @@
+.footer {
+  background-color: #000;
+  color: #fff;
+  padding: 40px 0;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transform: translateY(50px);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.footer.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.content {
+  width: 75%;
+  max-width: 1200px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.topSection {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 2rem;
+}
+
+.logo, .contact, .social {
+  flex: 1;
+  padding: 0 1rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.contact h3, .social h3 {
+  margin-bottom: 10px;
+  color: #ff6600;
+}
+
+.social a {
+  display: block;
+  color: #fff;
+  text-decoration: none;
+  margin-bottom: 5px;
+  transition: color 0.3s ease;
+}
+
+.social a:hover {
+  color: #ff6600;
+}
+
+.bottomSection {
+  text-align: center;
+  width: 100%;
+}
+
+.resumeLink {
+  color: #fff;
+  text-decoration: none;
+  padding: 10px 20px;
+  border: 1px solid #ff6600;
+  border-radius: 5px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+  display: inline-block;
+}
+
+.resumeLink:hover {
+  background-color: #ff6600;
+  color: #000;
+}
+
+@media (max-width: 768px) {
+  .topSection {
+    flex-direction: column;
+  }
+
+  .logo, .contact, .social {
+    width: 100%;
+    margin-bottom: 2rem;
+    padding: 0;
+  }
+
+  .bottomSection {
+    margin-top: 1rem;
+  }
+}

src/components/header/Header.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react'
+import styles from './Header.module.css'
+
+function Header() {
+  const [isNavVisible, setIsNavVisible] = useState(false);
+
+  const toggleNav = () => {
+    setIsNavVisible(!isNavVisible);
+  };
+
+  return (
+    <header className={styles.header}>
+      <div className={styles.container}>
+        <div className={styles.logo}>
+          <span>LOGO</span>
+        </div>
+        <div className={`${styles.hamburger} ${isNavVisible ? styles.active : ''}`} onClick={toggleNav}>
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+        <nav className={`${styles.nav} ${isNavVisible ? styles.navVisible : ''}`}>
+          <ul className={styles.navList}>
+            <li><a href="#home" onClick={toggleNav}>Home</a></li>
+            <li><a href="#education" onClick={toggleNav}>Education</a></li>
+            <li><a href="#experience" onClick={toggleNav}>Experience</a></li>
+            <li><a href="#projects" onClick={toggleNav}>Projects</a></li>
+            <li><a href="#about" onClick={toggleNav}>About</a></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/header/Header.module.css

@@ -0,0 +1,140 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #000;
+  color: #fff;
+  padding: 10px 0;
+  z-index: 1000;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.nav {
+  display: flex;
+  align-items: center;
+}
+
+.navList {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+.navList li {
+  margin-left: 20px;
+}
+
+.navList li a {
+  color: #fff;
+  text-decoration: none;
+  padding: 5px 10px;
+  transition: color 0.3s ease;
+}
+
+.navList li a:hover {
+  color: #ff6600;
+}
+
+.hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 30px;
+  height: 25px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  z-index: 10;
+}
+
+.hamburger span {
+  width: 30px;
+  height: 3px;
+  background: #fff;
+  border-radius: 10px;
+  transition: all 0.3s linear;
+  position: relative;
+  transform-origin: 1px;
+}
+
+.hamburger.active span:first-child {
+  transform: rotate(45deg);
+}
+
+.hamburger.active span:nth-child(2) {
+  opacity: 0;
+}
+
+.hamburger.active span:nth-child(3) {
+  transform: rotate(-45deg);
+}
+
+@media (max-width: 768px) {
+  .hamburger {
+    display: flex;
+  }
+
+  .nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-out;
+  }
+
+  .navVisible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .navList {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .navList li {
+    margin: 15px 0;
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+  }
+
+  .navVisible .navList li {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .navVisible .navList li:nth-child(1) { transition-delay: 0.1s; }
+  .navVisible .navList li:nth-child(2) { transition-delay: 0.2s; }
+  .navVisible .navList li:nth-child(3) { transition-delay: 0.3s; }
+  .navVisible .navList li:nth-child(4) { transition-delay: 0.4s; }
+  .navVisible .navList li:nth-child(5) { transition-delay: 0.5s; }
+
+  .navList li a {
+    font-size: 1.5em;
+    padding: 10px 0;
+  }
+}

src/components/hero/Hero.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './Hero.module.css';
+
+function Hero() {
+  return (
+    <section className={styles.hero}>
+      <img src="./pp.jpg" alt="Murtadha Nisyif" className={styles.backgroundImage} />
+      <div className={styles.content}>
+        <div className={styles.textContent}>
+          <h1 className={styles.name}>Your Name</h1>
+          <h2 className={styles.title}>Your Main Title</h2>
+          <div className={styles.positions}>
+            <p>Current Position</p>
+            <p>Another Position</p>
+            <p>Yet Another Position</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Hero;

src/components/hero/Hero.module.css

@@ -0,0 +1,88 @@
+@keyframes gradientBG {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+  
+  .hero {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+    background: linear-gradient(-45deg, #0E0E0E, #1A1A1A, #2C2C2C, #0E0E0E);
+    background-size: 400% 400%;
+    animation: gradientBG 15s ease infinite;
+  }
+  
+  .backgroundImage {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0.3; /* Adjust this value to change the image transparency */
+    z-index: 1;
+  }
+  
+  .content {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .textContent {
+    padding-left: 5%;
+    max-width: 60%;
+  }
+  
+  .name {
+    font-size: 4rem;
+    margin-bottom: 0.5rem;
+    color: #FFFFFF;
+  }
+  
+  .title {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: #CCCCCC;
+  }
+  
+  .positions p {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+    color: #999999;
+  }
+  
+  @media (max-width: 768px) {
+    .content {
+      flex-direction: column;
+      text-align: center;
+    }
+  
+    .textContent {
+      padding: 0 5%;
+      max-width: 100%;
+    }
+  
+    .name {
+      font-size: 3rem;
+    }
+  
+    .title {
+      font-size: 2rem;
+    }
+  }