updates
This commit is contained in:
Tben
@@ -0,0 +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;
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const GeneralFooter = () => {
|
||||
const date = new Date();
|
||||
return (
|
||||
<footer className='mt-10'>
|
||||
{/* <div className='flex-col flex'>
|
||||
<a href="/" className='text-xl font-bold mb-1'>Tben.me</a>
|
||||
</div> */}
|
||||
<span className='text-sm opacity-40'>Copyright © { date.getFullYear() } Tben.me. All Rights Reserved.</span>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default GeneralFooter
|
||||
@@ -0,0 +1,42 @@
|
||||
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="/">LinkedIn</a>
|
||||
<a href="/">Mail</a>
|
||||
<a href="/">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,45 +0,0 @@
|
||||
import React from 'react'
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
const GeneralHeader = () => {
|
||||
const router = useRouter();
|
||||
|
||||
function pushRouter(e) {
|
||||
e.preventDefault();
|
||||
let url = e.target.dataset.href;
|
||||
router.push(url);
|
||||
}
|
||||
|
||||
return (
|
||||
<header>
|
||||
<a className="logo-link-block" onClick={ () => {
|
||||
pushRouter("/")
|
||||
} }><h1>Tben.me</h1></a>
|
||||
<nav>
|
||||
<a href='/' data-href="/" onClick={ (e) => {
|
||||
pushRouter(e)
|
||||
} }>Home</a>
|
||||
|
||||
<a href='/about' data-href="/about" onClick={ (e) => {
|
||||
pushRouter(e)
|
||||
} }>About Me</a>
|
||||
|
||||
<a href='/work' data-href="/work" onClick={ (e) => {
|
||||
pushRouter(e)
|
||||
} }>My Work</a>
|
||||
|
||||
<a href='/blog' data-href="/blog" onClick={ (e) => {
|
||||
pushRouter(e)
|
||||
} }>Blog</a>
|
||||
|
||||
<a data-href="#" href='/documents/Benjamin-Toby-CV-7-27-2022.pdf' target="_blank">My Resume</a>
|
||||
|
||||
<a href='/contact' data-href="/contact" onClick={ (e) => {
|
||||
pushRouter(e)
|
||||
} }>Contact Me</a>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default GeneralHeader
|
||||
@@ -0,0 +1,73 @@
|
||||
import React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
|
||||
import { gsap } from "gsap";
|
||||
|
||||
/**
|
||||
* General Header for all pages
|
||||
*/
|
||||
const GeneralHeader = (): React.ReactElement => {
|
||||
const links: { title: string; url: string }[] = require("./links.json");
|
||||
|
||||
/**
|
||||
* 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,
|
||||
}
|
||||
);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header
|
||||
id="main-header"
|
||||
className="flex items-start justify-between gap-10 w-full py-4 md:py-10 relative z-10"
|
||||
>
|
||||
<a
|
||||
href="/"
|
||||
data-href="/"
|
||||
className="logo-link-block"
|
||||
>
|
||||
<Image
|
||||
src="/images/logo-white.svg"
|
||||
width={50}
|
||||
height={100}
|
||||
alt="Logo"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<nav>
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default GeneralHeader;
|
||||
@@ -1,94 +0,0 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import GeneralHeader from './GeneralHeader';
|
||||
import Head from "next/head"
|
||||
import GeneralFooter from './GeneralFooter';
|
||||
import { gsap } from "gsap";
|
||||
import threeJsAnimations from '../../functions/frontend/threeJsAnimations';
|
||||
|
||||
export const SiteContext = React.createContext();
|
||||
|
||||
const GeneralLayout = ({ children, pageName }) => {
|
||||
const [readyState, setReadyState] = React.useState(false);
|
||||
|
||||
// React.useEffect(() => {
|
||||
// setReadyState(true);
|
||||
// }, [readyState]);
|
||||
|
||||
React.useEffect(() => {
|
||||
// barba.init({
|
||||
// transitions: [{
|
||||
// name: 'default-transition',
|
||||
// leave() {
|
||||
// // create your stunning leave animation here
|
||||
// return gsap.to("main", {
|
||||
// opacity: 1,
|
||||
// duration: 1,
|
||||
// delay: 2
|
||||
// })
|
||||
// },
|
||||
// enter() {
|
||||
// // create your amazing enter animation here
|
||||
// return gsap.from("main", {
|
||||
// opacity: 0,
|
||||
// duration: 1,
|
||||
// delay: 2
|
||||
// })
|
||||
// }
|
||||
// }]
|
||||
// });
|
||||
|
||||
// window.addEventListener("load", () => {
|
||||
// })
|
||||
// setReadyState(true);
|
||||
|
||||
document.querySelectorAll("nav a").forEach((link) => {
|
||||
let locationRegex = new RegExp(`${window.location.pathname}.*?`);
|
||||
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,
|
||||
})
|
||||
|
||||
// gsap.to("#page-loader", {
|
||||
// opacity: 0,
|
||||
// duration: 0.5,
|
||||
// delay: 1,
|
||||
// pointerEvents: "none"
|
||||
// })
|
||||
|
||||
// document.getElementById("page-loader").style.opacity
|
||||
|
||||
threeJsAnimations();
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<SiteContext.Provider value={ { readyState, setReadyState } }>
|
||||
<Head>
|
||||
<meta name="keywords" content="UI/UX designer, Full Stack Web Developer, Web/graphic/motion designer, React Developer, NextJS developer, Node JS developer, Javascript Developer, Linux Ubuntu, DevOps, Nginx, MySQL developer, Freelancer" />
|
||||
</Head>
|
||||
|
||||
<div id='main-content-wrapper' style={ { opacity: 0 } }>
|
||||
<GeneralHeader />
|
||||
<main>
|
||||
{ children }
|
||||
</main>
|
||||
<GeneralFooter />
|
||||
<div className='fixed top-0 left-0 -z-10' id='homepage-animation-wrapper'></div>
|
||||
</div>
|
||||
|
||||
</SiteContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export default GeneralLayout
|
||||
@@ -0,0 +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 = 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;
|
||||
@@ -0,0 +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"
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user