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

Author: AdamJ

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">

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">

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/",

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>