colin
/
resume
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add skip-to-content accessibility link to header nav
ci/woodpecker/push/woodpecker Pipeline was successful Details 

- 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
This commit is contained in:
Leopere 2025-10-21 10:46:00 -04:00
parent fa41ef711f
commit 384fb993f5
Signed by: colin
SSH Key Fingerprint: SHA256:nRPCQTeMFLdGytxRQmPVK9VXY3/ePKQ5lGRyJhT5DY8
25 changed files with 45 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docker/resume/csv-tool-output.html
View File

@ -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>

3
docker/resume/includes/header.html
View File

@ -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">

2
docker/resume/index.html
View File

@ -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 -->

2
docker/resume/one-pager-tools/csv-tool.html
View File

@ -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>

2
docker/resume/one-pager-tools/template.html
View File

@ -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>

2
docker/resume/stories/airport-dns.html
View File

@ -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>

2
docker/resume/stories/app-development.html
View File

@ -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>

2
docker/resume/stories/athion-turnaround.html
View File

@ -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>

2
docker/resume/stories/fawe-plotsquared.html
View File

@ -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>

2
docker/resume/stories/healthcare-platform.html
View File

@ -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>

2
docker/resume/stories/home-infrastructure.html
View File

@ -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>

2
docker/resume/stories/index.html
View File

@ -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>

2
docker/resume/stories/motherboard-repair.html
View File

@ -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>

2
docker/resume/stories/nitric-leadership.html
View File

@ -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>

2
docker/resume/stories/nuclear-dns.html
View File

@ -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>

2
docker/resume/stories/open-source-success.html
View File

@ -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>

2
docker/resume/stories/scansnap-webdav.html
View File

@ -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>

2
docker/resume/stories/showerloop.html
View File

@ -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>

2
docker/resume/stories/story-with-includes.html
View File

@ -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>

2
docker/resume/stories/template-story.html
View File

@ -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>

2
docker/resume/stories/viperwire.html
View File

@ -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>

2
docker/resume/stories/web-design-java.html
View File

@ -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>

2
docker/resume/stories/wordpress-security.html
View File

@ -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>

2
docker/resume/stories/youtube-game-dev.html
View File

@ -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>

20
docker/resume/styles.css
View File

@ -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;