more detail for pages, navigation flow

app/about/education/page.tsx

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

app/about/experience/page.tsx

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

app/about/me/page.tsx

@@ -0,0 +1,7 @@
+export default function AboutMePage() {
+    return (
+        <div>
+            <h1>About Me Page</h1>
+        </div>
+    )
+}

app/about/music/page.tsx

@@ -0,0 +1,19 @@
+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

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

app/about/music/stream/page.tsx

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

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

@@ -0,0 +1,12 @@
+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>
+    )
+}

app/about/music/works/page.tsx

@@ -0,0 +1,21 @@
+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/page.tsx

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+
+export default function AboutPage() {
+    return (
+        <div>
+            <Link href="/about/me">
+                <p>About me</p>
+            </Link>
+
+            <Link href="/about/resume">
+                <p>My resume</p>
+            </Link>
+
+            <Link href="/about/skills">
+                <p>Skills</p>
+            </Link>
+
+            <Link href="/about/education">
+                <p>Education</p>
+            </Link>
+
+            <Link href="/about/experience">
+                <p>Experience</p>
+            </Link>
+
+            <Link href="/about/music">
+                <p>Music</p>
+            </Link>
+        </div>
+    )
+}

app/about/resume/page.tsx

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

app/about/skills/page.tsx

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

app/contact/page.tsx

@@ -0,0 +1,7 @@
+export default function ContactPage() {
+    return (
+        <div>
+            <h1>Contact</h1>
+        </div>
+    )
+}

app/layout.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Navbar from '@/components/Navbar'
 import { MDXProvider } from '@mdx-js/react'
 import { Inter } from 'next/font/google'

app/projects/[id]/page.tsx

@@ -0,0 +1,12 @@
+import { usePathname } from 'next/navigation'
+
+export default function ProjectById() {
+    const pathname = usePathname();
+
+    return (
+        <div>
+            <h1>ProjectById Page</h1>
+            <p>Project ID: {pathname}</p>
+        </div>
+    )
+}

app/projects/page.tsx

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

components/Navbar.tsx

@@ -1,8 +1,20 @@
+import Link from 'next/link'
+
 export default function Navbar() {
     return (
         <div id="navbar" className="w-full h-auto flex flex-nowrap justify-between px-8 py-4 bg-black text-white">
-            <h1>Mikayla Dobson</h1>
-            <button>Button</button>
+            <Link href="/">
+                <h1>Mikayla Dobson</h1>
+            </Link>
+            <Link href="/about">
+                <p>About</p>
+            </Link>
+            <Link href="/projects">
+                <p>Projects</p>
+            </Link>
+            <Link href="/contact">
+                <p>Contact</p>
+            </Link>
         </div>
     )
 }