From 384fb993f5ee9454cf53b2195dbc0c6d928aa01f Mon Sep 17 00:00:00 2001
From: Leopere <colin@nixc.us>
Date: Tue, 21 Oct 2025 10:46:00 -0400
Subject: [PATCH] Add skip-to-content accessibility link to header nav

- Added skip-to-content link at top of header partial
- Added CSS styling for hidden-by-default, visible-on-focus behavior
- Added id='main-content' to all HTML pages for skip link target
- Improves keyboard navigation and screen reader accessibility
---
 docker/resume/csv-tool-output.html            |  2 +-
 docker/resume/includes/header.html            |  3 ++-
 docker/resume/index.html                      |  2 +-
 docker/resume/one-pager-tools/csv-tool.html   |  2 +-
 docker/resume/one-pager-tools/template.html   |  2 +-
 docker/resume/stories/airport-dns.html        |  2 +-
 docker/resume/stories/app-development.html    |  2 +-
 docker/resume/stories/athion-turnaround.html  |  2 +-
 docker/resume/stories/fawe-plotsquared.html   |  2 +-
 .../resume/stories/healthcare-platform.html   |  2 +-
 .../resume/stories/home-infrastructure.html   |  2 +-
 docker/resume/stories/index.html              |  2 +-
 docker/resume/stories/motherboard-repair.html |  2 +-
 docker/resume/stories/nitric-leadership.html  |  2 +-
 docker/resume/stories/nuclear-dns.html        |  2 +-
 .../resume/stories/open-source-success.html   |  2 +-
 docker/resume/stories/scansnap-webdav.html    |  2 +-
 docker/resume/stories/showerloop.html         |  2 +-
 .../resume/stories/story-with-includes.html   |  2 +-
 docker/resume/stories/template-story.html     |  2 +-
 docker/resume/stories/viperwire.html          |  2 +-
 docker/resume/stories/web-design-java.html    |  2 +-
 docker/resume/stories/wordpress-security.html |  2 +-
 docker/resume/stories/youtube-game-dev.html   |  2 +-
 docker/resume/styles.css                      | 20 +++++++++++++++++++
 25 files changed, 45 insertions(+), 24 deletions(-)

diff --git a/docker/resume/csv-tool-output.html b/docker/resume/csv-tool-output.html
index 9d20513..51454d4 100644
--- a/docker/resume/csv-tool-output.html
+++ b/docker/resume/csv-tool-output.html
@@ -56,7 +56,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <h1>CSV Viewer</h1>
         <p>Simply paste CSV data below to view it as a formatted table.</p>
 
diff --git a/docker/resume/includes/header.html b/docker/resume/includes/header.html
index cc9c1d9..1b154cc 100644
--- a/docker/resume/includes/header.html
+++ b/docker/resume/includes/header.html
@@ -1,3 +1,5 @@
+<a href="#main-content" class="skip-to-content">Skip to content</a>
+
 <!-- Matomo -->
 <script>
   var _paq = window._paq = window._paq || [];
@@ -64,4 +66,3 @@
         </ul>
     </nav>
 
-    <div class="container-fluid" role="main"> 
diff --git a/docker/resume/index.html b/docker/resume/index.html
index bda4f2f..905ff1b 100644
--- a/docker/resume/index.html
+++ b/docker/resume/index.html
@@ -14,7 +14,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
     
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <h1>Colin Knapp</h1>
         
         <!-- Contact Information -->
diff --git a/docker/resume/one-pager-tools/csv-tool.html b/docker/resume/one-pager-tools/csv-tool.html
index 3133405..df4232f 100644
--- a/docker/resume/one-pager-tools/csv-tool.html
+++ b/docker/resume/one-pager-tools/csv-tool.html
@@ -56,7 +56,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <h1>CSV Viewer</h1>
         <p>Simply paste CSV data below to view it as a formatted table.</p>
 
diff --git a/docker/resume/one-pager-tools/template.html b/docker/resume/one-pager-tools/template.html
index 90a9b8e..4e65e10 100644
--- a/docker/resume/one-pager-tools/template.html
+++ b/docker/resume/one-pager-tools/template.html
@@ -17,7 +17,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <h1>Tool Name</h1>
         <p>A brief description of what this tool does.</p>
 
