twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

fix: accessibility

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-09-01 19:59:58 -04:00
parent 6d8ac07592
commit d584330722
6 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/404.html
View File

@@ -19,7 +19,7 @@ eleventyExcludeFromCollections: true
<p class="text-red-400">&gt; Error: Destination host unreachable.</p>
</div>
<a href="/" class="btn">
<i class="fas fa-home mr-2"></i>
<i class="fas fa-home mr-2" aria-hidden="true"></i>
Default Route
</a>
</div>

13
src/_includes/layout.njk
View File

@@ -1,4 +1,5 @@
<!doctype html><!-- HTML5 -->
<!doctype html>
<!-- HTML5 -->
<html lang="en">
<head>
<meta charset="UTF-8">
@@ -23,6 +24,7 @@
<meta name="twitter:description" content="{{ description }}">
<meta name="twitter:image" content="{{ site.url }}{{ image }}">
<!-- Structured Data (JSON-LD) -->
{% if date %}
<script type="application/ld+json">
{
"@context": "https://schema.org",
@@ -34,13 +36,14 @@
"@type": "Person",
"name": "{{ site.author.name }}"
},
"datePublished": "{{ date }}",
"datePublished": "{{ date | htmlDateString }}",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{{ site.url }}{{ page.url }}"
}
}
</script>
{% endif %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -64,8 +67,8 @@
<a href="/resume" class="btn">View Resume</a>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="text-white focus:outline-none">
<i class="fas fa-bars text-2xl" aria-label="Toggle mobile menu" role="img"></i>
<button id="mobile-menu-button" class="text-white focus:outline-none" aria-label="Toggle mobile menu">
<i class="fas fa-bars text-2xl" aria-hidden="true"></i>
</button>
</div>
</nav>
@@ -87,7 +90,7 @@
</main>
<!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-6">
<div class="container mx-auto px-6">
<div class="container mx-auto px-6 text-center">
<div class="flex justify-center space-x-6 mb-4">
<a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-blue-400" aria-label="LinkedIn profile of {{ site.author.name }}"><i class="fab fa-linkedin fa-2x" aria-hidden="true"></i></a>
<a href="mailto:{{ site.author.email }}" class="hover:text-blue-400" aria-label="Email {{ site.author.name }}"><i class="fas fa-envelope fa-2x" aria-hidden="true"></i></a>

10
src/_includes/post.njk
View File

@@ -5,7 +5,7 @@ layout: "layout.njk"
{% if tags and 'blog' in tags %}
<div>
<a href="/blog">
<i class="fas fa-arrow-left mr-2"></i>
<i class="fas fa-arrow-left mr-2" aria-hidden="true"></i>
Back to all posts
</a>
</div>
@@ -14,27 +14,27 @@ layout: "layout.njk"
<div class="post-meta flex flex-col items-start md:flex-row md:items-center text-gray-400">
<!--- Date Section -->
<div class="flex items-center mb-1">
<i class="fas fa-fw fa-calendar-alt mr-2"></i>
<i class="fas fa-fw fa-calendar-alt mr-2" aria-hidden="true"></i>
<span>Published on {{ page.date | readableDate }}</span>
</div>
<!--- Views Section -->
<span class="hidden md:inline mx-2 text-gray-600">•</span>
<div class="flex items-center mb-1">
<i class="fas fa-fw fa-eye mr-2"></i>
<i class="fas fa-fw fa-eye mr-2" aria-hidden="true"></i>
<span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views</span>
</div>
<!--- Comments Section -->
<!---
<span class="hidden md:inline mx-2 text-gray-600">•</span>
<div class="flex items-center mb-1">
<i class="fas fa-fw fa-comments mr-2"></i>
<i class="fas fa-fw fa-comments mr-2" aria-hidden="true"></i>
<a href="#disqus_thread">Comments</a>
</div>
-->
<!--- Likes Section -->
<span class="hidden md:inline mx-2 text-gray-600">•</span>
<div class="flex items-center mb-1 like-icon" data-like-button data-slug="{{ page.fileSlug }}">
<i class="fas fa-fw fa-heart mr-2"></i>
<i class="fas fa-fw fa-heart mr-2" aria-hidden="true"></i>
<span class="like-count" data-like-count data-slug="{{ page.fileSlug }}">No likes</span>
</div>
</div>

4
src/blog.njk
View File

@@ -15,10 +15,10 @@ eleventyExcludeFromCollections: true
<a href="{{ post.url }}" class="text-blue-400 hover:text-blue-500">{{ post.data.title }}</a>
</h2>
<div class="flex items-center text-gray-400 mb-4">
<i class="fas fa-calendar-alt mr-2"></i>
<i class="fas fa-calendar-alt mr-2" aria-hidden="true"></i>
<p>{{ post.date | readableDate }}</p>
<span class="mx-2 text-gray-600">|</span>
<i class="fas fa-eye mr-2"></i>
<i class="fas fa-eye mr-2" aria-hidden="true"></i>
<span class="view-count" data-view-count data-slug="{{ post.fileSlug }}">...</span>
</div>
{% if post.data.excerpt %}

10
src/index.md
View File

@@ -68,7 +68,7 @@ image: "/assets/images/jesus.webp"
<div class="card space-y-4">
{%- for certification in certifications -%}
<div class="flex items-center">
<i class="fas fa-certificate icon text-yellow-400"></i>
<i class="fas fa-certificate icon text-yellow-400" aria-hidden="true"></i>
<div>
<h4 class="font-bold text-white">{{ certification.name }}</h4>
<p class="text-gray-400">Expires: {{ certification.expires }}</p>
@@ -88,7 +88,7 @@ image: "/assets/images/jesus.webp"
{%- if role.featured -%}
<div class="mb-10 mx-4">
<span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-gray-900">
<i class="fas fa-briefcase text-white text-xs"></i>
<i class="fas fa-briefcase text-white text-xs" aria-hidden="true"></i>
</span>
<div class="card">
<div class="flex flex-col sm:flex-row sm:items-baseline sm:gap-x-2 mb-2">
@@ -111,7 +111,7 @@ image: "/assets/images/jesus.webp"
{%- endfor -%}
<div class="mb-10 mx-4">
<span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-gray-900">
<i class="fas fa-briefcase text-white text-xs"></i>
<i class="fas fa-briefcase text-white text-xs" aria-hidden="true"></i>
</span>
<div class="card">
<h3 class="text-lg font-semibold text-white mb-2">Previous Roles</h3>
@@ -141,8 +141,8 @@ image: "/assets/images/jesus.webp"
<p class="text-center text-gray-400 mb-8">I'm always open to discussing new projects, creative ideas, or opportunities to be part of an ambitious vision.</p>
<form action="https://formspree.io/f/mnnzgdak" method="POST">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<input type="text" name="name" placeholder="Your Name" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<input type="email" name="email" placeholder="Your Email" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<input type="text" name="name" autocomplete="name" placeholder="Your Name" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<input type="email" name="email" autocomplete="family-name" placeholder="Your Email" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<textarea name="message" placeholder="Your Message" rows="5" required class="w-full p-3 rounded bg-gray-900 border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 mb-6"></textarea>
<div class="text-center">

4
src/resume.md
View File

@@ -13,7 +13,7 @@ sitemapChangefreq: "monthly"
data="/resume/jesus.pdf#view=FitH&toolbar=0&navpanes=0"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;">
<div class="flex flex-col items-center justify-center h-full text-center p-8 bg-gray-800 rounded-lg">
<i class="fas fa-file-pdf fa-3x text-red-500 mb-4"></i>
<i class="fas fa-file-pdf fa-3x text-red-500 mb-4" aria-hidden="true"></i>
<p class="text-xl font-semibold text-white mb-2">Oops! Your browser doesn't support embedded PDFs.</p>
<p class="text-gray-400 mb-6">You can download the resume below to view it directly.</p>
</div>
@@ -23,6 +23,6 @@ sitemapChangefreq: "monthly"
<div class="text-center mt-8">
<a href="/resume/jesus.pdf" target="_blank" download="Jesus_E_Otero_Lagunes_Resume.pdf" class="btn">
<i class="fas fa-download mr-2"></i>Download Resume
<i class="fas fa-download mr-2" aria-hidden="true"></i>Download Resume
</a>
</div>