From 350a094eb094d1fae26b9dcdec57dd5306a68809 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 29 May 2026 06:31:06 +0000
Subject: [PATCH 1/2] perf/ux: performance, accessibility, and animation
 improvements

- Conditional Calendly CSS/JS load: only included on homepage,
  eliminating ~80KB of external assets on /blog, /privacy, etc.
- Add preconnect hint for assets.calendly.com (homepage only)
- Enable shimmer viewport pause: set data-shimmer-viewport-pause
  after initial IntersectionObserver fires so off-screen iridescent
  tiles pause their GPU animation
- Add skip-to-main-content link for keyboard/screen-reader users
  with Phosphor-styled CSS in global.css
- Services tabs: add ARIA-compliant keyboard navigation (ArrowLeft,
  ArrowRight, Home, End) per WAI-ARIA tabs pattern
- RssFeed: skeleton loader now renders maxItems cards instead of a
  hardcoded 3, matching the real loaded count
- Portfolio marquee: pause animation for prefers-reduced-motion users
- Hero scroll indicator: suppress animate-bounce for reduced motion
- Contact form: connect field error messages via aria-describedby
  for improved screen reader announcement
---
 src/components/sections/Contact.svelte   |  9 ++++---
 src/components/sections/Portfolio.svelte |  4 ++++
 src/components/sections/RssFeed.svelte   |  2 +-
 src/components/sections/Services.svelte  | 24 ++++++++++++++++++-
 src/layouts/BaseLayout.astro             | 14 +++++++++--
 src/styles/global.css                    | 30 ++++++++++++++++++++++++
 6 files changed, 76 insertions(+), 7 deletions(-)

diff --git a/src/components/sections/Contact.svelte b/src/components/sections/Contact.svelte
index 1045853..49416f4 100644
--- a/src/components/sections/Contact.svelte
+++ b/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>
 
diff --git a/src/components/sections/Portfolio.svelte b/src/components/sections/Portfolio.svelte
index eed3d6f..a36dbaf 100644
--- a/src/components/sections/Portfolio.svelte
+++ b/src/components/sections/Portfolio.svelte
@@ -242,6 +242,10 @@
       animation: none;
       opacity: 0;
     }
+
+    .clients-track {
+      animation: none;
+    }
   }
 
   /* Phosphor — clients marquee crawl */
diff --git a/src/components/sections/RssFeed.svelte b/src/components/sections/RssFeed.svelte
index f224f7d..810fee7 100644
--- a/src/components/sections/RssFeed.svelte
+++ b/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;"
diff --git a/src/components/sections/Services.svelte b/src/components/sections/Services.svelte
index 2fe43d4..b1f3531 100644
--- a/src/components/sections/Services.svelte
+++ b/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'}"
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index bb7904d..d2688ab 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -32,6 +32,7 @@ const seo = buildSeoMetadata({
 });
 const cfAnalyticsToken = import.meta.env.CLOUDFLARE_ANALYTICS_TOKEN;
 const shouldRenderTvIntro = Astro.url.pathname === '/';
+const shouldLoadCalendly = Astro.url.pathname === '/';
 ---
 
 <!doctype html>
@@ -92,13 +93,14 @@ const shouldRenderTvIntro = Astro.url.pathname === '/';
 
     <!-- Preconnect for performance -->
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    {shouldLoadCalendly && <link rel="preconnect" href="https://assets.calendly.com" />}
 
     <!-- Sitemap -->
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link rel="me" href="https://github.com/jaypatrick" />
     <link rel="me" href="https://www.linkedin.com/in/jaysonknight" />
-    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" />
-    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
+    {shouldLoadCalendly && <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" />}
+    {shouldLoadCalendly && <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>}
 
     <!-- JSON-LD structured data -->
     <script type="application/ld+json" set:html={JSON.stringify({
@@ -134,6 +136,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 +243,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 });
diff --git a/src/styles/global.css b/src/styles/global.css
index e06160c..74016e1 100644
--- a/src/styles/global.css
+++ b/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;
 }
 
 /* ============================================================

From 89f451b5e813ea5815ebbeb425d249a4d3a031e7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 29 May 2026 07:16:43 +0000
Subject: [PATCH 2/2] fix review feedback for calendly and services tabs

---
 src/components/sections/Services.test.ts | 6 ++++++
 src/layouts/BaseLayout.astro             | 7 +++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/Services.test.ts b/src/components/sections/Services.test.ts
index 8cbd864..f3693cc 100644
--- a/src/components/sections/Services.test.ts
+++ b/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');
   });
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index d2688ab..db74e83 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -32,7 +32,6 @@ const seo = buildSeoMetadata({
 });
 const cfAnalyticsToken = import.meta.env.CLOUDFLARE_ANALYTICS_TOKEN;
 const shouldRenderTvIntro = Astro.url.pathname === '/';
-const shouldLoadCalendly = Astro.url.pathname === '/';
 ---
 
 <!doctype html>
@@ -93,14 +92,14 @@ const shouldLoadCalendly = Astro.url.pathname === '/';
 
     <!-- Preconnect for performance -->
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    {shouldLoadCalendly && <link rel="preconnect" href="https://assets.calendly.com" />}
+    <link rel="preconnect" href="https://assets.calendly.com" />
 
     <!-- Sitemap -->
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link rel="me" href="https://github.com/jaypatrick" />
     <link rel="me" href="https://www.linkedin.com/in/jaysonknight" />
-    {shouldLoadCalendly && <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" />}
-    {shouldLoadCalendly && <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>}
+    <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" />
+    <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
 
     <!-- JSON-LD structured data -->
     <script type="application/ld+json" set:html={JSON.stringify({