Photo carousel for general hackathon section

index.html

@@ -52,15 +52,85 @@
         <div id="shapes"></div>
     </section>
     <section id="hackathon">
-        <div id="hackathon-text">
-            <h2>What is a Hackathon?</h2>
-            <p>A Hackathon is an invention marathon. Any student can attend! Really, any student... and it's completely free.</p>
-            <p>Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!</p>
-            <p>Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.</p>
+        <div class="carousel">
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/1.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/2.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/3.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/4.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/5.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/6.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/7.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/8.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/9.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/10.jpg" alt="BrickHack 6 attendees"/>
+            </div>
+            <div class="slide">
+                <div class="wire"></div>
+                <div class="front_clip"></div>
+                <div class="back_clip"></div>
+                <img src="./assets/imgs/11.jpg" alt="BrickHack 6 attendees"/>
+            </div>
         </div>
-        <div id="mlh">
-            <i class="fas fa-arrow-right"></i>
-            <a href="https://mlh.io/" target="_blank" rel="noopener noreferrer">Visit Major League Hacking (MLH)</a>
+        <div id="hackathon-content">
+            <div id="hackathon-text">
+                <h2>What is a Hackathon?</h2>
+                <p>A Hackathon is an invention marathon. Any student can attend! Really, any student... and it's completely free.</p>
+                <p>Students work in teams and mentors are present to offer help. Sponsors attend to help, recruit, and promote their products. Teams compete in different categories and prizes are awarded, but everyone learns and everyone wins!</p>
+                <p>Come spend 24 hours with us at BrickHack and dedicate time to learn, collaborate, build, and innovate.</p>
+            </div>
+            <div id="mlh">
+                <i class="fas fa-arrow-right"></i>
+                <a href="https://mlh.io/" target="_blank" rel="noopener noreferrer">Visit Major League Hacking (MLH)</a>
+            </div>
         </div>
     </section>
     <section id="schedule">

index.js

@@ -1,4 +1,24 @@
 
 
-import "./sass/main.scss"
-import '@fortawesome/fontawesome-free/css/all.css'
+import './sass/main.scss'
+import '@fortawesome/fontawesome-free/css/all.css'
+
+
+// slick-carousel configuration
+
+import $ from 'jquery'
+import 'slick-carousel'
+
+$(document).ready(function() {
+    $('.carousel').slick({
+        infinite: true,
+        swipeToSlide: true,
+        variableWidth: true,
+        slidesToShow: 3,
+        slidesToScroll: 2,
+        cssEase: 'ease-in-out',
+        autoplay: true,
+        autoplaySpeed: 2000,
+        speed: 1000,
+    });
+});

package.json

@@ -27,5 +27,9 @@
   },
   "staticFiles": {
     "staticPath": "resources"
+  },
+  "dependencies": {
+    "jquery": "^3.5.1",
+    "slick-carousel": "^1.8.1"
   }
 }

sass/main.scss

@@ -7,12 +7,15 @@ $light-blue: #465395;
 $red: #F1656E;
 $orange: #F9A56F;
 $pink: #FAC5BF;
+$light-gray: #a2a8cd;
 
 $nav-fontsize: 1.3em;
 $nav-height: 90px;
 
 $section-padding: 140px;
 
+$wire-height: 15px;
+
 // Just to make it more semantic
 $font-bold: 700;
 $font-medium: 500;
@@ -21,8 +24,10 @@ $font-regular: 400;
 // Size for all titles on page
 $title-size: 3em;
 
-// Fonts
+// Fonts and other imports
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+@import '../node_modules/slick-carousel/slick/slick.css';
+@import '../node_modules/slick-carousel/slick/slick-theme.css';
 
 // Mixins
 @mixin button {
@@ -50,7 +55,10 @@ $title-size: 3em;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
     color: white;
-    z-index: 2; // Allows for elements "below" std z-index
+     // Allows for elements "below" std z-index
+     // (note: only set if child adopts explicit position value)
+    z-index: 2;
+
 }
 
 body {
@@ -187,16 +195,8 @@ nav {
 
 
 #hackathon {
-    display: flex;
-    justify-content: space-between;
-    padding: $section-padding;
-    align-items: center;
     background-color: $dark-blue;
 
-    div {
-        width: 50%;
-    }
-
     h2 {
         font-size: $title-size;
     }
@@ -206,6 +206,128 @@ nav {
         font-size: 1.2em;
     }
 
+    .carousel {
+        width: 100%;
+        margin: 0 auto;
+        padding-top: $section-padding;
+
+        // Temp for debugging numbers
+        // FIXME: Dont pull a byebug :)
+        h2 {
+            text-align: center;
+            margin-top: -20px;
+        }
+
+        .slick-list {
+            // Slider depends on having the overflow-x hidden,
+            // CSS (per spec) doesn't allow separate overflow-y and x.
+            // So, we add some padding to cheat it.
+            // (https://css-tricks.com/popping-hidden-overflow/)
+            padding-top: 60px;
+            margin-top: -60px;
+            overflow: hidden;
+        }
+
+        .slick-slide {
+            height: 300px;
+            width: 300px;
+            margin-right: 20px; // Same margin as wire top calculation
+
+            .wire {
+                width: 200%;
+                margin: 0;
+                height: $wire-height;
+                background: $pink;
+                top: -($wire-height + 20px);
+                position: relative;
+            }
+
+            .front_clip {
+                position: relative;
+                width: 30px;
+                height: 90px;
+                background-color: $orange;
+                margin: 0 auto;
+                top: -90px;
+            }
+
+            .back_clip {
+                width: 10px;
+                height: 60px;
+                background-color: $red;
+                top: -155px;
+                margin-left: calc(50% - 25px);
+                position: relative;
+                z-index: 0;
+            }
+
+            // Clip is easier as rel, so this is abs.
+            img {
+                position: absolute;
+                width: 300px;
+                height: 300px;
+                top: 0;
+                bottom: 0;
+                z-index: 1;
+                border-radius: 20px;
+            }
+        }
+
+        .slick-arrow {
+            margin-top: 70px;
+            width: 60px;
+            height: 60px;
+            background-color: $blue;
+            border: 2px solid #A3A9CA;
+            box-sizing: border-box;
+            border-radius: 50%;
+        }
+
+        // Make sure these appear over the slides!
+        .slick-prev, .slick-next {
+            z-index: 3;
+        }
+
+        // Use FontAwesome as pseudo-element so we don't
+        // have to fork slick-carousel.
+        // (https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements)
+        .slick-prev::before, .slick-next::before {
+            display: inline-block;
+            font-style: normal;
+            font-variant: normal;
+            text-rendering: auto;
+            -webkit-font-smoothing: antialiased;
+            font-family: "Font Awesome 5 Free";
+            font-weight: 900;
+        }
+
+        .slick-prev {
+            left: 1%;
+            &::before {
+                content: "\f060";
+            }
+        }
+
+        .slick-next {
+            right: 1%;
+            &::before {
+                content: "\f061";
+            }
+        }
+
+    }
+
+    #hackathon-content {
+        display: flex;
+        justify-content: space-between;
+        padding: $section-padding;
+        align-items: center;
+
+        div {
+            width: 40%;
+        }
+    }
+
     #mlh {
         @include button;
         background-color: $light-blue;