diff --git a/app/about/experience/page.tsx b/app/about/experience/page.tsx index 860eb05..a962ec0 100644 --- a/app/about/experience/page.tsx +++ b/app/about/experience/page.tsx @@ -1,7 +1,10 @@ export default function ExperiencePage() { return (
+

Work Page

+ +
) } diff --git a/app/about/layout.tsx b/app/about/layout.tsx deleted file mode 100644 index 0168397..0000000 --- a/app/about/layout.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export default function AboutSectionLayout({ children }: { children: React.ReactNode}) { - return ( -
- {children} -
- ) -} diff --git a/app/about/page.tsx b/app/about/page.tsx index 22e23cb..4ea969c 100644 --- a/app/about/page.tsx +++ b/app/about/page.tsx @@ -3,29 +3,12 @@ import Link from 'next/link'; export default function AboutPage() { return (
- -

About me

- - - -

My resume

- - - -

Skills

- - - -

Education

- - - -

Experience

- - - -

Music

- + About me + My resume + Skills + Education + Experience + Music
) } diff --git a/app/layout.tsx b/app/layout.tsx index c136a07..f5fd0de 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -23,6 +23,7 @@ export const metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { const pathname = usePathname(); const [bg, setBg] = useState('bg-slate-900'); + const [pageIsScrolled, setPageIsScrolled] = useState(false); useEffect(() => { switch (pathname) { @@ -35,6 +36,16 @@ export default function RootLayout({ children }: { children: React.ReactNode }) } }, [pathname]) + useEffect(() => { + document.addEventListener('scroll', () => { + if (window.scrollY > 0) { + setPageIsScrolled(true); + } else { + setPageIsScrolled(false); + } + }) + }, []) + return ( @@ -44,7 +55,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) - + diff --git a/app/page.tsx b/app/page.tsx index 5680e33..c3210cb 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,34 +1,50 @@ 'use client'; +import { useColorShift } from "@/components/logo"; +import { ColorListType } from "@/components/logo/useColorShift"; +import Image from "next/image"; +import Link from "next/link"; import { useRouter } from "next/navigation"; +import { useEffect, useState } from "react"; export default function Home() { const router = useRouter(); + const { firstColor, secondColor, thirdColor } = useColorShift(14000); return ( <> -
-
-
-

Mikayla Dobson
Software Engineer

-

Software design at the confluence of efficiency, ingenuity, and artistry

-
+
+
+ + Mikayla Dobson + +

Software Engineer

+ +
+

Software design with style, ingenuity, and artistry.

+ + {/*
+ geometric pattern in wood and metal +
*/}
-
-

Hi! My name is Mikayla.

+
+ + image of Mikayla Dobson + +

Hi! My name is Mikayla.

I build full-stack software solutions for the web, answer open-ended questions, and pet cats.

- - - + + + Check out my work +
diff --git a/components/Navbar/index.tsx b/components/Navbar/index.tsx index c2b0304..056a7d6 100644 --- a/components/Navbar/index.tsx +++ b/components/Navbar/index.tsx @@ -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 ( <> -