This commit is contained in:
Tben
2022-06-04 08:26:53 +01:00
parent cb7af35bdc
commit 71128aee00
9 changed files with 165 additions and 56 deletions
+14 -6
View File
@@ -1,15 +1,23 @@
import React from 'react'
import { useRouter } from 'next/router';
const GeneralHeader = () => {
const router = useRouter();
function pushRouter(e) {
let url = e.target.dataset.href;
router.push(url);
}
return (
<header>
<a href="/" className="logo-link-block"><h1>Tben.me</h1></a>
<a className="logo-link-block" onClick={ () => { pushRouter("/") } }><h1>Tben.me</h1></a>
<nav>
<a href="/">Home</a>
<a href="/about">About Me</a>
<a href="/work">My Work</a>
<a href='/documents/Benjamin_Toby_CV-updated.pdf' target="_blank">My Resume</a>
<a href="/contact">Contact Me</a>
<a data-href="/" onClick={ (e) => { pushRouter(e) } }>Home</a>
<a data-href="/about" onClick={ (e) => { pushRouter(e) } }>About Me</a>
<a data-href="/work" onClick={ (e) => { pushRouter(e) } }>My Work</a>
<a data-href="#" href='/documents/Benjamin_Toby_CV-updated.pdf' target="_blank">My Resume</a>
<a data-href="/contact" onClick={ (e) => { pushRouter(e) } }>Contact Me</a>
</nav>
</header>
)
+14 -9
View File
@@ -5,9 +5,14 @@ import GeneralFooter from './GeneralFooter';
import { gsap } from "gsap";
import threeJsAnimations from '../../functions/frontend/threeJsAnimations';
const GeneralLayout = ({ children, pageName }) => {
export const SiteContext = React.createContext();
const [readyState, setReadyState] = React.useState(false)
const GeneralLayout = ({ children, pageName }) => {
const [readyState, setReadyState] = React.useState(false);
// React.useEffect(() => {
// setReadyState(true);
// }, [readyState]);
React.useEffect(() => {
// barba.init({
@@ -38,7 +43,7 @@ const GeneralLayout = ({ children, pageName }) => {
document.querySelectorAll("nav a").forEach((link) => {
let locationRegex = new RegExp(`${window.location.pathname}.*?`);
if (link.pathname === window.location.pathname) {
if (link.dataset.href === window.location.pathname) {
link.classList.add("active-page");
}
});
@@ -58,19 +63,19 @@ const GeneralLayout = ({ children, pageName }) => {
// document.getElementById("page-loader").style.opacity
threeJsAnimations();
// setReadyState(true);
}, [])
return (
<Fragment>
<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='page-loader' className='fixed w-screen h-screen bg-black flex items-center justify-center top-0 left-0' style={ { zIndex: 2000 } }>
<span className='text-xl'>Tben Loading ...</span>
</div> */}
<div id='main-content-wrapper' style={ { opacity: 0 } }>
<GeneralHeader />
<main>
@@ -79,7 +84,7 @@ const GeneralLayout = ({ children, pageName }) => {
<GeneralFooter />
</div>
</Fragment>
</SiteContext.Provider>
)
}