From 9af20c1e5d2cd60a5a19ac8b8a2510fd06b62042 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 09:19:25 +0100
Subject: [PATCH 01/32] Add shareable URLs for works with scores

- Score icon updates URL to /?work=[slug] without navigation
- Modal closes to reset URL back to /
- Direct /work/[slug] access redirects to /?work=[slug]
- Index page opens modal when ?work= query param is present
- Works with SSG/prerendering for /?work= routes
---
 components/IconButton.vue | 24 +++++++++++++++++++++--
 pages/index.vue           | 41 +++++++++++++++++++++++++++++++++++++++
 pages/work/[slug].vue     | 14 +++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 pages/work/[slug].vue

diff --git a/components/IconButton.vue b/components/IconButton.vue
index c75c36f..69680f7 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,7 +2,7 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <button v-if="type === 'score'" @click="modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', link, work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')" class="inline-flex p-1">
+            <button v-if="type === 'score'" @click="openScoreModal()" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
             </button>
 
@@ -41,13 +41,20 @@
 <script setup>
   import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
   import { useModalStore } from "@/stores/ModalStore"
-  import { computed } from "vue"
+  import { computed, watch } from "vue"
 
   const props = defineProps(['type', 'work', 'visible', 'link', 'newTab'])
 
   const audioPlayerStore = useAudioPlayerStore()
   const modalStore = useModalStore()
 
+  const slugify = (title) => {
+    if (!title) return ''
+    return title.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
+  }
+
+  const workSlug = computed(() => slugify(props.work?.title))
+
   const isExternalLink = computed(() => {
     return props.link && !props.link.endsWith('.pdf') && !props.link.startsWith('/')
   })
@@ -63,4 +70,17 @@
       modalStore.setModalProps('document', 'aspect-[1/1.414]', true, '', '', '', '', '', props.link)
     }
   }
+
+  const openScoreModal = () => {
+    modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link, props.work?.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')
+    if (workSlug.value && typeof window !== 'undefined') {
+      window.history.replaceState({}, '', '/?work=' + workSlug.value)
+    }
+  }
+
+  watch(() => modalStore.isOpen, (isOpen) => {
+    if (!isOpen && workSlug.value && typeof window !== 'undefined' && window.location.search.includes('work=')) {
+      window.history.replaceState({}, '', '/')
+    }
+  })
 </script>
diff --git a/pages/index.vue b/pages/index.vue
index 239c9d6..1f66d0f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -78,8 +78,16 @@
 <script setup>
 
   import { useModalStore } from "@/stores/ModalStore"
+  import { watch, watchEffect } from "vue"
   
   const modalStore = useModalStore()
+  const route = useRoute()
+  const router = useRouter()
+
+  const slugify = (title) => {
+    if (!title) return ''
+    return title.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
+  }
 
   const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
 
@@ -164,4 +172,37 @@
     titleTemplate: 'Michael Winter - Home / Works - Pieces, Publications, and Albums'
   })
 
+  const workFromSlug = computed(() => {
+    const workSlug = route.query.work
+    if (!workSlug || !works.value) return null
+    for (const group of works.value) {
+      const found = group.works.find(w => slugify(w.title) === workSlug)
+      if (found) return found
+    }
+    return null
+  })
+
+  watchEffect(() => {
+    const workSlug = route.query.work
+    const work = workFromSlug.value
+    if (workSlug && work?.score) {
+      modalStore.setModalProps(
+        'pdf',
+        'aspect-[1/1.414]',
+        true,
+        '',
+        '',
+        '',
+        work.score,
+        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
+      )
+    }
+  })
+
+  watch(() => modalStore.isOpen, (isOpen) => {
+    if (!isOpen && route.query.work && typeof window !== 'undefined') {
+      window.history.replaceState({}, '', '/')
+    }
+  })
+
 </script>
diff --git a/pages/work/[slug].vue b/pages/work/[slug].vue
new file mode 100644
index 0000000..4272bbe
--- /dev/null
+++ b/pages/work/[slug].vue
@@ -0,0 +1,14 @@
+<script setup>
+  const route = useRoute()
+  const router = useRouter()
+
+  const slug = route.params.slug
+
+  onMounted(() => {
+    router.replace('/?work=' + slug)
+  })
+</script>
+
+<template>
+  <div></div>
+</template>

From 635cbe0482d6fea5fd6fdb81b9d36da36060b726 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 10:23:45 +0100
Subject: [PATCH 02/32] Add shareable work pages with modal support

- Create IndexContent component to avoid code duplication
- Score icon links to /work/[slug] with clean URLs
- Modal opens automatically via slug prop (works with SSR)
- Crawler finds and prerenders all /work/ pages (145 routes)
- Work page redirects to / when modal closes
- Single source of truth for data fetching in IndexContent
---
 components/IconButton.vue   |  19 +---
 components/IndexContent.vue | 193 ++++++++++++++++++++++++++++++++++
 pages/index.vue             | 201 +-----------------------------------
 pages/work/[slug].vue       |  18 ++--
 4 files changed, 209 insertions(+), 222 deletions(-)
 create mode 100644 components/IndexContent.vue

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 69680f7..c06fe41 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,9 +2,9 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <button v-if="type === 'score'" @click="openScoreModal()" class="inline-flex p-1">
+            <NuxtLink v-if="type === 'score'" :to="'/work/' + workSlug" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
-            </button>
+            </NuxtLink>
 
             <a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="openDocument()" class="inline-flex p-1 cursor-pointer">
                 <Icon name="ion:book-sharp" style="color: white" />
@@ -41,7 +41,7 @@
 <script setup>
   import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
   import { useModalStore } from "@/stores/ModalStore"
-  import { computed, watch } from "vue"
+  import { computed } from "vue"
 
   const props = defineProps(['type', 'work', 'visible', 'link', 'newTab'])
 
@@ -70,17 +70,4 @@
       modalStore.setModalProps('document', 'aspect-[1/1.414]', true, '', '', '', '', '', props.link)
     }
   }
-
-  const openScoreModal = () => {
-    modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link, props.work?.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')
-    if (workSlug.value && typeof window !== 'undefined') {
-      window.history.replaceState({}, '', '/?work=' + workSlug.value)
-    }
-  }
-
-  watch(() => modalStore.isOpen, (isOpen) => {
-    if (!isOpen && workSlug.value && typeof window !== 'undefined' && window.location.search.includes('work=')) {
-      window.history.replaceState({}, '', '/')
-    }
-  })
 </script>
diff --git a/components/IndexContent.vue b/components/IndexContent.vue
new file mode 100644
index 0000000..2d81c69
--- /dev/null
+++ b/components/IndexContent.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-3 gap-10 divide-x divide-solid divide-black py-4 mb-10">
+
+    <div class="px-5">
+      <p class="text-lg">pieces</p>
+
+      <div class="py-2 ml-3" v-for="item in works">
+        <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
+        <div class="leading-tight py-1 ml-3" v-for="work in item.works">
+          <div class="grid grid-cols-[65%,30%] gap-1 items-start">
+            <span v-html="work.title" class="italic text-sm"></span>
+            <div class="inline-flex mt-[-4px]">
+
+              <div>
+                <IconButton :visible="work.score" type="score" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
+              </div>
+
+              <div>
+                <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work" class="inline-flex p-1"></IconButton>
+              </div>
+
+              <div>
+                <IconButton :visible="work.vimeo_trackid" type="video" :work="work" class="inline-flex p-1"></IconButton>
+              </div>
+
+              <div>
+                <IconButton :visible="work.gallery" type="image" :work="work" class="inline-flex p-1"></IconButton>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="px-5">
+      <p class="text-lg">writings</p>
+
+      <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
+        <div class="grid grid-cols-[95%,5%] gap-1 items-start">
+          <div>
+            <span v-html="item.entryTags.title"></span>
+            <div class="ml-4 text-[#7F7F7F]">
+              {{ item.entryTags.author }}
+              <span v-if=item.entryTags.booktitle>{{ item.entryTags.booktitle}}.&nbsp;</span>
+              <span v-if=item.entryTags.journal>{{item.entryTags.journal}}.&nbsp;</span>
+              <span v-if=item.entryTags.editor>editors {{item.entryTags.editor}}&nbsp;</span>
+              <span v-if=item.entryTags.volume>volume {{item.entryTags.volume}}.</span>
+              <span v-if=item.entryTags.publisher>{{item.entryTags.publisher}}.</span>
+              {{ item.entryTags.year }}.
+            </div>
+          </div>
+          <div>
+            <IconButton :visible=item.entryTags.howpublished type="document" :link=item.entryTags.howpublished class="inline-flex p-1 mt-[-6px]"></IconButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="px-5">
+      <p class="text-lg">albums</p>
+      <div class="flex flex-col items-center leading-tight py-4 text-sm" v-for="item in releases">
+        <p class="leading-tight py-2">{{ item.title }}</p>
+        <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: item.album_art}], '')">
+          <nuxt-img :src="'/album_art/' + item.album_art" 
+          quality="50"/>
+        </button>
+        <div class="flex place-content-center place-items-center">
+          <IconButton :visible="item.discogs_id" type="discogs" :link="'https://www.discogs.com/release/' + item.discogs_id" :newTab="true"></IconButton>
+          <IconButton :visible="item.buy_link" type="buy" :link="item.buy_link" :newTab="true"></IconButton>
+        </div>
+      </div>
+    </div>
+    
+  </div>
+</template>
+
+<script setup>
+  import { useModalStore } from "@/stores/ModalStore"
+  import { watchEffect } from "vue"
+
+  const props = defineProps(['slug'])
+
+  const modalStore = useModalStore()
+
+  const slugify = (title) => {
+    if (!title) return ''
+    return title.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
+  }
+
+  const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
+
+  const isValidUrl = urlString => {
+    var pattern = /^((http|https|ftp):\/\/)/;
+    return pattern.test(urlString)
+  }
+
+  const { data: works } = await useFetch('/api/works', {
+    key: 'works-indexcontent',
+    transform: (works) => {
+      const cloned = JSON.parse(JSON.stringify(works))
+      for (const work of cloned) {
+        if(work.score){
+          work.score = "/scores/" + work.score
+        }
+        if(work.images){
+          let gallery = [];
+          for (const image of work.images){
+            gallery.push({
+              image: image.filename,
+            })
+          }
+          work.gallery = gallery
+        }
+      }
+      let priorityGroups = groupBy(cloned, work => work.priority)
+      let groups = groupBy(priorityGroups["1"], work => new Date(work.date).getFullYear())
+      groups = Object.keys(groups).map((year) => {
+        return {
+          year,
+          works: groups[year].sort((a,b) => new Date(b.date) - new Date(a.date))
+        };
+      });
+      groups.sort((a,b) => b.year - a.year)
+      if (priorityGroups["2"]) {
+        groups.push({year: "miscellany", works: priorityGroups["2"].sort((a,b) => new Date(b.date) - new Date(a.date))})
+      }
+      return groups
+    }
+  })
+
+  const { data: pubs } = await useFetch('/api/publications', {
+    key: 'publications-indexcontent',
+    transform: (pubs) => {
+      const cloned = JSON.parse(JSON.stringify(pubs))
+      for (const pub of cloned) {
+        if(pub.entryTags && pub.entryTags.howpublished && !(isValidUrl(pub.entryTags.howpublished))){
+          pub.entryTags.howpublished = "/pubs/" + pub.entryTags.howpublished
+        }
+      }
+      return cloned.sort((a, b) => {
+        const getYear = (key) => parseInt(key.replace(/\D/g, '')) || 0
+        const getSuffix = (key) => key.replace(/^Winter\d+/, '') || ''
+        
+        const yearA = getYear(a.citationKey)
+        const yearB = getYear(b.citationKey)
+        
+        if (yearA !== yearB) return yearB - yearA
+        
+        return getSuffix(b.citationKey).localeCompare(getSuffix(a.citationKey))
+      })
+    }
+  })
+
+  const { data: releases } = await useFetch('/api/releases', {
+    key: 'releases-indexcontent',
+    transform: (releases) => {
+      const cloned = JSON.parse(JSON.stringify(releases))
+      return cloned.sort((a,b) => {
+        const dateA = parseInt(a.date) || 0
+        const dateB = parseInt(b.date) || 0
+        return dateB - dateA
+      })
+    }
+  })
+
+  const findWorkBySlug = (slugToFind) => {
+    if (!works.value) return null
+    for (const group of works.value) {
+      const found = group.works.find(w => slugify(w.title) === slugToFind)
+      if (found) return found
+    }
+    return null
+  }
+
+  watchEffect(() => {
+    if (props.slug && works.value) {
+      const work = findWorkBySlug(props.slug)
+      if (work?.score) {
+        modalStore.setModalProps(
+          'pdf',
+          'aspect-[1/1.414]',
+          true,
+          '',
+          '',
+          '',
+          work.score,
+          work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
+        )
+      }
+    }
+  })
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index 1f66d0f..afcd7f6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,208 +1,9 @@
 <template>
-  <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-3 gap-10 divide-x divide-solid divide-black py-4 mb-10">
-
-    <div class="px-5">
-      <p class="text-lg">pieces</p>
-
-      <div class="py-2 ml-3" v-for="item in works">
-        <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
-        <div class="leading-tight py-1 ml-3" v-for="work in item.works">
-          <div class="grid grid-cols-[65%,30%] gap-1 items-start">
-            <span v-html="work.title" class="italic text-sm"></span>
-            <div class="inline-flex mt-[-4px]">
-
-              <div>
-                <IconButton :visible="work.score" type="score" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
-              </div>
-
-              <div>
-                <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work" class="inline-flex p-1"></IconButton>
-              </div>
-
-              <div>
-                <IconButton :visible="work.vimeo_trackid" type="video" :work="work" class="inline-flex p-1"></IconButton>
-              </div>
-
-              <div>
-                <IconButton :visible="work.gallery" type="image" :work="work" class="inline-flex p-1"></IconButton>
-              </div>
-
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="px-5">
-      <p class="text-lg">writings</p>
-
-      <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
-        <div class="grid grid-cols-[95%,5%] gap-1 items-start">
-          <div>
-            <span v-html="item.entryTags.title"></span>
-            <div class="ml-4 text-[#7F7F7F]">
-              {{ item.entryTags.author }}
-              <span v-if=item.entryTags.booktitle>{{ item.entryTags.booktitle}}.&nbsp;</span>
-              <span v-if=item.entryTags.journal>{{item.entryTags.journal}}.&nbsp;</span>
-              <span v-if=item.entryTags.editor>editors {{item.entryTags.editor}}&nbsp;</span>
-              <span v-if=item.entryTags.volume>volume {{item.entryTags.volume}}.</span>
-              <span v-if=item.entryTags.publisher>{{item.entryTags.publisher}}.</span>
-              {{ item.entryTags.year }}.
-            </div>
-          </div>
-          <div>
-            <IconButton :visible=item.entryTags.howpublished type="document" :link=item.entryTags.howpublished class="inline-flex p-1 mt-[-6px]"></IconButton>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="px-5">
-      <p class="text-lg">albums</p>
-      <div class="flex flex-col items-center leading-tight py-4 text-sm" v-for="item in releases">
-        <p class="leading-tight py-2">{{ item.title }}</p>
-        <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: item.album_art}], '')">
-          <nuxt-img :src="'/album_art/' + item.album_art" 
-          quality="50"/>
-        </button>
-        <div class="flex place-content-center place-items-center">
-          <IconButton :visible="item.discogs_id" type="discogs" :link="'https://www.discogs.com/release/' + item.discogs_id" :newTab="true"></IconButton>
-          <IconButton :visible="item.buy_link" type="buy" :link="item.buy_link" :newTab="true"></IconButton>
-        </div>
-      </div>
-    </div>
-    
-  </div>
+  <IndexContent />
 </template>
 
 <script setup>
-
-  import { useModalStore } from "@/stores/ModalStore"
-  import { watch, watchEffect } from "vue"
-  
-  const modalStore = useModalStore()
-  const route = useRoute()
-  const router = useRouter()
-
-  const slugify = (title) => {
-    if (!title) return ''
-    return title.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
-  }
-
-  const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
-
-  const isValidUrl = urlString => {
-    var pattern = /^((http|https|ftp):\/\/)/;
-    return pattern.test(urlString)
-  }
-
-
-  const { data: images } = await useFetch('/api/images', { key: 'images' })
-
-  const { data: works } = await useFetch('/api/works', {
-    key: 'works',
-    transform: (works) => {
-      const cloned = JSON.parse(JSON.stringify(works))
-      for (const work of cloned) {
-        if(work.score){
-          work.score = "/scores/" + work.score
-        }
-        if(work.images){
-          let gallery = [];
-          for (const image of work.images){
-            gallery.push({
-              image: image.filename,
-            })
-          }
-          work.gallery = gallery
-        }
-      }
-      let priorityGroups = groupBy(cloned, work => work.priority)
-      let groups = groupBy(priorityGroups["1"], work => new Date(work.date).getFullYear())
-      groups = Object.keys(groups).map((year) => {
-        return {
-          year,
-          works: groups[year].sort((a,b) => new Date(b.date) - new Date(a.date))
-        };
-      });
-      groups.sort((a,b) => b.year - a.year)
-      if (priorityGroups["2"]) {
-        groups.push({year: "miscellany", works: priorityGroups["2"].sort((a,b) => new Date(b.date) - new Date(a.date))})
-      }
-      return groups
-    }
-  })
-
-  const { data: pubs } = await useFetch('/api/publications', {
-    key: 'publications',
-    transform: (pubs) => {
-      const cloned = JSON.parse(JSON.stringify(pubs))
-      for (const pub of cloned) {
-        if(pub.entryTags && pub.entryTags.howpublished && !(isValidUrl(pub.entryTags.howpublished))){
-          pub.entryTags.howpublished = "/pubs/" + pub.entryTags.howpublished
-        }
-      }
-      return cloned.sort((a, b) => {
-        const getYear = (key) => parseInt(key.replace(/\D/g, '')) || 0
-        const getSuffix = (key) => key.replace(/^Winter\d+/, '') || ''
-        
-        const yearA = getYear(a.citationKey)
-        const yearB = getYear(b.citationKey)
-        
-        if (yearA !== yearB) return yearB - yearA
-        
-        return getSuffix(b.citationKey).localeCompare(getSuffix(a.citationKey))
-      })
-    }
-  })
-
-  const { data: releases } = await useFetch('/api/releases', {
-    key: 'releases',
-    transform: (releases) => {
-      const cloned = JSON.parse(JSON.stringify(releases))
-      return cloned.sort((a,b) => {
-        const dateA = parseInt(a.date) || 0
-        const dateB = parseInt(b.date) || 0
-        return dateB - dateA
-      })
-    }
-  })
-
   useHead({
     titleTemplate: 'Michael Winter - Home / Works - Pieces, Publications, and Albums'
   })
-
-  const workFromSlug = computed(() => {
-    const workSlug = route.query.work
-    if (!workSlug || !works.value) return null
-    for (const group of works.value) {
-      const found = group.works.find(w => slugify(w.title) === workSlug)
-      if (found) return found
-    }
-    return null
-  })
-
-  watchEffect(() => {
-    const workSlug = route.query.work
-    const work = workFromSlug.value
-    if (workSlug && work?.score) {
-      modalStore.setModalProps(
-        'pdf',
-        'aspect-[1/1.414]',
-        true,
-        '',
-        '',
-        '',
-        work.score,
-        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
-      )
-    }
-  })
-
-  watch(() => modalStore.isOpen, (isOpen) => {
-    if (!isOpen && route.query.work && typeof window !== 'undefined') {
-      window.history.replaceState({}, '', '/')
-    }
-  })
-
 </script>
