From e7ab307de08c28d419ef094e2d0a688e196074b0 Mon Sep 17 00:00:00 2001 From: Murtadha Date: Mon, 15 Jul 2024 14:53:36 -0400 Subject: [PATCH] Update logo placeholder with actual logo --- public/logos/logo.png | Bin 0 -> 12916 bytes src/components/footer/Footer.jsx | 109 +++++++------ src/components/footer/Footer.module.css | 134 ++++++++-------- src/components/header/Header.jsx | 3 +- src/components/header/Header.module.css | 202 +++++++++++++----------- 5 files changed, 242 insertions(+), 206 deletions(-) create mode 100644 public/logos/logo.png diff --git a/public/logos/logo.png b/public/logos/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..bc1aca4d76f7d87e1cb132bd812ad602d53925db GIT binary patch literal 12916 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 { - const observer = new IntersectionObserver( - ([entry]) => { - setIsVisible(entry.isIntersecting); - }, - { - root: null, - rootMargin: "0px", - threshold: 0.1 - } - ); + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + setIsVisible(entry.isIntersecting); + }, + { + root: null, + rootMargin: "0px", + threshold: 0.1, + } + ); - if (footerRef.current) { - observer.observe(footerRef.current); - } + if (footerRef.current) { + observer.observe(footerRef.current); + } - return () => { - if (footerRef.current) { - observer.unobserve(footerRef.current); - } - }; - }, []); + return () => { + if (footerRef.current) { + observer.unobserve(footerRef.current); + } + }; + }, []); - return ( - - ); + return ( + + ); } -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/footer/Footer.module.css b/src/components/footer/Footer.module.css index 06eaece..74e5cd1 100644 --- a/src/components/footer/Footer.module.css +++ b/src/components/footer/Footer.module.css @@ -1,99 +1,109 @@ .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; + 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); + opacity: 1; + transform: translateY(0); } .content { - width: 75%; - max-width: 1200px; - display: flex; - flex-direction: column; - align-items: center; + width: 75%; + max-width: 1200px; + display: flex; + flex-direction: column; + align-items: center; } .topSection { - display: flex; - justify-content: center; - width: 100%; - margin-bottom: 2rem; + 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, +.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; + /* margin-right: 40px; */ } -.contact h3, .social h3 { - margin-bottom: 10px; - color: #ff6600; +.logoImage { + width: 80px; /* Adjust this value to your desired logo size */ + height: 80px; /* Adjust this value to your desired logo size */ + object-fit: contain; +} + +.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; + display: block; + color: #fff; + text-decoration: none; + margin-bottom: 5px; + transition: color 0.3s ease; } .social a:hover { - color: #ff6600; + color: #ff6600; } .bottomSection { - text-align: center; - width: 100%; + 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; + 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; + background-color: #ff6600; + color: #000; } @media (max-width: 768px) { - .topSection { - flex-direction: column; - } + .topSection { + flex-direction: column; + } - .logo, .contact, .social { - width: 100%; - margin-bottom: 2rem; - padding: 0; - } + .logo, + .contact, + .social { + width: 100%; + margin-bottom: 2rem; + padding: 0; + } - .bottomSection { - margin-top: 1rem; - } -} \ No newline at end of file + .bottomSection { + margin-top: 1rem; + } +} diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 13aec59..5a522e1 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import styles from "./Header.module.css"; +import logo from "/logos/logo.png"; function Header() { const [isNavVisible, setIsNavVisible] = useState(false); @@ -12,7 +13,7 @@ function Header() {
- LOGO + MN logo
diff --git a/src/components/header/Header.module.css b/src/components/header/Header.module.css index 65a2c5f..4b1c119 100644 --- a/src/components/header/Header.module.css +++ b/src/components/header/Header.module.css @@ -1,140 +1,156 @@ .header { - position: fixed; - top: 0; - left: 0; - right: 0; - background-color: #000; - color: #fff; - padding: 10px 0; - z-index: 1000; + 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; + 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; + display: flex; + align-items: center; +} + +.logoImage { + width: 50px; /* Adjust this value to your desired logo size */ + height: 50px; /* Adjust this value to your desired logo size */ + object-fit: contain; } .nav { - display: flex; - align-items: center; + display: flex; + align-items: center; } .navList { - list-style-type: none; - padding: 0; - margin: 0; - display: flex; + list-style-type: none; + padding: 0; + margin: 0; + display: flex; } .navList li { - margin-left: 20px; + margin-left: 20px; } .navList li a { - color: #fff; - text-decoration: none; - padding: 5px 10px; - transition: color 0.3s ease; + color: #fff; + text-decoration: none; + padding: 5px 10px; + transition: color 0.3s ease; } .navList li a:hover { - color: #ff6600; + 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; + 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; + 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); + transform: rotate(45deg); } .hamburger.active span:nth-child(2) { - opacity: 0; + opacity: 0; } .hamburger.active span:nth-child(3) { - transform: rotate(-45deg); + transform: rotate(-45deg); } @media (max-width: 768px) { - .hamburger { - display: flex; - } + .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; - } + .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; - } + .navVisible { + opacity: 1; + pointer-events: auto; + } - .navList { - flex-direction: column; - align-items: center; - } + .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; - } + .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 { + 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; } + .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; - } -} \ No newline at end of file + .navList li a { + font-size: 1.5em; + padding: 10px 0; + } +}