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

many style improvements for home page

Browse Source
This commit is contained in:
Mikayla Dobson
2023-07-03 11:51:09 -05:00
parent 22738d083c
commit 3d2f05bfdf
11 changed files with 89 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/Navbar/index.tsx
View File

@@ -13,7 +13,7 @@ interface HoverState {
const SHIFT_INTERVAL = 3000;
export default function Navbar() {
export default function Navbar({ pageIsScrolled = false }) {
const navbarColorShift = useColorShift(SHIFT_INTERVAL);
const { shift } = navbarColorShift;
@@ -77,42 +77,46 @@ export default function Navbar() {
return (
<>
<div id="navbar" className="w-full h-auto fixed flex flex-nowrap items-baseline justify-apart px-8 py-4 bg-black text-white">
<Link href="/" className="w-1/4">
<div id="navbar" className={"w-full z-50 fixed flex flex-nowrap items-baseline justify-apart px-8 py-4 " + (mobileMenuOpen ? "bg-[#131313] " : pageIsScrolled ? "bg-black" : "bg-inherit ") + " text-white transition-colors duration-200"}>
<Link passHref href="/" className="w-1/4">
<InlineLogo customHookInstance={navbarColorShift} />
</Link>
<div className="hidden md:inline-flex justify-end w-3/4">
<Link 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'}`}>
<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 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'}`}>
<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 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'}`}>
<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>
</div>
<div className="inline-flex md:hidden justify-end w-3/4">
<button onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
<div aria-expanded={mobileMenuOpen} aria-roledescription="mobile-only navbar" className="inline-flex md:hidden justify-end h-full w-3/4">
<button className={(mobileMenuOpen ? "bg-[#131313]" : "bg-inherit")} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
<RxActivityLog size="24" />
</button>
</div>
</div>
<div className={`flex flex-col items-end md:hidden fixed top-24 w-[50vw] place-self-end bg-black ${mobileMenuOpen ? 'translate-x-[50vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
<div onMouseLeave={() => setMobileMenuOpen(false)} className={`flex flex-col rounded-bl-lg justify-end md:hidden fixed top-24 w-[25vw] text-right place-self-end bg-[#131313] ${mobileMenuOpen ? 'translate-x-[75vw]' : 'translate-x-[100vw]'} transition-all duration-500`}>
{/* <div className="bg-black h-48" /> */}
<Link href="/about" className="w-full">
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Home</p>
</Link>
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/about" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>About</p>
</Link>
<Link href="/projects" className="w-full">
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/projects" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 hover:border-opacity-75 uppercase p-2 border-opacity-50'>Projects</p>
</Link>
<Link href="/contact" className="w-full">
<Link onClick={() => setMobileMenuOpen(false)} passHref href="/contact" className="w-full">
<p className='text-lg text-right text-white text-opacity-80 hover:text-opacity-100 uppercase p-2 border-opacity-50 hover:border-opacity-75'>Contact</p>
</Link>
</div>