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

Update logo placeholder with actual logo

Browse source
This commit is contained in:
Murtadha 2024-07-15 14:53:36 -04:00
parent f1faec46b4
commit e7ab307de0
5 changed files with 242 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/logos/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

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

@ -1,5 +1,6 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from "react";
import styles from './Footer.module.css'; import styles from "./Footer.module.css";
import logo from "/logos/logo.png";
function Footer() { function Footer() {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
@ -13,7 +14,7 @@ function Footer() {
{ {
root: null, root: null,
rootMargin: "0px", rootMargin: "0px",
threshold: 0.1 threshold: 0.1,
} }
); );
@ -29,11 +30,11 @@ function Footer() {
}, []); }, []);
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}>
<div className={styles.topSection}> <div className={styles.topSection}>
<div className={styles.logo}> <div className={styles.logo}>
LOGO <img src={logo} alt="MN logo" className={styles.logoImage} />
</div> </div>
<div className={styles.contact}> <div className={styles.contact}>
<h3>Contact</h3> <h3>Contact</h3>
@ -42,13 +43,21 @@ function Footer() {
</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">LinkedIn</a> <a href="https://linkedin.com/in/yourprofile" target="_blank" rel="noopener noreferrer">
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">GitHub</a> LinkedIn
<a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer">Twitter</a> </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> </div>
<div className={styles.bottomSection}> <div className={styles.bottomSection}>
<a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>Download Resume (PDF)</a> <a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>
Download Resume (PDF)
</a>
</div> </div>
</div> </div>
</footer> </footer>

20
src/components/footer/Footer.module.css
View file

@ -31,7 +31,9 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.logo, .contact, .social { .logo,
.contact,
.social {
flex: 1; flex: 1;
padding: 0 1rem; padding: 0 1rem;
text-align: center; text-align: center;
@ -41,11 +43,17 @@
} }
.logo { .logo {
font-size: 1.5em; /* margin-right: 40px; */
font-weight: bold;
} }
.contact h3, .social h3 { .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; margin-bottom: 10px;
color: #ff6600; color: #ff6600;
} }
@ -87,7 +95,9 @@
flex-direction: column; flex-direction: column;
} }
.logo, .contact, .social { .logo,
.contact,
.social {
width: 100%; width: 100%;
margin-bottom: 2rem; margin-bottom: 2rem;
padding: 0; padding: 0;

3
src/components/header/Header.jsx
View file

@ -1,5 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import styles from "./Header.module.css"; import styles from "./Header.module.css";
import logo from "/logos/logo.png";
function Header() { function Header() {
const [isNavVisible, setIsNavVisible] = useState(false); const [isNavVisible, setIsNavVisible] = useState(false);
@ -12,7 +13,7 @@ function Header() {
<header className={styles.header}> <header className={styles.header}>
<div className={styles.container}> <div className={styles.container}>
<div className={styles.logo}> <div className={styles.logo}>
<span>LOGO</span> <img src={logo} alt="MN logo" className={styles.logoImage} />
</div> </div>
<div className={`${styles.hamburger} ${isNavVisible ? styles.active : ""}`} onClick={toggleNav}> <div className={`${styles.hamburger} ${isNavVisible ? styles.active : ""}`} onClick={toggleNav}>
<span></span> <span></span>

30
src/components/header/Header.module.css
View file

@ -19,8 +19,14 @@
} }
.logo { .logo {
font-size: 1.5em; display: flex;
font-weight: bold; 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 { .nav {
@ -127,11 +133,21 @@
transform: translateY(0); transform: translateY(0);
} }
.navVisible .navList li:nth-child(1) { transition-delay: 0.1s; } .navVisible .navList li:nth-child(1) {
.navVisible .navList li:nth-child(2) { transition-delay: 0.2s; } transition-delay: 0.1s;
.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(2) {
.navVisible .navList li:nth-child(5) { transition-delay: 0.5s; } 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 { .navList li a {
font-size: 1.5em; font-size: 1.5em;