From 07ada545bb07db74403e61e49694bcc499b4d50e Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 23 May 2026 04:53:29 +0000
Subject: [PATCH] feat(a11y): add skip-to-content link and improve main content
 semantics

- Added a "Skip to content" link in `RootLayout` for keyboard accessibility.
- Moved `Intro` component inside `<main>` tag in `Home` page.
- Added `id="main-content"` and `tabIndex={-1}` to `<main>` for reliable skip-link targeting.
- Documented learning in `.Jules/palette.md`.
---
 src/app/layout.tsx | 6 ++++++
 src/app/page.tsx   | 8 ++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3a2ad11e..a7410b16 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -58,6 +58,12 @@ export default function RootLayout({
       <body
         className={`${inter.className} antialiased bg-background text-foreground transition-colors duration-500`}
       >
+        <a
+          href="#main-content"
+          className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[1000] focus:bg-primary focus:text-white focus:px-4 focus:py-2 focus:rounded-md focus:shadow-lg focus:outline-none"
+        >
+          Skip to content
+        </a>
         <Providers>
           {children}
           <ScrollToTopButton />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 78c14c57..43f35735 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -43,8 +43,12 @@ const Home = () => {
     <div className="flex flex-col min-h-screen">
       <Banner />
       <MainHeader />
-      <Intro />
-      <main className="flex-grow">
+      <main
+        id="main-content"
+        tabIndex={-1}
+        className="flex-grow outline-none focus:ring-0"
+      >
+        <Intro />
         <div className="space-y-0">
           <SkillsSection />
           <CertificationsSection />