Cayden Website 2.0: Rewrite with t3code & hand
This commit is contained in:
Cayden Schwechten
parent
75a0e8f5fc
commit
243527af9f
34 changed files with 1652 additions and 1001 deletions
21
components/layout/layout-footer.tsx
Normal file
21
components/layout/layout-footer.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import { site } from '@/lib/site';
|
||||
|
||||
const Footer = () => (
|
||||
<footer className="border-t border-white/10 bg-obsidian/40 backdrop-blur-sm">
|
||||
<div className="container-page flex items-center justify-between py-6 text-xs text-ink/65">
|
||||
<p>
|
||||
© {new Date().getFullYear()} {site.name}
|
||||
</p>
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="transition-colors hover:text-aurora"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -1,68 +1,103 @@
|
|||
'use client'
|
||||
'use client';
|
||||
|
||||
import React, {useState} from 'react'
|
||||
import Image from 'next/image'
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Logo from "../../public/borb.png"
|
||||
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import Logo from '@/public/borb.png';
|
||||
import { nav, site } from '@/lib/site';
|
||||
|
||||
const Header = () => {
|
||||
const [navbar, setNavbar] = useState(false);
|
||||
const [open, setOpen] = useState(false);
|
||||
const close = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="font-poppins bg-polar-night-light z-10">
|
||||
<div className="justify-between px-2 lg:px-0 mx-auto lg:max-w-7xl md:items-center md:flex md:px-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between md:block">
|
||||
<div className='flex items-center justify-between md:py-3 gap-10'>
|
||||
<Link href={"/"} className="flex flex-col items-center gap-0 leading-none">
|
||||
<Image src={Logo} width={100} alt='Logo'/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
className="p-3 text-gray-700 rounded-md outline-none focus:border-gray-400 border-2 focus:border bg-nord-10"
|
||||
onClick={() => setNavbar(!navbar)}>
|
||||
{navbar ? (
|
||||
<div className="bar text-snow-storm"></div>
|
||||
) : (
|
||||
<div className="close text-snow-storm"></div>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr className='md:opacity-0 md:pt-3'></hr>
|
||||
<div>
|
||||
<div
|
||||
className={`flex-1 justify-self-center md:block md:pb-0 md:mt-0 ${navbar ? 'p-12 md:p-0 block' : 'hidden'}`}>
|
||||
<ul className=" md:h-auto items-center justify-center md:flex">
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 md:px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="/" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-52 md:px-0'>Home</Link>
|
||||
</li>
|
||||
return (
|
||||
<header className="sticky top-0 z-50 border-b border-white/10 bg-obsidian/45 backdrop-blur-md">
|
||||
<div className="container-page flex h-16 items-center justify-between">
|
||||
<Link
|
||||
href="/"
|
||||
onClick={close}
|
||||
className="flex items-center gap-2.5 text-sm font-medium tracking-tight text-ink"
|
||||
aria-label="Home"
|
||||
>
|
||||
<Image
|
||||
src={Logo}
|
||||
alt=""
|
||||
width={40}
|
||||
height={40}
|
||||
loading="eager"
|
||||
className="h-9 w-9 object-contain"
|
||||
/>
|
||||
<span>{site.name}</span>
|
||||
</Link>
|
||||
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="/blog" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-52 md:px-0'>Blog</Link>
|
||||
</li>
|
||||
<nav
|
||||
aria-label="Primary"
|
||||
className="hidden items-center gap-7 text-sm md:flex"
|
||||
>
|
||||
{nav.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className="text-ink/75 transition-colors hover:text-ink"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="border-l border-white/15 pl-6 text-aurora transition-colors hover:text-crest"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-9 w-9 place-items-center border border-white/15 text-ink hover:border-aurora md:hidden"
|
||||
aria-expanded={open}
|
||||
aria-controls="mobile-nav"
|
||||
aria-label={open ? 'Close menu' : 'Open menu'}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
>
|
||||
{open ? (
|
||||
<XMarkIcon className="h-4 w-4" aria-hidden />
|
||||
) : (
|
||||
<Bars3Icon className="h-4 w-4" aria-hidden />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="https://gitlab.com/caydens" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-48 md:px-0'>GitLab</Link>
|
||||
</li>
|
||||
{open && (
|
||||
<nav
|
||||
id="mobile-nav"
|
||||
aria-label="Mobile"
|
||||
className="flex flex-col border-t border-white/10 bg-obsidian/90 backdrop-blur-md md:hidden"
|
||||
>
|
||||
{nav.map((item) => (
|
||||
<a
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
onClick={close}
|
||||
className="border-b border-white/10 px-6 py-3.5 text-sm text-ink/80 hover:bg-white/5 hover:text-ink"
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
<a
|
||||
href={site.gitlab}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="px-6 py-3.5 text-sm text-aurora hover:bg-white/5"
|
||||
>
|
||||
GitLab ↗
|
||||
</a>
|
||||
</nav>
|
||||
)}
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
<li className="text-xl text-snow-storm py-2 my-2 md:my-0 px-6 text-center md:border-b-0 border-snow-storm-dark hover:text-nord-12 transition duration-250">
|
||||
<Link href="/contact" onClick={() => setNavbar(!navbar)}
|
||||
className='sm:px-48 md:px-0'>Contact</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default Header
|
||||
export default Header;
|
||||
|
|
|
|||
28
components/layout/page-background.tsx
Normal file
28
components/layout/page-background.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import GradientWaves from '@/components/GradientWaves';
|
||||
|
||||
// React Bits GradientWaves "Aurora" preset, tuned to fill the viewport.
|
||||
const PageBackground = () => (
|
||||
<div aria-hidden className="fixed inset-0 -z-10 overflow-hidden">
|
||||
<GradientWaves
|
||||
horizonColor="#064e3b"
|
||||
waveColor="#34d399"
|
||||
crestColor="#d1fae5"
|
||||
speed={0.35}
|
||||
amplitude={2.6}
|
||||
waveScale={0.7}
|
||||
waveRatio={0.9}
|
||||
swell={38}
|
||||
turbulence={24}
|
||||
fogDepth={12}
|
||||
lightAngle={170}
|
||||
sheen={0.28}
|
||||
height={5.5}
|
||||
tilt={64}
|
||||
className="h-full w-full"
|
||||
/>
|
||||
{/* Dark wash keeps foreground text readable */}
|
||||
<div className="absolute inset-0 bg-obsidian/25" />
|
||||
</div>
|
||||
);
|
||||
|
||||
export default PageBackground;
|
||||
Loading…
Add table
Add a link
Reference in a new issue