Update logo placeholder with actual logo
This commit is contained in:
parent
f1faec46b4
commit
e7ab307de0
5 changed files with 242 additions and 206 deletions
BIN
public/logos/logo.png
Normal file
BIN
public/logos/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -1,58 +1,67 @@
|
||||||
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);
|
||||||
const footerRef = useRef(null);
|
const footerRef = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const observer = new IntersectionObserver(
|
const observer = new IntersectionObserver(
|
||||||
([entry]) => {
|
([entry]) => {
|
||||||
setIsVisible(entry.isIntersecting);
|
setIsVisible(entry.isIntersecting);
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
root: null,
|
root: null,
|
||||||
rootMargin: "0px",
|
rootMargin: "0px",
|
||||||
threshold: 0.1
|
threshold: 0.1,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
if (footerRef.current) {
|
if (footerRef.current) {
|
||||||
observer.observe(footerRef.current);
|
observer.observe(footerRef.current);
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (footerRef.current) {
|
if (footerRef.current) {
|
||||||
observer.unobserve(footerRef.current);
|
observer.unobserve(footerRef.current);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
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>
|
||||||
<p>Email: your.email@example.com</p>
|
<p>Email: your.email@example.com</p>
|
||||||
<p>Phone: (123) 456-7890</p>
|
<p>Phone: (123) 456-7890</p>
|
||||||
</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>
|
||||||
</div>
|
<a href="https://github.com/yourusername" target="_blank" rel="noopener noreferrer">
|
||||||
</div>
|
GitHub
|
||||||
<div className={styles.bottomSection}>
|
</a>
|
||||||
<a href="/path-to-your-resume.pdf" target="_blank" rel="noopener noreferrer" className={styles.resumeLink}>Download Resume (PDF)</a>
|
<a href="https://twitter.com/yourusername" target="_blank" rel="noopener noreferrer">
|
||||||
</div>
|
Twitter
|
||||||
</div>
|
</a>
|
||||||
</footer>
|
</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 {
|
.footer {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 40px 0;
|
padding: 40px 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(50px);
|
transform: translateY(50px);
|
||||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer.visible {
|
.footer.visible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
width: 75%;
|
width: 75%;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topSection {
|
.topSection {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo, .contact, .social {
|
.logo,
|
||||||
flex: 1;
|
.contact,
|
||||||
padding: 0 1rem;
|
.social {
|
||||||
text-align: center;
|
flex: 1;
|
||||||
display: flex;
|
padding: 0 1rem;
|
||||||
flex-direction: column;
|
text-align: center;
|
||||||
align-items: center;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
font-size: 1.5em;
|
/* margin-right: 40px; */
|
||||||
font-weight: bold;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact h3, .social h3 {
|
.logoImage {
|
||||||
margin-bottom: 10px;
|
width: 80px; /* Adjust this value to your desired logo size */
|
||||||
color: #ff6600;
|
height: 80px; /* Adjust this value to your desired logo size */
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact h3,
|
||||||
|
.social h3 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
color: #ff6600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social a {
|
.social a {
|
||||||
display: block;
|
display: block;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.social a:hover {
|
.social a:hover {
|
||||||
color: #ff6600;
|
color: #ff6600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottomSection {
|
.bottomSection {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resumeLink {
|
.resumeLink {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border: 1px solid #ff6600;
|
border: 1px solid #ff6600;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.resumeLink:hover {
|
.resumeLink:hover {
|
||||||
background-color: #ff6600;
|
background-color: #ff6600;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.topSection {
|
.topSection {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo, .contact, .social {
|
.logo,
|
||||||
width: 100%;
|
.contact,
|
||||||
margin-bottom: 2rem;
|
.social {
|
||||||
padding: 0;
|
width: 100%;
|
||||||
}
|
margin-bottom: 2rem;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.bottomSection {
|
.bottomSection {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -1,140 +1,156 @@
|
||||||
.header {
|
.header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navList {
|
.navList {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navList li {
|
.navList li {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navList li a {
|
.navList li a {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
transition: color 0.3s ease;
|
transition: color 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navList li a:hover {
|
.navList li a:hover {
|
||||||
color: #ff6600;
|
color: #ff6600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger span {
|
.hamburger span {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
height: 3px;
|
height: 3px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
transition: all 0.3s linear;
|
transition: all 0.3s linear;
|
||||||
position: relative;
|
position: relative;
|
||||||
transform-origin: 1px;
|
transform-origin: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.active span:first-child {
|
.hamburger.active span:first-child {
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.active span:nth-child(2) {
|
.hamburger.active span:nth-child(2) {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.active span:nth-child(3) {
|
.hamburger.active span:nth-child(3) {
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.hamburger {
|
.hamburger {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background-color: rgba(0, 0, 0, 0.9);
|
background-color: rgba(0, 0, 0, 0.9);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
transition: opacity 0.3s ease-out;
|
transition: opacity 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navVisible {
|
.navVisible {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navList {
|
.navList {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navList li {
|
.navList li {
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-20px);
|
transform: translateY(-20px);
|
||||||
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
|
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navVisible .navList li {
|
.navVisible .navList li {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
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;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue