Update header layout; remove page titles from body; add text links for audio/video/images

components/Menu.vue

@@ -2,7 +2,7 @@
   <div>
     <button 
       @click="isOpen = true" 
-      class="fixed top-4 left-4 z-50 p-2 hover:bg-gray-100 rounded"
+      class="p-2 hover:bg-gray-100 rounded"
       aria-label="Open menu"
     >
       <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -16,6 +16,10 @@
         
         <div class="absolute left-0 top-0 h-full w-64 bg-white shadow-lg p-6 pt-16">
           <nav class="space-y-4">
+            <NuxtLink to="/" class="block text-xl hover:underline" @click="isOpen = false">
+              michael winter
+            </NuxtLink>
+            
             <div>
               <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Works</p>
               <div class="space-y-2 ml-2">

layouts/default.vue

@@ -1,15 +1,15 @@
 <template>
   <div class="min-h-screen bg-white">
     <header class="sticky top-0 bg-white z-40 border-b border-gray-200">
-      <div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-center">
+      <div class="max-w-7xl mx-auto px-4 py-4 flex items-center gap-4">
-        <h1 class="text-2xl">
+        <Menu />
+        <h1 class="text-lg md:text-2xl whitespace-nowrap">
           <NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>
         </h1>
+        <div class="flex-1 text-right text-lg md:text-xl">{{ pageTitle }}</div>
       </div>
     </header>
 
-    <Menu />
-
     <main class="max-w-7xl mx-auto px-4 py-8">
       <slot />
     </main>
@@ -68,13 +68,25 @@
 <script setup>
   import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
   import { useModalStore } from "@/stores/ModalStore"
-  import { onMounted } from "vue"
+  import { onMounted, computed } from "vue"
 
   const audioPlayerStore = useAudioPlayerStore()
   const modalStore = useModalStore()
 
   const route = useRoute()
 
+  const pageTitle = computed(() => {
+    const path = route.path
+    if (path === '/' || path === '/pieces') return 'pieces'
+    if (path === '/writings') return 'writings'
+    if (path === '/albums') return 'albums'
+    if (path === '/performances') return 'performances'
+    if (path === '/lectures') return 'lectures'
+    if (path === '/about') return 'about'
+    if (path.startsWith('/works/')) return 'works'
+    return ''
+  })
+
   onMounted(() => {
     if(route.params.files == 'scores') {
       useFetch('/api/works', {

pages/about.vue

@@ -2,8 +2,6 @@
   <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
     <div class="lg:col-span-3">
       <section>
-        <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">about</h1>
-        
         <div class="mb-8">
           <p class="mb-4">
             My practice as a composer and sound artist is diverse, ranging from music created by digital and acoustic instruments to installations and kinetic sculptures. Each piece typically explores one simple process and often reflects various related interests of mine such as epistemology, mathematics, algorithmic information theory, and the history of science. Phenomenologically, I contemplate the possibility that everything is potentially computable, even our experiences. Given this digital philosophy, I acknowledge even my most open works as algorithmic; and, while not always apparent on the surface of any given piece, the considerations of computability and epistemology are integral to my practice. I often reconcile epistemological limits with artistic practicality by understanding the limits of computation from an artistic and experiential vantage point and by collaborating with other artists, mathematicians, and scientists in order to integrate objects, ideas, and texts from various domains as structural elements in my pieces. My work also aims to subvert discriminatory conventions and hierarchies by exploring alternative forms of presentation and interaction, often with minimal resources and low information.

pages/albums.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
     <section>
-      <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">albums</h1>
-      
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
         <div v-for="item in releases" :key="item.title" class="text-center group">
           <button @click="openAlbumModal(item)" class="block w-full relative overflow-hidden">

pages/lectures.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
     <section>
-      <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">lectures</h1>
-      
       <div v-for="yearGroup in lecturesByYear" :key="yearGroup.year" class="mb-8">
         <p class="text-sm text-gray-500 mb-4">{{ yearGroup.year }}</p>
         

pages/performances.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
     <section>
-      <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">performances</h1>
-      
       <div v-for="yearGroup in eventsByYear" :key="yearGroup.year" class="mb-8">
         <p class="text-sm text-gray-500 mb-4">{{ yearGroup.year }}</p>
         

pages/pieces.vue

@@ -2,8 +2,6 @@
   <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
     <div class="lg:col-span-3">
       <section>
-        <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">pieces</h1>
-        
         <div v-for="item in works" :key="item.year" class="mb-8">
           <p class="text-sm text-gray-500 mb-3">{{ item.year }}</p>
           <div v-for="work in item.works" :key="work.title" class="mb-4 ml-4">

pages/writings.vue

@@ -1,8 +1,6 @@
 <template>
   <div>
     <section>
-      <h1 class="text-2xl mb-6 border-b border-gray-200 pb-2">writings</h1>
-      
       <div v-for="item in pubs" :key="item.citationKey" class="mb-6">
         <div class="flex items-start gap-2">
           <div>