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> <p class="text-red-400">&gt; Error: Destination host unreachable.</p>
</div> </div>
<a href="/" class="btn"> <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 Default Route
</a> </a>
</div> </div>

13
src/_includes/layout.njk
View File

@@ -1,4 +1,5 @@
<!doctype html><!-- HTML5 --> <!doctype html>
<!-- HTML5 -->
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -23,6 +24,7 @@
<meta name="twitter:description" content="{{ description }}"> <meta name="twitter:description" content="{{ description }}">
<meta name="twitter:image" content="{{ site.url }}{{ image }}"> <meta name="twitter:image" content="{{ site.url }}{{ image }}">
<!-- Structured Data (JSON-LD) --> <!-- Structured Data (JSON-LD) -->
{% if date %}
<script type="application/ld+json"> <script type="application/ld+json">
{ {
"@context": "https://schema.org", "@context": "https://schema.org",
@@ -34,13 +36,14 @@
"@type": "Person", "@type": "Person",
"name": "{{ site.author.name }}" "name": "{{ site.author.name }}"
}, },
"datePublished": "{{ date }}", "datePublished": "{{ date | htmlDateString }}",
"mainEntityOfPage": { "mainEntityOfPage": {
"@type": "WebPage", "@type": "WebPage",
"@id": "{{ site.url }}{{ page.url }}" "@id": "{{ site.url }}{{ page.url }}"
} }
} }
</script> </script>
{% endif %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <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.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -64,8 +67,8 @@
<a href="/resume" class="btn">View Resume</a> <a href="/resume" class="btn">View Resume</a>
</div> </div>
<div class="md:hidden"> <div class="md:hidden">
<button id="mobile-menu-button" class="text-white focus:outline-none"> <button id="mobile-menu-button" class="text-white focus:outline-none" aria-label="Toggle mobile menu">
<i class="fas fa-bars text-2xl" aria-label="Toggle mobile menu" role="img"></i> <i class="fas fa-bars text-2xl" aria-hidden="true"></i>
</button> </button>
</div> </div>
</nav> </nav>
@@ -87,7 +90,7 @@
</main> </main>
<!-- Footer --> <!-- Footer -->
<footer class="bg-gray-900 text-gray-400 py-6"> <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"> <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="{{ 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> <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 %} {% if tags and 'blog' in tags %}
<div> <div>
<a href="/blog"> <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 Back to all posts
</a> </a>
</div> </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"> <div class="post-meta flex flex-col items-start md:flex-row md:items-center text-gray-400">
<!--- Date Section --> <!--- Date Section -->
<div class="flex items-center mb-1"> <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> <span>Published on {{ page.date | readableDate }}</span>
</div> </div>
<!--- Views Section --> <!--- Views Section -->
<span class="hidden md:inline mx-2 text-gray-600">•</span> <span class="hidden md:inline mx-2 text-gray-600">•</span>
<div class="flex items-center mb-1"> <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> <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views</span>
</div> </div>
<!--- Comments Section --> <!--- Comments Section -->
<!--- <!---
<span class="hidden md:inline mx-2 text-gray-600">•</span> <span class="hidden md:inline mx-2 text-gray-600">•</span>
<div class="flex items-center mb-1"> <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> <a href="#disqus_thread">Comments</a>
</div> </div>
--> -->
<!--- Likes Section --> <!--- Likes Section -->
<span class="hidden md:inline mx-2 text-gray-600">•</span> <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 }}"> <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> <span class="like-count" data-like-count data-slug="{{ page.fileSlug }}">No likes</span>
</div> </div>
</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> <a href="{{ post.url }}" class="text-blue-400 hover:text-blue-500">{{ post.data.title }}</a>
</h2> </h2>
<div class="flex items-center text-gray-400 mb-4"> <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> <p>{{ post.date | readableDate }}</p>
<span class="mx-2 text-gray-600">|</span> <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> <span class="view-count" data-view-count data-slug="{{ post.fileSlug }}">...</span>
</div> </div>
{% if post.data.excerpt %} {% 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"> <div class="card space-y-4">
{%- for certification in certifications -%} {%- for certification in certifications -%}
<div class="flex items-center"> <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> <div>
<h4 class="font-bold text-white">{{ certification.name }}</h4> <h4 class="font-bold text-white">{{ certification.name }}</h4>
<p class="text-gray-400">Expires: {{ certification.expires }}</p> <p class="text-gray-400">Expires: {{ certification.expires }}</p>
@@ -88,7 +88,7 @@ image: "/assets/images/jesus.webp"
{%- if role.featured -%} {%- if role.featured -%}
<div class="mb-10 mx-4"> <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"> <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> </span>
<div class="card"> <div class="card">
<div class="flex flex-col sm:flex-row sm:items-baseline sm:gap-x-2 mb-2"> <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 -%} {%- endfor -%}
<div class="mb-10 mx-4"> <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"> <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> </span>
<div class="card"> <div class="card">
<h3 class="text-lg font-semibold text-white mb-2">Previous Roles</h3> <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> <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"> <form action="https://formspree.io/f/mnnzgdak" method="POST">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <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="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" 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="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> </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> <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"> <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" data="/resume/jesus.pdf#view=FitH&toolbar=0&navpanes=0"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"> 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"> <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-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> <p class="text-gray-400 mb-6">You can download the resume below to view it directly.</p>
</div> </div>
@@ -23,6 +23,6 @@ sitemapChangefreq: "monthly"
<div class="text-center mt-8"> <div class="text-center mt-8">
<a href="/resume/jesus.pdf" target="_blank" download="Jesus_E_Otero_Lagunes_Resume.pdf" class="btn"> <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> </a>
</div> </div>