Update logo placeholder with actual logo
This commit is contained in:
parent
f1faec46b4
commit
e7ab307de0
5 changed files with 242 additions and 206 deletions
|
|
@ -1,58 +1,67 @@
|
|||
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);
|
||||
const footerRef = useRef(null);
|
||||
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
|
||||
}
|
||||
);
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
return (
|
||||
<footer ref={footerRef} className={`${styles.footer} ${isVisible ? styles.visible : ""}`}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.topSection}>
|
||||
<div className={styles.logo}>
|
||||
<img src={logo} alt="MN logo" className={styles.logoImage} />
|
||||
</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;
|
||||
export default Footer;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
.bottomSection {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
.navList li a {
|
||||
font-size: 1.5em;
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue