Add alert for carousel autoplay (#269)

Add an alert on the Portfolio and Color Picker pages informing users that the carousel will begin to autoplay once they interact with it. Autoplay is paused when the mouse is hovered over it or the user leaves the browser window.
AdamJ · May 7, 2024 · 8c122f4 · 8c122f4
1 parent 5fc6a1f
commit 8c122f4
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 40 deletions.
diff --git a/docs/designs/presentations/colorPicker/index.html b/docs/designs/presentations/colorPicker/index.html
@@ -90,7 +90,17 @@ <h1 class="display-1 fw-bold text-break">Color Picker presentation</h1>
   </p></div>
 
 <content>
-  <div class="container-xxl mb-2 py-2 px-md-5">
+  <div class="container-xxl">
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
+        <strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container-xxl mb-2 py-2 px-md-5">
   <div class="row px-3">
     <div class="col-12">
       <div id="carouselExample" class="carousel slide" data-bs-ride="true">

diff --git a/docs/designs/presentations/portfolio/index.html b/docs/designs/presentations/portfolio/index.html
@@ -90,7 +90,17 @@ <h1 class="display-1 fw-bold text-break">Portfolio presentation</h1>
   </p></div>
 
 <content>
-  <div class="container-xxl mb-2 py-2 px-md-5">
+  <div class="container-xxl">
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
+        <strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="container-xxl mb-2 py-2 px-md-5">
   <div class="row px-3">
     <div class="col-12">
       <div id="carouselExample" class="carousel slide" data-bs-ride="true">

diff --git a/docs/feed.json b/docs/feed.json
@@ -14,14 +14,28 @@
       "id": "https://www.adamjolicoeur.com/resume/",
       "url": "https://www.adamjolicoeur.com/resume/",
       "title": "resume",
-      "date_published": "2024-03-22T13:12:18Z"
+      "date_published": "2024-05-07T18:45:07Z"
+    }
+    ,
+    {
+      "id": "https://www.adamjolicoeur.com/development/",
+      "url": "https://www.adamjolicoeur.com/development/",
+      "title": "development",
+      "date_published": "2024-05-07T18:45:07Z"
+    }
+    ,
+    {
+      "id": "https://www.adamjolicoeur.com/designs/alm/",
+      "url": "https://www.adamjolicoeur.com/designs/alm/",
+      "title": "Application Lifecycle Management",
+      "date_published": "2024-05-07T18:45:07Z"
     }
     ,
     {
       "id": "https://www.adamjolicoeur.com/contact/",
       "url": "https://www.adamjolicoeur.com/contact/",
       "title": "contact",
-      "date_published": "2024-01-17T15:59:50Z"
+      "date_published": "2024-03-27T14:55:32Z"
     }
     ,
     {
@@ -66,13 +80,6 @@
       "date_published": "2024-01-07T19:11:34Z"
     }
     ,
-    {
-      "id": "https://www.adamjolicoeur.com/development/",
-      "url": "https://www.adamjolicoeur.com/development/",
-      "title": "development",
-      "date_published": "2024-01-07T19:11:34Z"
-    }
-    ,
     {
       "id": "https://www.adamjolicoeur.com/designs/timetrak/",
       "url": "https://www.adamjolicoeur.com/designs/timetrak/",
@@ -101,13 +108,6 @@
       "date_published": "2024-01-07T19:11:34Z"
     }
     ,
