From 8bb72b5d4808fc3516cff23a7bcbf5bf005f8866 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 14:03:53 +0100
Subject: [PATCH] Update header layout; remove page titles from body; add text
 links for audio/video/images

---
 components/Menu.vue    |  6 +++++-
 layouts/default.vue    | 22 +++++++++++++++++-----
 pages/about.vue        |  2 --
 pages/albums.vue       |  2 --
 pages/lectures.vue     |  2 --
 pages/performances.vue |  2 --
 pages/pieces.vue       |  2 --
 pages/writings.vue     |  2 --
 8 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/components/Menu.vue b/components/Menu.vue
index 648f3ab..f7d769e 100644
--- a/components/Menu.vue
+++ b/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">
diff --git a/layouts/default.vue b/layouts/default.vue
index 9377105..750d3c0 100644
--- a/layouts/default.vue
+++ b/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">
-        <h1 class="text-2xl">
+      <div class="max-w-7xl mx-auto px-4 py-4 flex items-center gap-4">
+        <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', {
diff --git a/pages/about.vue b/pages/about.vue
index 6f4966d..769ad86 100644
--- a/pages/about.vue
+++ b/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.
diff --git a/pages/albums.vue b/pages/albums.vue
index 3e9d5d4..517b166 100644
--- a/pages/albums.vue
+++ b/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">
diff --git a/pages/lectures.vue b/pages/lectures.vue
index 233c278..16f8e45 100644
--- a/pages/lectures.vue
+++ b/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>
         
diff --git a/pages/performances.vue b/pages/performances.vue
index d87551a..a5174af 100644
--- a/pages/performances.vue
+++ b/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>
         
diff --git a/pages/pieces.vue b/pages/pieces.vue
index 7482e31..cde726c 100644
--- a/pages/pieces.vue
+++ b/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">
diff --git a/pages/writings.vue b/pages/writings.vue
index c8ecd20..14f5a57 100644
--- a/pages/writings.vue
+++ b/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>