diff --git a/pages/work/[slug].vue b/pages/work/[slug].vue
index 4272bbe..ebe890f 100644
--- a/pages/work/[slug].vue
+++ b/pages/work/[slug].vue
@@ -1,14 +1,20 @@
+<template>
+  <IndexContent :slug="slug" />
+</template>
+
 <script setup>
+  import { useModalStore } from "@/stores/ModalStore"
+  import { watch } from "vue"
+
   const route = useRoute()
+  const modalStore = useModalStore()
   const router = useRouter()
 
   const slug = route.params.slug
 
-  onMounted(() => {
-    router.replace('/?work=' + slug)
+  watch(() => modalStore.isOpen, (isOpen) => {
+    if (!isOpen) {
+      router.push('/')
+    }
   })
 </script>
-
-<template>
-  <div></div>
-</template>

From 6ffe5aa1fc9b31f526b9850eca331840cbe42c44 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 15:08:30 +0100
Subject: [PATCH 03/32] Add work pages with hash-based modal URLs and proper
 404 handling

- Create dedicated /work/[slug] pages with sticky nav
- Use hash URLs (#type|slug) for modals instead of work page URLs
- Make works without items non-clickable on index
- Add server route to return 404 for non-existent score files
---
 components/IconButton.vue         | 25 ++++++--
 components/IndexContent.vue       | 71 ++++++++++++++++++++++-
 pages/work/[slug].vue             | 95 +++++++++++++++++++++++++++----
 server/routes/scores/[...path].ts | 25 ++++++++
 4 files changed, 197 insertions(+), 19 deletions(-)
 create mode 100644 server/routes/scores/[...path].ts

diff --git a/components/IconButton.vue b/components/IconButton.vue
index c06fe41..45de733 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,9 +2,9 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <NuxtLink v-if="type === 'score'" :to="'/work/' + workSlug" class="inline-flex p-1">
+            <button v-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
-            </NuxtLink>
+            </button>
 
             <a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="openDocument()" class="inline-flex p-1 cursor-pointer">
                 <Icon name="ion:book-sharp" style="color: white" />
@@ -26,11 +26,11 @@
                 <Icon name="wpf:speaker" style="color: white" />
             </button>
 
-            <button @click="modalStore.setModalProps('video', 'aspect-video', true, '', '', work.vimeo_trackid)" v-else-if="type === 'video'" class="inline-flex p-1">
+            <button @click="openWithHash('video')" v-else-if="type === 'video'" class="inline-flex p-1">
                 <Icon name="fluent:video-48-filled" style="color: white" />
             </button>
 
-            <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'images', work.gallery, '', '', work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')" v-else="type === 'image'" class="inline-flex p-1">
+            <button @click="openWithHash('image')" v-else-if="type === 'image'" class="inline-flex p-1">
                 <Icon name="mdi:camera" style="color: white" />
             </button>
 
@@ -70,4 +70,21 @@
       modalStore.setModalProps('document', 'aspect-[1/1.414]', true, '', '', '', '', '', props.link)
     }
   }
+
+  const openWithHash = (type) => {
+    const slug = workSlug.value
+    const hash = type + '|' + slug
+    
+    if (type === 'score') {
+      modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link, props.work?.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')
+    } else if (type === 'video') {
+      modalStore.setModalProps('video', 'aspect-video', true, '', '', props.work.vimeo_trackid)
+    } else if (type === 'image') {
+      modalStore.setModalProps('image', 'aspect-auto', true, 'images', props.work.gallery, '', '', props.work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')
+    }
+    
+    if (slug && typeof window !== 'undefined') {
+      window.history.replaceState({}, '', '/#' + hash)
+    }
+  }
 </script>
diff --git a/components/IndexContent.vue b/components/IndexContent.vue
index 2d81c69..8622f37 100644
--- a/components/IndexContent.vue
+++ b/components/IndexContent.vue
@@ -8,7 +8,12 @@
         <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
         <div class="leading-tight py-1 ml-3" v-for="work in item.works">
           <div class="grid grid-cols-[65%,30%] gap-1 items-start">
-            <span v-html="work.title" class="italic text-sm"></span>
+            <NuxtLink v-if="hasItems(work)" :to="'/work/' + slugify(work.title)" class="italic text-sm">
+              <span v-html="work.title"></span>
+            </NuxtLink>
+            <span v-else class="italic text-sm">
+              <span v-html="work.title"></span>
+            </span>
             <div class="inline-flex mt-[-4px]">
 
               <div>
@@ -61,7 +66,7 @@
       <p class="text-lg">albums</p>
       <div class="flex flex-col items-center leading-tight py-4 text-sm" v-for="item in releases">
         <p class="leading-tight py-2">{{ item.title }}</p>
-        <button @click="modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: item.album_art}], '')">
+        <button @click="openAlbumModal(item)">
           <nuxt-img :src="'/album_art/' + item.album_art" 
           quality="50"/>
         </button>
@@ -77,11 +82,12 @@
 
 <script setup>
   import { useModalStore } from "@/stores/ModalStore"
-  import { watchEffect } from "vue"
+  import { watchEffect, onMounted } from "vue"
 
   const props = defineProps(['slug'])
 
   const modalStore = useModalStore()
+  const route = useRoute()
 
   const slugify = (title) => {
     if (!title) return ''
@@ -90,6 +96,10 @@
 
   const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
 
+  const hasItems = (work) => {
+    return work.vimeo_trackid || (work.images && work.images.length) || work.score
+  }
+
   const isValidUrl = urlString => {
     var pattern = /^((http|https|ftp):\/\/)/;
     return pattern.test(urlString)
@@ -173,6 +183,49 @@
     return null
   }
 
+  const openAlbumModal = (album) => {
+    modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '')
+  }
+
+  const openModalFromHash = () => {
+    if (typeof window === 'undefined') return
+    
+    const hash = window.location.hash.slice(1)
+    if (!hash) return
+    
+    const [hashType, hashSlug] = hash.includes('|') ? hash.split('|') : [null, null]
+    if (!hashType || !hashSlug) return
+    
+    const work = findWorkBySlug(hashSlug)
+    if (!work) return
+
+    if (hashType === 'score' && work.score) {
+      modalStore.setModalProps(
+        'pdf',
+        'aspect-[1/1.414]',
+        true,
+        '',
+        '',
+        '',
+        work.score,
+        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
+      )
+    } else if (hashType === 'video' && work.vimeo_trackid) {
+      modalStore.setModalProps('video', 'aspect-video', true, '', '', work.vimeo_trackid)
+    } else if (hashType === 'image' && work.gallery) {
+      modalStore.setModalProps(
+        'image',
+        'aspect-auto',
+        true,
+        'images',
+        work.gallery,
+        '',
+        '',
+        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
+      )
+    }
+  }
+
   watchEffect(() => {
     if (props.slug && works.value) {
       const work = findWorkBySlug(props.slug)
@@ -190,4 +243,16 @@
       }
     }
   })
+
+  onMounted(() => {
+    if (!props.slug && typeof window !== 'undefined') {
+      openModalFromHash()
+    }
+  })
+
+  watch(() => modalStore.isOpen, (isOpen) => {
+    if (!isOpen && typeof window !== 'undefined' && window.location.hash) {
+      window.history.replaceState({}, '', window.location.pathname)
+    }
+  })
 </script>
diff --git a/pages/work/[slug].vue b/pages/work/[slug].vue
index ebe890f..81c093c 100644
--- a/pages/work/[slug].vue
+++ b/pages/work/[slug].vue
@@ -1,20 +1,91 @@
 <template>
-  <IndexContent :slug="slug" />
+  <div class="bg-zinc-100 rounded-lg mx-5 mt-5 p-5">
+    <div v-if="work">
+      <div class="sticky top-[100px] z-10 bg-zinc-100 pb-4 pt-2">
+        <div class="max-w-[800px] mx-auto">
+          <h1 class="text-4xl italic text-center mb-4" v-html="work.title"></h1>
+          
+          <nav v-if="itemCount >= 2" class="bg-zinc-200 flex gap-2 p-2 rounded-lg shadow border border-zinc-300 mb-6">
+            <a v-if="work.vimeo_trackid" href="#video" class="px-4 py-2 bg-white rounded hover:bg-gray-200 transition font-medium">Video</a>
+            <a v-if="gallery && gallery.length" href="#images" class="px-4 py-2 bg-white rounded hover:bg-gray-200 transition font-medium">Images</a>
+            <a v-if="scoreUrl" href="#score" class="px-4 py-2 bg-white rounded hover:bg-gray-200 transition font-medium">Score</a>
+          </nav>
+        </div>
+      </div>
+      
+      <div class="max-w-[800px] mx-auto">
+        <div id="video" v-if="work.vimeo_trackid" class="mb-8 scroll-mt-[280px]">
+          <iframe :src="'https://player.vimeo.com/video/' + work.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="w-full aspect-video"></iframe>
+        </div>
+        
+        <div id="images" v-if="gallery && gallery.length" class="mb-8 scroll-mt-[280px]">
+          <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
+        </div>
+        
+        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px]">
+          <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
+        </div>
+      </div>
+    </div>
+    <div v-else class="text-center p-10">
+      <p>Work not found</p>
+    </div>
+  </div>
 </template>
 
 <script setup>
-  import { useModalStore } from "@/stores/ModalStore"
-  import { watch } from "vue"
+import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
 
-  const route = useRoute()
-  const modalStore = useModalStore()
-  const router = useRouter()
+const route = useRoute()
+const audioPlayerStore = useAudioPlayerStore()
+const slug = route.params.slug
 
-  const slug = route.params.slug
+const slugify = (title) => {
+  if (!title) return ''
+  return title.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
+}
 
-  watch(() => modalStore.isOpen, (isOpen) => {
-    if (!isOpen) {
-      router.push('/')
-    }
-  })
+const { data: works } = await useFetch('/api/works', {
+  key: 'works-workpage-' + slug,
+})
+
+const work = computed(() => {
+  if (!works.value) return null
+  return works.value.find(w => slugify(w.title) === slug)
+})
+
+const scoreUrl = computed(() => {
+  if (!work.value?.score) return null
+  if (work.value.score.startsWith('/scores/')) {
+    return work.value.score
+  }
+  return '/scores/' + work.value.score
+})
+
+const gallery = computed(() => {
+  if (!work.value?.images) return null
+  return work.value.images.map(img => ({
+    image: img.filename
+  }))
+})
+
+const itemCount = computed(() => {
+  let count = 0
+  if (work.value?.vimeo_trackid) count++
+  if (gallery.value?.length) count++
+  if (scoreUrl.value) count++
+  return count
+})
+
+onMounted(() => {
+  if (work.value?.soundcloud_trackid) {
+    audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)
+  }
+})
 </script>
+
+<style>
+html {
+  scroll-behavior: smooth;
+}
+</style>
diff --git a/server/routes/scores/[...path].ts b/server/routes/scores/[...path].ts
new file mode 100644
index 0000000..ef20578
--- /dev/null
+++ b/server/routes/scores/[...path].ts
@@ -0,0 +1,25 @@
+import { existsSync, createReadStream } from 'fs'
+import { join } from 'path'
+import { sendStream } from 'h3'
+import { createError } from 'h3'
+
+export default defineEventHandler(async (event) => {
+  const url = event.path
+  
+  // Get the filename from the URL
+  const filename = url.replace('/scores/', '')
+  
+  // Check if file exists in public/scores/
+  const filePath = join(process.cwd(), 'public/scores', filename)
+  
+  if (!existsSync(filePath)) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Not Found'
+    })
+  }
+  
+  // Serve the file
+  event.node.res.statusCode = 200
+  return sendStream(event, createReadStream(filePath))
+})

From 8f73a3388e341ef84360032f9f111c080d35e815 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 15:49:29 +0100
Subject: [PATCH 04/32] Clean up navigation links with hover underline

- Add hover:underline to header nav links
- Add hover:underline to works links
- Rename /work/ route to /works/
- Include works.json manual tweak
---
 components/IndexContent.vue      | 2 +-
 layouts/default.vue              | 8 ++++----
 pages/{work => works}/[slug].vue | 8 ++++----
 server/data/works.json           | 1 -
 4 files changed, 9 insertions(+), 10 deletions(-)
 rename pages/{work => works}/[slug].vue (84%)

diff --git a/components/IndexContent.vue b/components/IndexContent.vue
index 8622f37..c127645 100644
--- a/components/IndexContent.vue
+++ b/components/IndexContent.vue
@@ -8,7 +8,7 @@
         <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
         <div class="leading-tight py-1 ml-3" v-for="work in item.works">
           <div class="grid grid-cols-[65%,30%] gap-1 items-start">
-            <NuxtLink v-if="hasItems(work)" :to="'/work/' + slugify(work.title)" class="italic text-sm">
+            <NuxtLink v-if="hasItems(work)" :to="'/works/' + slugify(work.title)" class="italic text-sm hover:underline">
               <span v-html="work.title"></span>
             </NuxtLink>
             <span v-else class="italic text-sm">
diff --git a/layouts/default.vue b/layouts/default.vue
index 7386837..e563b6b 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -3,10 +3,10 @@
       <div>
         <div class="text-5xl p-2"> <NuxtLink to='/'>michael winter</NuxtLink></div>
         <div class="inline-flex text-2xl ml-4">
-          <NuxtLink class="px-3" to='/'>works</NuxtLink>
-          <NuxtLink class="px-3" to='/events'>events</NuxtLink>
-          <NuxtLink class="px-3" to='/about'>about</NuxtLink>
-          <NuxtLink class="px-3" to='https://unboundedpress.org/code'>code</NuxtLink>
+          <NuxtLink class="px-3 hover:underline" to='/'>works</NuxtLink>
+          <NuxtLink class="px-3 hover:underline" to='/events'>events</NuxtLink>
+          <NuxtLink class="px-3 hover:underline" to='/about'>about</NuxtLink>
+          <NuxtLink class="px-3 hover:underline" to='https://unboundedpress.org/code'>code</NuxtLink>
         </div>
 
         <!-- hdp link while active -->
diff --git a/pages/work/[slug].vue b/pages/works/[slug].vue
similarity index 84%
rename from pages/work/[slug].vue
rename to pages/works/[slug].vue
index 81c093c..9aa18e2 100644
--- a/pages/work/[slug].vue
+++ b/pages/works/[slug].vue
@@ -5,10 +5,10 @@
         <div class="max-w-[800px] mx-auto">
           <h1 class="text-4xl italic text-center mb-4" v-html="work.title"></h1>
           
-          <nav v-if="itemCount >= 2" class="bg-zinc-200 flex gap-2 p-2 rounded-lg shadow border border-zinc-300 mb-6">
-            <a v-if="work.vimeo_trackid" href="#video" class="px-4 py-2 bg-white rounded hover:bg-gray-200 transition font-medium">Video</a>
-            <a v-if="gallery && gallery.length" href="#images" class="px-4 py-2 bg-white rounded hover:bg-gray-200 transition font-medium">Images</a>
-            <a v-if="scoreUrl" href="#score" class="px-4 py-2 bg-white rounded hover:bg-gray-200 transition font-medium">Score</a>
+          <nav v-if="itemCount >= 2" class="flex gap-4 mb-6">
+            <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
+            <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
+            <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
           </nav>
         </div>
       </div>
diff --git a/server/data/works.json b/server/data/works.json
index fabf506..ddec93e 100644
--- a/server/data/works.json
+++ b/server/data/works.json
@@ -1052,7 +1052,6 @@
       "variable ensemble"
     ],
     "date": "2004-04-02",
-    "score": "Tri_Dimensional_Canon_score.pdf",
     "priority": 2,
     "type": "sound"
   },

From d5fc1eed21091b80badd31a6b808bdb7b6e0c38e Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 16:31:36 +0100
Subject: [PATCH 05/32] Add mobile-friendly

 PDF handling- Score icon on mobile: direct link to PDF triggers download
- Works page: hide score iframe on mobile, Score link downloads PDF
- Desktop behavior unchanged
---
 components/IconButton.vue | 18 +++++++++++++++++-
 pages/works/[slug].vue    |  9 +++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 45de733..2cb1fa5 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,7 +2,10 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <button v-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
+            <a v-if="type === 'score' && isMobile" :href="scoreLink" class="inline-flex p-1">
+                <Icon name="ion:book-sharp" style="color: white" />
+            </a>
+            <button v-else-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
             </button>
 
@@ -55,6 +58,19 @@
 
   const workSlug = computed(() => slugify(props.work?.title))
 
+  const isMobile = computed(() => {
+    if (typeof window === 'undefined') return false
+    return window.innerWidth < 768
+  })
+
+  const scoreLink = computed(() => {
+    if (!props.work?.score) return null
+    if (props.work.score.startsWith('/scores/')) {
+      return props.work.score
+    }
+    return '/scores/' + props.work.score
+  })
+
   const isExternalLink = computed(() => {
     return props.link && !props.link.endsWith('.pdf') && !props.link.startsWith('/')
   })
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 9aa18e2..6c363a9 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -8,7 +8,7 @@
           <nav v-if="itemCount >= 2" class="flex gap-4 mb-6">
             <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
             <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
-            <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
+            <a v-if="scoreUrl" :href="isMobile ? scoreUrl : '#score'" class="hover:underline">Score</a>
           </nav>
         </div>
       </div>
@@ -22,7 +22,7 @@
           <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
         </div>
         
-        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px]">
+        <div id="score" v-if="scoreUrl && !isMobile" class="mb-8 scroll-mt-[280px]">
           <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
         </div>
       </div>
@@ -77,6 +77,11 @@ const itemCount = computed(() => {
   return count
 })
 
