Cards!

frontend/app/components/parts/HeaderLinks.vue

@@ -4,6 +4,7 @@ const route = useRoute()
 
 const scrollTargets: Record<string, string> = {
     'index': '#top',
+    'projects': '#scroll-projects',
     'blog': '#scroll-blog',
     'contact': '#scroll-contact',
     'art': '#scroll-art'
@@ -32,6 +33,10 @@ function getToPath(targetKey: string): string {
             <span class="tab-sep" v-if="false">│</span>
             <span class="tab-label">/</span>
         </NuxtLink>
+        <NuxtLink :to="getToPath('projects')" class="tui-tab" :class="{ 'tui-tab-active': isActive('projects') }">
+            <span class="tab-sep">│</span>
+            <span class="tab-label">/{{ $t('header.links.projects') }}</span>
+        </NuxtLink>
         <NuxtLink :to="getToPath('blog')" class="tui-tab" :class="{ 'tui-tab-active': isActive('blog') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.blog') }}</span>

frontend/app/components/parts/StickyHeader.vue

@@ -5,11 +5,15 @@ import SiteOptions from './site_options/SiteOptions.vue';
 import { ref, onMounted, onUnmounted } from 'vue';
  
 const SCROLL_THRESHOLD = 120; // px scrolled before sticky header appears
+
+const props = defineProps({
+    alwaysVisible: { type: Boolean, default: false }
+});
  
-const isVisible = ref(false);
+const isVisible = ref(props.alwaysVisible);
  
 function onScroll() {
-    isVisible.value = window.scrollY > SCROLL_THRESHOLD;
+    isVisible.value = props.alwaysVisible || window.scrollY > SCROLL_THRESHOLD;
 }
  
 onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }));