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. 8c122f4
AdamJ · May 7, 2024 · d8aab0f · d8aab0f
1 parent a58bd64
commit d8aab0f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 30 deletions.
diff --git a/designs/presentations/colorPicker/index.html b/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/designs/presentations/portfolio/index.html b/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/feed.json b/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/sitemap.xml b/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>