+const isMobile = computed(() => {
+  if (typeof window === 'undefined') return false
+  return window.innerWidth < 768
+})
+
 onMounted(() => {
   if (work.value?.soundcloud_trackid) {
     audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)

From 54ab2d8b24d1eab183715a65ceb5094e47804214 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 17:12:33 +0100
Subject: [PATCH 06/32] Add CSS-only mobile handling for PDFs

- Score icon: mobile downloads PDF, desktop opens modal
- Document icon: mobile downloads PDF, desktop opens modal
- Works page: mobile hides score iframe, Score link downloads PDF
- Uses pure CSS (md:hidden/hidden md:block) - no JS needed
---
 components/IconButton.vue | 36 ++++++++++++++++++++++--------------
 pages/works/[slug].vue    | 14 +++++++-------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 2cb1fa5..f2085b1 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,16 +2,29 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <a v-if="type === 'score' && isMobile" :href="scoreLink" class="inline-flex p-1">
-                <Icon name="ion:book-sharp" style="color: white" />
-            </a>
-            <button v-else-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
-                <Icon name="ion:book-sharp" style="color: white" />
-            </button>
+            <!-- Score: Mobile = PDF (downloads), Desktop = work page with hash (opens modal) -->
+            <span v-if="type === 'score'" class="md:hidden">
+                <a :href="scoreLink" class="inline-flex p-1">
+                    <Icon name="ion:book-sharp" style="color: white" />
+                </a>
+            </span>
+            <span v-if="type === 'score'" class="hidden md:block">
+                <a :href="'/works/' + workSlug + '#score'" class="inline-flex p-1">
+                    <Icon name="ion:book-sharp" style="color: white" />
+                </a>
+            </span>
 
-            <a v-else-if="type === 'document'" :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="openDocument()" class="inline-flex p-1 cursor-pointer">
-                <Icon name="ion:book-sharp" style="color: white" />
-            </a>
+            <!-- Document: Mobile = PDF (downloads), Desktop = modal -->
+            <span v-if="type === 'document'" class="md:hidden">
+                <a :href="link" class="inline-flex p-1 cursor-pointer">
+                    <Icon name="ion:book-sharp" style="color: white" />
+                </a>
+            </span>
+            <span v-if="type === 'document'" class="hidden md:block">
+                <a :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="openDocument()" class="inline-flex p-1 cursor-pointer">
+                    <Icon name="ion:book-sharp" style="color: white" />
+                </a>
+            </span>
 
             <a v-else-if="type === 'buy'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1 cursor-pointer">
                 <Icon name="bxs:purchase-tag" style="color: white" />
@@ -58,11 +71,6 @@
 
   const workSlug = computed(() => slugify(props.work?.title))
 
-  const isMobile = computed(() => {
-    if (typeof window === 'undefined') return false
-    return window.innerWidth < 768
-  })
-
   const scoreLink = computed(() => {
     if (!props.work?.score) return null
     if (props.work.score.startsWith('/scores/')) {
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 6c363a9..fab50a3 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -8,7 +8,12 @@
           <nav v-if="itemCount >= 2" class="flex gap-4 mb-6">
             <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
             <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
-            <a v-if="scoreUrl" :href="isMobile ? scoreUrl : '#score'" class="hover:underline">Score</a>
+            <span class="md:hidden">
+              <a v-if="scoreUrl" :href="scoreUrl" class="hover:underline">Score</a>
+            </span>
+            <span class="hidden md:block">
+              <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
+            </span>
           </nav>
         </div>
       </div>
@@ -22,7 +27,7 @@
           <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
         </div>
         
-        <div id="score" v-if="scoreUrl && !isMobile" class="mb-8 scroll-mt-[280px]">
+        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px] hidden md:block">
           <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
         </div>
       </div>
@@ -77,11 +82,6 @@ const itemCount = computed(() => {
   return count
 })
 
-const isMobile = computed(() => {
-  if (typeof window === 'undefined') return false
-  return window.innerWidth < 768
-})
-
 onMounted(() => {
   if (work.value?.soundcloud_trackid) {
     audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)

From 49f427256f732c0a6e8b295e00e5636a33de5e5f Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 17:26:58 +0100
Subject: [PATCH 07/32] Always show nav on works page regardless of item count

---
 pages/works/[slug].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index fab50a3..54fd8a8 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -5,7 +5,7 @@
         <div class="max-w-[800px] mx-auto">
           <h1 class="text-4xl italic text-center mb-4" v-html="work.title"></h1>
           
-          <nav v-if="itemCount >= 2" class="flex gap-4 mb-6">
+          <nav class="flex gap-4 mb-6">
             <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
             <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
             <span class="md:hidden">

From 1bbb7e0250727ac8a2934b440eaf536224d7cd35 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 18:36:40 +0100
Subject: [PATCH 08/32] Fix mobile handling for score and document icons

- Score icon: mobile downloads PDF, desktop opens modal
- Document icon: reverts to same behavior on mobile and desktop (opens modal)
- Remove console.log from isMobile
- Remove documentLink computed property
---
 components/IconButton.vue | 22 +++++++++++-----------
 pages/works/[slug].vue    | 15 ++++++++++-----
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index f2085b1..2572744 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -3,24 +3,19 @@
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
             <!-- Score: Mobile = PDF (downloads), Desktop = work page with hash (opens modal) -->
-            <span v-if="type === 'score'" class="md:hidden">
+            <span v-if="type === 'score' && isMobile()">
                 <a :href="scoreLink" class="inline-flex p-1">
                     <Icon name="ion:book-sharp" style="color: white" />
                 </a>
             </span>
-            <span v-if="type === 'score'" class="hidden md:block">
-                <a :href="'/works/' + workSlug + '#score'" class="inline-flex p-1">
+            <span v-else-if="type === 'score'">
+                <button @click="openWithHash('score')" class="inline-flex p-1">
                     <Icon name="ion:book-sharp" style="color: white" />
-                </a>
+                </button>
             </span>
 
-            <!-- Document: Mobile = PDF (downloads), Desktop = modal -->
-            <span v-if="type === 'document'" class="md:hidden">
-                <a :href="link" class="inline-flex p-1 cursor-pointer">
-                    <Icon name="ion:book-sharp" style="color: white" />
-                </a>
-            </span>
-            <span v-if="type === 'document'" class="hidden md:block">
+            <!-- Document: Mobile = External opens new tab, PDF downloads, internal pages open modal -->
+            <span v-if="type === 'document'">
                 <a :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="openDocument()" class="inline-flex p-1 cursor-pointer">
                     <Icon name="ion:book-sharp" style="color: white" />
                 </a>
@@ -87,6 +82,11 @@
     return props.link && props.link.startsWith('/') && !props.link.endsWith('.pdf')
   })
 
+  const isMobile = () => {
+    if (typeof window === 'undefined') return false
+    return window.innerWidth < 768
+  }
+
   const openDocument = () => {
     if (props.link?.endsWith('.pdf')) {
       modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link)
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 54fd8a8..a4874c8 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -8,11 +8,11 @@
           <nav class="flex gap-4 mb-6">
             <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
             <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
-            <span class="md:hidden">
-              <a v-if="scoreUrl" :href="scoreUrl" class="hover:underline">Score</a>
+            <span v-if="scoreUrl && isMobile()">
+              <a :href="scoreUrl" class="hover:underline">Score</a>
             </span>
-            <span class="hidden md:block">
-              <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
+            <span v-else-if="scoreUrl">
+              <a href="#score" class="hover:underline">Score</a>
             </span>
           </nav>
         </div>
@@ -27,7 +27,7 @@
           <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
         </div>
         
-        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px] hidden md:block">
+        <div id="score" v-if="scoreUrl && !isMobile()" class="mb-8 scroll-mt-[280px]">
           <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
         </div>
       </div>
@@ -82,6 +82,11 @@ const itemCount = computed(() => {
   return count
 })
 
+const isMobile = () => {
+  if (typeof window === 'undefined') return false
+  return window.innerWidth < 768
+}
+
 onMounted(() => {
   if (work.value?.soundcloud_trackid) {
     audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)

From 6e9f859d59dcae1353f13235f315b55df0a5e3a3 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 18:53:35 +0100
Subject: [PATCH 09/32] Make mobile and desktop behave identically

- Remove isMobile() function from IconButton and works page
- Remove mobile-specific conditionals for score and document icons
- Always show nav and score iframe on works page
- No more hydration mismatch - same HTML on server and client
---
 components/IconButton.vue | 28 ++++------------------------
 pages/works/[slug].vue    | 14 ++------------
 2 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 2572744..1e8cf2f 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,17 +2,10 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <!-- Score: Mobile = PDF (downloads), Desktop = work page with hash (opens modal) -->
-            <span v-if="type === 'score' && isMobile()">
-                <a :href="scoreLink" class="inline-flex p-1">
-                    <Icon name="ion:book-sharp" style="color: white" />
-                </a>
-            </span>
-            <span v-else-if="type === 'score'">
-                <button @click="openWithHash('score')" class="inline-flex p-1">
-                    <Icon name="ion:book-sharp" style="color: white" />
-                </button>
-            </span>
+            <!-- Score: Always opens modal -->
+            <button v-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
+                <Icon name="ion:book-sharp" style="color: white" />
+            </button>
 
             <!-- Document: Mobile = External opens new tab, PDF downloads, internal pages open modal -->
             <span v-if="type === 'document'">
@@ -66,14 +59,6 @@
 
   const workSlug = computed(() => slugify(props.work?.title))
 
-  const scoreLink = computed(() => {
-    if (!props.work?.score) return null
-    if (props.work.score.startsWith('/scores/')) {
-      return props.work.score
-    }
-    return '/scores/' + props.work.score
-  })
-
   const isExternalLink = computed(() => {
     return props.link && !props.link.endsWith('.pdf') && !props.link.startsWith('/')
   })
@@ -82,11 +67,6 @@
     return props.link && props.link.startsWith('/') && !props.link.endsWith('.pdf')
   })
 
-  const isMobile = () => {
-    if (typeof window === 'undefined') return false
-    return window.innerWidth < 768
-  }
-
   const openDocument = () => {
     if (props.link?.endsWith('.pdf')) {
       modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link)
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index a4874c8..0369081 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -8,12 +8,7 @@
           <nav class="flex gap-4 mb-6">
             <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
             <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
-            <span v-if="scoreUrl && isMobile()">
-              <a :href="scoreUrl" class="hover:underline">Score</a>
-            </span>
-            <span v-else-if="scoreUrl">
-              <a href="#score" class="hover:underline">Score</a>
-            </span>
+            <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
           </nav>
         </div>
       </div>
@@ -27,7 +22,7 @@
           <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
         </div>
         
-        <div id="score" v-if="scoreUrl && !isMobile()" class="mb-8 scroll-mt-[280px]">
+        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px]">
           <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
         </div>
       </div>
@@ -82,11 +77,6 @@ const itemCount = computed(() => {
   return count
 })
 
-const isMobile = () => {
-  if (typeof window === 'undefined') return false
-  return window.innerWidth < 768
-}
-
 onMounted(() => {
   if (work.value?.soundcloud_trackid) {
     audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)

From 97debc4d10a9cdcf043c17383f24d966fe8117aa Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 11:28:55 +0100
Subject: [PATCH 10/32] Redesign with hamburger menu and separate pages for
 pieces/writings/albums/performances/lectures

---
 components/IndexContent.vue | 146 +++++++++++++++++++-----------------
 components/Menu.vue         | 108 ++++++++++++++++++++++++++
 layouts/default.vue         |  74 +++++++-----------
 pages/albums.vue            |  64 ++++++++++++++++
 pages/index.vue             |   6 +-
 pages/lectures.vue          |  62 +++++++++++++++
 pages/performances.vue      |  76 +++++++++++++++++++
 pages/pieces.vue            | 116 ++++++++++++++++++++++++++++
 pages/writings.vue          |  66 ++++++++++++++++
 9 files changed, 601 insertions(+), 117 deletions(-)
 create mode 100644 components/Menu.vue
 create mode 100644 pages/albums.vue
 create mode 100644 pages/lectures.vue
 create mode 100644 pages/performances.vue
 create mode 100644 pages/pieces.vue
 create mode 100644 pages/writings.vue

diff --git a/components/IndexContent.vue b/components/IndexContent.vue
index c127645..ecbff0c 100644
--- a/components/IndexContent.vue
+++ b/components/IndexContent.vue
@@ -1,82 +1,94 @@
 <template>
-  <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-3 gap-10 divide-x divide-solid divide-black py-4 mb-10">
+  <div class="grid grid-cols-1 md:grid-cols-5 gap-8">
+    <div class="md:col-span-3">
+      <section class="mb-12">
+        <h2 class="text-xl mb-6 border-b border-gray-200 pb-2">pieces</h2>
+        
+        <div v-for="item in works" :key="item.year" class="mb-6">
+          <p class="text-sm text-gray-500 mb-2">{{ item.year }}</p>
+          <div v-for="work in item.works" :key="work.title" class="mb-3">
+            <div class="flex items-start gap-2">
+              <NuxtLink 
+                v-if="hasItems(work)" 
+                :to="'/works/' + slugify(work.title)" 
+                class="italic hover:underline"
+              >
+                <span v-html="work.title"></span>
+              </NuxtLink>
+              <span v-else class="italic">
+                <span v-html="work.title"></span>
+              </span>
 
-    <div class="px-5">
-      <p class="text-lg">pieces</p>
-
-      <div class="py-2 ml-3" v-for="item in works">
-        <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ item.year }}</p>
-        <div class="leading-tight py-1 ml-3" v-for="work in item.works">
-          <div class="grid grid-cols-[65%,30%] gap-1 items-start">
-            <NuxtLink v-if="hasItems(work)" :to="'/works/' + slugify(work.title)" class="italic text-sm hover:underline">
-              <span v-html="work.title"></span>
-            </NuxtLink>
-            <span v-else class="italic text-sm">
-              <span v-html="work.title"></span>
-            </span>
-            <div class="inline-flex mt-[-4px]">
-
-              <div>
-                <IconButton :visible="work.score" type="score" :work="work" :link="work.score" class="inline-flex p-1"></IconButton>
+              <div class="flex gap-1">
+                <IconButton v-if="work.score" type="score" :work="work" :link="work.score"></IconButton>
+                <IconButton v-if="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
+                <IconButton v-if="work.vimeo_trackid" type="video" :work="work"></IconButton>
+                <IconButton v-if="work.gallery" type="image" :work="work"></IconButton>
               </div>
-
-              <div>
-                <IconButton :visible="work.soundcloud_trackid" type="audio" :work="work" class="inline-flex p-1"></IconButton>
-              </div>
-
-              <div>
-                <IconButton :visible="work.vimeo_trackid" type="video" :work="work" class="inline-flex p-1"></IconButton>
-              </div>
-
-              <div>
-                <IconButton :visible="work.gallery" type="image" :work="work" class="inline-flex p-1"></IconButton>
-              </div>
-
             </div>
           </div>
         </div>
-      </div>
+      </section>
+
+      <section>
+        <h2 class="text-xl mb-6 border-b border-gray-200 pb-2">writings</h2>
+        
+        <div v-for="item in pubs" :key="item.citationKey" class="mb-4">
+          <div class="flex items-start gap-2">
+            <div>
+              <span v-html="item.entryTags.title" class="italic"></span>
+              <div class="text-sm text-gray-500">
+                {{ item.entryTags.author }}
+                <span v-if="item.entryTags.booktitle">{{ item.entryTags.booktitle }}.</span>
+                <span v-if="item.entryTags.journal">{{ item.entryTags.journal }}.</span>
+                <span v-if="item.entryTags.editor">editors {{ item.entryTags.editor }}</span>
+                <span v-if="item.entryTags.volume">volume {{ item.entryTags.volume }}.</span>
+                <span v-if="item.entryTags.publisher">{{ item.entryTags.publisher }}.</span>
+                {{ item.entryTags.year }}.
+              </div>
+            </div>
+            <IconButton 
+              v-if="item.entryTags.howpublished" 
+              type="document" 
+              :link="item.entryTags.howpublished"
+            ></IconButton>
+          </div>
+        </div>
+      </section>
     </div>
 
-    <div class="px-5">
-      <p class="text-lg">writings</p>
-
-      <div class="leading-tight py-2 ml-3 text-sm" v-for="item in pubs">
-        <div class="grid grid-cols-[95%,5%] gap-1 items-start">
-          <div>
-            <span v-html="item.entryTags.title"></span>
-            <div class="ml-4 text-[#7F7F7F]">
-              {{ item.entryTags.author }}
-              <span v-if=item.entryTags.booktitle>{{ item.entryTags.booktitle}}.&nbsp;</span>
-              <span v-if=item.entryTags.journal>{{item.entryTags.journal}}.&nbsp;</span>
-              <span v-if=item.entryTags.editor>editors {{item.entryTags.editor}}&nbsp;</span>
-              <span v-if=item.entryTags.volume>volume {{item.entryTags.volume}}.</span>
-              <span v-if=item.entryTags.publisher>{{item.entryTags.publisher}}.</span>
-              {{ item.entryTags.year }}.
+    <div class="md:col-span-2">
+      <section>
+        <h2 class="text-xl mb-6 border-b border-gray-200 pb-2">albums</h2>
+        
+        <div class="grid grid-cols-2 sm:grid-cols-1 gap-6">
+          <div v-for="item in releases" :key="item.title" class="text-center">
+            <p class="italic mb-2">{{ item.title }}</p>
+            <button @click="openAlbumModal(item)" class="block mx-auto">
+              <nuxt-img 
+                :src="'/album_art/' + item.album_art" 
+                quality="50"
+                class="w-32 sm:w-48"
+              />
+            </button>
+            <div class="flex justify-center gap-2 mt-2">
+              <IconButton 
+                v-if="item.discogs_id" 
+                type="discogs" 
+                :link="'https://www.discogs.com/release/' + item.discogs_id" 
+                :newTab="true"
+              ></IconButton>
+              <IconButton 
+                v-if="item.buy_link" 
+                type="buy" 
+                :link="item.buy_link" 
+                :newTab="true"
+              ></IconButton>
             </div>
           </div>
-          <div>
-            <IconButton :visible=item.entryTags.howpublished type="document" :link=item.entryTags.howpublished class="inline-flex p-1 mt-[-6px]"></IconButton>
-          </div>
         </div>
-      </div>
+      </section>
     </div>
-
-    <div class="px-5">
-      <p class="text-lg">albums</p>
-      <div class="flex flex-col items-center leading-tight py-4 text-sm" v-for="item in releases">
-        <p class="leading-tight py-2">{{ item.title }}</p>
-        <button @click="openAlbumModal(item)">
-          <nuxt-img :src="'/album_art/' + item.album_art" 
-          quality="50"/>
-        </button>
-        <div class="flex place-content-center place-items-center">
-          <IconButton :visible="item.discogs_id" type="discogs" :link="'https://www.discogs.com/release/' + item.discogs_id" :newTab="true"></IconButton>
-          <IconButton :visible="item.buy_link" type="buy" :link="item.buy_link" :newTab="true"></IconButton>
-        </div>
-      </div>
-    </div>
-    
   </div>
 </template>
 
diff --git a/components/Menu.vue b/components/Menu.vue
new file mode 100644
index 0000000..648f3ab
--- /dev/null
+++ b/components/Menu.vue
@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <button 
+      @click="isOpen = true" 
+      class="fixed top-4 left-4 z-50 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">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
+
+    <Transition name="slide">
+      <div v-if="isOpen" class="fixed inset-0 z-50">
+        <div class="absolute inset-0 bg-black/50" @click="isOpen = false"></div>
+        
+        <div class="absolute left-0 top-0 h-full w-64 bg-white shadow-lg p-6 pt-16">
+          <nav class="space-y-4">
+            <div>
+              <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Works</p>
+              <div class="space-y-2 ml-2">
+                <NuxtLink 
+                  to="/pieces" 
+                  class="block hover:underline"
+                  @click="isOpen = false"
+                >
+                  pieces
+                </NuxtLink>
+                <NuxtLink 
+                  to="/writings" 
+                  class="block hover:underline"
+                  @click="isOpen = false"
+                >
+                  writings
+                </NuxtLink>
+                <NuxtLink 
+                  to="/albums" 
+                  class="block hover:underline"
+                  @click="isOpen = false"
+                >
+                  albums
+                </NuxtLink>
+              </div>
+            </div>
+
+            <div>
+              <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Events</p>
+              <div class="space-y-2 ml-2">
+                <NuxtLink 
+                  to="/performances" 
+                  class="block hover:underline"
+                  @click="isOpen = false"
+                >
+                  performances
+                </NuxtLink>
+                <NuxtLink 
+                  to="/lectures" 
+                  class="block hover:underline"
+                  @click="isOpen = false"
+                >
+                  lectures
+                </NuxtLink>
+              </div>
+            </div>
+            
+            <NuxtLink 
+              to="/about" 
+              class="block hover:underline"
+              @click="isOpen = false"
+            >
+              about
+            </NuxtLink>
+            
+            <a 
+              href="https://unboundedpress.org/code" 
+              target="_blank" 
+              class="block hover:underline"
+              @click="isOpen = false"
+            >
+              code
+            </a>
+          </nav>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+const isOpen = ref(false)
+
+const route = useRoute()
+watch(() => route.path, () => {
+  isOpen.value = false
+})
+</script>
+
+<style scoped>
+.slide-enter-active,
+.slide-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index e563b6b..214cdb0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,40 +1,34 @@
 <template>
-  <div class="grid grid-cols-[63%,35%] w-full font-thin sticky top-0 bg-white p-2 z-20">
-      <div>
-        <div class="text-5xl p-2"> <NuxtLink to='/'>michael winter</NuxtLink></div>
-        <div class="inline-flex text-2xl ml-4">
-          <NuxtLink class="px-3 hover:underline" to='/'>works</NuxtLink>
-          <NuxtLink class="px-3 hover:underline" to='/events'>events</NuxtLink>
-          <NuxtLink class="px-3 hover:underline" to='/about'>about</NuxtLink>
-          <NuxtLink class="px-3 hover:underline" to='https://unboundedpress.org/code'>code</NuxtLink>
-        </div>
-
-        <!-- hdp link while active -->
-        <!------
-        <div class="inline-flex text-2xl ml-4 font-bold">
-          <NuxtLink class="px-3" to='/a_history_of_the_domino_problem'>A HISTORY OF THE DOMINO PROBLEM | 17.11 - 01.12.2023 </NuxtLink>
-        </div>
-        --->
+  <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">
+          <NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>
+        </h1>
       </div>
+    </header>
 
-      <!-- TODO: this needs to be automatically flipped off when there are no upcoming events-->
-      <!------
-      <div class="px-1 bg-zinc-100 rounded-lg text-center">
-          <div class="text-sm">upcoming events</div>
-          <EventSlider :upcoming_events="upcoming_events" class="max-w-[95%] min-h-[80%]"></EventSlider>
-      </div>
-      -->
+    <Menu />
 
-  </div>
-  <slot /> <!-- required here only -->
-  <div class="fixed bottom-0 bg-white p-2 w-full flex justify-center z-20">
-    <ClientOnly>
-      <iframe width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay" v-if="audioPlayerStore.soundcloud_trackid !== 'undefined'"
-      :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"></iframe>
-    </ClientOnly>
-  </div>
+    <main class="max-w-7xl mx-auto px-4 py-8">
+      <slot />
+    </main>
 
-  <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
+    <footer class="fixed bottom-0 bg-white border-t border-gray-200 p-2 w-full flex justify-center z-30">
+      <ClientOnly>
+        <iframe 
+          v-if="audioPlayerStore.soundcloud_trackid !== 'undefined'"
+          width="400rem" 
+          height="20px" 
+          scrolling="no" 
+          frameborder="no" 
+          allow="autoplay" 
+          :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"
+        ></iframe>
+      </ClientOnly>
+    </footer>
+
+    <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
       <ModalBody :class="modalStore.aspect">
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
@@ -68,7 +62,8 @@
           </a>
         </div>
       </ModalBody>
-  </Modal>
+    </Modal>
+  </div>
 </template>
 
 <script setup>
@@ -96,17 +91,4 @@
       })
     }
   })
