bug: Fix accessibility issues (#7)

* docs: fix github CD badge on README

fix #6

* docs: change hugo min version

* fix: fix accessibility issues

* refactor: change screenshot dimensions

* ci: deploy website to gh-pages in CD action

Author: Nir Galon

.github/workflows/continuous-deployment.yml

@@ -11,18 +11,26 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Hugo
+      - name: Setup Hugo 💡
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: 'latest'
           extended: true
 
-      - name: Hugo Build
+      - name: Hugo Build 🚧
         run: hugo --source=exampleSite --minify -e production
 
-      - name: Release
+      - name: Create Release 🚀
         uses: ridedott/release-me-action@master
         env:
             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           release-branches: '["main"]'
+
+      - name: Deploy gh-pages 🖥️
+        uses: JamesIves/github-pages-deploy-action@3.7.1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          BRANCH: gh-pages
+          FOLDER: exampleSite/public
+          CLEAN: true

.github/workflows/continuous-integration.yml

@@ -11,24 +11,25 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Hugo
+      - name: Setup Hugo 💡
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: 'latest'
           extended: true
 
-      - name: Hugo Build
+      - name: Hugo Build 🚧
         run: hugo --source=exampleSite --minify -v
 
       - uses: actions/checkout@v2
       - name: Set up Ruby 2.6
         uses: actions/setup-ruby@v1
         with:
           ruby-version: 2.6
+
       - name: Install dependencies
         run: gem install html-proofer
 
-      - name: Proof HTML
+      - name: Proof HTML 📚
         run: |
           hugo --source=exampleSite --minify -v
           htmlproofer exampleSite/public --check-html --allow-hash-href --empty-alt-ignore --disable-external

README.md

@@ -1,6 +1,6 @@
 # devRes Theme
 
-[![CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-blue.svg)](http://creativecommons.org/licenses/by/4.0/) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/nirgn975/devRes)](https://github.com/nirgn975/devRes/releases) ![Continuous Integration](https://github.com/nirgn975/devRes/workflows/Continuous%20Integration/badge.svg?branch=main) [![Hugo](https://img.shields.io/badge/Hugo-%5E0.62.0-ff4088?logo=hugo)](https://gohugo.io/) [![Donate](https://img.shields.io/badge/PayPal-Donate-lightgrey.svg)](https://www.paypal.me/nirgn/2)
+[![CC BY 4.0](https://img.shields.io/badge/License-CC%20BY%204.0-orange.svg)](http://creativecommons.org/licenses/by/4.0/) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/nirgn975/devRes)](https://github.com/nirgn975/devRes/releases) ![Continuous Deployment](https://github.com/nirgn975/devRes/workflows/Continuous%20Deployment/badge.svg?branch=main) [![Hugo](https://img.shields.io/badge/Hugo-%5E0.41.0-ff4088?logo=hugo)](https://gohugo.io/) [![Donate](https://img.shields.io/badge/PayPal-Donate-lightgrey.svg)](https://www.paypal.me/nirgn/2)
 
 > A Hugo resume theme with a Developer focus in mind.
 
@@ -21,8 +21,8 @@ theme = "devRes"
 - Generate GitHub project cards automatically from a repo name.
 - Automagically get the latest posts from your blog.
 - Use [Font Awesome](https://fontawesome.com) or [Devicons](https://devicon.dev) icons.
-- Support [Google Analytics](https://analytics.google.com/analytics) and [Plausible](https://plausible.io) analytics.
-- Optimized for performance: 86/100 on mobile and 99/100 on desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights).
+- Support [Google](https://analytics.google.com/analytics) and [Plausible](https://plausible.io) analytics.
+- Optimized for Performance, Accessibility, Best Practices, and SEO: 90+ (out of 100) on mobile and desktop in [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights).
 - **CDN** for all third-party libraries supported
 
 # Customization
@@ -36,7 +36,7 @@ You can check the `exampleSite` directory for an example.
 
 Great! All issues and pull requests are welcome.
 
-For local development just copy all the files to the `exampleSite` directory, navigate to it and just start [hugo](https://gohugo.io) with
+For local development just start [hugo](https://gohugo.io) with `exampleSite` as the source.
 
 ```bash
 $ hugo server --source=exampleSite -v --gc

images/screenshot.webp

@@ -2,7 +2,7 @@
   <span class="category-header">
     <i class="fas fa-user fa-2x"></i>
     <h2>About Me</h2>
-    <button class="uk-icon-button" uk-icon="paint-bucket" type="button" onClick="switchTheme(this)"></button>
+    <button class="uk-icon-button" uk-icon="paint-bucket" type="button" onClick="switchTheme(this)" aria-label="Switch Theme"></button>
   </span>
 
   <div>

layouts/partials/_about-me.html

@@ -1,7 +1,7 @@
 <div id="header">
   <div class="uk-card uk-card-default">
     <div class="uk-card-media-top">
-      <img src="{{ .Site.Data.content.banner.photo }}">
+      <img src="{{ .Site.Data.content.banner.photo }}" alt="Profile Image">
     </div>
     <div class="uk-card-body">
       <div class="description">
@@ -20,7 +20,7 @@
 </div>
 
 <!-- This is a button toggling the off-canvas -->
-<button id="mobile" uk-toggle="target: #mobile-banner" type="button">
+<button id="mobile" uk-toggle="target: #mobile-banner" type="button" aria-label="Open Menu">
   <span uk-icon="icon: menu; ratio: 1.5"></span>
 </button>
 
@@ -31,7 +31,7 @@
 <div id="mobile-banner" uk-offcanvas>
   <div class="uk-offcanvas-bar">
     <button class="uk-offcanvas-close" type="button" uk-close></button>
-    <img src="{{ .Site.Data.content.banner.photo }}">
+    <img src="{{ .Site.Data.content.banner.photo }}" alt="Profile Image">
     <div class="description">
       {{ .Site.Data.content.banner.text | safeHTML }}
     </div>

layouts/partials/_banner.html

@@ -20,7 +20,7 @@ <h2>Contact</h2>
         <textarea class="uk-textarea" name="message-body" rows="5"></textarea>
       </div>
 
-      <button class="uk-button uk-button-default" type="submit">Send</button>
+      <button class="uk-button uk-button-default" type="submit" aria-label="Send Email">Send</button>
 
     </fieldset>
   </form>

layouts/partials/_contact.html

@@ -7,7 +7,7 @@ <h2>Talks</h2>
   {{ range .Site.Data.content.talks }}
     <div class="uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>
         <div class="uk-card-media-left uk-cover-container">
-          <img src="{{ .cover }}" uk-cover>
+          <img src="{{ .cover }}" uk-cover alt="Talk Thumbnail">
         </div>
         <div>
           <div class="uk-card-body">