mwinter/portfolio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Redesign: add responsive header, sidebar, and fix layout issues

Browse source
This commit is contained in:
Michael Winter 2026-03-07 14:59:23 +01:00
parent b44c9c324a
commit e4e733d87a
3 changed files with 49 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app.vue
View file

@ -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>

54
layouts/default.vue
View file

@ -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>

2
pages/pieces.vue
View file

@ -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">