diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..717f9e0
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2025-05-10 - Keyboard Navigation Enhancements
+**Learning:** Found that the application lacked basic keyboard accessibility features. Specifically, there was no "Skip to content" link for screen reader and keyboard users to bypass the navigation, and many interactive elements (like `.btn` which had `outline: none;`) lacked visible focus indicators, making it hard to track focus via keyboard.
+**Action:** Always ensure that global focus states (e.g., using `:focus-visible`) are present to provide visual feedback for interactive elements. Incorporate a visually hidden (until focused) skip link at the top of the DOM structure that anchors to the main content area (`<main>`).
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index 0ce6bf8..aac12ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -135,6 +135,10 @@ function App() {
 
   return (
     <>
+      <a href="#main-content" className="skip-to-content">
+        Skip to content
+      </a>
+
       {/* UI overlays */}
       <div id="cursor-dot" />
       <div id="cursor-ring" />
@@ -146,7 +150,7 @@ function App() {
 
       {/* App */}
       <Navbar />
-      <main>
+      <main id="main-content">
         <Hero />
         <About />
         <Skills />
diff --git a/src/index.css b/src/index.css
index 361b495..4bf9a4a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -135,6 +135,13 @@ body {
 /* ── SELECTION ── */
 ::selection { background: hsla(185, 100%, 52%, 0.3); color: var(--text-primary); }
 
+/* ── FOCUS STATES ── */
+:focus-visible {
+  outline: 2px solid var(--accent-cyan);
+  outline-offset: 4px;
+  border-radius: 4px;
+}
+
 /* ── TYPOGRAPHY ── */
 h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-display);
@@ -146,6 +153,29 @@ h1, h2, h3, h4, h5, h6 {
 a { color: inherit; text-decoration: none; }
 img, svg { display: block; max-width: 100%; }
 
+/* ── SKIP TO CONTENT ── */
+.skip-to-content {
+  position: absolute;
+  top: -100px;
+  left: 0;
+  padding: 1rem;
+  background: var(--bg-card);
+  color: var(--accent-cyan);
+  z-index: 10000;
+  transition: top 0.3s ease;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  text-decoration: none;
+  border-bottom-right-radius: var(--radius-md);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--glass-shadow);
+}
+
+.skip-to-content:focus {
+  top: 0;
+  outline: 2px solid var(--accent-violet);
+}
+
 /* ── UTILITIES ── */
 .container {
   max-width: 1200px;