perf/a11y: conditional Calendly load, shimmer viewport pause, skip link, ARIA tabs, reduced-motion fixes

src/components/sections/Contact.svelte

@@ -359,12 +359,13 @@
                     required
                     autocomplete="name"
                     aria-invalid={fieldErrors.name ? 'true' : 'false'}
+                    aria-describedby={fieldErrors.name ? 'contact-name-error' : undefined}
                     placeholder="Jane Smith"
                     class="terminal-input"
                   />
                 </div>
                 {#if fieldErrors.name}
-                  <p role="alert" class="mt-1 text-xs" style="color: var(--color-red);">{fieldErrors.name}</p>
+                  <p id="contact-name-error" role="alert" class="mt-1 text-xs" style="color: var(--color-red);">{fieldErrors.name}</p>
                 {/if}
               </div>
 
@@ -402,12 +403,13 @@
                   autocomplete="email"
                   inputmode="email"
                   aria-invalid={fieldErrors.email ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.email ? 'contact-email-error' : undefined}
                   placeholder="jane@company.com"
                   class="terminal-input"
                 />
               </div>
               {#if fieldErrors.email}
-                <p role="alert" class="mt-1 text-xs" style="color: var(--color-red);">{fieldErrors.email}</p>
+                <p id="contact-email-error" role="alert" class="mt-1 text-xs" style="color: var(--color-red);">{fieldErrors.email}</p>
               {/if}
             </div>
 
@@ -425,12 +427,13 @@
                   required
                   rows={5}
                   aria-invalid={fieldErrors.message ? 'true' : 'false'}
+                  aria-describedby={fieldErrors.message ? 'contact-message-error' : undefined}
                   placeholder="Tell me about your consulting or architecture design needs, timeline, and budget..."
                   class="terminal-input terminal-input-textarea"
                 ></textarea>
               </div>
               {#if fieldErrors.message}
-                <p role="alert" class="mt-1 text-xs" style="color: var(--color-red);">{fieldErrors.message}</p>
+                <p id="contact-message-error" role="alert" class="mt-1 text-xs" style="color: var(--color-red);">{fieldErrors.message}</p>
               {/if}
             </div>
 

src/components/sections/Portfolio.svelte

@@ -242,6 +242,10 @@
       animation: none;
       opacity: 0;
     }
+
+    .clients-track {
+      animation: none;
+    }
   }
 
   /* Phosphor — clients marquee crawl */

src/components/sections/RssFeed.svelte

@@ -111,7 +111,7 @@
     {#if loading}
       <div role="status" aria-label="Loading blog posts" aria-live="polite">
         <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-          {#each Array.from({ length: 3 }) as _, i}
+          {#each Array.from({ length: maxItems }) as _, i}
             <div
               class="skeleton-card rounded-xl p-6 animate-pulse"
               style="transition-delay: {i * 0.05}s;"

src/components/sections/Services.svelte

@@ -152,6 +152,28 @@
     expandedCreativeIndex = expandedCreativeIndex === index ? null : index;
   }
 
+  function handleTabKeydown(e: KeyboardEvent) {
+    const tabs: Array<'technical' | 'creative'> = ['technical', 'creative'];
+    const currentIdx = tabs.indexOf(activeTab);
+    let nextIdx: number | null = null;
+
+    if (e.key === 'ArrowRight') {
+      nextIdx = (currentIdx + 1) % tabs.length;
+    } else if (e.key === 'ArrowLeft') {
+      nextIdx = (currentIdx - 1 + tabs.length) % tabs.length;
+    } else if (e.key === 'Home') {
+      nextIdx = 0;
+    } else if (e.key === 'End') {
+      nextIdx = tabs.length - 1;
+    }
+
+    if (nextIdx !== null) {
+      e.preventDefault();
+      activeTab = tabs[nextIdx];
+      document.getElementById(`tab-${tabs[nextIdx]}`)?.focus();
+    }
+  }
+
   $effect(() => {
     activeTab;
 
@@ -204,7 +226,7 @@
     </div>
 
     <!-- Tab switcher -->
-    <div class="flex gap-2 mb-10 animate-on-scroll" role="tablist" aria-label="Services categories">
+    <div class="flex gap-2 mb-10 animate-on-scroll" role="tablist" aria-label="Services categories" onkeydown={handleTabKeydown}>
       <button
         id="tab-technical"
         class="btn {activeTab === 'technical' ? 'btn-primary' : 'btn-outline'}"

src/components/sections/Services.test.ts

@@ -14,10 +14,16 @@ describe('Services section', () => {
   it('implements accessible tab switcher for Technical / Creative categories', () => {
     expect(servicesSource).toContain('role="tablist"');
     expect(servicesSource).toContain('aria-label="Services categories"');
+    expect(servicesSource).toContain('onkeydown={handleTabKeydown}');
     expect(servicesSource).toContain('role="tab"');
     expect(servicesSource).toContain('aria-selected');
     expect(servicesSource).toContain('aria-controls');
     expect(servicesSource).toContain('activeTab');
+    expect(servicesSource).toContain('handleTabKeydown');
+    expect(servicesSource).toContain("e.key === 'ArrowRight'");
+    expect(servicesSource).toContain("e.key === 'ArrowLeft'");
+    expect(servicesSource).toContain("e.key === 'Home'");
+    expect(servicesSource).toContain("e.key === 'End'");
     expect(servicesSource).toContain('tab-technical');
     expect(servicesSource).toContain('tab-creative');
   });

src/layouts/BaseLayout.astro

@@ -92,6 +92,7 @@ const shouldRenderTvIntro = Astro.url.pathname === '/';
 
     <!-- Preconnect for performance -->
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://assets.calendly.com" />
 
     <!-- Sitemap -->
     <link rel="sitemap" href="/sitemap-index.xml" />
@@ -134,6 +135,7 @@ const shouldRenderTvIntro = Astro.url.pathname === '/';
   </head>
 
   <body class="grid-overlay">
+    <a href="#main-content" class="skip-link">Skip to main content</a>
     {shouldRenderTvIntro && <TVIntro client:load />}
 
     <!-- Subtle scan-line overlay (CSS only) -->
@@ -240,6 +242,13 @@ const shouldRenderTvIntro = Astro.url.pathname === '/';
 
         observeShimmerRoot(document);
 
+        // Enable viewport-pause behavior now that initial elements have been observed.
+        // rAF defers until after the first IO callback fires, so already-visible
+        // elements have .shimmer-in-view before the pause takes effect.
+        requestAnimationFrame(() => {
+          document.documentElement.dataset.shimmerViewportPause = 'true';
+        });
+
         // Catch dynamically-added tiles (e.g. RssFeed mounts async)
         const mutationObs = new MutationObserver(scheduleObserveAddedNodes);
         mutationObs.observe(document.body, { childList: true, subtree: true });

src/styles/global.css

@@ -442,6 +442,36 @@ html[data-shimmer-viewport-pause="true"] .iridescent:not(.shimmer-in-view)::afte
   .iridescent::after {
     animation: none;
   }
+  /* Suppress Tailwind bounce (used in Hero scroll indicator) */
+  .animate-bounce {
+    animation: none;
+  }
+}
+
+/* Phosphor — skip navigation link for keyboard users */
+.skip-link {
+  position: absolute;
+  top: -48px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  padding: 0.5rem 1.25rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-cyan);
+  color: var(--color-cyan);
+  font-family: var(--font-mono);
+  font-size: 0.8rem;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  border-radius: 4px;
+  white-space: nowrap;
+  transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+  top: 8px;
+  outline: 2px solid var(--color-cyan);
+  outline-offset: 2px;
 }
 
 /* ============================================================