diff --git a/docker/resume/stories/airport-dns.html b/docker/resume/stories/airport-dns.html
index f280c47..c384e92 100644
--- a/docker/resume/stories/airport-dns.html
+++ b/docker/resume/stories/airport-dns.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Airport DNS Infrastructure</h1>
             <p class="story-meta">Category: Infrastructure & Resilience | Date: 2019-Present</p>
diff --git a/docker/resume/stories/app-development.html b/docker/resume/stories/app-development.html
index 5dd47e6..bd02477 100644
--- a/docker/resume/stories/app-development.html
+++ b/docker/resume/stories/app-development.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>App Development for Influencers</h1>
             <p class="story-meta">Category: Mobile Development, Analytics | Date: 2013-2018</p>
diff --git a/docker/resume/stories/athion-turnaround.html b/docker/resume/stories/athion-turnaround.html
index 6c9527a..7dc5a47 100644
--- a/docker/resume/stories/athion-turnaround.html
+++ b/docker/resume/stories/athion-turnaround.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Athion.net Turnaround</h1>
             <p class="story-meta">Category: Business Turnaround, System Optimization | Date: 2013-2017</p>
diff --git a/docker/resume/stories/fawe-plotsquared.html b/docker/resume/stories/fawe-plotsquared.html
index 2cb00d2..63868b8 100644
--- a/docker/resume/stories/fawe-plotsquared.html
+++ b/docker/resume/stories/fawe-plotsquared.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>FastAsyncWorldEdit & PlotSquared</h1>
             <p class="story-meta">Category: Open Source Development | Date: 2014-Present</p>
diff --git a/docker/resume/stories/healthcare-platform.html b/docker/resume/stories/healthcare-platform.html
index 86574d0..99dcc9f 100644
--- a/docker/resume/stories/healthcare-platform.html
+++ b/docker/resume/stories/healthcare-platform.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Healthcare Platform Infrastructure</h1>
             <p class="story-meta">Category: Infrastructure & Security | Date: 2019-Present</p>
diff --git a/docker/resume/stories/home-infrastructure.html b/docker/resume/stories/home-infrastructure.html
index 132fa9d..56dbbd6 100644
--- a/docker/resume/stories/home-infrastructure.html
+++ b/docker/resume/stories/home-infrastructure.html
@@ -15,7 +15,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
     
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Home Infrastructure Cluster & WireGuard Mesh Networking</h1>
             <p class="story-meta">Category: Infrastructure, Networking, Data Sovereignty | Date: 2020-Present</p>
diff --git a/docker/resume/stories/index.html b/docker/resume/stories/index.html
index 979e8ec..e865c88 100644
--- a/docker/resume/stories/index.html
+++ b/docker/resume/stories/index.html
@@ -15,7 +15,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <h1>Project Stories & Case Studies</h1>
         <p>Detailed stories and elaborations of projects from my portfolio.</p>
 
diff --git a/docker/resume/stories/motherboard-repair.html b/docker/resume/stories/motherboard-repair.html
index c286b37..ac868c7 100644
--- a/docker/resume/stories/motherboard-repair.html
+++ b/docker/resume/stories/motherboard-repair.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>MotherboardRepair.ca</h1>
             <p class="story-meta">Category: Entrepreneurship, Sustainable Technology | Date: 2019-Present</p>
diff --git a/docker/resume/stories/nitric-leadership.html b/docker/resume/stories/nitric-leadership.html
index 7307921..819e234 100644
--- a/docker/resume/stories/nitric-leadership.html
+++ b/docker/resume/stories/nitric-leadership.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>DevOps & Leadership at Nitric Concepts</h1>
             <p class="story-meta">Category: Team Leadership & DevOps | Date: 2018-2021</p>
diff --git a/docker/resume/stories/nuclear-dns.html b/docker/resume/stories/nuclear-dns.html
index 65a29af..0ab2089 100644
--- a/docker/resume/stories/nuclear-dns.html
+++ b/docker/resume/stories/nuclear-dns.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
     
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Nuclear War-Resistant DNS Infrastructure</h1>
             <p class="story-meta">Category: Infrastructure, Security, Government | Date: Confidential</p>
diff --git a/docker/resume/stories/open-source-success.html b/docker/resume/stories/open-source-success.html
index ca28000..7685aa0 100644
--- a/docker/resume/stories/open-source-success.html
+++ b/docker/resume/stories/open-source-success.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Building a Thriving Open Source Community</h1>
             <p class="story-meta">Category: Open Source | Date: 2019-Present</p>
