cleanup on some old stuff

app/about/education/page.tsx

@@ -1,3 +0,0 @@
-export default function EducationPage() {
-    return <>Education Page</>
-}

app/about/music/page.tsx

@@ -1,19 +0,0 @@
-import Link from 'next/link';
-
-export default function MusicPage() {
-    return (
-        <div>
-            <Link href="/about/music/projects">
-                <p>Projects</p>
-            </Link>
-
-            <Link href="/about/music/works">
-                <p>Works</p>
-            </Link>
-
-            <Link href="/about/music/stream">
-                <p>Stream</p>
-            </Link>
-        </div>
-    )
-}

app/about/music/projects/page.tsx

@@ -1,9 +0,0 @@
-export default function MusicProjectPage() {
-    return (
-        <div>
-            <h1>Music Project Page</h1>
-
-            <p>This is where I&apos;ll keep a running list of my projects</p>
-        </div>
-    )
-}

app/about/music/stream/page.tsx

@@ -1,7 +0,0 @@
-export default function MusicStreamingPage() {
-    return (
-        <div>
-            <h1>Music Streaming Page</h1>
-        </div>
-    )
-}

app/about/music/works/[id]/page.tsx

@@ -1,16 +0,0 @@
-export default function MusicalWorkPage({ params }: { params: { id: string }}) {
-    if (Number.isNaN(parseInt(params.id))) {
-        return <div>Fail</div>
-    }
-
-    return (
-        <div>
-            <h1>Music Works Page</h1>
-            <p>Work No. {params.id}</p>
-
-            <div>
-                <p>This page is coming soon!</p>
-            </div>
-        </div>
-    )
-}

app/about/music/works/page.tsx

@@ -1,21 +0,0 @@
-import Link from 'next/link';
-
-export default function MusicWorksPage() {
-    return (
-        <div>
-            <h1>Music Works Page</h1>
-
-            <Link href="/about/music/works/1">
-                <p>First</p>
-            </Link>
-
-            <Link href="/about/music/works/2">
-                <p>Second</p>
-            </Link>
-
-            <Link href="/about/music/works/3">
-                <p>Third</p>
-            </Link>
-        </div>
-    )
-}

app/about/work/[employer]/page.tsx

@@ -1,18 +0,0 @@
-'use client';
-import { usePathname } from "next/navigation";
-
-export default function ExperiencePage() {
-    const path = usePathname();
-
-    return (
-        <div>
-            <div id="spacer" className='h-[6rem] w-full' />
-            <h1>Work Page</h1>
-            <p>Employer: {path.split('/').at(-1)}</p>
-
-            <div>
-                <p>This section is coming soon!</p>
-            </div>
-        </div>
-    )
-}

app/about/work/page.tsx

@@ -1,9 +0,0 @@
-const WorkHistory = () => {
-    return (
-        <div>
-        <h1>Work History</h1>
-        </div>
-    );
-}
-
-export default WorkHistory;

app/layout.tsx

@@ -1,56 +1,14 @@
-'use client'
-
 import './globals.css'
 
 import Head from 'next/head'
 import Navbar from '@/components/Navbar'
-import SiteTree from '@/components/SiteTree'
 import { Inter, Besley, Cabin } from 'next/font/google'
-import { usePathname } from 'next/navigation'
-import { IconContext } from 'react-icons'
-import { useEffect, useState } from 'react'
 
 export const inter = Inter({ subsets: ['latin'] })
 export const besley = Besley({ subsets: ['latin'] })
 export const cabin = Cabin({ subsets: ['latin'] })
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-  const [bg, setBg] = useState('bg-slate-400 dark:bg-slate-900');
-  const [overlay, setOverlay] = useState(false);
-
-  const [pageIsScrolled, setPageIsScrolled] = useState(false);
-
-  // useEffect(() => {
-  //   if (pathname === '/contact') setOverlay(true);
-
-  //   switch (pathname) {
-  //     case '/contact':
-  //       setBg('bg-purple-300 dark:bg-darkPlum');
-  //       break;
-  //     case '/about':
-  //       setBg("bg-blue-100 dark:bg-slate-900");
-  //       break;
-  //     case "/links":
-  //       setBg("bg-sky-100 dark:bg-slate-900");
-  //       break;
-  //     case '/':
-  //     default:
-  //       setBg('bg-slate-400 dark:bg-slate-900');
-  //       break;
-  //   }
-  // }, [pathname])
-
-  useEffect(() => {
-    document.addEventListener('scroll', () => {
-      if (window.scrollY > 0) {
-        setPageIsScrolled(true);
-      } else {
-        setPageIsScrolled(false);
-      }
-    })
-  }, [])
-
   return (
     <html lang="en">
       <Head>
@@ -60,14 +18,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <body className={inter.className}>
-        <Navbar pageIsScrolled={pageIsScrolled} />
-        <SiteTree />
-        <IconContext.Provider value={{}}>
+        <Navbar />
         <div>
           <div id="navbar-spacer" className="h-[6rem] w-full bg-slate-300 dark:bg-black " />
           {children}
         </div>
-        </IconContext.Provider>
       </body>
     </html>
   )

app/listen/[collectionid]/page.tsx

@@ -1,3 +1,7 @@
-export default function ListenByCollectionID() {
-    return <div>ListenByCollectionID</div>;
+import InProgress from "@/components/InProgress";
+
+export default async function ListenByCollectionID() {
+    return <></>
+    // // @ts-ignore server component
+    // return <InProgress />
 }

app/listen/layout.tsx

@@ -0,0 +1,7 @@
+export default function ListenLayout({ children }: { children: React.ReactNode}) {
+    return (
+        <main className="min-h-screen bg-gradient-to-b from-slate-300 to-cyan-800 dark:from-black dark:to-cyan-900">
+            { children }
+        </main>
+    )
+}

app/listen/page.tsx

@@ -1,3 +1,11 @@
-export default function ListenIndex() {
-    return <div>ListenIndex</div>;
+import InProgress from "@/components/InProgress";
+
+export default async function ListenIndex() {
+    return (
+        <div>
+            <h1>Listen</h1>
+            {/* @ts-ignore server component */}
+            {/* <InProgress /> */}
+        </div>
+    )
 }

app/projects/page.tsx

@@ -1,9 +1,11 @@
+import InProgress from "@/components/InProgress";
+
 export default async function ProjectsPage() {
     return (
         <div>
             <h1>Learn more about my work</h1>
-
-            <p>Contents of this page coming soon!</p>
+            {/* @ts-ignore server component */}
+            {/* <InProgress /> */}
         </div>
     )
 }

components/InProgress.tsx

@@ -0,0 +1,3 @@
+export default function InProgress() {
+    return <div>Under construction! Come back soon.</div>;
+}

components/Navbar/index.tsx

@@ -1,14 +1,26 @@
+'use client';
 import Link from 'next/link'
 import { InlineLogo, useColorShift } from './logo'
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { RxActivityLog } from "react-icons/rx";
 import { NavbarButton } from '../ui/Button';
 
 const SHIFT_INTERVAL = 3000;
 
-export default function Navbar({ pageIsScrolled = false }) {
+export default function Navbar() {
     const navbarColorShift = useColorShift(SHIFT_INTERVAL);
     const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+    const [pageIsScrolled, setPageIsScrolled] = useState(false);
+
+    useEffect(() => {
+        document.addEventListener('scroll', () => {
+          if (window.scrollY > 0) {
+            setPageIsScrolled(true);
+          } else {
+            setPageIsScrolled(false);
+          }
+        })
+    }, [])
 
     return (
         <>