Revamp recommended readings

_includes/head.html

@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="{{ '/assets/css/buttons.css' | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ '/assets/css/stackoverflow.css' | prepend: site.baseurl }}">
     <link rel="stylesheet" href="{{ '/assets/css/modal.css' | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ '/assets/css/recommended_readings.css' | prepend: site.baseurl }}">
     <link rel="shortcut icon" type="image/png" href="{{ '/assets/favicon.ico' }}">
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

_includes/recommended_readings.html

@@ -4,20 +4,29 @@ <h1>Recommended Readings</h1>
     </div>
 </div>
 
-<div class="card-container">
-    <div class="zoom-container">
-        <img class="book-zoom" src="assets/img/hands-on.jpg">
-        Hands-On Machine Learning<br>Aurélien Géron
-    </div>
-
-    <div class="zoom-container">
-        <img class="book-zoom" src="assets/img/aima.jpg">
-        AI: A Modern Approach<br>Stuart Russell & Peter Norvig
-    </div>
-
-    <div class="zoom-container">
-        <img class="book-zoom" src="assets/img/clean_code.jpg">
-        Clean Code<br>Robert C. Martin
+<div class="carousel-container">
+    <div class="carousel">
+        <div class="zoom-container">
+            <img class="book-zoom" src="assets/img/hands-on.jpg">
+            Hands-On Machine Learning<br>Aurélien Géron
+        </div>
+        <div class="zoom-container">
+            <img class="book-zoom" src="assets/img/aima.jpg">
+            AI: A Modern Approach<br>Stuart Russell & Peter Norvig
+        </div>
+        <div class="zoom-container">
+            <img class="book-zoom" src="assets/img/clean_code.jpg">
+            Clean Code<br>Robert C. Martin
+        </div>
+        <div class="zoom-container next-book">
+            <img class="book-zoom" src="assets/img/practical_statistics.jpeg">
+            Practical Statistics for Data Scientists<br>Bruce, Bruce & Gedeck
+        </div>
+        <div class="zoom-container">
+            <img class="book-zoom" src="assets/img/statsquest.jpeg">
+            The StatsQuest Illustrated Guide<br>to Machine Learning<br>Josh Starmer
+        </div>
     </div>
+    <div class="scroll-indicator"></div>
 </div>
 <br>

assets/css/custom.css

@@ -62,24 +62,6 @@ hr.dashed-line { /* used between projects */
     margin-right: 15px;
 }
 
-/* Recommended book readings */
-.zoom-container {
-    transition: transform .2s;
-    box-sizing: border-box;
-    margin: 25px 40px 25px;
-    text-align: center
-}
-.zoom-container:hover {
-    -ms-transform: scale(1.25); /* IE 9 */
-    -webkit-transform: scale(1.25); /* Safari 3-8 */
-    transform: scale(1.25);
-}
-.book-zoom {
-    max-height: 275px;
-    display: block;
-    margin: 0 auto;
-}
-
 /* Mathematical expressions */
 .sup {
     position: relative;

assets/css/recommended_readings.css

@@ -0,0 +1,46 @@
+/* Recommended readings */
+.zoom-container {
+    transition: transform .2s;
+    box-sizing: border-box;
+    margin: 25px 40px 25px;
+    text-align: center
+}
+.zoom-container:hover {
+    -ms-transform: scale(1.25); /* IE 9 */
+    -webkit-transform: scale(1.25); /* Safari 3-8 */
+    transform: scale(1.25);
+}
+.book-zoom {
+    max-height: 275px;
+    display: block;
+    margin: 0 auto;
+}
+
+/* Carousel horizontal scrolling */
+.carousel-container {
+    position: relative; /* Ensure arrows are positioned relative to this container */
+    overflow-x: auto; /* Enable horizontal scrolling */
+    white-space: nowrap; /* Prevent line breaks */
+    padding: 20px 0; /* Add some padding */
+}
+
+.carousel {
+    display: inline-flex; /* Align items in a row */
+}
+
+.zoom-container {
+    display: inline-block; /* Allow items to be inline */
+    margin-right: 20px; /* Space between items */
+}
+
+/* New styles for the scroll indicator */
+.scroll-indicator {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    width: 50px; /* Width of the indicator */
+    /* background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); */
+    pointer-events: none; /* Allow clicks to pass through */
+    z-index: 1; /* Ensure it appears above other elements */
+}