Slides

.ruby-version

@@ -0,0 +1 @@
+3.0.6

Gemfile

@@ -3,3 +3,8 @@ source "https://rubygems.org"
 gem "github-pages", group: :jekyll_plugins
 gem "jekyll-include-cache", group: :jekyll_plugins
 gem "jekyll", "=3.9.3"
+gem 'csv'
+
+
+
+gem "webrick", "~> 1.8"

_config.yml

@@ -22,7 +22,7 @@ subtitle                 : # site tagline that appears below site title in masth
 name                     : "Your Name"
 description              : "An amazing website."
 url                      : # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
-baseurl                  : # the subpath of your site, e.g. "/blog"
+baseurl                  : /visualmachines_testing.github.io
 repository               : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
 teaser                   : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
 logo                     : # path of logo image to display in the masthead, e.g. "/assets/images/88x88.png"

_data/slides.yml

@@ -0,0 +1,9 @@
+- title: Equitable Sensing of the Human Body
+  text_line1: Light-based sensors that are robust to skin tone, body mass 
+  text_line2: and other phenotypes can transform precision medicine and human interaction.
+  image_link: "/assets/images/website_chosen_square.png"
+
+- title: "I give students A"
+  text_line1: "Everyone gets an A in my class"
+  text_line2: "no matter what"
+  image_link: "/assets/images/people/achuta_kadambi.png"

_pages/home_page.md

@@ -12,23 +12,151 @@ head_scripts:
 
 ---
 <main role="main" class="container-fluid">
-  <div class="row">
-    <div class="col-md-12 image-wrapper">
-      <img src="/assets/images/website_chosen_square.png" class="img-responsive full-width" style="max-width: 1000%;">
+  <div class="row slideshow">
+    {% assign slides = site.data.slides %}
+    {% for slide in slides %}
+    <div class="col-12 p-0 slide">
+      <img src="{{ slide.image_link }}" class="img-fluid">
       <div class="over-text d-none d-md-none d-lg-block">
-	  <div class="heading" style="color:white;">Equitable Sensing of the Human Body</div>
-	  <div class="body-home" style="color:white">Light-based sensors that are robust to skin tone, body mass
-	    <br> and other phenotypes can transform precision medicine and human interaction.
-	  </div>
+        <div class="heading">{{ slide.title }}</div>
+        <div class="body-home">{{ slide.text_line1 }}</div>
+        <div class="body-home">{{ slide.text_line2 }}</div>
       </div>
     </div>
+    {% endfor %}
+    <!-- Navigation Arrows -->
+    <div id="prevArrow" class="arrow arrow-left">&lt;</div>
+    <div id="nextArrow" class="arrow arrow-right">&gt;</div>
   </div>
 </main>
+
+
+<style>
+  /* CSS for slideshow */
+  .slideshow {
+    position: relative;
+    height: 400px; /* Adjust height as per your image dimensions */
+    overflow: hidden;
+  }
+
+  .slide {
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+    width: 100%;
+    margin: 0; /* Ensure no margin */
+    padding: 0; /* Ensure no padding */
+  }
+
+  .slide.active {
+    opacity: 1;
+  }
+
+  /* Additional styling for overlay text */
+  .over-text {
+    position: absolute;
+    bottom: 20px;
+    left: 60px;
+    color: white;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 10px;
+    max-width: 510px;
+  }
+
+  .heading {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  .body-home {
+    font-size: 16px;
+  }
+
+  .img-fluid {
+    width: 100%;
+    height: auto;
+  }
+
+ .arrow-left {
+  position: absolute;
+  bottom: 20px; 
+  left: 20px; 
+  width: 20px;
+  height: 20px; 
+  color:  #666262;
+  font-size: 24px; 
+  text-align: center;
+  line-height: 20px; 
+  cursor: pointer;
+  z-index: 1000; 
+}
+
+.arrow-right {
+  position: absolute;
+  bottom: 20px; 
+  right: 20px;
+  width: 20px; 
+  height: 20px;
+  color:#666262 ;
+  font-size: 24px; 
+  text-align: center;
+  line-height: 20px; 
+  cursor: pointer;
+  z-index: 1000; /* Ensure arrows are above slides */
+}
+
+</style>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+  const slides = document.querySelectorAll(".slide");
+  let currentSlide = 0;
+
+  // Show first slide
+  slides[currentSlide].classList.add("active");
+
+  // Function to show next slide
+  function nextSlide() {
+    slides[currentSlide].classList.remove("active");
+    currentSlide = (currentSlide + 1) % slides.length;
+    slides[currentSlide].classList.add("active");
+  }
+
+  // Function to show previous slide
+  function prevSlide() {
+    slides[currentSlide].classList.remove("active");
+    currentSlide = (currentSlide - 1 + slides.length) % slides.length;
+    slides[currentSlide].classList.add("active");
+  }
+
+  // Automatically move to next slide every 3 seconds
+  setInterval(nextSlide, 5000);
+
+  // Button click events for navigation arrows
+  document.getElementById("nextArrow").addEventListener("click", nextSlide);
+  document.getElementById("prevArrow").addEventListener("click", prevSlide);
+});
+</script>
+
+
+
+
 <br>
+
+
+
 <main role="main" class="container">
   <div class="row">
     <div class="col-md-5 offset-md-1">
       <div class="heading-home" style="color:#8f3985;">News</div>
+
+
+
+
+
 
  <div class="heading-home padded-top">Aug 2023: Diffusion w/ Perspective appears in SIGGRAPH Asia</div>
         <div class="body-home">Rishi's first author paper appears in the journal proceedings of SIGGRAPH Asia</div>