-    {
-      "id": "https://www.adamjolicoeur.com/designs/alm/",
-      "url": "https://www.adamjolicoeur.com/designs/alm/",
-      "title": "Application Lifecycle Management",
-      "date_published": "2024-01-07T19:11:34Z"
-    }
-    ,
     {
       "id": "https://www.adamjolicoeur.com/designs/",
       "url": "https://www.adamjolicoeur.com/designs/",

diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -26,11 +26,6 @@
       <lastmod>2024-01-07T19:11:34.528Z</lastmod>
     </url>
 
-    <url>
-      <loc>https://www.adamjolicoeur.com/designs/alm/</loc>
-      <lastmod>2024-01-07T19:11:34.528Z</lastmod>
-    </url>
-
     <url>
       <loc>https://www.adamjolicoeur.com/designs/customer-engagement/</loc>
       <lastmod>2024-01-07T19:11:34.528Z</lastmod>
@@ -51,11 +46,6 @@
       <lastmod>2024-01-07T19:11:34.528Z</lastmod>
     </url>
 
-    <url>
-      <loc>https://www.adamjolicoeur.com/development/</loc>
-      <lastmod>2024-01-07T19:11:34.528Z</lastmod>
-    </url>
-
     <url>
       <loc>https://www.adamjolicoeur.com/designs/presentations/colorPicker/</loc>
       <lastmod>2024-01-07T19:11:34.528Z</lastmod>
@@ -88,12 +78,22 @@
 
     <url>
       <loc>https://www.adamjolicoeur.com/contact/</loc>
-      <lastmod>2024-01-17T15:59:50.348Z</lastmod>
+      <lastmod>2024-03-27T14:55:32.486Z</lastmod>
+    </url>
+
+    <url>
+      <loc>https://www.adamjolicoeur.com/designs/alm/</loc>
+      <lastmod>2024-05-07T18:45:07.651Z</lastmod>
+    </url>
+
+    <url>
+      <loc>https://www.adamjolicoeur.com/development/</loc>
+      <lastmod>2024-05-07T18:45:07.653Z</lastmod>
     </url>
 
     <url>
       <loc>https://www.adamjolicoeur.com/resume/</loc>
-      <lastmod>2024-03-22T13:12:18.550Z</lastmod>
+      <lastmod>2024-05-07T18:45:07.654Z</lastmod>
     </url>
 
 </urlset>
diff --git a/social/pages.json b/social/pages.json
@@ -24,11 +24,6 @@
    "imgName":"designs"
 	},
 
-	{
-   "title":"Application Lifecycle Management",
-   "imgName":"application-lifecycle-management"
-	},
-
 	{
    "title":"Customer Engagement App",
    "imgName":"customer-engagement-app"
@@ -49,11 +44,6 @@
    "imgName":"timetrak-by-switchback"
 	},
 
-	{
-   "title":"development",
-   "imgName":"development"
-	},
-
 	{
    "title":"Color Picker presentation",
    "imgName":"color-picker-presentation"
@@ -89,6 +79,16 @@
    "imgName":"contact"
 	},
 
+	{
+   "title":"Application Lifecycle Management",
+   "imgName":"application-lifecycle-management"
+	},
+
+	{
+   "title":"development",
+   "imgName":"development"
+	},
+
 	{
    "title":"resume",
    "imgName":"resume"

diff --git a/src/pages/presentations/colorPicker/index.md b/src/pages/presentations/colorPicker/index.md
@@ -8,6 +8,16 @@ eleventyNavigation:
   order: 2
 ---
 
+<div class="container-xxl">
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
+        <strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="container-xxl mb-2 py-2 px-md-5">
   <div class="row px-3">
     <div class="col-12">

diff --git a/src/pages/presentations/portfolio/index.md b/src/pages/presentations/portfolio/index.md
@@ -8,6 +8,16 @@ eleventyNavigation:
   order: 1
 ---
 
+<div class="container-xxl">
+  <div class="row justify-content-center">
+    <div class="col-8">
+      <div class="alert alert-dismissible fade show" role="alert" style="background-color: rgba(0, 173, 239, .2); border-left: .25rem solid #00adef;">
+        <strong>Hello there!</strong> The carousel will automatically play after the first user interaction. Hovering over a slide will pause the auto-play of the carousel.
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="container-xxl mb-2 py-2 px-md-5">
   <div class="row px-3">
     <div class="col-12">