Updates
This commit is contained in:
Benjamin Toby
@@ -1,46 +1,46 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { gsap } from "gsap";
|
||||
// import scrollTrigger from "gsap/ScrollTrigger";
|
||||
|
||||
const BG = () => {
|
||||
React.useEffect(() => {
|
||||
// gsap.registerPlugin(scrollTrigger);
|
||||
|
||||
gsap.to("#bg-blurred-image", {
|
||||
scrollTrigger: {
|
||||
scrub: 5,
|
||||
},
|
||||
y: 50,
|
||||
scale: 0.8,
|
||||
});
|
||||
|
||||
gsap.to("#bg-image", {
|
||||
scrollTrigger: {
|
||||
scrub: 2,
|
||||
},
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<img
|
||||
src="/images/rm378-07c-min.png"
|
||||
alt="bg-image"
|
||||
className="fixed top-0 left-0 w-full h-full object-cover z-[-2] p-[100px] opacity-20 blur-sm"
|
||||
id="bg-blurred-image"
|
||||
/>
|
||||
<img
|
||||
src="/images/rm378-07c-min.png"
|
||||
alt="bg-image"
|
||||
className="fixed top-0 left-0 w-full h-full object-cover z-[-1] p-[150px] opacity-5"
|
||||
id="bg-image"
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default BG;
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { gsap } from "gsap";
|
||||
// import scrollTrigger from "gsap/ScrollTrigger";
|
||||
|
||||
const BG = () => {
|
||||
React.useEffect(() => {
|
||||
// gsap.registerPlugin(scrollTrigger);
|
||||
|
||||
gsap.to("#bg-blurred-image", {
|
||||
scrollTrigger: {
|
||||
scrub: 5,
|
||||
},
|
||||
y: 50,
|
||||
scale: 0.8,
|
||||
});
|
||||
|
||||
gsap.to("#bg-image", {
|
||||
scrollTrigger: {
|
||||
scrub: 2,
|
||||
},
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<img
|
||||
src="/images/rm378-07c-min.png"
|
||||
alt="bg-image"
|
||||
className="fixed top-0 left-0 w-full h-full object-cover z-[-2] p-[100px] opacity-20 blur-sm"
|
||||
id="bg-blurred-image"
|
||||
/>
|
||||
<img
|
||||
src="/images/rm378-07c-min.png"
|
||||
alt="bg-image"
|
||||
className="fixed top-0 left-0 w-full h-full object-cover z-[-1] p-[150px] opacity-5"
|
||||
id="bg-image"
|
||||
/>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default BG;
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const GeneralFooter = () => {
|
||||
const date = new Date();
|
||||
return (
|
||||
<footer
|
||||
className="mt-10 w-full flex flex-col items-center py-20"
|
||||
style={{
|
||||
borderTop: "1px solid rgba(255,255,255,0.2)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-6xl w-full flex flex-wrap items-stretch gap-10">
|
||||
<a
|
||||
href="/"
|
||||
data-href="/"
|
||||
className="logo-link-block -mb-4"
|
||||
>
|
||||
<Image
|
||||
src="/images/logo-white.svg"
|
||||
width={50}
|
||||
height={100}
|
||||
alt="Logo"
|
||||
/>
|
||||
</a>
|
||||
<div className="flex flex-col items-start justify-between">
|
||||
<div className="flex-col flex items-start gap-1">
|
||||
<span className="opacity-50">Contact Me</span>
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="https://www.linkedin.com/in/benjamin-toby/"
|
||||
target="_blank"
|
||||
>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/BenjaminToby"
|
||||
target="_blank"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
<a href="mailto:benoti.san@gmail.com">Mail</a>
|
||||
<a href="tel:+2348123682346">Phone</a>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm opacity-40">Copyright © {date.getFullYear()} Tben.me. All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneralFooter;
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
const GeneralFooter = () => {
|
||||
const date = new Date();
|
||||
return (
|
||||
<footer
|
||||
className="mt-10 w-full flex flex-col items-center py-20"
|
||||
style={{
|
||||
borderTop: "1px solid rgba(255,255,255,0.2)",
|
||||
}}
|
||||
>
|
||||
<div className="max-w-6xl w-full flex flex-wrap items-stretch gap-10">
|
||||
<a
|
||||
href="/"
|
||||
data-href="/"
|
||||
className="logo-link-block -mb-4"
|
||||
>
|
||||
<Image
|
||||
src="/images/logo-white.svg"
|
||||
width={50}
|
||||
height={100}
|
||||
alt="Logo"
|
||||
/>
|
||||
</a>
|
||||
<div className="flex flex-col items-start justify-between">
|
||||
<div className="flex-col flex items-start gap-1">
|
||||
<span className="opacity-50">Contact Me</span>
|
||||
<div className="flex gap-4">
|
||||
<a
|
||||
href="https://www.linkedin.com/in/benjamin-toby/"
|
||||
target="_blank"
|
||||
>
|
||||
LinkedIn
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/BenjaminToby"
|
||||
target="_blank"
|
||||
>
|
||||
Github
|
||||
</a>
|
||||
<a href="mailto:benoti.san@gmail.com">Mail</a>
|
||||
<a href="tel:+2348123682346">Phone</a>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm opacity-40">Copyright © {date.getFullYear()} Tben.me. All Rights Reserved.</span>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneralFooter;
|
||||
|
||||
@@ -1,101 +1,101 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import { gsap } from "gsap";
|
||||
import HeaderNav from "./HeaderNav";
|
||||
|
||||
/**
|
||||
* General Header for all pages
|
||||
*/
|
||||
const GeneralHeader = (): React.ReactElement => {
|
||||
const links: { title: string; url: string }[] = require("./links.json");
|
||||
|
||||
const [mobileNavOpen, setMobileNavOpen] = React.useState<boolean>(false);
|
||||
|
||||
/**
|
||||
* Animate the header on mount
|
||||
*/
|
||||
React.useEffect(() => {
|
||||
gsap.fromTo(
|
||||
"#main-header",
|
||||
{
|
||||
y: -20,
|
||||
filter: "blur(100px)",
|
||||
webkitFilter: "blur(100px)",
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
filter: "none",
|
||||
webkitFilter: "none",
|
||||
delay: 0.5,
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (mobileNavOpen) {
|
||||
gsap.to("#mobile-nave-drawer", {
|
||||
opacity: 1,
|
||||
pointerEvents: "all",
|
||||
duration: 0.5,
|
||||
});
|
||||
} else {
|
||||
gsap.to("#mobile-nave-drawer", {
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
duration: 0.5,
|
||||
});
|
||||
}
|
||||
}, [mobileNavOpen]);
|
||||
|
||||
return (
|
||||
<header
|
||||
id="main-header"
|
||||
className="flex items-start justify-between gap-10 w-full py-4 md:py-10 z-10 fixed xl:sticky top-0"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
data-href="/"
|
||||
className="logo-link-block scale-90 sm:scale-100"
|
||||
>
|
||||
<Image
|
||||
src="/images/logo-white.svg"
|
||||
width={50}
|
||||
height={100}
|
||||
alt="Logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<HeaderNav />
|
||||
|
||||
<button
|
||||
className="p-2 w-14 h-14 rounded-full flex flex-col items-center justify-center gap-2 hover:bg-[white]/90 xl:hidden fixed top-[35px] right-10 z-10 -rotate-45"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setMobileNavOpen(!mobileNavOpen);
|
||||
}}
|
||||
>
|
||||
<div className="w-8 h-1 rounded-full bg-[black]"></div>
|
||||
<div className="w-8 h-1 rounded-full bg-[black]"></div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="mobile-nave-drawer"
|
||||
className="flex xl:hidden flex-col fixed top-0 right-0 w-screen max-w-[400px] h-screen overflow-auto bg-[black] p-8"
|
||||
style={{
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
<HeaderNav mobile={true} />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneralHeader;
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
|
||||
import { gsap } from "gsap";
|
||||
import HeaderNav from "./HeaderNav";
|
||||
|
||||
/**
|
||||
* General Header for all pages
|
||||
*/
|
||||
const GeneralHeader = (): React.ReactElement => {
|
||||
const links: { title: string; url: string }[] = require("./links.json");
|
||||
|
||||
const [mobileNavOpen, setMobileNavOpen] = React.useState<boolean>(false);
|
||||
|
||||
/**
|
||||
* Animate the header on mount
|
||||
*/
|
||||
React.useEffect(() => {
|
||||
gsap.fromTo(
|
||||
"#main-header",
|
||||
{
|
||||
y: -20,
|
||||
filter: "blur(100px)",
|
||||
webkitFilter: "blur(100px)",
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
filter: "none",
|
||||
webkitFilter: "none",
|
||||
delay: 0.5,
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (mobileNavOpen) {
|
||||
gsap.to("#mobile-nave-drawer", {
|
||||
opacity: 1,
|
||||
pointerEvents: "all",
|
||||
duration: 0.5,
|
||||
});
|
||||
} else {
|
||||
gsap.to("#mobile-nave-drawer", {
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
duration: 0.5,
|
||||
});
|
||||
}
|
||||
}, [mobileNavOpen]);
|
||||
|
||||
return (
|
||||
<header
|
||||
id="main-header"
|
||||
className="flex items-start justify-between gap-10 w-full py-4 md:py-10 z-10 fixed xl:sticky top-0"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
data-href="/"
|
||||
className="logo-link-block scale-90 sm:scale-100"
|
||||
>
|
||||
<Image
|
||||
src="/images/logo-white.svg"
|
||||
width={50}
|
||||
height={100}
|
||||
alt="Logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<HeaderNav />
|
||||
|
||||
<button
|
||||
className="p-2 w-14 h-14 rounded-full flex flex-col items-center justify-center gap-2 hover:bg-[white]/90 xl:hidden fixed top-[35px] right-10 z-10 -rotate-45"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setMobileNavOpen(!mobileNavOpen);
|
||||
}}
|
||||
>
|
||||
<div className="w-8 h-1 rounded-full bg-[black]"></div>
|
||||
<div className="w-8 h-1 rounded-full bg-[black]"></div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
id="mobile-nave-drawer"
|
||||
className="flex xl:hidden flex-col fixed top-0 right-0 w-screen max-w-[400px] h-screen overflow-auto bg-[black] p-8"
|
||||
style={{
|
||||
opacity: 0,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
<HeaderNav mobile={true} />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneralHeader;
|
||||
|
||||
@@ -1,62 +1,62 @@
|
||||
"use client";
|
||||
|
||||
import React, { ReactElement } from "react";
|
||||
import GeneralHeader from "./GeneralHeader";
|
||||
import GeneralFooter from "./GeneralFooter";
|
||||
import { gsap } from "gsap";
|
||||
import BG from "./BG";
|
||||
|
||||
export const SiteContext: any = React.createContext({});
|
||||
|
||||
type GeneralLayoutProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const GeneralLayout = ({ children }: GeneralLayoutProps): ReactElement => {
|
||||
const [readyState, setReadyState] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const links: NodeListOf<HTMLAnchorElement> | null = document.querySelectorAll("nav a");
|
||||
|
||||
links?.forEach((link) => {
|
||||
if (link.dataset.href === window.location.pathname) {
|
||||
link.classList.add("active-page");
|
||||
}
|
||||
|
||||
if (window.location.pathname.match(new RegExp(`${link.dataset.href}\\/.*`))) {
|
||||
link.classList.add("active-page");
|
||||
}
|
||||
});
|
||||
|
||||
gsap.to("#main-content-wrapper", {
|
||||
opacity: 1,
|
||||
duration: 2,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SiteContext.Provider value={{ readyState, setReadyState }}>
|
||||
<div
|
||||
id="main-content-wrapper"
|
||||
style={{
|
||||
opacity: 0,
|
||||
}}
|
||||
className="px-4 md:px-10"
|
||||
>
|
||||
<GeneralHeader />
|
||||
<main
|
||||
className="flex items-center flex-col w-full"
|
||||
// style={{
|
||||
// perspective: "800px",
|
||||
// }}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
<GeneralFooter />
|
||||
</div>
|
||||
<BG />
|
||||
</SiteContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneralLayout;
|
||||
"use client";
|
||||
|
||||
import React, { ReactElement } from "react";
|
||||
import GeneralHeader from "./GeneralHeader";
|
||||
import GeneralFooter from "./GeneralFooter";
|
||||
import { gsap } from "gsap";
|
||||
import BG from "./BG";
|
||||
|
||||
export const SiteContext: any = React.createContext({});
|
||||
|
||||
type GeneralLayoutProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const GeneralLayout = ({ children }: GeneralLayoutProps): ReactElement => {
|
||||
const [readyState, setReadyState] = React.useState(false);
|
||||
|
||||
React.useEffect(() => {
|
||||
const links: NodeListOf<HTMLAnchorElement> | null = document.querySelectorAll("nav a");
|
||||
|
||||
links?.forEach((link) => {
|
||||
if (link.dataset.href === window.location.pathname) {
|
||||
link.classList.add("active-page");
|
||||
}
|
||||
|
||||
if (window.location.pathname.match(new RegExp(`${link.dataset.href}\\/.*`))) {
|
||||
link.classList.add("active-page");
|
||||
}
|
||||
});
|
||||
|
||||
gsap.to("#main-content-wrapper", {
|
||||
opacity: 1,
|
||||
duration: 2,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<SiteContext.Provider value={{ readyState, setReadyState }}>
|
||||
<div
|
||||
id="main-content-wrapper"
|
||||
style={{
|
||||
opacity: 0,
|
||||
}}
|
||||
className="px-4 md:px-10"
|
||||
>
|
||||
<GeneralHeader />
|
||||
<main
|
||||
className="flex items-center flex-col w-full"
|
||||
// style={{
|
||||
// perspective: "800px",
|
||||
// }}
|
||||
>
|
||||
{children}
|
||||
</main>
|
||||
<GeneralFooter />
|
||||
</div>
|
||||
<BG />
|
||||
</SiteContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneralLayout;
|
||||
|
||||
@@ -1,60 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { gsap } from "gsap";
|
||||
|
||||
/**
|
||||
* General Header for all pages
|
||||
*/
|
||||
const HeaderNav = ({ mobile }: { mobile?: boolean }): React.ReactElement => {
|
||||
const links: { title: string; url: string }[] = require("./links.json");
|
||||
|
||||
return (
|
||||
<nav className={"items-start xl:items-center gap-x-6 gap-y-2 xl:flex-row" + (mobile ? " flex-col" : " hidden xl:flex")}>
|
||||
{links.map((link: { title: string; url: string; download?: boolean }, index) => {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={link.url}
|
||||
data-href={link.url}
|
||||
className="text-lg"
|
||||
download={link.download}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
|
||||
<span className="opacity-20">|</span>
|
||||
|
||||
<div className="flex items-start xl:items-center gap-4 flex-col xl:flex-row">
|
||||
<a
|
||||
href="https://github.com/BenjaminToby"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/images/github-white.png"
|
||||
alt="Benjamin Toby Github"
|
||||
width={20}
|
||||
height={20}
|
||||
className="flex items-center"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/benjamin-toby/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/images/linkedin-white.png"
|
||||
alt="Benjamin Toby Github"
|
||||
width={20}
|
||||
height={20}
|
||||
className="flex items-center"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderNav;
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { gsap } from "gsap";
|
||||
|
||||
/**
|
||||
* General Header for all pages
|
||||
*/
|
||||
const HeaderNav = ({ mobile }: { mobile?: boolean }): React.ReactElement => {
|
||||
const links: { title: string; url: string }[] = require("./links.json");
|
||||
|
||||
return (
|
||||
<nav className={"items-start xl:items-center gap-x-6 gap-y-2 xl:flex-row" + (mobile ? " flex-col" : " hidden xl:flex")}>
|
||||
{links.map((link: { title: string; url: string; download?: boolean }, index) => {
|
||||
return (
|
||||
<a
|
||||
key={index}
|
||||
href={link.url}
|
||||
data-href={link.url}
|
||||
className="text-lg"
|
||||
download={link.download}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
|
||||
<span className="opacity-20">|</span>
|
||||
|
||||
<div className="flex items-start xl:items-center gap-4 flex-col xl:flex-row">
|
||||
<a
|
||||
href="https://github.com/BenjaminToby"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/images/github-white.png"
|
||||
alt="Benjamin Toby Github"
|
||||
width={20}
|
||||
height={20}
|
||||
className="flex items-center"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/in/benjamin-toby/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
src="/images/linkedin-white.png"
|
||||
alt="Benjamin Toby Github"
|
||||
width={20}
|
||||
height={20}
|
||||
className="flex items-center"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderNav;
|
||||
|
||||
@@ -1,27 +1,27 @@
|
||||
[
|
||||
{
|
||||
"title": "Home",
|
||||
"url": "/"
|
||||
},
|
||||
{
|
||||
"title": "About Me",
|
||||
"url": "/about"
|
||||
},
|
||||
{
|
||||
"title": "My Work",
|
||||
"url": "/work"
|
||||
},
|
||||
{
|
||||
"title": "My Resume",
|
||||
"url": "/documents/Resume-Benjamin-Toby-Linkedin.pdf",
|
||||
"download": true
|
||||
},
|
||||
{
|
||||
"title": "Blog",
|
||||
"url": "/blog"
|
||||
},
|
||||
{
|
||||
"title": " Contact Me",
|
||||
"url": "/contact"
|
||||
}
|
||||
]
|
||||
[
|
||||
{
|
||||
"title": "Home",
|
||||
"url": "/"
|
||||
},
|
||||
{
|
||||
"title": "About Me",
|
||||
"url": "/about"
|
||||
},
|
||||
{
|
||||
"title": "My Work",
|
||||
"url": "/work"
|
||||
},
|
||||
{
|
||||
"title": "My Resume",
|
||||
"url": "/documents/Resume-Benjamin-Toby-Linkedin.pdf",
|
||||
"download": true
|
||||
},
|
||||
{
|
||||
"title": "Blog",
|
||||
"url": "/blog"
|
||||
},
|
||||
{
|
||||
"title": " Contact Me",
|
||||
"url": "/contact"
|
||||
}
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user