-
-  const { data: upcoming_events } = await useFetch('/api/events', {
-      transform: (events) => {
-          const now = new Date().getTime()
-          const upcoming = events.filter(e => new Date(e.start_date).getTime() >= now)
-          for (const event of upcoming) {
-              let date = new Date(event.start_date)
-              event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + ("0" + date.getDate()).slice(-2) + "." + date.getFullYear()
-          }
-          return upcoming.sort((a,b) => new Date(a.start_date) - new Date(b.start_date))
-      }
-  })
-
 </script>
diff --git a/pages/albums.vue b/pages/albums.vue
new file mode 100644
index 0000000..3e9d5d4
--- /dev/null
+++ b/pages/albums.vue
@@ -0,0 +1,64 @@
+<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">
+            <nuxt-img 
+              :src="'/album_art/' + item.album_art" 
+              quality="50"
+              class="w-full aspect-[2/1] object-contain border border-gray-300 transition-opacity duration-200 group-hover:opacity-50"
+            />
+            <p class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 text-center italic px-2">{{ item.title }}</p>
+          </button>
+          <div class="flex justify-center gap-4 mt-2 text-sm text-gray-500">
+            <a 
+              v-if="item.discogs_id"
+              :href="'https://www.discogs.com/release/' + item.discogs_id"
+              target="_blank"
+              class="hover:underline"
+            >
+              discogs
+            </a>
+            <a 
+              v-if="item.buy_link"
+              :href="item.buy_link"
+              target="_blank"
+              class="hover:underline"
+            >
+              buy
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { useModalStore } from "@/stores/ModalStore"
+
+const modalStore = useModalStore()
+
+const { data: releases } = await useFetch('/api/releases', {
+  key: 'releases-page',
+  transform: (releases) => {
+    const cloned = JSON.parse(JSON.stringify(releases))
+    return cloned.sort((a,b) => {
+      const dateA = parseInt(a.date) || 0
+      const dateB = parseInt(b.date) || 0
+      return dateB - dateA
+    })
+  }
+})
+
+const openAlbumModal = (album) => {
+  modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '')
+}
+
+useHead({
+  titleTemplate: 'Michael Winter - Albums'
+})
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index afcd7f6..6e2c95c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,7 @@
 <template>
-  <IndexContent />
+  <div></div>
 </template>
 
 <script setup>
-  useHead({
-    titleTemplate: 'Michael Winter - Home / Works - Pieces, Publications, and Albums'
-  })
+await navigateTo('/pieces', { replace: true })
 </script>
diff --git a/pages/lectures.vue b/pages/lectures.vue
new file mode 100644
index 0000000..233c278
--- /dev/null
+++ b/pages/lectures.vue
@@ -0,0 +1,62 @@
+<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>
+        
+        <div v-for="item in yearGroup.talks" :key="item.date + item.title" class="mb-4">
+          <div class="text-sm">{{ item.location }}</div>
+          <div v-for="talk in item.talks" :key="talk.title" class="ml-4 text-sm text-gray-500">
+            {{ talk.title }}
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const { data: talksData } = await useFetch('/api/talks', {
+  transform: (events) => {
+    for (const event of events) {
+      let date = new Date(event.date)
+      event.date = date
+      event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
+      if(typeof event.title === 'string' || event.title instanceof String) {
+        event.talks = [{'title': event.title}]
+      } else {
+        let talks = []
+        for(const talk of event.title){
+          talks.push({"title": talk})
+        }
+        event.talks = talks
+      }
+    }
+    return events.sort((a,b) => new Date(b.date) - new Date(a.date))
+  }
+})
+
+const lecturesByYear = computed(() => {
+  if (!talksData.value) return []
+
+  const byYear = {}
+  for (const talk of talksData.value) {
+    const year = talk.date ? talk.date.getFullYear() : 'Unknown'
+    if (!byYear[year]) byYear[year] = []
+    byYear[year].push(talk)
+  }
+
+  return Object.keys(byYear)
+    .sort((a, b) => b - a)
+    .map(year => {
+      const talks = byYear[year].sort((a, b) => new Date(b.date) - new Date(a.date))
+      return { year, talks }
+    })
+})
+
+useHead({
+  titleTemplate: 'Michael Winter - Lectures'
+})
+</script>
diff --git a/pages/performances.vue b/pages/performances.vue
new file mode 100644
index 0000000..d87551a
--- /dev/null
+++ b/pages/performances.vue
@@ -0,0 +1,76 @@
+<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>
+        
+        <div v-for="item in yearGroup.events" :key="item.start_date" class="mb-6">
+          <div class="flex items-start gap-4">
+            <div class="text-sm text-gray-400 min-w-[80px]">
+              {{ item.formatted_date }}
+            </div>
+            <div class="flex-1">
+              <div>
+                {{ item.venue.city }}, {{ item.venue.state }}
+              </div>
+              <div class="text-sm text-gray-500 ml-4">
+                {{ item.venue.name }}
+              </div>
+              
+              <div class="ml-4 mt-2">
+                <div v-for="performance in item.program" :key="performance.work" class="mb-2">
+                  <div class="italic">{{ performance.work }}</div>
+                  <div v-if="performance.ensemble" class="ml-4 text-sm text-gray-500">
+                    {{ performance.ensemble }}
+                  </div>
+                  <div v-if="performance.performers?.length" class="ml-4 text-sm text-gray-500">
+                    <span v-for="(performer, idx) in performance.performers" :key="performer.name">
+                      <span v-if="idx > 0">, </span>
+                      {{ performer.name }}<span v-if="performer.instrument_tags?.length"> - {{ performer.instrument_tags.join(', ') }}</span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const { data: events } = await useFetch('/api/events', {
+  transform: (events) => {
+    for (const event of events) {
+      let date = new Date(event.start_date)
+      event.formatted_date = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
+    }
+    return events.sort((a,b) => new Date(b.start_date) - new Date(a.start_date))
+  }
+})
+
+const eventsByYear = computed(() => {
+  if (!events.value) return []
+  
+  const byYear = {}
+  for (const event of events.value) {
+    const year = new Date(event.start_date).getFullYear()
+    if (!byYear[year]) byYear[year] = []
+    byYear[year].push(event)
+  }
+  
+  return Object.keys(byYear)
+    .sort((a, b) => b - a)
+    .map(year => ({
+      year,
+      events: byYear[year].sort((a, b) => new Date(b.start_date) - new Date(a.start_date))
+    }))
+})
+
+useHead({
+  titleTemplate: 'Michael Winter - Performances'
+})
+</script>
diff --git a/pages/pieces.vue b/pages/pieces.vue
new file mode 100644
index 0000000..7cfcd00
--- /dev/null
+++ b/pages/pieces.vue
@@ -0,0 +1,116 @@
+<template>
+  <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">
+            <div class="flex items-start gap-2">
+              <NuxtLink 
+                v-if="hasItems(work)" 
+                :to="'/works/' + slugify(work.title)" 
+                class="italic hover:underline"
+              >
+                <span v-html="work.title"></span>
+              </NuxtLink>
+              <span v-else class="italic">
+                <span v-html="work.title"></span>
+              </span>
+
+              <div class="flex gap-1">
+                <IconButton v-if="work.score" type="score" :work="work" :link="work.score"></IconButton>
+                <IconButton v-if="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
+                <IconButton v-if="work.vimeo_trackid" type="video" :work="work"></IconButton>
+                <IconButton v-if="work.gallery" type="image" :work="work"></IconButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <div class="lg:col-span-2">
+      <section v-if="worksWithImages.length">
+        <div class="grid grid-cols-1 gap-4">
+          <NuxtLink 
+            v-for="work in worksWithImages" 
+            :key="work.title"
+            :to="'/works/' + slugify(work.title)"
+            class="block group relative overflow-hidden"
+          >
+            <nuxt-img 
+              :src="'/images/' + work.images[0].filename"
+              :alt="work.title"
+              class="w-full aspect-[4/3] object-cover transition-opacity duration-200 group-hover:opacity-50"
+            />
+            <p class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 text-center italic px-2" v-html="work.title"></p>
+          </NuxtLink>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useModalStore } from "@/stores/ModalStore"
+
+const modalStore = useModalStore()
+const route = useRoute()
+
+const slugify = (title) => {
+  if (!title) return ''
+  return title.toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '')
+}
+
+const groupBy = (x,f)=>x.reduce((a,b,i)=>((a[f(b,i,x)]||=[]).push(b),a),{});
+
+const hasItems = (work) => {
+  return work.vimeo_trackid || (work.images && work.images.length) || work.score
+}
+
+const worksWithImages = computed(() => {
+  if (!works.value) return []
+  const allWorks = works.value.flatMap(group => group.works)
+  return allWorks.filter(work => work.images && work.images.length)
+})
+
+const { data: works } = await useFetch('/api/works', {
+  key: 'works-pieces',
+  transform: (works) => {
+    const cloned = JSON.parse(JSON.stringify(works))
+    for (const work of cloned) {
+      if(work.score){
+        work.score = "/scores/" + work.score
+      }
+      if(work.images){
+        let gallery = [];
+        for (const image of work.images){
+          gallery.push({
+            image: image.filename,
+          })
+        }
+        work.gallery = gallery
+      }
+    }
+    let priorityGroups = groupBy(cloned, work => work.priority)
+    let groups = groupBy(priorityGroups["1"], work => new Date(work.date).getFullYear())
+    groups = Object.keys(groups).map((year) => {
+      return {
+        year,
+        works: groups[year].sort((a,b) => new Date(b.date) - new Date(a.date))
+      };
+    });
+    groups.sort((a,b) => b.year - a.year)
+    if (priorityGroups["2"]) {
+      groups.push({year: "miscellany", works: priorityGroups["2"].sort((a,b) => new Date(b.date) - new Date(a.date))})
+    }
+    return groups
+  }
+})
+
+useHead({
+  titleTemplate: 'Michael Winter - Pieces'
+})
+</script>
diff --git a/pages/writings.vue b/pages/writings.vue
new file mode 100644
index 0000000..c8ecd20
--- /dev/null
+++ b/pages/writings.vue
@@ -0,0 +1,66 @@
+<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>
+            <a 
+              v-if="item.entryTags.howpublished"
+              :href="item.entryTags.howpublished"
+              target="_blank"
+              class="hover:underline"
+            >
+              <span v-html="item.entryTags.title"></span>
+            </a>
+            <span v-else v-html="item.entryTags.title"></span>
+            <div class="text-sm text-gray-500 ml-4">
+              {{ item.entryTags.author }}
+              <span v-if="item.entryTags.booktitle">{{ item.entryTags.booktitle }}.</span>
+              <span v-if="item.entryTags.journal">{{ item.entryTags.journal }}.</span>
+              <span v-if="item.entryTags.editor">editors {{ item.entryTags.editor }}</span>
+              <span v-if="item.entryTags.volume">volume {{ item.entryTags.volume }}.</span>
+              <span v-if="item.entryTags.publisher">{{ item.entryTags.publisher }}.</span>
+              {{ item.entryTags.year }}.
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+const isValidUrl = urlString => {
+  var pattern = /^((http|https|ftp):\/\/)/;
+  return pattern.test(urlString)
+}
+
+const { data: pubs } = await useFetch('/api/publications', {
+  key: 'publications-page',
+  transform: (pubs) => {
+    const cloned = JSON.parse(JSON.stringify(pubs))
+    for (const pub of cloned) {
+      if(pub.entryTags && pub.entryTags.howpublished && !(isValidUrl(pub.entryTags.howpublished))){
+        pub.entryTags.howpublished = "/pubs/" + pub.entryTags.howpublished
+      }
+    }
+    return cloned.sort((a, b) => {
+      const getYear = (key) => parseInt(key.replace(/\D/g, '')) || 0
+      const getSuffix = (key) => key.replace(/^Winter\d+/, '') || ''
+      
+      const yearA = getYear(a.citationKey)
+      const yearB = getYear(b.citationKey)
+      
+      if (yearA !== yearB) return yearB - yearA
+      
+      return getSuffix(b.citationKey).localeCompare(getSuffix(a.citationKey))
+    })
+  }
+})
+
+useHead({
+  titleTemplate: 'Michael Winter - Writings'
+})
+</script>

From be041de733ac01c56ca48da8983b44e3895a9998 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 11:46:54 +0100
Subject: [PATCH 11/32] Redesign about page with new layout matching pieces
 page

---
 pages/about.vue | 163 +++++++++++++++++++++++++-----------------------
 1 file changed, 86 insertions(+), 77 deletions(-)

diff --git a/pages/about.vue b/pages/about.vue
index 779020b..6f4966d 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -1,91 +1,100 @@
 <template>
-    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-[60%,35%] gap-10 divide-x divide-solid divide-black py-4 min-h-[calc(100vh-10.5rem)]">
-        <div class="px-5">
-            <p class="text-lg">about</p>
+  <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="leading-tight py-2 ml-3 text-sm">
-                <div class="leading-tight py-2">
-                    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.
-                </div>
-                <div class="leading-tight py-2">
-                    My music and installations have been presented at venues and festivals throughout the world such as REDCAT, in Los Angeles; the Ostrava Festival of New Music in the Czech Republic; Tsonami Arte Sonoro Festival in Valparaiso, Chile; the Huddersfield New Music Festival in the United Kingdom; and Umbral Sesiones at the Museo de Arte Contemporáneo in Oaxaca, Mexico. Recordings of my music have been released by XI Records, Another Timbre, New World Records, Edition Wandelweiser, Bahn Mi Verlag, Tsonami Records, and Pogus Productions. In 2008, I co-founded <em>the wulf.</em>, a Los Angeles-based organization dedicated to experimental performance and art that presented over 350 events in 8 years. From 2018 to 2019, I was a fellow / artist-in-residence at the Akademie Schloss Solitude in Stuttgart, Germany. I currently teach as University Professor of Sound and Intermedia at the Gustav Mahler Privatuniversität für Musik in Klagenfurt, Austria while maintaining my primary residence in Berlin, Germany.
-                </div> 
-                <br>
-                <br>
-                <div id="mc_embed_signup">
-                    <form action="https://unboundedpress.us12.list-manage.com/subscribe/post?u=bdadd25738fedf704641f3a80&amp;id=01c5761ebb&amp;f_id=00f143e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
-                        <label for="mce-EMAIL">subscribe to my mailing list to know about upcoming events</label>
-                        <input id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="email address" required="" class="email">
-                        <div style="position: absolute; left: -5000px;" aria-hidden="true">
-                            <input type="text" name="b_bdadd25738fedf704641f3a80_01c5761ebb" tabindex="-1" value="">
-                        </div>
-                        <div id="mce-responses" class="clear foot">
-                            <div class="response" id="mce-error-response" style="display:none"></div>
-                            <div class="response" id="mce-success-response" style="display:none"></div>
-                        </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
-                        <div class="clear">
-                            <input id="mc-embedded-subscribe" type="submit" value="subscribe" name="subscribe" class="button">
-                        </div>
-                    </form>
-                </div>  
-                <br>
-                <br>
-                <div class="inline-flex place-items-center p-2">
-                    Contact
-                    <div>
-                        <IconButton :visible="true" type="email" work="placeholder" link="javascript:location='mailto:\u006d\u0077\u0069\u006e\u0074\u0065\u0072\u0040\u0075\u006e\u0062\u006f\u0075\u006e\u0064\u0065\u0064\u0070\u0072\u0065\u0073\u0073\u002e\u006f\u0072\u0067';void 0" class="mt-[-6px]"></IconButton>
-                    </div>
-                </div>
-                <br>
-                <div class="inline-flex place-items-center p-2">
-                    CV
-                    <div>
-                        <IconButton :visible="true" type="document" work="placeholder" link="/cv" class="mt-[-6px]"></IconButton>
-                    </div>
-                </div>
-                <br>
-                <div class="inline-flex place-items-center p-2">
-                    Works List with Presentation History
-                    <div>
-                        <IconButton :visible="true" type="document" work="placeholder" link="/works_list" class="mt-[-6px]"></IconButton>
-                    </div>
-                </div>
-                <br>
-                <br>
-            </div> 
+        <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.
+          </p>
+          <p>
+            My music and installations have been presented at venues and festivals throughout the world such as REDCAT, in Los Angeles; the Ostrava Festival of New Music in the Czech Republic; Tsonami Arte Sonoro Festival in Valparaiso, Chile; the Huddersfield New Music Festival in the United Kingdom; and Umbral Sesiones at the Museo de Arte Contemporáneo in Oaxaca, Mexico. Recordings of my music have been released by XI Records, Another Timbre, New World Records, Edition Wandelweiser, Bahn Mi Verlag, Tsonami Records, and Pogus Productions. In 2008, I co-founded <em>the wulf.</em>, a Los Angeles-based organization dedicated to experimental performance and art that presented over 350 events in 8 years. From 2018 to 2019, I was a fellow / artist-in-residence at the Akademie Schloss Solitude in Stuttgart, Germany. I currently teach as University Professor of Sound and Intermedia at the Gustav Mahler Privatuniversität für Musik in Klagenfurt, Austria while maintaining my primary residence in Berlin, Germany.
+          </p>
         </div>
