feat: add responsive professional information layer

src/components/AppShell.vue

@@ -31,13 +31,13 @@ const canonicalNavigation = computed(() => canonicalSectionIds.map((id) => ({ id
 
 <template>
   <a class="skip-link" href="#portfolio-content">Skip to portfolio content</a>
-  <header>
+  <header class="site-header">
     <h1>{{ content.identity.name }}</h1>
     <p>{{ content.identity.role }}</p>
     <SiteNavigation :items="canonicalNavigation" />
   </header>
 
-  <main id="portfolio-content">
+  <main id="portfolio-content" class="portfolio-main">
     <PortfolioSection id="start" :index="1" :eyebrow="sectionLabel('start').toUpperCase()" :heading="sectionLabel('start').toUpperCase()">
       <p>{{ content.identity.valueProposition }}</p>
     </PortfolioSection>

src/components/PortfolioSection.vue

@@ -8,8 +8,8 @@ defineProps<{
 </script>
 
 <template>
-  <section :id="id" :aria-labelledby="`${id}-heading`" :data-section-index="index">
-    <p>{{ String(index).padStart(2, '0') }} / {{ eyebrow }}</p>
+  <section :id="id" class="portfolio-section" :aria-labelledby="`${id}-heading`" :data-section-index="index">
+    <p class="route-label">{{ String(index).padStart(2, '0') }} / {{ eyebrow }}</p>
     <h2 :id="`${id}-heading`">{{ heading }}</h2>
     <slot />
   </section>

src/components/SiteNavigation.vue

@@ -5,7 +5,7 @@ defineProps<{ items: ReadonlyArray<{ id: SectionId; label: string }> }>();
 </script>
 
 <template>
-  <nav aria-label="Portfolio sections">
+  <nav class="site-navigation" aria-label="Portfolio sections">
     <ul>
       <li v-for="item in items" :key="item.id">
         <a :href="`#${item.id}`">{{ item.label }}</a>