innocuous-symmetry/mikayla-dobson-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

building out some other pages

Browse Source
This commit is contained in:
Mikayla Dobson
2023-10-03 11:47:00 -05:00
parent c1fcc4af41
commit 0c04824df3
12 changed files with 260 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/Links/FeaturedLink.tsx Normal file
View File

@@ -0,0 +1,15 @@
import type { LinkProps } from ".";
import Image from "next/image";
import Panel from "../ui/Panel";
export default function FeaturedLink({ href, label, logo, disabled = false}: LinkProps) {
return (
<Panel width="1/2">
<div className="flex flex-col items-center p-8">
{logo}
<a aria-disabled={disabled} href="https://app.dropper.studio/store/innocuous-symmetry" target="_blank">{label}</a>
</div>
</Panel>
)
}

12
components/Links/SocialMedia.tsx Normal file
View File

@@ -0,0 +1,12 @@
import Link from "next/link";
import type { LinkProps } from ".";
export default function SocialMedia({ href, label, logo, disabled = false }: LinkProps) {
return (
<div title={label} className="flex flex-col items-center p-8">
<Link aria-disabled={disabled} passHref href={href}>
{logo}
</Link>
</div>
)
}

6
components/Links/index.tsx Normal file
View File

@@ -0,0 +1,6 @@
export type LinkProps = {
href: string,
label: string,
logo: JSX.Element,
disabled?: boolean
}

85
components/Navbar/index.tsx
View File

@@ -1,79 +1,15 @@
import Link from 'next/link'
import { InlineLogo, useColorShift } from '../logo'
import { useEffect, useState } from 'react';
import { UseColorShiftReturnType } from '../logo/useColorShift';
import { useState } from 'react';
import { RxActivityLog } from "react-icons/rx";
interface HoverState {
about: boolean
projects: boolean
contact: boolean
}
import { NavbarButton } from '../ui/Button';
const SHIFT_INTERVAL = 3000;
export default function Navbar({ pageIsScrolled = false }) {
const navbarColorShift = useColorShift(SHIFT_INTERVAL);
const { shift } = navbarColorShift;
const [colors, setColors] = useState<Partial<UseColorShiftReturnType>>({
firstColor: 'bg-inherit',
secondColor: 'bg-inherit',
thirdColor: 'bg-inherit',
});
const [hoverState, setHoverState] = useState<HoverState>({
about: false,
projects: false,
contact: false,
})
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
function mouseOver(source: keyof HoverState) {
const { colorKeys, actualColorReferences, activeIndex } = identifyActiveButton();
setColors({ ...colors, [colorKeys[activeIndex]]: actualColorReferences[activeIndex] });
setHoverState({ ...hoverState, [source]: true })
}
function mouseOut(source: keyof HoverState) {
setHoverState({ ...hoverState, [source]: false })
setColors({ firstColor: 'bg-inherit', secondColor: 'bg-inherit', thirdColor: 'bg-inherit' });
}
function identifyActiveButton() {
const buttonKeys: (keyof HoverState)[] = ['about', 'projects', 'contact'];
const { firstColor, secondColor, thirdColor } = navbarColorShift;
const colorKeys = ['firstColor', 'secondColor', 'thirdColor'];
const actualColorReferences = [firstColor, secondColor, thirdColor];
const activeButton = buttonKeys.find(key => hoverState[key]);
const activeIndex = buttonKeys.indexOf(activeButton as keyof HoverState);
return { colorKeys, actualColorReferences, activeIndex };
}
useEffect(() => {
const interval = setInterval(shift, SHIFT_INTERVAL);
return () => clearInterval(interval);
}, [])
useEffect(() => {
const interval = setInterval(() => {
const { colorKeys, actualColorReferences, activeIndex } = identifyActiveButton();
for (const key in hoverState) {
if (hoverState[key as keyof HoverState]) {
setColors({
...colors,
[colorKeys[activeIndex]]: actualColorReferences[activeIndex]
});
}
}
}, 1000);
return () => clearInterval(interval);
}, [shift])
return (
<>
<div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart bg-opacity-95 px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black " : "bg-inherit ") + " text-white transition-all duration-200"}>
@@ -82,17 +18,12 @@ export default function Navbar({ pageIsScrolled = false }) {
</Link>
<div className="hidden md:inline-flex justify-end w-3/4">
<Link passHref href="/about" onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} className={`ml-2 ${colors.firstColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.about ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>About</p>
</Link>
<Link passHref href="/projects" onMouseOver={() => mouseOver("projects")} onMouseOut={() => mouseOut('projects')} className={`ml-2 ${colors.secondColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.projects ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase border-white border-2 p-2 rounded-lg border-opacity-50'>Projects</p>
</Link>
<Link passHref href="/contact" onMouseOver={() => mouseOver('contact')} onMouseOut={() => mouseOut('contact')} className={`ml-2 ${colors.thirdColor} rounded-lg transition-colors ease-quick-start duration-${hoverState.contact ? '[5000ms]' : '0'}`}>
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>Contact</p>
</Link>
<NavbarButton href="/about" label="About" />
<NavbarButton href="/projects" label="Projects" />
<NavbarButton href="/links" label="Links" />
<NavbarButton href="/read" label="Read" />
<NavbarButton href="/listen" label="Listen" />
<NavbarButton href="/contact" label="Contact" />
</div>
<div aria-expanded={mobileMenuOpen} aria-roledescription="mobile-only navbar" className="inline-flex md:hidden justify-end h-full w-3/4">

17
components/ui/Button.tsx Normal file
View File

@@ -0,0 +1,17 @@
import Link from "next/link";
export function NavbarButton({ href, label, children }: { href: string, label?: string, children?: React.ReactNode }) {
return (
<Link passHref href={href} /* onMouseOver={() => mouseOver('about')} onMouseOut={() => mouseOut('about')} */ className={`ml-2 ${/* colors.firstColor */ ''} rounded-lg transition-colors ease-quick-start duration-${/* hoverState.about ? '[5000ms]' : */ '0'}`}>
{ label ? (
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
{ label }
</p>
) : children ? children : (
<p className='text-lg text-white text-opacity-80 hover:text-opacity-100 uppercase border-white border-2 p-2 rounded-lg border-opacity-50 hover:border-opacity-75'>
Button text
</p>
)}
</Link>
)
}