Gallery section

assets/css/style.css

@@ -225,6 +225,127 @@ video.bg-video {
   text-shadow: -1px -1px 0 #272727, 1px -1px 0 #272727, -1px 1px 0 #272727,
     1px 1px 0 #272727;
 }
+
+/* GALLERY */
+.gallery{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+.gallery.body {
+  width: 100%;
+  min-height: 100vh;
+  justify-content: center;
+  align-items: center;
+}
+.gallery .slide-container {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  height: 600px;
+  margin: 0 auto;
+}
+.slide-container .images {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.slide-container .images img{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.slide-container .images img:not(.active){
+  top: 0;
+  left: -100%;
+}
+span.next, span.prev {
+  position: absolute;
+  top: 50%; 
+  transform: translateY(-50%);
+  padding: 14px;
+  color: #a589a8;
+  font-size: 30px;
+  font-weight: bold;
+  transition: 0.5s;
+  border-radius: 3px;
+  user-select: none;
+  z-index: 1;
+  cursor: pointer;
+}
+span.next {
+  right: 10px;
+}
+span.left {
+  left: 10px;
+}
+span.next:hover, span.prev:hover {
+  background-color: #ede6d6;
+  opacity: 0.8;
+  color: #222;
+
+}
+.dots-container {
+  position: absolute;
+  bottom: 5px;
+  z-index: 3;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.dots-container .dot {
+  width: 15px;
+  height: 15px;
+  margin: 0px 2px;
+  border: 3px solid #bbb;
+  border-radius: 50%;
+  display: inline-block;
+  transition: background-color 0.6s ease;
+}
+.dots-container .active {
+  background-color: #1e1e1e;
+}
+@keyframes next1 {
+  from {
+    left: 0%;
+  } to {
+    left: -100%;
+  }
+}
+@keyframes next2 {
+  from {
+    left: 100%;
+  } to {
+    left: 0%;
+  }
+}
+@keyframes prev1 {
+  from {
+    left: 0%;
+  } to {
+    left: 100%;
+  }
+}
+@keyframes prev2 {
+  from {
+    left: -100%;
+  } to {
+    left: 0%;
+  }
+}
+@media (max-width: 768px) {
+  .gallery .slide-container {
+    width: 95%;
+    max-width: none; /* Remove max-width for smaller screens */
+  }
+
+  span.next, span.prev {
+    font-size: 24px; /* Adjust font size for smaller screens */
+  }
+}
+
 /* SCHEDULE */
 .schedule {
   padding-bottom: 5%;

assets/js/gallery.js

@@ -0,0 +1,80 @@
+let slideImages = document.querySelectorAll('.images img');
+let next = document.querySelector('.next');
+let prev = document.querySelector('.prev');
+let dots = document.querySelectorAll('.dot');
+
+var counter = 0;
+
+
+function positionArrows() {
+    let activeImage = document.querySelector('.images img');
+    let imageWidth = activeImage.clientWidth;
+    let imageHeight = activeImage.clientHeight;
+
+    next.style.right = `${(imageWidth / 2) - 500}px`;
+    prev.style.left = `${(imageWidth / 2) - 500}px`;
+    next.style.top = prev.style.top = `${(imageHeight / 2)}px`;
+
+}
+
+window.addEventListener('load', positionArrows);
+
+slideImages.forEach(function(image) {
+    image.addEventListener('transitionend', positionArrows);
+});
+
+next.addEventListener('click', slideNext);
+function slideNext() {
+    slideImages[counter].style.animation = 'next1 1.0s ease-in forwards';
+    counter = counter >= slideImages.length - 1 ? 0 : counter + 1;
+    slideImages[counter].style.animation = 'next2 1.0s ease-in forwards';
+    indicators();
+}
+
+prev.addEventListener('click', slidePrev);
+function slidePrev() {
+    slideImages[counter].style.animation = 'prev1 1.0s ease-in forwards';
+    counter = counter <= 0 ? slideImages.length - 1 : counter - 1;
+    slideImages[counter].style.animation = 'prev2 1.0s ease-in forwards';
+    indicators();
+}
+
+
+function autoSliding() {
+    deletInterval = setInterval(() => {
+        slideNext();
+        indicators();
+    }, 2500);
+}
+autoSliding();
+
+const container = document.querySelector('.slide-container');
+container.addEventListener('mouseover', () => {
+    clearInterval(deletInterval);
+})
+container.addEventListener('mouseout', autoSliding);
+
+
+function indicators() {
+    for(i = 0; i < dots.length; i++) {
+        dots[i].className = dots[i].className.replace(' active', '');
+    }
+    dots[counter].className += ' active';
+}
+
+function switchImage(currentImage) {
+    currentImage.classList.add('active');
+    var imageId = currentImage.getAttribute('attr');
+    if (imageId > counter) {
+        slideImages[counter].style.animation = 'next1 1.0s ease-in forwards';
+        counter = imageId; 
+        slideImages[counter].style.animation = 'next2 1.0s ease-in forwards';
+    } 
+    if (imageId < counter) {
+        slideImages[counter].style.animation = 'prev1 1.0s ease-in forwards';
+        counter = imageId;
+        slideImages[counter].style.animation = 'prev2 1.0s ease-in forwards';
+    }
+    indicators();
+}
+

assets/js/our-team-tab.js

@@ -6,8 +6,8 @@ Jasmine Cai`;
 const directorRoles = `Co-Director
 Co-Director`;
 
-const hardwareNames = `Anushree Patil
-Samridh Tuteja
+const hardwareNames = `Samridh Tuteja
+Anushree Patil
 Poul Holm
 Douglas Tran
 Adi Nelson
@@ -16,7 +16,7 @@ Monil Bhavsar
 Kavya Manchanda
 Yav Rohatgi`;
 
-const hardwareRoles = `Hardware Co-Director
+const hardwareRoles = `Hardware Director
 Hardware Co-Director
 Hardware Member
 Hardware Member

index.html

@@ -312,6 +312,54 @@ <h4 style="padding-top: 0px">
           </center>
         </div>
       </section>
+
+      <!--
+      |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
+      | Gallery 
+      |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
+      -->
+
+      <div class="gallery" >
+        <header class="section-header mb-0">  
+          <div  style="padding-top: 100px;">
+            <h2 class="primary-color">Gallery</h2>
+          </div>
+          <small style="font-size: 20px">Checkout some photos from last year!</small>
+        </header>
+        <body>
+          <div class="slide-container">
+            <span class="next">&#10095;</span>
+            <div class="images">
+              <img src="assets/img/gallery/IMG_1347.jpg" class="active">
+              <img src="assets/img/gallery/IMG_1113.JPG">
+              <img src="assets//img/gallery/IMG_8341.jpg">
+              <img src="assets/img/gallery/IMG_8347.jpg">
+              <img src="assets/img/gallery/IMG_8549.jpg">
+              <img src="assets/img/gallery/IMG_8338.jpg">
+              <img src="assets/img/gallery/IMG_8658.jpg">
+              <img src="assets/img/gallery/IMG_8635.jpg">
+
+            </div>
+            <span class="prev">&#10094;</span>
+
+            <div class="dots-container">
+              <div class="dot active" attr="0" onclick="switchImage(this)"></div>
+              <div class="dot" attr="1" onclick="switchImage(this)"></div>
+              <div class="dot" attr="2" onclick="switchImage(this)"></div>
+              <div class="dot" attr="3" onclick="switchImage(this)"></div>
+              <div class="dot" attr="4" onclick="switchImage(this)"></div>
+              <div class="dot" attr="5" onclick="switchImage(this)"></div>
+              <div class="dot" attr="6" onclick="switchImage(this)"></div>
+              <div class="dot" attr="7" onclick="switchImage(this)"></div>
+            </div>
+          </div>
+          <script src="assets/js/gallery.js"></script>
+        </body>
+      </div>
+
+
+
+
       <!--
       |‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒‒
       | Schedule Highlights