tben/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updates

Browse Source
This commit is contained in:
Tben
2023-07-20 21:21:46 +01:00
parent 55424a7d78
commit 164ad29628
40 changed files with 1500 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/general_layout/GeneralFooter.tsx
+6
View File
@@ -33,6 +33,12 @@ const GeneralFooter = () => {
>
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>
layouts/general_layout/GeneralHeader.tsx
+45 -17
View File
@@ -1,8 +1,10 @@
"use client";
import React from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { gsap } from "gsap";
import HeaderNav from "./HeaderNav";
/**
* General Header for all pages
@@ -10,6 +12,8 @@ import { gsap } from "gsap";
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
*/
@@ -33,10 +37,26 @@ const GeneralHeader = (): React.ReactElement => {
);
}, []);
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 relative z-10"
className="flex items-start justify-between gap-10 w-full py-4 md:py-10 z-10 fixed xl:sticky top-0"
>
<a
href="/"
@@ -51,21 +71,29 @@ const GeneralHeader = (): React.ReactElement => {
/>
</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>
<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 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>
);
};
layouts/general_layout/GeneralLayout.tsx
+4 -4
View File
@@ -6,7 +6,7 @@ import GeneralFooter from "./GeneralFooter";
import { gsap } from "gsap";
import BG from "./BG";
export const SiteContext = React.createContext({});
export const SiteContext: any = React.createContext({});
type GeneralLayoutProps = {
children: React.ReactNode;
@@ -46,9 +46,9 @@ const GeneralLayout = ({ children }: GeneralLayoutProps): ReactElement => {
<GeneralHeader />
<main
className="flex items-center flex-col w-full"
style={{
perspective: "800px",
}}
// style={{
// perspective: "800px",
// }}
>
{children}
</main>
layouts/general_layout/HeaderNav.tsx
+60
View File
@@ -0,0 +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;