-        <div class="px-5">
-            <ImageSlider bucket="images" :gallery="gallery" class="max-w-[90%]"></ImageSlider>
+
+        <div class="mb-8 space-y-2">
+          <a href="mailto:mwinter@unboundedpress.org" class="block hover:underline">contact</a>
+          <a href="/cv" class="block hover:underline">cv</a>
+          <a href="/works_list" class="block hover:underline">works list</a>
         </div>
+
+        <div id="mc_embed_signup">
+          <form action="https://unboundedpress.us12.list-manage.com/subscribe/post?u=bdadd25738fedf704641f3a80&amp;id=01c5761ebb&amp;f_id=00f143e0f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_self">
+            <label for="mce-EMAIL" class="block mb-2">subscribe to my mailing list to know about upcoming events</label>
+            <div class="flex gap-2">
+              <input id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="email address" required="" class="flex-1 px-3 py-2 border border-gray-300 rounded">
+              <div style="position: absolute; left: -5000px;" aria-hidden="true">
+                <input type="text" name="b_bdadd25738fedf704641f3a80_01c5761ebb" tabindex="-1" value="">
+              </div>
+              <input id="mc-embedded-subscribe" type="submit" value="subscribe" name="subscribe" class="px-4 py-2 bg-gray-600 text-white rounded hover:bg-gray-700">
+            </div>
+            <div id="mce-responses" class="clear foot">
+              <div class="response" id="mce-error-response" style="display:none"></div>
+              <div class="response" id="mce-success-response" style="display:none"></div>
+            </div>
+          </form>
+        </div>
+      </section>
     </div>
+
+    <div class="lg:col-span-2">
+      <section v-if="gallery?.length" class="lg:sticky lg:top-24">
+        <div class="grid grid-cols-2 gap-4">
+          <button 
+            v-for="(image, index) in gallery" 
+            :key="index"
+            @click="openImageModal(index)"
+            class="block w-full relative overflow-hidden group"
+          >
+            <nuxt-img 
+              :src="'/images/' + image.image"
+              :alt="image.credit"
+              class="w-full aspect-[4/3] object-cover transition-opacity duration-200 group-hover:opacity-50"
+            />
+            <p v-if="image.credit" class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 text-center text-xs px-2 bg-black/50 text-white">photo credit: {{ image.credit }}</p>
+          </button>
+        </div>
+      </section>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { useModalStore } from "@/stores/ModalStore"
+
+const modalStore = useModalStore()
 
 const { data: gallery } = await useFetch('/api/my_image_gallery')
 
+const openImageModal = (index) => {
+  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '')
+}
+
 useHead({
-    titleTemplate: 'Michael Winter - About - Short Bio, Contact, CV, Works List, and Mailing List'
-  })
+  titleTemplate: 'Michael Winter - About'
+})
 </script>
 
-<style>
-    #mc_embed_signup form {text-align:left; padding:2px 0 2px 0;}
-    .mc-field-group { display: inline-block; } /* positions input field horizontally */
-    #mc_embed_signup input.email {border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
-    #mc_embed_signup label {display:block; padding-bottom:10px;}
-    #mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
-    #mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
-    #mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
-    #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
-    #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
-    #mc_embed_signup #mce-error-response {display:none;}
-    #mc_embed_signup #mce-success-response {color:#529214; display:none;}
-    #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
-    @media (max-width: 768px) {
-        #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
-        #mc_embed_signup .clear {display: block; width: 100% }
-        #mc_embed_signup .button {width: 100%; margin:0; }
-    }
-    #mc_embed_signup{clear:left; width:100%;}
-</style>
\ No newline at end of file
+<style scoped>
+#mc_embed_signup input.email {
+  width: 100%;
+}
+@media (min-width: 640px) {
+  #mc_embed_signup input.email {
+    width: auto;
+    flex: 1;
+  }
+}
+#mc_embed_signup .button {
+  width: auto;
+}
+@media (max-width: 639px) {
+  #mc_embed_signup form > div {
+    flex-direction: column;
+  }
+  #mc_embed_signup .button {
+    width: 100%;
+  }
+}
+</style>

From 69fab67601dcb54187113ac7822bfb910e0aaef1 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 13:16:46 +0100
Subject: [PATCH 12/32] Update works page with new layout; fix audio player to
 only autoplay on click

---
 layouts/default.vue        |   1 -
 pages/pieces.vue           |   8 +--
 pages/works/[slug].vue     | 119 ++++++++++++++++++++++++++++---------
 stores/AudioPlayerStore.js |  11 +++-
 4 files changed, 102 insertions(+), 37 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 214cdb0..9377105 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -22,7 +22,6 @@
           height="20px" 
           scrolling="no" 
           frameborder="no" 
-          allow="autoplay" 
           :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"
         ></iframe>
       </ClientOnly>
diff --git a/pages/pieces.vue b/pages/pieces.vue
index 7cfcd00..d469626 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -20,10 +20,10 @@
               </span>
 
               <div class="flex gap-1">
-                <IconButton v-if="work.score" type="score" :work="work" :link="work.score"></IconButton>
-                <IconButton v-if="work.soundcloud_trackid" type="audio" :work="work"></IconButton>
-                <IconButton v-if="work.vimeo_trackid" type="video" :work="work"></IconButton>
-                <IconButton v-if="work.gallery" type="image" :work="work"></IconButton>
+                <IconButton v-if="work.score" type="score" :work="work" :link="work.score" :visible="true"></IconButton>
+                <IconButton v-if="work.soundcloud_trackid" type="audio" :work="work" :visible="true"></IconButton>
+                <IconButton v-if="work.vimeo_trackid" type="video" :work="work" :visible="true"></IconButton>
+                <IconButton v-if="work.gallery" type="image" :work="work" :visible="true"></IconButton>
               </div>
             </div>
           </div>
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 0369081..594121b 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -1,29 +1,81 @@
 <template>
-  <div class="bg-zinc-100 rounded-lg mx-5 mt-5 p-5">
+  <div>
     <div v-if="work">
-      <div class="sticky top-[100px] z-10 bg-zinc-100 pb-4 pt-2">
-        <div class="max-w-[800px] mx-auto">
-          <h1 class="text-4xl italic text-center mb-4" v-html="work.title"></h1>
-          
-          <nav class="flex gap-4 mb-6">
-            <a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
-            <a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
-            <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
-          </nav>
+      <div class="sticky top-[64px] bg-white z-30 border-b border-gray-200">
+        <div class="max-w-3xl mx-auto px-4">
+          <div class="flex items-center justify-between py-1">
+            <div class="flex items-baseline gap-1">
+              <h1 class="text-xl italic" v-html="work.title"></h1>
+              <span class="text-sm text-gray-500">({{ year }})</span>
+            </div>
+            <nav class="flex items-center gap-4 text-sm">
+              <a 
+                v-for="item in navItems" 
+                :key="item.href"
+                :href="item.href" 
+                class="hover:underline"
+              >
+                {{ item.label }}
+              </a>
+              <NuxtLink to="/pieces" class="text-gray-500 hover:text-gray-700">
+                <Icon name="mdi:arrow-u-left-top" class="w-4 h-4 translate-y-0.5" />
+              </NuxtLink>
+            </nav>
+          </div>
         </div>
       </div>
       
-      <div class="max-w-[800px] mx-auto">
-        <div id="video" v-if="work.vimeo_trackid" class="mb-8 scroll-mt-[280px]">
-          <iframe :src="'https://player.vimeo.com/video/' + work.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="w-full aspect-video"></iframe>
+      <div class="max-w-3xl mx-auto space-y-8 px-4 pt-6">
+        <div v-if="work.soundcloud_trackid" id="audio">
+          <h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Audio</h2>
+          <iframe 
+            :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true'"
+            width="100%" 
+            height="150" 
+            scrolling="no" 
+            frameborder="no" 
+            allow="autoplay"
+          ></iframe>
+        </div>
+
+        <div v-if="work.vimeo_trackid" id="video">
+          <h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Video</h2>
+          <iframe 
+            :src="'https://player.vimeo.com/video/' + work.vimeo_trackid" 
+            width="100%" 
+            height="400" 
+            frameborder="0" 
+            webkitallowfullscreen 
+            mozallowfullscreen 
+            allowfullscreen 
+            class="w-full aspect-video"
+          ></iframe>
         </div>
         
-        <div id="images" v-if="gallery && gallery.length" class="mb-8 scroll-mt-[280px]">
-          <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
+        <div v-if="gallery?.length" id="images">
+          <h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Images</h2>
+          <div :class="gallery.length === 1 ? 'grid grid-cols-1' : 'grid grid-cols-2 gap-4'">
+            <button 
+              v-for="(img, index) in gallery" 
+              :key="index"
+              @click="openImageModal(index)"
+              class="block w-full relative overflow-hidden group"
+            >
+              <nuxt-img 
+                :src="'/images/' + img.image"
+                :alt="work.title"
+                class="w-full aspect-[4/3] object-cover transition-opacity duration-200 group-hover:opacity-50"
+              />
+            </button>
+          </div>
         </div>
         
-        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px]">
-          <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
+        <div v-if="scoreUrl" id="score">
+          <h2 class="text-lg mb-4 border-b border-gray-200 pb-2">Score</h2>
+          <iframe 
+            :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" 
+            class="w-full h-[80vh] border border-gray-200"
+          ></iframe>
         </div>
       </div>
     </div>
@@ -34,10 +86,10 @@
 </template>
 
 <script setup>
-import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
+import { useModalStore } from "@/stores/ModalStore"
 
 const route = useRoute()
-const audioPlayerStore = useAudioPlayerStore()
+const modalStore = useModalStore()
 const slug = route.params.slug
 
 const slugify = (title) => {
@@ -54,6 +106,11 @@ const work = computed(() => {
   return works.value.find(w => slugify(w.title) === slug)
 })
 
+const year = computed(() => {
+  if (!work.value?.date) return ''
+  return new Date(work.value.date).getFullYear()
+})
+
 const scoreUrl = computed(() => {
   if (!work.value?.score) return null
   if (work.value.score.startsWith('/scores/')) {
@@ -69,23 +126,27 @@ const gallery = computed(() => {
   }))
 })
 
-const itemCount = computed(() => {
-  let count = 0
-  if (work.value?.vimeo_trackid) count++
-  if (gallery.value?.length) count++
-  if (scoreUrl.value) count++
-  return count
+const navItems = computed(() => {
+  const items = []
+  if (work.value?.soundcloud_trackid) items.push({ label: 'Audio', href: '#audio' })
+  if (work.value?.vimeo_trackid) items.push({ label: 'Video', href: '#video' })
+  if (gallery.value?.length) items.push({ label: 'Images', href: '#images' })
+  if (scoreUrl.value) items.push({ label: 'Score', href: '#score' })
+  return items
 })
 
-onMounted(() => {
-  if (work.value?.soundcloud_trackid) {
-    audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)
-  }
+const openImageModal = (index) => {
+  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '')
+}
+
+useHead({
+  titleTemplate: () => work.value ? `Michael Winter - ${work.value.title}` : 'Michael Winter'
 })
 </script>
 
 <style>
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 100px;
 }
 </style>
diff --git a/stores/AudioPlayerStore.js b/stores/AudioPlayerStore.js
index 90dbc33..689f0a5 100644
--- a/stores/AudioPlayerStore.js
+++ b/stores/AudioPlayerStore.js
@@ -1,15 +1,20 @@
 import {defineStore} from "pinia";
 
 export const useAudioPlayerStore = defineStore("AudioPlayerStore", {
-    state: () => ({"soundcloud_trackid": "1032587794"}),
+    state: () => ({
+      "soundcloud_trackid": "undefined",
+      "currentTrackTitle": ""
+    }),
     actions: {
-        setSoundCloudTrackID(trackid) {
+        setSoundCloudTrackID(trackid, title = "") {
           if (typeof trackid !== 'undefined') {
             this.soundcloud_trackid = trackid
+            this.currentTrackTitle = title
           }
         },
         clearSoundCloudTrackID() {
           this.soundcloud_trackid = 'undefined'
+          this.currentTrackTitle = ""
         }
       }
-})
\ No newline at end of file
+})

From f0133650f673f598fe7c0d4ba4a63fc394b3e1fb Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 13:34:02 +0100
Subject: [PATCH 13/32] Replace icons with text links; add video and images
 modal on pieces page

---
 pages/pieces.vue | 43 +++++++++++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/pages/pieces.vue b/pages/pieces.vue
index d469626..7482e31 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -6,25 +6,33 @@
         
         <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">
-            <div class="flex items-start gap-2">
+          <div v-for="work in item.works" :key="work.title" class="mb-4 ml-4">
+            <div>
               <NuxtLink 
                 v-if="hasItems(work)" 
                 :to="'/works/' + slugify(work.title)" 
-                class="italic hover:underline"
+                class="text-lg italic hover:underline"
               >
                 <span v-html="work.title"></span>
               </NuxtLink>
-              <span v-else class="italic">
+              <span v-else class="text-lg italic">
                 <span v-html="work.title"></span>
               </span>
+            </div>
 
-              <div class="flex gap-1">
-                <IconButton v-if="work.score" type="score" :work="work" :link="work.score" :visible="true"></IconButton>
-                <IconButton v-if="work.soundcloud_trackid" type="audio" :work="work" :visible="true"></IconButton>
-                <IconButton v-if="work.vimeo_trackid" type="video" :work="work" :visible="true"></IconButton>
-                <IconButton v-if="work.gallery" type="image" :work="work" :visible="true"></IconButton>
-              </div>
+            <div v-if="hasContent(work)" class="flex gap-4 text-sm text-gray-500 mt-0.5">
+              <button v-if="work.soundcloud_trackid" @click="audioPlayerStore.setSoundCloudTrackID(work.soundcloud_trackid)" class="hover:underline">
+                audio
+              </button>
+              <button v-if="work.vimeo_trackid" @click="openVideoModal(work.vimeo_trackid)" class="hover:underline">
+                video
+              </button>
+              <button v-if="work.gallery" @click="openImageModal(work)" class="hover:underline">
+                images
+              </button>
+              <a v-if="work.score" :href="work.score" target="_blank" class="hover:underline">
+                score
+              </a>
             </div>
           </div>
         </div>
@@ -55,8 +63,10 @@
 
 <script setup>
 import { useModalStore } from "@/stores/ModalStore"
+import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
 
 const modalStore = useModalStore()
+const audioPlayerStore = useAudioPlayerStore()
 const route = useRoute()
 
 const slugify = (title) => {
@@ -70,6 +80,19 @@ const hasItems = (work) => {
   return work.vimeo_trackid || (work.images && work.images.length) || work.score
 }
 
+const hasContent = (work) => {
+  return work.soundcloud_trackid || work.vimeo_trackid || (work.images && work.images.length) || work.score
+}
+
+const openVideoModal = (vimeoId) => {
+  modalStore.setModalProps('video', 'aspect-video', true, '', '', vimeoId)
+}
+
+const openImageModal = (work) => {
+  const gallery = work.images.map(img => ({ image: img.filename }))
+  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '')
+}
+
 const worksWithImages = computed(() => {
   if (!works.value) return []
   const allWorks = works.value.flatMap(group => group.works)

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 14/32] 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>

From b44c9c324af0283dd8a8dbbd9e63a81881710aa0 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 14:21:06 +0100
Subject: [PATCH 15/32] Update header with hamburger, name, and page title;
 adjust alignment

---
 components/Menu.vue | 4 ++--
 layouts/default.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/Menu.vue b/components/Menu.vue
index f7d769e..a95ab58 100644
--- a/components/Menu.vue
+++ b/components/Menu.vue
@@ -2,10 +2,10 @@
   <div>
     <button 
       @click="isOpen = true" 
-      class="p-2 hover:bg-gray-100 rounded"
+      class="flex-shrink-0 hover:bg-gray-100 rounded mt-2"
       aria-label="Open menu"
     >
-      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
       </svg>
     </button>
diff --git a/layouts/default.vue b/layouts/default.vue
index 750d3c0..5dc46dc 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <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 gap-4">
+      <div class="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between gap-4">
         <Menu />
         <h1 class="text-lg md:text-2xl whitespace-nowrap">
           <NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>

From e4e733d87a05085ae5a8d259125881338cb2403f Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 14:59:23 +0100
Subject: [PATCH 16/32] Redesign: add responsive header, sidebar, and fix
 layout issues

---
 app.vue             |  2 +-
 layouts/default.vue | 54 +++++++++++++++++++++++++++++++++++++++------
 pages/pieces.vue    |  2 +-
 3 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/app.vue b/app.vue
index 99b133d..e530e39 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white min-w-[800px] min-h-[80vh]">
+  <div class="bg-white min-h-[80vh]">
     <NuxtLayout>
       <NuxtPage/>
     </NuxtLayout>
diff --git a/layouts/default.vue b/layouts/default.vue
index 5dc46dc..84e4f83 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="min-h-screen bg-white">
-    <header class="sticky top-0 bg-white z-40 border-b border-gray-200">
+    <!-- Mobile header -->
+    <header class="sticky top-0 bg-white z-40 border-b border-gray-200 lg:hidden">
       <div class="max-w-7xl mx-auto px-4 py-2 flex items-center justify-between gap-4">
         <Menu />
         <h1 class="text-lg md:text-2xl whitespace-nowrap">
@@ -10,15 +11,54 @@
       </div>
     </header>
 
-    <main class="max-w-7xl mx-auto px-4 py-8">
-      <slot />
-    </main>
+    <!-- Desktop header -->
+    <header class="sticky top-0 bg-white z-40 border-b border-gray-200 hidden lg:block">
+      <div class="w-full px-4 py-2 flex items-center justify-between">
+        <h1 class="text-lg md:text-2xl whitespace-nowrap">
+          <NuxtLink to='/' class="hover:underline">michael winter</NuxtLink>
+        </h1>
+        <div class="text-lg md:text-xl">{{ pageTitle }}</div>
+      </div>
+    </header>
+
+    <div class="flex">
+      <!-- Sidebar for wide screens -->
+      <aside class="hidden lg:block w-48 flex-shrink-0 border-r border-gray-200 p-4 pt-16 sticky top-0 h-screen">
+        <nav class="space-y-4 ml-4">
+          <div>
+            <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Works</p>
+            <div class="space-y-2 ml-2">
+              <NuxtLink to="/pieces" class="block hover:underline">pieces</NuxtLink>
+              <NuxtLink to="/writings" class="block hover:underline">writings</NuxtLink>
+              <NuxtLink to="/albums" class="block hover:underline">albums</NuxtLink>
+            </div>
+          </div>
+
+          <div>
+            <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Events</p>
+            <div class="space-y-2 ml-2">
+              <NuxtLink to="/performances" class="block hover:underline">performances</NuxtLink>
+              <NuxtLink to="/lectures" class="block hover:underline">lectures</NuxtLink>
+            </div>
+          </div>
+
+          <NuxtLink to="/about" class="block hover:underline">about</NuxtLink>
+          <a href="https://unboundedpress.org/code" target="_blank" class="block hover:underline">code</a>
+        </nav>
+      </aside>
+
+      <div class="flex-1">
+        <main class="max-w-7xl mx-auto px-4 py-8">
+          <slot />
+        </main>
+      </div>
+    </div>
 
     <footer class="fixed bottom-0 bg-white border-t border-gray-200 p-2 w-full flex justify-center z-30">
       <ClientOnly>
         <iframe 
           v-if="audioPlayerStore.soundcloud_trackid !== 'undefined'"
-          width="400rem" 
+          class="w-64" 
           height="20px" 
           scrolling="no" 
           frameborder="no" 
@@ -32,7 +72,7 @@
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
           <ClientOnly>
-            <iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
+            <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </ClientOnly>
         </div>
         <div v-if="modalStore.type === 'video'" :class="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
@@ -51,7 +91,7 @@
           </ClientOnly>
           <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
             <ClientOnly>
-              <iframe :src="modalStore.soundcloudUrl" width="400rem" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
+              <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
             </ClientOnly>
           </div>
         </div>
diff --git a/pages/pieces.vue b/pages/pieces.vue
index cde726c..e6e393a 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+  <div class="grid grid-cols-2 lg:grid-cols-5 gap-8">
     <div class="lg:col-span-3">
       <section>
         <div v-for="item in works" :key="item.year" class="mb-8">

From 0c66aecda87058ff7fd34435a7cee4732786bebd Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 15:08:52 +0100
Subject: [PATCH 17/32] Fix sidebar sticky behavior

---
 layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 84e4f83..595c633 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -23,7 +23,7 @@
 
     <div class="flex">
       <!-- Sidebar for wide screens -->
-      <aside class="hidden lg:block w-48 flex-shrink-0 border-r border-gray-200 p-4 pt-16 sticky top-0 h-screen">
+      <aside class="hidden lg:block w-48 flex-shrink-0 border-r border-gray-200 p-4 pt-12 sticky self-start top-12 z-20">
         <nav class="space-y-4 ml-4">
           <div>
             <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Works</p>

From 1694c4a8906850de8afb6ed9284151b98f46d929 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 15:18:00 +0100
Subject: [PATCH 18/32] Fix sticky title position in works/[slug]

---
 pages/works/[slug].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 594121b..9e75000 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="work">
-      <div class="sticky top-[64px] bg-white z-30 border-b border-gray-200">
+      <div class="sticky top-12 bg-white z-30 border-b border-gray-200">
         <div class="max-w-3xl mx-auto px-4">
           <div class="flex items-center justify-between py-1">
             <div class="flex items-baseline gap-1">

From 29dace6fc86926ea894af1e75d9a90fc4b13b43d Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 15:32:15 +0100
Subject: [PATCH 19/32] Fix redirect from homepage and improve navigation

---
 nuxt.config.ts  | 1 +
 pages/index.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 91fb049..a28775e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -19,6 +19,7 @@ export default defineNuxtConfig({
     },
   },
   routeRules: {
+    '/': { redirect: '/pieces' },
     '/hdp': { redirect: '/a_history_of_the_domino_problem' },
     
     // Default: prerender all routes (static HTML)
diff --git a/pages/index.vue b/pages/index.vue
index 6e2c95c..3c74dbd 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-await navigateTo('/pieces', { replace: true })
+navigateTo('/pieces')
 </script>

From f9ff74ee925bef7ce52a5c84d262f7bbf21457e1 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 15:39:28 +0100
Subject: [PATCH 20/32] Style contact, cv, and works list links with gray text

---
 pages/about.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/about.vue b/pages/about.vue
index 769ad86..eb4065b 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -12,9 +12,9 @@
         </div>
 
         <div class="mb-8 space-y-2">
-          <a href="mailto:mwinter@unboundedpress.org" class="block hover:underline">contact</a>
-          <a href="/cv" class="block hover:underline">cv</a>
-          <a href="/works_list" class="block hover:underline">works list</a>
+          <a href="mailto:mwinter@unboundedpress.org" class="block hover:underline text-gray-500">contact</a>
+          <a href="/cv" class="block hover:underline text-gray-500">cv</a>
+          <a href="/works_list" class="block hover:underline text-gray-500">works list</a>
         </div>
 
         <div id="mc_embed_signup">

From 95d8707ec1792c36af2f3c137ccdf7cbedde31ba Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 17:16:07 +0100
Subject: [PATCH 21/32] Disable payload extraction to fix prerender warnings

---
 nuxt.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index a28775e..3a2692a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -33,6 +33,6 @@ export default defineNuxtConfig({
     prerender: { crawlLinks: true}
   },
   experimental: {
-    payloadExtraction: true
+    payloadExtraction: false
   }
 })

From 5f9ce311274b9df9e86ce052e4b0a7ef6e689ead Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 17:39:14 +0100
Subject: [PATCH 22/32] Fix title and date wrapping on mobile

---
 pages/works/[slug].vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 9e75000..c000e9b 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -4,9 +4,9 @@
       <div class="sticky top-12 bg-white z-30 border-b border-gray-200">
         <div class="max-w-3xl mx-auto px-4">
           <div class="flex items-center justify-between py-1">
-            <div class="flex items-baseline gap-1">
-              <h1 class="text-xl italic" v-html="work.title"></h1>
-              <span class="text-sm text-gray-500">({{ year }})</span>
+            <div class="flex flex-wrap items-baseline gap-1">
+              <h1 class="inline-block text-xl italic" v-html="work.title"></h1>
+              <span class="inline-block text-sm text-gray-500">({{ year }})</span>
             </div>
             <nav class="flex items-center gap-4 text-sm">
               <a 
@@ -35,6 +35,7 @@
             scrolling="no" 
             frameborder="no" 
             allow="autoplay"
+            class="w-full h-auto"
           ></iframe>
         </div>
 
@@ -43,12 +44,11 @@
           <iframe 
             :src="'https://player.vimeo.com/video/' + work.vimeo_trackid" 
             width="100%" 
-            height="400" 
             frameborder="0" 
             webkitallowfullscreen 
             mozallowfullscreen 
             allowfullscreen 
-            class="w-full aspect-video"
+            class="w-full aspect-video h-auto"
           ></iframe>
         </div>
         

From 9e4435e5128ade03e1c8eb924fd027781a545fbf Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sat, 7 Mar 2026 17:41:49 +0100
Subject: [PATCH 23/32] Fix modal to open at clicked image instead of first
 image

---
 components/IconButton.vue   | 2 +-
 components/ImageSlider.vue  | 3 ++-
 components/IndexContent.vue | 6 ++++--
 layouts/default.vue         | 2 +-
 pages/about.vue             | 2 +-
 pages/albums.vue            | 2 +-
 pages/pieces.vue            | 2 +-
 pages/works/[slug].vue      | 2 +-
 stores/ModalStore.js        | 5 +++--
 9 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 1e8cf2f..d898bb6 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -84,7 +84,7 @@
     } else if (type === 'video') {
       modalStore.setModalProps('video', 'aspect-video', true, '', '', props.work.vimeo_trackid)
     } else if (type === 'image') {
-      modalStore.setModalProps('image', 'aspect-auto', true, 'images', props.work.gallery, '', '', props.work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '')
+      modalStore.setModalProps('image', 'aspect-auto', true, 'images', props.work.gallery, '', '', props.work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + props.work.soundcloud_trackid + '&auto_play=true&show_user=false' : '', '', 0)
     }
     
     if (slug && typeof window !== 'undefined') {
diff --git a/components/ImageSlider.vue b/components/ImageSlider.vue
index 1ecf818..bab618c 100644
--- a/components/ImageSlider.vue
+++ b/components/ImageSlider.vue
@@ -4,6 +4,7 @@
       :loop="true"
       :spaceBetween="30"
       :centeredSlides="true"
+      :initialSlide="initialIndex"
       :autoplay="{
         delay: 4000,
         disableOnInteraction: false,
@@ -33,6 +34,6 @@
 
 <script>
 export default {
-    props: ['gallery', 'bucket']
+    props: ['gallery', 'bucket', 'initialIndex']
 }
 </script>
diff --git a/components/IndexContent.vue b/components/IndexContent.vue
index ecbff0c..3bafdb2 100644
--- a/components/IndexContent.vue
+++ b/components/IndexContent.vue
@@ -196,7 +196,7 @@
   }
 
   const openAlbumModal = (album) => {
-    modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '')
+    modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '', '', '', '', 0)
   }
 
   const openModalFromHash = () => {
@@ -233,7 +233,9 @@
         work.gallery,
         '',
         '',
-        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : ''
+        work.soundcloud_trackid ? 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + work.soundcloud_trackid + '&auto_play=true&show_user=false' : '',
+        '',
+        0
       )
     }
   }