diff --git a/docker/resume/stories/scansnap-webdav.html b/docker/resume/stories/scansnap-webdav.html
index 2e2f79d..a7c6d70 100644
--- a/docker/resume/stories/scansnap-webdav.html
+++ b/docker/resume/stories/scansnap-webdav.html
@@ -14,7 +14,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
     
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <nav class="breadcrumb">
             <a href="../index.html">← Back to Portfolio</a>
         </nav>
diff --git a/docker/resume/stories/showerloop.html b/docker/resume/stories/showerloop.html
index 4e320f5..18acd6e 100644
--- a/docker/resume/stories/showerloop.html
+++ b/docker/resume/stories/showerloop.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>ShowerLoop Project</h1>
             <p class="story-meta">Category: Web Development, Sustainability | Date: 2016</p>
diff --git a/docker/resume/stories/story-with-includes.html b/docker/resume/stories/story-with-includes.html
index e2d211a..13ad622 100644
--- a/docker/resume/stories/story-with-includes.html
+++ b/docker/resume/stories/story-with-includes.html
@@ -17,7 +17,7 @@
     <div id="header-include"></div>
     
     <!-- Main Content -->
-    <div class="story-header">
+    <div class="story-header" id="main-content">
         <h1>Story Title Example</h1>
         <p class="story-meta">Category: Example | Date: 2023-Present</p>
         <hr>
diff --git a/docker/resume/stories/template-story.html b/docker/resume/stories/template-story.html
index 36d9a83..1ee5b77 100644
--- a/docker/resume/stories/template-story.html
+++ b/docker/resume/stories/template-story.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>[Story Title]</h1>
             <p class="story-meta">Category: [Category] | Date: [Date Range]</p>
diff --git a/docker/resume/stories/viperwire.html b/docker/resume/stories/viperwire.html
index 6c0edb5..7d7b323 100644
--- a/docker/resume/stories/viperwire.html
+++ b/docker/resume/stories/viperwire.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Building ViperWire: An AI-Powered Cybersecurity Consultancy</h1>
             <p class="story-meta">Category: Cybersecurity | Date: 2023-Present</p>
diff --git a/docker/resume/stories/web-design-java.html b/docker/resume/stories/web-design-java.html
index be2cb10..8d10652 100644
--- a/docker/resume/stories/web-design-java.html
+++ b/docker/resume/stories/web-design-java.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>Web Design & Java Plugin Development</h1>
                             <p class="story-meta">Category: Web Development, Java | Date: 2011-2023</p>
diff --git a/docker/resume/stories/wordpress-security.html b/docker/resume/stories/wordpress-security.html
index 135a269..6c75bbe 100644
--- a/docker/resume/stories/wordpress-security.html
+++ b/docker/resume/stories/wordpress-security.html
@@ -16,7 +16,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>WordPress Security Automation</h1>
             <p class="story-meta">Category: Security & Automation | Date: 2023</p>
diff --git a/docker/resume/stories/youtube-game-dev.html b/docker/resume/stories/youtube-game-dev.html
index 9fafe42..44351e4 100644
--- a/docker/resume/stories/youtube-game-dev.html
+++ b/docker/resume/stories/youtube-game-dev.html
@@ -15,7 +15,7 @@
     <!-- Header Include -->
     <div id="header-include"></div>
 
-    <div class="container-fluid" role="main">
+    <div class="container-fluid" role="main" id="main-content">
         <div class="story-header">
             <h1>YouTube Game Development & Cybersecurity</h1>
                             <p class="story-meta">Category: Game Development, Cybersecurity | Date: 2011-2022</p>
diff --git a/docker/resume/styles.css b/docker/resume/styles.css
index 48cfc45..9bcf60c 100644
--- a/docker/resume/styles.css
+++ b/docker/resume/styles.css
@@ -91,6 +91,26 @@ html[data-theme='dark'] {
     --accent-hover: #8ac2ff;
 }
 
+/* Skip to content link for accessibility */
+.skip-to-content {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    background: var(--accent-color);
+    color: white;
+    padding: 8px 16px;
+    text-decoration: none;
+    z-index: 100;
+    border-radius: 0 0 4px 0;
+    font-weight: bold;
+}
+
+.skip-to-content:focus {
+    top: 0;
+    outline: 3px solid var(--focus-outline-color);
+    outline-offset: 2px;
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.6;