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

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

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

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

@ -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() {
<header className={styles.header}>
<div className={styles.container}>
<div className={styles.logo}>
<span>LOGO</span>
<img src={logo} alt="MN logo" className={styles.logoImage} />
</div>
<div className={`${styles.hamburger} ${isNavVisible ? styles.active : ""}`} onClick={toggleNav}>
<span></span>

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

@ -19,8 +19,14 @@
}
.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 {
@ -127,11 +133,21 @@
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;