diff --git a/layouts/default.vue b/layouts/default.vue
index 595c633..b8f3832 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -69,7 +69,7 @@
 
     <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
       <ModalBody :class="modalStore.aspect">
-        <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
+        <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageSlider>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
           <ClientOnly>
             <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
diff --git a/pages/about.vue b/pages/about.vue
index eb4065b..dd833ac 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -66,7 +66,7 @@ const modalStore = useModalStore()
 const { data: gallery } = await useFetch('/api/my_image_gallery')
 
 const openImageModal = (index) => {
-  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '')
+  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '', '', '', '', index)
 }
 
 useHead({
diff --git a/pages/albums.vue b/pages/albums.vue
index 517b166..14a3d85 100644
--- a/pages/albums.vue
+++ b/pages/albums.vue
@@ -53,7 +53,7 @@ const { data: releases } = await useFetch('/api/releases', {
 })
 
 const openAlbumModal = (album) => {
-  modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '')
+  modalStore.setModalProps('image', 'aspect-auto', true, 'album_art', [{image: album.album_art}], '', '', '', '', 0)
 }
 
 useHead({
diff --git a/pages/pieces.vue b/pages/pieces.vue
index e6e393a..e2580e3 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -88,7 +88,7 @@ const openVideoModal = (vimeoId) => {
 
 const openImageModal = (work) => {
   const gallery = work.images.map(img => ({ image: img.filename }))
-  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '')
+  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '', '', '', '', 0)
 }
 
 const worksWithImages = computed(() => {
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index c000e9b..26ec6ad 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -136,7 +136,7 @@ const navItems = computed(() => {
 })
 
 const openImageModal = (index) => {
-  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '')
+  modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery.value, '', '', '', '', index)
 }
 
 useHead({
diff --git a/stores/ModalStore.js b/stores/ModalStore.js
index 1323320..d7fe5ba 100644
--- a/stores/ModalStore.js
+++ b/stores/ModalStore.js
@@ -1,9 +1,9 @@
 import {defineStore} from "pinia";
 
 export const useModalStore = defineStore("ModalStore", {
-    state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": "", "iframeUrl": ""}),
+    state: () => ({"type": "", "aspect":"", "isOpen":false, "bucket":"", "gallery":"", "vimeo_trackid": "", "pdfUrl": "", "soundcloudUrl": "", "iframeUrl": "", "initialIndex": 0}),
     actions: {
-        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl, iframeUrl) {
+        setModalProps(type, aspect, isOpen, bucket, gallery, vimeo_trackid, pdfUrl, soundcloudUrl, iframeUrl, initialIndex = 0) {
           this.type = type
           this.aspect = aspect
           this.isOpen = isOpen
@@ -13,6 +13,7 @@ export const useModalStore = defineStore("ModalStore", {
           this.pdfUrl = pdfUrl
           this.soundcloudUrl = soundcloudUrl
           this.iframeUrl = iframeUrl
+          this.initialIndex = initialIndex
         }
       }
 })
\ No newline at end of file

From f47470c85119f66ea4beff1c318166835bd6c4b3 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 11:05:50 +0100
Subject: [PATCH 24/32] Simplify modal layout and reduce pieces page font size

---
 layouts/default.vue | 29 ++++++++++++++++++++---------
 pages/pieces.vue    |  4 ++--
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index b8f3832..b055379 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -68,26 +68,37 @@
     </footer>
 
     <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
-      <ModalBody :class="modalStore.aspect">
+      <div class="flex flex-col h-full overflow-hidden">
         <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageSlider>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
           <ClientOnly>
             <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'video'" :class="modalStore.aspect" class="w-full h-full flex items-center justify-center p-4">
-          <ClientOnly>
-            <iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="max-w-full max-h-full"></iframe>
-          </ClientOnly>
+        <div v-if="modalStore.type === 'video'" class="w-full flex items-center justify-center p-4">
+          <div class="w-full aspect-video">
+            <ClientOnly>
+              <iframe 
+                :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" 
+                width="100%" 
+                height="100%" 
+                frameborder="0" 
+                webkitallowfullscreen 
+                mozallowfullscreen 
+                allowfullscreen 
+                class="w-full h-full"
+              ></iframe>
+            </ClientOnly>
+          </div>
         </div>
-        <div v-if="modalStore.type === 'document'" class="w-full flex flex-col" style="height: calc(85vh - 4rem)">
+        <div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]">
           <ClientOnly>
             <iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'pdf'" class="flex flex-col h-full">
+        <div v-if="modalStore.type === 'pdf'" class="flex flex-col h-[70vh]">
           <ClientOnly>
-            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" :class="[modalStore.soundcloudUrl ? 'max-h-[calc(85vh-60px)]' : 'max-h-[calc(85vh-2rem)]', 'flex-grow']"></iframe>
+            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
           </ClientOnly>
           <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
             <ClientOnly>
@@ -100,7 +111,7 @@
             <Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
           </a>
         </div>
-      </ModalBody>
+      </div>
     </Modal>
   </div>
 </template>
diff --git a/pages/pieces.vue b/pages/pieces.vue
index e2580e3..04febe9 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -9,11 +9,11 @@
               <NuxtLink 
                 v-if="hasItems(work)" 
                 :to="'/works/' + slugify(work.title)" 
-                class="text-lg italic hover:underline"
+                class="text-base italic hover:underline"
               >
                 <span v-html="work.title"></span>
               </NuxtLink>
-              <span v-else class="text-lg italic">
+              <span v-else class="text-base italic">
                 <span v-html="work.title"></span>
               </span>
             </div>

From ffe6bd44094c007eb42f68a6a83be066698d6655 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 11:10:44 +0100
Subject: [PATCH 25/32] Replace Swiper with simple image viewer with prev/next
 buttons

---
 components/ImageViewer.vue | 62 ++++++++++++++++++++++++++++++++++++++
 layouts/default.vue        |  4 ++-
 2 files changed, 65 insertions(+), 1 deletion(-)
 create mode 100644 components/ImageViewer.vue

diff --git a/components/ImageViewer.vue b/components/ImageViewer.vue
new file mode 100644
index 0000000..2c5a2ef
--- /dev/null
+++ b/components/ImageViewer.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="flex flex-col items-center justify-center h-full">
+    <div class="relative w-full flex-1 flex items-center justify-center min-h-0 p-4">
+      <!-- Previous button -->
+      <button 
+        v-if="gallery.length > 1"
+        @click="prev" 
+        class="absolute left-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
+      >
+        <Icon name="mdi:chevron-left" class="w-6 h-6" />
+      </button>
+
+      <!-- Image -->
+      <NuxtImg 
+        v-if="gallery[currentIndex]"
+        :src="'/' + bucket + '/' + gallery[currentIndex].image" 
+        class="max-w-full max-h-[60vh] object-contain"
+      />
+
+      <!-- Next button -->
+      <button 
+        v-if="gallery.length > 1"
+        @click="next" 
+        class="absolute right-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
+      >
+        <Icon name="mdi:chevron-right" class="w-6 h-6" />
+      </button>
+    </div>
+
+    <!-- Dots indicator -->
+    <div v-if="gallery.length > 1" class="flex gap-2 py-2">
+      <button 
+        v-for="(img, index) in gallery" 
+        :key="index"
+        @click="currentIndex = index"
+        class="w-2 h-2 rounded-full transition-colors"
+        :class="index === currentIndex ? 'bg-gray-600' : 'bg-gray-300'"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  bucket: String,
+  gallery: Array,
+  initialIndex: {
+    type: Number,
+    default: 0
+  }
+})
+
+const currentIndex = ref(props.initialIndex)
+
+const next = () => {
+  currentIndex.value = (currentIndex.value + 1) % props.gallery.length
+}
+
+const prev = () => {
+  currentIndex.value = (currentIndex.value - 1 + props.gallery.length) % props.gallery.length
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index b055379..823250d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -69,7 +69,9 @@
 
     <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
       <div class="flex flex-col h-full overflow-hidden">
-        <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageSlider>
+        <div v-if="modalStore.type === 'image'" class="flex-1 flex items-center justify-center min-h-0">
+          <ImageViewer :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageViewer>
+        </div>
         <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">
           <ClientOnly>
             <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>

From 5347bf0023d8ef4051301ae9b5a95a75b5af4ce6 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 11:40:37 +0100
Subject: [PATCH 26/32] Update modal and image viewer with simpler carousel

---
 components/ImageViewer.vue | 36 +++++++-----------------------------
 components/Modal/Modal.vue |  2 +-
 layouts/default.vue        | 38 +++++++++++++++++++++++++++++++++++---
 3 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/components/ImageViewer.vue b/components/ImageViewer.vue
index 2c5a2ef..21980d2 100644
--- a/components/ImageViewer.vue
+++ b/components/ImageViewer.vue
@@ -1,34 +1,16 @@
 <template>
-  <div class="flex flex-col items-center justify-center h-full">
-    <div class="relative w-full flex-1 flex items-center justify-center min-h-0 p-4">
-      <!-- Previous button -->
-      <button 
-        v-if="gallery.length > 1"
-        @click="prev" 
-        class="absolute left-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
-      >
-        <Icon name="mdi:chevron-left" class="w-6 h-6" />
-      </button>
-
+  <div class="flex flex-col h-full">
+    <div class="relative h-[60vh] w-full flex items-center justify-center">
       <!-- Image -->
       <NuxtImg 
         v-if="gallery[currentIndex]"
         :src="'/' + bucket + '/' + gallery[currentIndex].image" 
-        class="max-w-full max-h-[60vh] object-contain"
+        class="max-w-full max-h-full object-contain"
       />
-
-      <!-- Next button -->
-      <button 
-        v-if="gallery.length > 1"
-        @click="next" 
-        class="absolute right-2 z-10 p-2 bg-gray-600 rounded-full text-white hover:bg-gray-700"
-      >
-        <Icon name="mdi:chevron-right" class="w-6 h-6" />
-      </button>
     </div>
 
     <!-- Dots indicator -->
-    <div v-if="gallery.length > 1" class="flex gap-2 py-2">
+    <div v-if="gallery.length > 1" class="flex gap-2 py-2 justify-center">
       <button 
         v-for="(img, index) in gallery" 
         :key="index"
@@ -52,11 +34,7 @@ const props = defineProps({
 
 const currentIndex = ref(props.initialIndex)
 
-const next = () => {
-  currentIndex.value = (currentIndex.value + 1) % props.gallery.length
-}
-
-const prev = () => {
-  currentIndex.value = (currentIndex.value - 1 + props.gallery.length) % props.gallery.length
-}
+watch(() => props.initialIndex, (newVal) => {
+  currentIndex.value = newVal
+})
 </script>
diff --git a/components/Modal/Modal.vue b/components/Modal/Modal.vue
index c8bb9e9..7e248c5 100644
--- a/components/Modal/Modal.vue
+++ b/components/Modal/Modal.vue
@@ -95,7 +95,7 @@ provide('modal', api)
               leave-to="opacity-0 scale-95"
             >
               <DialogPanel
-                class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
+                class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all py-4"
                 :class="{
                   'h-screen': fullscreen,
                   'max-w-[min(85vw,1200px)] rounded-lg': !fullscreen,
diff --git a/layouts/default.vue b/layouts/default.vue
index 823250d..e272f41 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -68,7 +68,17 @@
     </footer>
 
     <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
-      <div class="flex flex-col h-full overflow-hidden">
+      <div class="flex flex-col h-full overflow-hidden relative">
+        <!-- Navigation buttons for images - fixed to modal -->
+        <template v-if="modalStore.type === 'image' && modalStore.gallery && modalStore.gallery.length > 1">
+          <button @click="prevImage" class="absolute left-2 top-1/2 -translate-y-1/2 z-20 text-gray-600 hover:text-gray-900">
+            <Icon name="mdi:chevron-left" class="w-10 h-10" />
+          </button>
+          <button @click="nextImage" class="absolute right-2 top-1/2 -translate-y-1/2 z-20 text-gray-600 hover:text-gray-900">
+            <Icon name="mdi:chevron-right" class="w-10 h-10" />
+          </button>
+        </template>
+        
         <div v-if="modalStore.type === 'image'" class="flex-1 flex items-center justify-center min-h-0">
           <ImageViewer :bucket="modalStore.bucket" :gallery="modalStore.gallery" :initialIndex="modalStore.initialIndex"></ImageViewer>
         </div>
@@ -108,7 +118,7 @@
             </ClientOnly>
           </div>
         </div>
-        <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image' || modalStore.type === 'document'" class="absolute bottom-2 right-2 z-10">
+        <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image' || modalStore.type === 'document'" class="absolute bottom-0 right-0 p-4 z-10">
           <a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : modalStore.type === 'image' ? '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image : modalStore.type === 'document' ? modalStore.iframeUrl : undefined" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center pointer-events-auto">
             <Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
           </a>
@@ -121,10 +131,32 @@
 <script setup>
   import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
   import { useModalStore } from "@/stores/ModalStore"
-  import { onMounted, computed } from "vue"
+  import { onMounted, computed, ref } from "vue"
 
   const audioPlayerStore = useAudioPlayerStore()
   const modalStore = useModalStore()
+  
+  const currentImageIndex = ref(0)
+  
+  const prevImage = () => {
+    if (modalStore.gallery && modalStore.gallery.length > 0) {
+      currentImageIndex.value = (currentImageIndex.value - 1 + modalStore.gallery.length) % modalStore.gallery.length
+      modalStore.initialIndex = currentImageIndex.value
+    }
+  }
+  
+  const nextImage = () => {
+    if (modalStore.gallery && modalStore.gallery.length > 0) {
+      currentImageIndex.value = (currentImageIndex.value + 1) % modalStore.gallery.length
+      modalStore.initialIndex = currentImageIndex.value
+    }
+  }
+  
+  watch(() => modalStore.isOpen, (isOpen) => {
+    if (isOpen) {
+      currentImageIndex.value = modalStore.initialIndex || 0
+    }
+  })
 
   const route = useRoute()
 

From f2666ce12c956f9c4a5cae0d921d1bff27e7d69c Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 11:42:09 +0100
Subject: [PATCH 27/32] Create simple custom modal component

---
 components/SimpleModal.vue | 43 ++++++++++++++++++++++++++++++++++++++
 layouts/default.vue        | 10 ++++-----
 2 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 components/SimpleModal.vue

diff --git a/components/SimpleModal.vue b/components/SimpleModal.vue
new file mode 100644
index 0000000..858d8c6
--- /dev/null
+++ b/components/SimpleModal.vue
@@ -0,0 +1,43 @@
+<template>
+  <Teleport to="body">
+    <div v-if="modelValue" class="fixed inset-0 z-50" @click.self="close">
+      <!-- Backdrop -->
+      <div class="fixed inset-0 bg-black/50" @click="close"></div>
+      
+      <!-- Modal Panel -->
+      <div class="fixed inset-0 flex items-center justify-center p-4">
+        <div 
+          class="bg-white rounded-lg shadow-xl max-w-[85vw] max-h-[85vh] overflow-auto relative"
+          :style="{ maxHeight }"
+        >
+          <!-- Close button -->
+          <button 
+            @click="close" 
+            class="absolute top-4 right-4 z-10 text-gray-500 hover:text-gray-700 text-2xl leading-none"
+          >
+            &times;
+          </button>
+          
+          <!-- Content -->
+          <slot />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+const props = defineProps({
+  modelValue: Boolean,
+  maxHeight: {
+    type: String,
+    default: '85vh'
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const close = () => {
+  emit('update:modelValue', false)
+}
+</script>
diff --git a/layouts/default.vue b/layouts/default.vue
index e272f41..b7b8fa0 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -67,8 +67,8 @@
       </ClientOnly>
     </footer>
 
-    <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
-      <div class="flex flex-col h-full overflow-hidden relative">
+    <SimpleModal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
+      <div class="flex flex-col h-full overflow-hidden relative p-4">
         <!-- Navigation buttons for images - fixed to modal -->
         <template v-if="modalStore.type === 'image' && modalStore.gallery && modalStore.gallery.length > 1">
           <button @click="prevImage" class="absolute left-2 top-1/2 -translate-y-1/2 z-20 text-gray-600 hover:text-gray-900">
@@ -87,7 +87,7 @@
             <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'video'" class="w-full flex items-center justify-center p-4">
+        <div v-if="modalStore.type === 'video'" class="w-full flex items-center justify-center">
           <div class="w-full aspect-video">
             <ClientOnly>
               <iframe 
@@ -118,13 +118,13 @@
             </ClientOnly>
           </div>
         </div>
-        <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image' || modalStore.type === 'document'" class="absolute bottom-0 right-0 p-4 z-10">
+        <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image' || modalStore.type === 'document'" class="absolute bottom-4 right-4 z-10">
           <a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : modalStore.type === 'image' ? '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image : modalStore.type === 'document' ? modalStore.iframeUrl : undefined" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center pointer-events-auto">
             <Icon name="mdi:open-in-new" class="w-5 h-5 text-white" />
           </a>
         </div>
       </div>
-    </Modal>
+    </SimpleModal>
   </div>
 </template>
 

From 96e81b12c3903b30e5dcac101f5b9e370d164f61 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 18:10:11 +0100
Subject: [PATCH 28/32] Update modal with simplified carousel and responsive
 sizing

---
 components/ImageViewer.vue | 18 ++++++++++--------
 components/SimpleModal.vue | 20 ++++++--------------
 layouts/default.vue        |  6 +++---
 3 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/components/ImageViewer.vue b/components/ImageViewer.vue
index 21980d2..bcdec26 100644
--- a/components/ImageViewer.vue
+++ b/components/ImageViewer.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="flex flex-col h-full">
-    <div class="relative h-[60vh] w-full flex items-center justify-center">
-      <!-- Image -->
-      <NuxtImg 
-        v-if="gallery[currentIndex]"
-        :src="'/' + bucket + '/' + gallery[currentIndex].image" 
-        class="max-w-full max-h-full object-contain"
-      />
+    <div class="flex-1 flex items-center justify-center min-h-0">
+      <div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
+        <!-- Image -->
+        <NuxtImg 
+          v-if="gallery[currentIndex]"
+          :src="'/' + bucket + '/' + gallery[currentIndex].image" 
+          class="w-full h-full object-contain"
+        />
+      </div>
     </div>
 
     <!-- Dots indicator -->
-    <div v-if="gallery.length > 1" class="flex gap-2 py-2 justify-center">
+    <div v-if="gallery.length > 1" class="flex-none flex gap-2 py-2 justify-center">
       <button 
         v-for="(img, index) in gallery" 
         :key="index"
diff --git a/components/SimpleModal.vue b/components/SimpleModal.vue
index 858d8c6..7b75d27 100644
--- a/components/SimpleModal.vue
+++ b/components/SimpleModal.vue
@@ -1,23 +1,15 @@
 <template>
   <Teleport to="body">
-    <div v-if="modelValue" class="fixed inset-0 z-50" @click.self="close">
-      <!-- Backdrop -->
-      <div class="fixed inset-0 bg-black/50" @click="close"></div>
+    <div v-if="modelValue" class="fixed inset-0 z-50">
+      <!-- Backdrop - click to close -->
+      <div class="fixed inset-0 bg-black/50 cursor-pointer" @click="close"></div>
       
       <!-- Modal Panel -->
-      <div class="fixed inset-0 flex items-center justify-center p-4">
+      <div class="fixed inset-0 flex items-center justify-center pointer-events-none">
         <div 
-          class="bg-white rounded-lg shadow-xl max-w-[85vw] max-h-[85vh] overflow-auto relative"
+          class="bg-white rounded-lg shadow-xl max-w-[80vw] max-h-[85vh] overflow-hidden relative pointer-events-auto"
           :style="{ maxHeight }"
         >
-          <!-- Close button -->
-          <button 
-            @click="close" 
-            class="absolute top-4 right-4 z-10 text-gray-500 hover:text-gray-700 text-2xl leading-none"
-          >
-            &times;
-          </button>
-          
           <!-- Content -->
           <slot />
         </div>
@@ -27,7 +19,7 @@
 </template>
 
 <script setup>
-const props = defineProps({
+defineProps({
   modelValue: Boolean,
   maxHeight: {
     type: String,
diff --git a/layouts/default.vue b/layouts/default.vue
index b7b8fa0..270c1a8 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -87,8 +87,8 @@
             <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'video'" class="w-full flex items-center justify-center">
-          <div class="w-full aspect-video">
+        <div v-if="modalStore.type === 'video'" class="flex-1 flex items-center justify-center min-h-0">
+          <div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
             <ClientOnly>
               <iframe 
                 :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" 
@@ -98,7 +98,7 @@
                 webkitallowfullscreen 
                 mozallowfullscreen 
                 allowfullscreen 
-                class="w-full h-full"
+                class="w-full h-full block"
               ></iframe>
             </ClientOnly>
           </div>

From e5e4dca8e47dbd4eab6511748cfce0e70af9ae35 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 18:21:45 +0100
Subject: [PATCH 29/32] Fix modal to always be 16:9 aspect ratio

---
 components/ImageViewer.vue | 15 ++++++---------
 components/SimpleModal.vue |  2 +-
 layouts/default.vue        | 28 +++++++++++++---------------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/components/ImageViewer.vue b/components/ImageViewer.vue
index bcdec26..6221c62 100644
--- a/components/ImageViewer.vue
+++ b/components/ImageViewer.vue
@@ -1,14 +1,11 @@
 <template>
-  <div class="flex flex-col h-full">
+  <div class="flex flex-col h-full w-full">
     <div class="flex-1 flex items-center justify-center min-h-0">
-      <div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
-        <!-- Image -->
-        <NuxtImg 
-          v-if="gallery[currentIndex]"
-          :src="'/' + bucket + '/' + gallery[currentIndex].image" 
-          class="w-full h-full object-contain"
-        />
-      </div>
+      <NuxtImg 
+        v-if="gallery[currentIndex]"
+        :src="'/' + bucket + '/' + gallery[currentIndex].image" 
+        class="w-full h-full object-contain"
+      />
     </div>
 
     <!-- Dots indicator -->
diff --git a/components/SimpleModal.vue b/components/SimpleModal.vue
index 7b75d27..b920fa9 100644
--- a/components/SimpleModal.vue
+++ b/components/SimpleModal.vue
@@ -7,7 +7,7 @@
       <!-- Modal Panel -->
       <div class="fixed inset-0 flex items-center justify-center pointer-events-none">
         <div 
-          class="bg-white rounded-lg shadow-xl max-w-[80vw] max-h-[85vh] overflow-hidden relative pointer-events-auto"
+          class="bg-white rounded-lg shadow-xl w-[80vw] aspect-video max-h-[85vh] overflow-hidden relative pointer-events-auto"
           :style="{ maxHeight }"
         >
           <!-- Content -->
diff --git a/layouts/default.vue b/layouts/default.vue
index 270c1a8..9e03b4e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -87,21 +87,19 @@
             <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'video'" class="flex-1 flex items-center justify-center min-h-0">
-          <div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
-            <ClientOnly>
-              <iframe 
-                :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" 
-                width="100%" 
-                height="100%" 
-                frameborder="0" 
-                webkitallowfullscreen 
-                mozallowfullscreen 
-                allowfullscreen 
-                class="w-full h-full block"
-              ></iframe>
-            </ClientOnly>
-          </div>
+        <div v-if="modalStore.type === 'video'" class="w-full h-full flex items-center justify-center">
+          <ClientOnly>
+            <iframe 
+              :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" 
+              width="100%" 
+              height="100%" 
+              frameborder="0" 
+              webkitallowfullscreen 
+              mozallowfullscreen 
+              allowfullscreen 
+              class="w-full h-full block"
+            ></iframe>
+          </ClientOnly>
         </div>
         <div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]">
           <ClientOnly>

From 44c3397d85d2f557a2d1466237702996027bb0d0 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 18:27:08 +0100
Subject: [PATCH 30/32] Remove unused Modal, Collapsible components and events
 page

---
 components/Collapsible/CollapseTransition.vue | 313 ------------------
 components/Collapsible/Collapsible.stories.ts |  25 --
 components/Collapsible/Collapsible.vue        |  91 -----
 .../Collapsible/CollapsibleGroup.stories.ts   |  38 ---
 components/Collapsible/CollapsibleGroup.vue   |  54 ---
 components/Modal/Backdrop.vue                 |   3 -
 components/Modal/Modal.vue                    | 113 -------
 components/Modal/ModalBody.vue                |   9 -
 components/Modal/ModalFooter.vue              |   9 -
 components/Modal/ModalHeader.vue              |  34 --
 pages/events.vue                              | 111 -------
 11 files changed, 800 deletions(-)
 delete mode 100644 components/Collapsible/CollapseTransition.vue
 delete mode 100644 components/Collapsible/Collapsible.stories.ts
 delete mode 100644 components/Collapsible/Collapsible.vue
 delete mode 100644 components/Collapsible/CollapsibleGroup.stories.ts
 delete mode 100644 components/Collapsible/CollapsibleGroup.vue
 delete mode 100644 components/Modal/Backdrop.vue
 delete mode 100644 components/Modal/Modal.vue
 delete mode 100644 components/Modal/ModalBody.vue
 delete mode 100644 components/Modal/ModalFooter.vue
 delete mode 100644 components/Modal/ModalHeader.vue
 delete mode 100644 pages/events.vue

diff --git a/components/Collapsible/CollapseTransition.vue b/components/Collapsible/CollapseTransition.vue
deleted file mode 100644
index f8f0515..0000000
--- a/components/Collapsible/CollapseTransition.vue
+++ /dev/null
@@ -1,313 +0,0 @@
-<script>
-export default {
-  name: 'CollapseTransition',
-
-  props: {
-    name: {
-      type: String,
-      required: false,
-      default: 'collapse',
-    },
-    dimension: {
-      type: String,
-      required: false,
-      default: 'height',
-      validator: (value) => {
-        return ['height', 'width'].includes(value)
-      },
-    },
-    duration: {
-      type: Number,
-      required: false,
-      default: 300,
-    },
-    easing: {
-      type: String,
-      required: false,
-      default: 'ease-in-out',
-    },
-  },
-
-  emits: ['before-appear', 'appear', 'after-appear', 'appear-cancelled', 'before-enter', 'enter', 'after-enter', 'enter-cancelled', 'before-leave', 'leave', 'after-leave', 'leave-cancelled'],
-
-  data() {
-    return {
-      cachedStyles: null,
-    }
-  },
-
-  computed: {
-    transition() {
-      const transitions = []
-
-      Object.keys(this.cachedStyles).forEach((key) => {
-        transitions.push(
-          `${this.convertToCssProperty(key)} ${this.duration}ms ${this.easing}`,
-        )
-      })
-
-      return transitions.join(', ')
-    },
-  },
-
-  watch: {
-    dimension() {
-      this.clearCachedDimensions()
-    },
-  },
-
-  methods: {
-    beforeAppear(el) {
-      // Emit the event to the parent
-      this.$emit('before-appear', el)
-    },
-
-    appear(el) {
-      // Emit the event to the parent
-      this.$emit('appear', el)
-    },
-
-    afterAppear(el) {
-      // Emit the event to the parent
-      this.$emit('after-appear', el)
-    },
-
-    appearCancelled(el) {
-      // Emit the event to the parent
-      this.$emit('appear-cancelled', el)
-    },
-
-    beforeEnter(el) {
-      // Emit the event to the parent
-      this.$emit('before-enter', el)
-    },
-
-    enter(el, done) {
-      // Because width and height may be 'auto',
-      // first detect and cache the dimensions
-      this.detectAndCacheDimensions(el)
-
-      // The order of applying styles is important:
-      // - 1. Set styles for state before transition
-      // - 2. Force repaint
-      // - 3. Add transition style
-      // - 4. Set styles for state after transition
-      // If the order is not right and you open any 2nd level submenu
-      // for the first time, the transition will not work.
-      this.setClosedDimensions(el)
-      this.hideOverflow(el)
-      this.forceRepaint(el)
-      this.setTransition(el)
-      this.setOpenedDimensions(el)
-
-      // Emit the event to the parent
-      this.$emit('enter', el, done)
-
-      // Call done() when the transition ends
-      // to trigger the @after-enter event.
-      setTimeout(done, this.duration)
-    },
-
-    afterEnter(el) {
-      // Clean up inline styles
-      this.unsetOverflow(el)
-      this.unsetTransition(el)
-      this.unsetDimensions(el)
-      this.clearCachedDimensions()
-
-      // Emit the event to the parent
-      this.$emit('after-enter', el)
-    },
-
-    enterCancelled(el) {
-      // Emit the event to the parent
-      this.$emit('enter-cancelled', el)
-    },
-
-    beforeLeave(el) {
-      // Emit the event to the parent
-      this.$emit('before-leave', el)
-    },
-
-    leave(el, done) {
-      // For some reason, @leave triggered when starting
-      // from open state on page load. So for safety,
-      // check if the dimensions have been cached.
-      this.detectAndCacheDimensions(el)
-
-      // The order of applying styles is less important
-      // than in the enter phase, as long as we repaint
-      // before setting the closed dimensions.
-      // But it is probably best to use the same
-      // order as the enter phase.
-      this.setOpenedDimensions(el)
-      this.hideOverflow(el)
-      this.forceRepaint(el)
-      this.setTransition(el)
-      this.setClosedDimensions(el)
-
-      // Emit the event to the parent
-      this.$emit('leave', el, done)
-
-      // Call done() when the transition ends
-      // to trigger the @after-leave event.
-      // This will also cause v-show
-      // to reapply 'display: none'.
-      setTimeout(done, this.duration)
-    },
-
-    afterLeave(el) {
-      // Clean up inline styles
-      this.unsetOverflow(el)
-      this.unsetTransition(el)
-      this.unsetDimensions(el)
-      this.clearCachedDimensions()
-
-      // Emit the event to the parent
-      this.$emit('after-leave', el)
-    },
-
-    leaveCancelled(el) {
-      // Emit the event to the parent
-      this.$emit('leave-cancelled', el)
-    },
-
-    detectAndCacheDimensions(el) {
-      // Cache actual dimensions
-      // only once to void invalid values when
-      // triggering during a transition
-      if (this.cachedStyles)
-        return
-
-      const visibility = el.style.visibility
-      const display = el.style.display
-
-      // Trick to get the width and
-      // height of a hidden element
-      el.style.visibility = 'hidden'
-      el.style.display = ''
-
-      this.cachedStyles = this.detectRelevantDimensions(el)
-
-      // Restore any original styling
-      el.style.visibility = visibility
-      el.style.display = display
-    },
-
-    clearCachedDimensions() {
-      this.cachedStyles = null
-    },
-
-    detectRelevantDimensions(el) {
-      // These properties will be transitioned
-      if (this.dimension === 'height') {
-        return {
-          height: `${el.offsetHeight}px`,
-          paddingTop:
-            el.style.paddingTop || this.getCssValue(el, 'padding-top'),
-          paddingBottom:
-            el.style.paddingBottom || this.getCssValue(el, 'padding-bottom'),
-        }
-      }
-
-      if (this.dimension === 'width') {
-        return {
-          width: `${el.offsetWidth}px`,
-          paddingLeft:
-            el.style.paddingLeft || this.getCssValue(el, 'padding-left'),
-          paddingRight:
-            el.style.paddingRight || this.getCssValue(el, 'padding-right'),
-        }
-      }
-
-      return {}
-    },
-
-    setTransition(el) {
-      el.style.transition = this.transition
-    },
-
-    unsetTransition(el) {
-      el.style.transition = ''
-    },
-
-    hideOverflow(el) {
-      el.style.overflow = 'hidden'
-    },
-
-    unsetOverflow(el) {
-      el.style.overflow = ''
-    },
-
-    setClosedDimensions(el) {
-      Object.keys(this.cachedStyles).forEach((key) => {
-        el.style[key] = '0'
-      })
-    },
-
-    setOpenedDimensions(el) {
-      Object.keys(this.cachedStyles).forEach((key) => {
-        el.style[key] = this.cachedStyles[key]
-      })
-    },
-
-    unsetDimensions(el) {
-      Object.keys(this.cachedStyles).forEach((key) => {
-        el.style[key] = ''
-      })
-    },
-
-    forceRepaint(el) {
-      // Force repaint to make sure the animation is triggered correctly.
-      // Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/
-      // eslint-disable-next-line no-unused-expressions
-      getComputedStyle(el)[this.dimension]
-    },
-
-    getCssValue(el, style) {
-      return getComputedStyle(el, null).getPropertyValue(style)
-    },
-
-    convertToCssProperty(style) {
-      // Example: convert 'paddingTop' to 'padding-top'
-      // Thanks: https://gist.github.com/tan-yuki/3450323
-      const upperChars = style.match(/([A-Z])/g)
-
-      if (!upperChars)
-        return style
-
-      for (let i = 0, n = upperChars.length; i < n; i++) {
-        style = style.replace(
-          new RegExp(upperChars[i]),
-          `-${upperChars[i].toLowerCase()}`,
-        )
-      }
-
-      if (style.slice(0, 1) === '-')
-        style = style.slice(1)
-
-      return style
-    },
-  },
-}
-</script>
-
-<template>
-  <transition
-    :name="name"
-    @before-appear="beforeAppear"
-    @appear="appear"
-    @after-appear="afterAppear"
-    @appear-cancelled="appearCancelled"
-    @before-enter="beforeEnter"
-    @enter="enter"
-    @after-enter="afterEnter"
-    @enter-cancelled="enterCancelled"
-    @before-leave="beforeLeave"
-    @leave="leave"
-    @after-leave="afterLeave"
-    @leave-cancelled="leaveCancelled"
-  >
-    <slot />
-  </transition>
-</template>
diff --git a/components/Collapsible/Collapsible.stories.ts b/components/Collapsible/Collapsible.stories.ts
deleted file mode 100644
index 22a43cc..0000000
--- a/components/Collapsible/Collapsible.stories.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { Story } from '@storybook/vue3'
-import Collapsible from './Collapsible.vue'
-
-export default {
-  title: 'Components/Collapsible',
-  component: Collapsible,
-  args: {
-    modelValue: false,
-    title: 'Item',
-    content: 'lorem ipsum dolor sit amet',
-  },
-}
-
-const Template: Story = (args, { argTypes }) => ({
-  components: { Collapsible },
-  setup() {
-    return { args, argTypes }
-  },
-  template: `
-    <Collapsible v-bind="args"/>
-  `,
-})
-
-export const Default = Template.bind({})
-Default.args = {}
diff --git a/components/Collapsible/Collapsible.vue b/components/Collapsible/Collapsible.vue
deleted file mode 100644
index a0761ba..0000000
--- a/components/Collapsible/Collapsible.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script lang="ts" setup>
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
-import { ref, toRefs, watch } from 'vue'
-import CollapseTransition from './CollapseTransition.vue'
-import Modal from '../Modal/Modal.vue';
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    title: string
-    content?: string
-    classes?: {
-      wrapper?: string
-      button?: string
-      title?: string
-      panel?: string
-    }
-  }>(),
-  {
-    modelValue: false,
-  },
-)
-
-const emit = defineEmits([
-  'update:modelValue',
-  'change',
-  'toggle',
-  'open',
-  'close',
-])
-
-const { modelValue } = toRefs(props)
-const isOpen = ref(modelValue.value)
-
-watch(modelValue, (val) => {
-  isOpen.value = val
-})
-
-watch(isOpen, (val) => {
-  emit('update:modelValue', val)
-  emit('change', val)
-
-  if (val)
-    emit('open')
-  else
-    emit('close')
-})
-
-const toggle = () => {
-  emit('toggle')
-  isOpen.value = !isOpen.value
-}
-</script>
-
-<template>
-  <Disclosure v-slot="{ open }" as="div">
-    <DisclosureButton
-      class="
-        flex
-        items-center
-        justify-between
-        w-full
-        text-left
-        rounded-lg
-        focus:outline-none
-        focus-visible:ring
-        focus-visible:ring-blue-50
-        focus-visible:ring-opacity-75
-      "
-      :class="classes?.button"
-      type="button"
-      @click="toggle"
-    >
-    <div class="inline-flex w-full">
-      <Icon
-        name="heroicons:chevron-down"
-        :class="isOpen ? 'transform rotate-180' : ''"
-        class="w-5 h-5 text-black"
-      />
-      <slot name="title"></slot>
-    </div>
-    </DisclosureButton>
-    <CollapseTransition>
-      <div v-show="isOpen">
-        <DisclosurePanel static class="pb-2 text-15" :class="classes?.panel">
-          <slot name="content"></slot>
-        </DisclosurePanel>
-      </div>
-    </CollapseTransition>
-  </Disclosure>
-</template>
diff --git a/components/Collapsible/CollapsibleGroup.stories.ts b/components/Collapsible/CollapsibleGroup.stories.ts
deleted file mode 100644
index 9d564e7..0000000
--- a/components/Collapsible/CollapsibleGroup.stories.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { Story } from '@storybook/vue3'
-import CollapsibleGroup from './CollapsibleGroup.vue'
-
-const genItems = (length = 5): any[] =>
-  Array.from({ length }, (_, v) => ({
-    title: `Item ${v + 1}`,
-    content: `lorem ipsum ${v + 1}`,
-  }))
-
-const items = genItems(5)
-
-export default {
-  title: 'Components/CollapsibleGroup',
-  component: CollapsibleGroup,
-  args: {
-    modelValue: false,
-    accordion: false,
-    items,
-  },
-}
-
-const Template: Story = (args, { argTypes }) => ({
-  components: { CollapsibleGroup },
-  setup() {
-    return { args, argTypes }
-  },
-  template: `
-    <CollapsibleGroup v-bind="args"/>
-  `,
-})
-
-export const Default = Template.bind({})
-Default.args = {}
-
-export const Accordion = Template.bind({})
-Accordion.args = {
-  accordion: true,
-}
diff --git a/components/Collapsible/CollapsibleGroup.vue b/components/Collapsible/CollapsibleGroup.vue
deleted file mode 100644
index 5951002..0000000
--- a/components/Collapsible/CollapsibleGroup.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts" setup>
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
-import { ref, toRefs, watch } from 'vue'
-import Collapsible from './Collapsible.vue'
-
-interface CollapsibleItem {
-  title: string
-  content: string
-  isOpen?: boolean
-}
-
-const props
-  = defineProps<{
-    items?: CollapsibleItem[]
-    classes?: {
-      wrapper?: string
-      button?: string
-      title?: string
-      panel?: string
-    }
-    accordion?: boolean
-  }>()
-
-const { items } = toRefs(props)
-
-const children = ref(props.items)
-
-watch(items, (val) => {
-  children.value = val
-})
-
-const onToggle = (item: CollapsibleItem) => {
-  if (props.accordion) {
-    children.value.forEach((child) => {
-      child.isOpen = false
-    })
-    item.isOpen = true
-  }
-}
-</script>
-
-<template>
-  <div class="w-full p-2" :class="classes?.wrapper">
-    <slot>
-      <Collapsible
-        v-for="(item, idx) in children"
-        :key="idx"
-        v-bind="item"
-        v-model="item.isOpen"
-        @toggle="onToggle(item)"
-      />
-    </slot>
-  </div>
-</template>
diff --git a/components/Modal/Backdrop.vue b/components/Modal/Backdrop.vue
deleted file mode 100644
index 6a14409..0000000
--- a/components/Modal/Backdrop.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div class="fixed inset-0 bg-black/50 z-15 transition duration-300" />
-</template>
diff --git a/components/Modal/Modal.vue b/components/Modal/Modal.vue
deleted file mode 100644
index 7e248c5..0000000
--- a/components/Modal/Modal.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  Dialog,
-  DialogPanel,
-  TransitionChild,
-  TransitionRoot,
-} from '@headlessui/vue'
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: boolean
-    persistent?: boolean
-    fullscreen?: boolean
-    maxHeight?: string
-  }>(),
-  {
-    modelValue: false,
-    persistent: false,
-    fullscreen: false,
-    maxHeight: '85vh',
-  },
-)
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
-}>()
-
-const { modelValue } = toRefs(props)
-
-const isOpen = ref(modelValue.value)
-
-watch(modelValue, (value) => {
-  isOpen.value = value
-})
-
-function closeModal() {
-  isOpen.value = false
-}
-
-function openModal() {
-  isOpen.value = true
-}
-
-function onModalClose() {
-  if (!props.persistent)
-    closeModal()
-}
-
-watch(isOpen, (value) => {
-  emit('update:modelValue', value)
-})
-
-const api = {
-  isOpen,
-  open: openModal,
-  close: closeModal,
-}
-
-provide('modal', api)
-</script>
-
-<template>
-  
-    <slot name="activator" :open="openModal" :on="{ click: openModal }" />
-
-    <TransitionRoot appear :show="isOpen" as="template">
-      <Dialog as="div" class="relative z-20" @close="onModalClose">
-        <TransitionChild
-          as="template"
-          enter="duration-300 ease-out"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="duration-200 ease-in"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div class="fixed inset-0 bg-black bg-opacity-25" />
-        </TransitionChild>
-
-        <div class="fixed inset-0 overflow-y-auto">
-          <div
-            class="flex min-h-full items-center justify-center text-center"
-            :class="{
-              'p-4': !fullscreen,
-            }"
-          >
-            <TransitionChild
-              as="template"
-              enter="duration-300 ease-out"
-              enter-from="opacity-0 scale-95"
-              enter-to="opacity-100 scale-100"
-              leave="duration-200 ease-in"
-              leave-from="opacity-100 scale-100"
-              leave-to="opacity-0 scale-95"
-            >
-              <DialogPanel
-                class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all py-4"
-                :class="{
-                  'h-screen': fullscreen,
-                  'max-w-[min(85vw,1200px)] rounded-lg': !fullscreen,
-                }"
-                :style="!fullscreen ? { maxHeight } : {}"
-              >
-                <slot />
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </TransitionRoot>
-  
-</template>
diff --git a/components/Modal/ModalBody.vue b/components/Modal/ModalBody.vue
deleted file mode 100644
index 1ccf2b4..0000000
--- a/components/Modal/ModalBody.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-import { DialogDescription } from '@headlessui/vue'
-</script>
-
-<template>
-  <DialogDescription class="px-4 py-3 text-sm text-gray-800">
-    <slot />
-  </DialogDescription>
-</template>
diff --git a/components/Modal/ModalFooter.vue b/components/Modal/ModalFooter.vue
deleted file mode 100644
index 52abf7a..0000000
--- a/components/Modal/ModalFooter.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-// import { ref } from 'vue'
-</script>
-
-<template>
-  <div class="px-4 py-3">
-    <slot />
-  </div>
-</template>
diff --git a/components/Modal/ModalHeader.vue b/components/Modal/ModalHeader.vue
deleted file mode 100644
index 45d0500..0000000
--- a/components/Modal/ModalHeader.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { DialogTitle } from '@headlessui/vue'
-
-interface Props {
-  dismissable?: boolean
-  titleClass?: string
-}
-
-defineProps<Props>()
-
-const api = inject('modal')
-</script>
-
-<template>
-  <DialogTitle
-    as="div"
-    class="flex gap-2 justify-between items-center px-4 pt-3"
-  >
-    <h3
-      class="text-lg font-medium leading-6 text-gray-900"
-      :class="titleClass"
-    >
-      <slot />
-    </h3>
-    <slot v-if="dismissable" name="dismissable">
-      <button
-        class="text-2xl text-gray-500 appearance-none px-2 -mr-2"
-        @click="api.close"
-      >
-        &times;
-      </button>
-    </slot>
-  </DialogTitle>
-</template>
diff --git a/pages/events.vue b/pages/events.vue
deleted file mode 100644
index 464cfe5..0000000
--- a/pages/events.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <div class="bg-zinc-100 rounded-lg m-5 grid grid-cols-2 gap-10 divide-x divide-solid divide-black py-4 mb-10">
-    
-        <div class="px-5">
-            <p class="text-lg">performances</p>
-
-            <div v-for="(item, index) in events">
-                <Collapsible title='placeholder' :modelValue='index <= 10' class="leading-tight py-2 ml-3 text-sm">
-                    <template v-slot:title>
-                        <div class="gap-1 w-[95%] px-2">
-                            <div>
-                                {{ item.formatted_date }}: {{item.venue.city}}, {{item.venue.state}}
-                                <div class="ml-4 text-[#7F7F7F]">
-                                    {{ item.venue.name }}
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                    <template v-slot:content>
-                        <div v-for="performance in item.program">
-                            <div class="italic text-sm ml-16 pt-1">{{performance.work}}</div>
-                            <div v-if="performance.ensemble" class="ml-20">
-                                {{ performance.ensemble }}
-                            </div>
-                            <div v-for="performer in performance.performers" class="ml-20">
-                                {{ performer.name }}<span v-if="performer.instrument_tags?.length"> - </span>
-                                <span v-for="(instrument, index) in performer.instrument_tags">
-                                    <span v-if="index !== 0">, </span>
-                                    {{ instrument }}
-                                </span>
-                            </div>
-                        </div>
-                    </template>
-                </Collapsible>
-            </div>
-        </div>
-
-        <div class="px-5">
-            <p class="text-lg">lectures</p>
-
-            <div v-for="yearGroup in lecturesByYear" :key="yearGroup.year">
-                <p class="text-sm font-semibold mt-4 text-[#7F7F7F]">{{ yearGroup.year }}</p>
-                <div class="leading-tight py-2 ml-3 text-sm" v-for="item in yearGroup.talks">
-                    <div class="gap-1">
-                        <div>
-                            {{item.location}}
-                            <div v-for="talk in item.talks" class="ml-4 text-[#7F7F7F]">
-                                {{ talk.title }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-
-<script setup>
-    const { data: events } = await useFetch('/api/events', {
-        transform: (events) => {
-            for (const event of events) {
-                let date = new Date(event.start_date)
-                event.formatted_date = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
-            }
-            return events.sort((a,b) => new Date(b.start_date) - new Date(a.start_date))
-        }
-    })
-
-    const { data: talksData } = await useFetch('/api/talks', {
-        transform: (events) => {
-            for (const event of events) {
-                let date = new Date(event.date)
-                event.date = date
-                event.formatted_date = ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear()
-                if(typeof event.title === 'string' || event.title instanceof String) {event.talks = [{'title': event.title}]
-                } else {
-                    let talks = []
-                    for(const talk of event.title){
-                        talks.push({"title": talk})
-                    }
-                    event.talks = talks
-                }
-            }
-            return events.sort((a,b) => new Date(b.date) - new Date(a.date))
-        }
-    })
-
-    const lecturesByYear = computed(() => {
-        if (!talksData.value) return []
-
-        const byYear = {}
-        for (const talk of talksData.value) {
-            const year = talk.date ? talk.date.getFullYear() : 'Unknown'
-            if (!byYear[year]) byYear[year] = []
-            byYear[year].push(talk)
-        }
-
-        return Object.keys(byYear)
-            .sort((a, b) => b - a)
-            .map(year => {
-                const talks = byYear[year].sort((a, b) => new Date(b.date) - new Date(a.date))
-                return { year, talks }
-            })
-    })
-
-    useHead({
-        titleTemplate: 'Michael Winter - Events - Performances and Lectures'
-    })
-</script>
-

From 06e69316ad97f91c68005b25954918c21390a757 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 19:02:10 +0100
Subject: [PATCH 31/32] Add score modal functionality and simplify modal sizing

---
 layouts/default.vue | 4 ++--
 pages/pieces.vue    | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 9e03b4e..77b01f2 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -106,9 +106,9 @@
             <iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
           </ClientOnly>
         </div>
-        <div v-if="modalStore.type === 'pdf'" class="flex flex-col h-[70vh]">
+        <div v-if="modalStore.type === 'pdf'" class="w-full h-full flex flex-col">
           <ClientOnly>
-            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>
+            <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-1"></iframe>
           </ClientOnly>
           <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
             <ClientOnly>
diff --git a/pages/pieces.vue b/pages/pieces.vue
index 04febe9..e707f9f 100644
--- a/pages/pieces.vue
+++ b/pages/pieces.vue
@@ -28,9 +28,9 @@
               <button v-if="work.gallery" @click="openImageModal(work)" class="hover:underline">
                 images
               </button>
-              <a v-if="work.score" :href="work.score" target="_blank" class="hover:underline">
+              <button v-if="work.score" @click="openScoreModal(work.score)" class="hover:underline">
                 score
-              </a>
+              </button>
             </div>
           </div>
         </div>
@@ -86,6 +86,10 @@ const openVideoModal = (vimeoId) => {
   modalStore.setModalProps('video', 'aspect-video', true, '', '', vimeoId)
 }
 
+const openScoreModal = (scoreUrl) => {
+  modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', scoreUrl)
+}
+
 const openImageModal = (work) => {
   const gallery = work.images.map(img => ({ image: img.filename }))
   modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '', '', '', '', 0)

From 8ae228f7f77fba73a781e4fde2ef43b1239d6bb7 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Sun, 8 Mar 2026 19:19:06 +0100
Subject: [PATCH 32/32] Adjust sticky header position to top-14

---
 pages/works/[slug].vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 26ec6ad..7abc3a4 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-if="work">
-      <div class="sticky top-12 bg-white z-30 border-b border-gray-200">
+      <div class="sticky top-14 bg-white z-30 border-b border-gray-200">
         <div class="max-w-3xl mx-auto px-4">
           <div class="flex items-center justify-between py-1">
             <div class="flex flex-wrap items-baseline gap-1">