navbar, reusable components

Made hamburger navbar, responsiveness part has some bug, will fix tomorrow and made the components data stored in a variable to easily modify when needed

9 files changed, 560 insertions, 155 deletions

diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro
index c0be475..07f7441 100644
--- a/src/components/Carousel.astro
+++ b/src/components/Carousel.astro
@@ -1,68 +1,174 @@
 ---
-import { Carousel } from 'astro-bootstrap';
-import type { CarouselSlideType } from 'astro-bootstrap';
+const props = Astro.props
+interface Carousel{
+  img: string;
+  alt: string;
+  link?: string;
+}
 
-const slides: CarouselSlideType[] = [
+const carouselSlide: Carousel[] = [
+  {
+    img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iitb-logo.png', 
+    alt: 'IITB' ,    
+    link:'http://iitb.ac.in/'
+  },
+  {
+    img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/fossee-logo.png', 
+    alt: 'FOSSEE' ,    
+    link:'https://fossee.in/'
+  },
+  {
+    img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/st-logo.png', 
+    alt: 'Spoken Tutorial' ,    
+    link:'https://spoken-tutorial.org/'
+  }, 
+  {
+    img: 'https://iot-gis-hackathon.fossee.in/static/cms/uploads/images/icfoss-logo.png', 
+    alt: 'icfoss'
+  },
   { 
     img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/rudra-logo.png',
-    alt: 'Rudra',
-    active:true, 
+    alt: 'Rudra',    
     link : 'http://www.rudra.iitb.ac.in/',
   },
-  { img: 'https://iot-gis-hackathon.fossee.in/static/cms/uploads/images/icfoss-logo.png', alt: 'icfoss', active: true },
-  { img: 'https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/NM-ICPS-logo1.png', alt: 'NMICPS' ,active:true, link:'https://nmicps.in/'},
-  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/navavishkaar.png', alt: 'IITTNiF' ,active:true, link:'https://iittnif.com/'},
-  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iit-tirupati.png', alt: 'IIT Tirupati' ,active:true, link:'https://www.iittp.ac.in/'},
-  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iitb-logo.png', alt: 'IITB' ,active:true, link:'http://iitb.ac.in/'},
-  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/fossee-logo.png', alt: 'FOSSEE' ,active:true, link:'https://fossee.in/'},
-  { img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/st-logo.png', alt: 'Spoken Tutorial' ,active:true, link:'https://spoken-tutorial.org/'}, 
+  {
+    img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/iit-tirupati.png', 
+    alt: 'IIT Tirupati' ,    
+    link:'https://www.iittp.ac.in/'
+  },
+  {
+    img: 'https://iitb-fossee-mapathon.fossee.in/static/cms/uploads/images/navavishkaar.png', 
+    alt: 'IITTNiF' ,    
+    link:'https://iittnif.com/'
+  },
+  {
+    img: 'https://iot-gis-hackathon.fossee.org/static/cms/uploads/images/NM-ICPS-logo1.png', 
+    alt: 'NMICPS' ,    
+    link:'https://nmicps.in/'
+  },
 ];
 
 
-const id = 'carouselExampleBasic';
----
 
-<Carousel {id} fade>
-  <Carousel.Indicators {id} {slides} />
-  <!-- <div class="carousel-container"> -->
-  <Carousel.Inner>
-    {
-      slides.map((slide) => (
-        <Carousel.Item active={slide.active}>
-            <a href={slide.link}>
-              <img
-              src={slide.img}
-              alt={slide.alt}
-              class="carousel-images"
-              />
-            </a>
-          </Carousel.Item>
-        ))
+---
+  <div class="gallery-wrap">
+    <svg id = "backBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
+      <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" />
+    </svg>
+    <div class="gallery">
+      <div>{
+        carouselSlide.slice(0, 4).map((slide) => {
+          return (
+            <span>
+              <a href={slide.link} target="_blank">
+                <img src={slide.img} alt={slide.alt} />
+              </a>
+            </span>
+          );
+        })
+      }</div>
+      <div>{
+        carouselSlide.slice(4).map((slide) => {
+          return (
+            <span>
+              <a href={slide.link} target="_blank">
+                <img src={slide.img} alt={slide.alt} />
+                </a>
+            </span>
+          );
+        })
       }
-      <!-- </div> -->
-  </Carousel.Inner>
-  <Carousel.Controls id={id} />
-</Carousel>
+      </div>
+    </div>
+    <svg id = "nextBtn" xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" {...props}>
+      <path fill="black" d="M19.793 3.441v17.118a1.243 1.243 0 0 1-1.83 1.19L3.329 12.991a1.184 1.184 0 0 1 0-1.982l14.634-8.758a1.243 1.243 0 0 1 1.83 1.19" />
+    </svg>
+</div>
+
+
 
 <style>
-    .carousel-control-prev-icon{
-        color: black;
-    }
-    .carousel-inner{
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
+
+  .gallery{
+    width: 100vh;
+    display: flex;
+    overflow-x: scroll;
+  }
+
+  .gallery div{
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 80px;
+    padding: 10px;
+    flex: none;
+  }
+  .gallery div span{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .gallery div img{
+    width: 100%;
+    transition: transform 0.5s;
+  }
+
+  .gallery::-webkit-scrollbar{
+    display: none;
+  }
+  .gallery-wrap{
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+  }
+
+  #nextBtn{
+    transform: rotateY(180deg);
+  }
+
+  #backBtn, #nextBtn{
+    width: 3vh;
+    cursor: pointer;
+    margin: 0 15vh;
+  }
+
+  @media screen and (max-width: 868px){
+    .gallery div{
+      grid-gap: 20px;
     }
-    .carousel-images{
-        width: 10%;
-        margin: auto;
-        height: 10%;
+    #backBtn, #nextBtn{
+      margin: 0;
     }
+  }
 
-    .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-start, .carousel-fade .carousel-item-prev.carousel-item-end {
-    z-index: 1;
-    opacity: 1;
-    width: 20%;
-    margin: 0;
+</style>
+
+<script>
+
+  let scrollContainer : HTMLElement | null = document.querySelector(".gallery");
+  let nextBtn : HTMLElement | null = document.getElementById("nextBtn");
+  let backBtn : HTMLElement | null = document.getElementById("backBtn");
+
+  scrollContainer?.addEventListener("wheel", (e)=>{
+    e.preventDefault();
+    scrollContainer.scrollLeft += (e as WheelEvent).deltaY;
+    scrollContainer.style.scrollBehavior = "auto";
+  });
+
+  nextBtn?.addEventListener("click", ()=>{
+    if(scrollContainer){
+      scrollContainer.style.scrollBehavior = "smooth";
+      scrollContainer.scrollLeft += 900;
+    }
+  });
+  
+  backBtn?.addEventListener("click", ()=>{
+    if(scrollContainer){
+      scrollContainer.style.scrollBehavior = "smooth";
+      scrollContainer.scrollLeft -= 900;
+      console.log(scrollContainer.scrollLeft);
     }
-</style>
\ No newline at end of file
+  });
+
+</script>
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 600f61f..aaa2f51 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,4 @@
 ---
-// import 'bootstrap/dist/css/bootstrap.css'
 ---
 
 <div class="footer">
diff --git a/src/components/Header.astro b/src/components/Header.astro
index a21a969..d251d8a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -23,7 +23,7 @@ import 'bootstrap/dist/css/bootstrap.css'
         height: 80vh;
         padding: 1vh;
         background-color: rgb(252, 230, 188);
-        animation: zoomIn 1.5s; 
+        animation: zoomIn 3s; 
         z-index: 10;
     }
     .map img {
@@ -108,6 +108,22 @@ import 'bootstrap/dist/css/bootstrap.css'
         }
     }
 
+    @media screen and (max-width: 982px) {
+        .head{
+            margin-top: 9vh;
+        }
+    }
+
+    @media screen and (max-width: 602px){
+        .head{
+            margin-top: 9vh;
+        }
+        .nav{
+            margin: 1vh;
+        }
+    }
+
+
 
   </style>
 
diff --git a/src/components/HomeBody.astro b/src/components/HomeBody.astro
index 71698cd..2a973bd 100644
--- a/src/components/HomeBody.astro
+++ b/src/components/HomeBody.astro
@@ -3,34 +3,118 @@ import 'bootstrap/dist/css/bootstrap.css'
 import Carousel from './Carousel.astro'
 const props = Astro.props
 
+interface CoreTeam{
+    name : string;
+    position : string[];
+    institute : string;
+}
+
+interface Significance{
+    intro : string;
+    point: string[];
+    end: string;
+}
+
+const signifance : Significance[] = [
+    {
+        intro: "In a world where technology shapes our daily lives, the significance of this hackathon cannot be overstated. Here, participants have the opportunity to redefine the boundaries of what's possible. By merging open source principles with cutting-edge technologies, we aim to:",
+        point: [
+            "Solve Real-World Problems: Tackle critical issues such as environmental sustainability, disaster management, precision agriculture, and more. Your solutions can change lives and protect our planet.",
+            "Foster Innovation: Innovation thrives when knowledge is shared openly. By promoting open source hardware and IoT, we empower you to push the boundaries of creativity and discovery.",
+            "Create Collaborative Communities: Through this hackathon, we build communities of like-minded individuals passionate about making a difference. Together, we can achieve more than any one of us can alone.",
+            "Empower Future Leaders: Whether you're a student, a professional, or an enthusiast, this hackathon is a launchpad for your ideas. It's a chance to develop your skills, showcase your talents, and make your mark on the world."
+        ],
+        end: "Join us on this extraordinary journey, where innovation knows no bounds. Together, let's turn ideas into actions and make a lasting impact on society and the environment. The Open Source Hardware IoT GIS Hackathon is your stage to shine, and the world is waiting to witness your brilliance."
+    }
+]
+
+const purpose: string[] = [
+    
+    "This hackathon is more than just a competition; it's a platform for innovators, creators, and visionaries to come together and pioneer solutions for a brighter future. Our purpose is to harness the power of open source hardware, the Internet of Things (IoT), and Geographic Information Systems (GIS) to address some of the world's most pressing challenges.",
+
+    "The FOSSEE project, IIT Bombay promotes the use of Free/ Libre Open Source Software in academia and Industry. The FOSSEE project  is funded through the National Mission on Education through ICT (NMEICT), Ministry of Education, Government of India. The FOSSEE-GIS team manages the overall coordination of the 'IIT Bombay FOSSEE GIS Internship in Geospatial Dashboard Design and Implementation'."
+]
+
+const coreteam: CoreTeam[] = [
+    {
+        name: "Prof. Kannan Moudgalya",
+        position: ["P.I., FOSSEE"],
+        institute: "Indian Institute of Technology Bombay"
+    },
+    {
+        name: "Prof. Pennan Chinnasamy",
+        position: ["Co.P.I., FOSSEE & PiC, The Rural Data Research & Analysis (RuDRA) Lab, IIT Bombay"],
+        institute: "Indian Institute of Technology Bombay"
+    },
+    {
+        name: "Prof. Roshan Srivastav",
+        position: ["Project Director, IIT Tirupati Navavishkar I-Hub Foundation (NM-ICPS, DST)"],
+        institute: "Indian Institute of Technology Tirupati"
+    },
+    {
+        name: "Mr. Rajesh Kushalkar",
+        position: ["Senior Manager, FOSSEE-Open Hardware"],
+        institute: "Indian Institute of Technology Bombay"
+    },
+    {
+        name: "Mr. Mohamed Kasim Khan",
+        position: ["National Coordinator, FOSSEE-GIS", "National Mission on Education through ICT, Ministry of Education, Government of India"],
+        institute: "Indian Institute of Technology Bombay",
+    }
+]
+
 ---
 
+<!-- Introduction -->
 
 <div class="main-container">
     <h1 class="intro">Introducing the Hackathon: Unlocking Innovation for a Better World</h1>
-
     <h2 class="welcome-heading"> Welcome to the Open Source Hardware IoT GIS Hackathon!</h2>
     <p class="welcome-text"> Welcome to the National Level Open Hardware-IoT Geospatial Hackathon, a stage where innovation knows no boundaries. This premier event brings together visionaries, tech enthusiasts, and problem solvers from across the nation to harness the power of open hardware, the Internet of Things (IoT), and geospatial technology. Get ready to explore uncharted possibilities, collaborate on real-world challenges, and make a significant impact on our world.</p>
-    <h1 class="body-heading">Significance:</h1>
-    <ul class="significance-points" style="list-style-type: square;">
-        <p>In a world where technology shapes our daily lives, the significance of this hackathon cannot be overstated. Here, participants have the opportunity to redefine the boundaries of what's possible. By merging open source principles with cutting-edge technologies, we aim to:</p>
-        <li>Solve Real-World Problems: Tackle critical issues such as environmental sustainability, disaster management, precision agriculture, and more. Your solutions can change lives and protect our planet.</li>
-        <li>Foster Innovation: Innovation thrives when knowledge is shared openly. By promoting open source hardware and IoT, we empower you to push the boundaries of creativity and discovery.</li>
-        <li>Create Collaborative Communities: Through this hackathon, we build communities of like-minded individuals passionate about making a difference. Together, we can achieve more than any one of us can alone.</li>
-        <li>Empower Future Leaders: Whether you're a student, a professional, or an enthusiast, this hackathon is a launchpad for your ideas. It's a chance to develop your skills, showcase your talents, and make your mark on the world.</li>
-    </ul>
-    <p class="significance-end"> Join us on this extraordinary journey, where innovation knows no bounds. Together, let's turn ideas into actions and make a lasting impact on society and the environment. The Open Source Hardware IoT GIS Hackathon is your stage to shine, and the world is waiting to witness your brilliance.</p>
+    <h1 class="body-heading">Significance:</h1>{
+    signifance.map((point) => {
+        return (
+                <ul class="significance-points" style="list-style-type: square;">
+                    <p>{point.intro}</p>
+                    {
+                        point.point.map((p) => {
+                            return (
+                                <li>{p}</li>
+                            )
+                        })
+                    }
+                </ul>
+                <p class="significance-end">{point.end}</p>
+            )
+        })
+        }
 </div>
+
+
+<!-- Significance -->
+
 <div class="body-container">
-    <h1 class="intro" id = "purpose">Purpose</h1>
-    <p class="significance-end"> This hackathon is more than just a competition; it's a platform for innovators, creators, and visionaries to come together and pioneer solutions for a brighter future. Our purpose is to harness the power of open source hardware, the Internet of Things (IoT), and Geographic Information Systems (GIS) to address some of the world's most pressing challenges..</p>
-    <p class="significance-end"> The FOSSEE project, IIT Bombay promotes the use of Free/ Libre Open Source Software in academia and Industry. The FOSSEE project  is funded through the National Mission on Education through ICT (NMEICT), Ministry of Education, Government of India. The FOSSEE-GIS team manages the overall coordination of the "IIT Bombay FOSSEE GIS Internship in Geospatial Dashboard Design and Implementation". </p>
+    <h1 class="intro" id = "purpose">Purpose</h1>{
+        purpose.map((point) => {
+            return (
+                <p class="significance-end">{point}</p>
+            )
+        })
+    }
 </div>
+
+
+<!-- Registration -->
+
 <div class="registration-container" id ="register">
     <h1 class="intro">Registration</h1>
     <p>Please click on the following button to register yourself for the Hackathon</p>
     <div class="hack-button"> <a href="https://forms.gle/aVopwiwmRM35FXQT8"><button class="btn-register slide-right">Register</button></a></div>
 </div>
+
+
+<!-- Partners and Organisers -->
+
 <div class="pno-container" id = "partners">
     <h1 class="intro">Partner and Organisers</h1>
     <p>
@@ -43,53 +127,47 @@ const props = Astro.props
     </div>
     <p>
         <span class="subheading">Organizing Partner:   </span>
-            The IIT Tirupati Navavishkar I-Hub Foundation is the Technology Innovation Hub specializing in Positioning and Precision Technologies, funded through the National Mission on Interdisciplinary Cyber-Physical System (NM-ICPS), Department of Science and Technology, Government of India.
+        The IIT Tirupati Navavishkar I-Hub Foundation is the Technology Innovation Hub specializing in Positioning and Precision Technologies, funded through the National Mission on Interdisciplinary Cyber-Physical System (NM-ICPS), Department of Science and Technology, Government of India.
     </p>
 </div>
 
+
+<!-- Core Team and Contact Us -->
+
 <div class="coreteam-container" id ="contact-us">
     <h1>Core Team and Contact Us <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
         <path fill="currentColor" d="M4.05 21q-.45 0-.75-.3t-.3-.75V15.9q0-.325.225-.587t.575-.363l3.45-.7q.35-.05.713.063t.587.337L10.9 17q.95-.55 1.8-1.213t1.625-1.437q.825-.8 1.513-1.662t1.187-1.788L14.6 8.45q-.2-.2-.275-.475T14.3 7.3l.65-3.5q.05-.325.325-.562T15.9 3h4.05q.45 0 .75.3t.3.75q0 3.125-1.362 6.175t-3.863 5.55t-5.55 3.863T4.05 21" />
     </svg></h1>
-    <div class="contact-us">
-        <div class="teach">
-            <h4>Prof. Kannan Moudgalya</h4>
-            <p>P.I., FOSSEE</p>
-            <p>Indian Institute of Technology Bombay</p>
-        </div>
-        <div class="teach">
-            <h4>Prof. Pennan Chinnasamy</h2>
-            <p>Co.P.I., FOSSEE & PiC, The Rural Data Research & Analysis (RuDRA) Lab, IIT Bombay</p>
-            <p>Indian Institute of Technology Bombay</p>
-        </div>
-        <div class="teach">
-            <h4>Prof. Roshan Srivastav</h2>
-            <p>Project Director, IIT Tirupati Navavishkar I-Hub Foundation (NM-ICPS, DST)</p>
-            <p>Indian Institute of Technology Tirupati</p>
-        </div>
-        <div class="teach">
-            <h4>Mr. Rajesh Kushalkar</h2>
-            <p>Senior Manager, FOSSEE-Open Hardware</p>
-            <p>Indian Institute of Technology Bombay</p>
-        </div>
-        <div class="teach">
-            <h4>Mr. Mohamed Kasim Khan</h2>
-            <p>National Coordinator, FOSSEE-GIS</p>
-            <p>National Mission on Education through ICT, Ministry of Education, Government of India</p>
-            <p>Indian Institute of Technology Bombay</p>
-        </div>
+    <div class="contact-us">{
+        coreteam.map((member) => {
+            return (
+                <div class="teach">
+                    <h4>{member.name}</h4>
+                    {member.position.map((pos) => {
+                        return (
+                            <p>{pos}</p>
+                        )
+                    })}
+                    <p>{member.institute}</p>
+                </div>
+            )
+        })
+        }
     </div>
     <p>
-       
         Please write to us in case of any queries regarding the Hackathon at:
     </p>
     <p class="email">
         <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" {...props}>
-            <path fill="black" d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-2.2 2L16 14.78L6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z" /></svg>Email :
-            <a href="mailto:contact-oshw@fossee.in ">contact-oshw[at]fossee[dot]in </a>
+            <path fill="black" d="M28 6H4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m-2.2 2L16 14.78L6.2 8ZM4 24V8.91l11.43 7.91a1 1 0 0 0 1.14 0L28 8.91V24Z" />
+        </svg>
+        Email : <a href="mailto:contact-oshw@fossee.in ">contact-oshw[at]fossee[dot]in </a>
     </p>
 </div>
 
+
+<!-- CSS -->
+
   <style>
 
     .main-container{
diff --git a/src/components/IconBar.astro b/src/components/IconBar.astro
index ac2c917..3128f99 100644
--- a/src/components/IconBar.astro
+++ b/src/components/IconBar.astro
@@ -3,8 +3,11 @@ const props = Astro.props
 ---
 
 
+
+
+
 <div class="icon-bar">
-    <a href="https://www.facebook.com/FOSSEENMEICT/" class="facebook text-white" target="_blank">
+    <a href="https://www.facebook.com/FOSSEENMEICT/" class="facebook" target="_blank">
         
         <svg xmlns="http://www.w3.org/2000/svg" width="36.75" height="42" viewBox="0 0 448 512" {...props}>
             <path fill="white" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48c27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48" />
@@ -29,9 +32,9 @@ const props = Astro.props
 
         <svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 256 256" {...props}>
             <g fill="none">
-                <rect width="256" height="256" fill="#fff" rx="60" />
                 <rect width="256" height="256" fill="#0a66c2" rx="60" />
-                <path fill="#fff" d="M184.715 217.685h29.27a4 4 0 0 0 4-3.999l.015-61.842c0-32.323-6.965-57.168-44.738-57.168c-14.359-.534-27.9 6.868-35.207 19.228a.32.32 0 0 1-.595-.161V101.66a4 4 0 0 0-4-4h-27.777a4 4 0 0 0-4 4v112.02a4 4 0 0 0 4 4h29.268a4 4 0 0 0 4-4v-55.373c0-15.657 2.97-30.82 22.381-30.82c19.135 0 19.383 17.916 19.383 31.834v54.364a4 4 0 0 0 4 4M38 59.628c0 11.864 9.767 21.626 21.632 21.626c11.862-.001 21.623-9.769 21.623-21.631C81.253 47.761 71.491 38 59.628 38C47.762 38 38 47.763 38 59.627m6.959 158.058h29.307a4 4 0 0 0 4-4V101.66a4 4 0 0 0-4-4H44.959a4 4 0 0 0-4 4v112.025a4 4 0 0 0 4 4" />
+                <rect width="256" height="256" fill="#fff" rx="60" />
+                <path fill="#0a66c2" d="M184.715 217.685h29.27a4 4 0 0 0 4-3.999l.015-61.842c0-32.323-6.965-57.168-44.738-57.168c-14.359-.534-27.9 6.868-35.207 19.228a.32.32 0 0 1-.595-.161V101.66a4 4 0 0 0-4-4h-27.777a4 4 0 0 0-4 4v112.02a4 4 0 0 0 4 4h29.268a4 4 0 0 0 4-4v-55.373c0-15.657 2.97-30.82 22.381-30.82c19.135 0 19.383 17.916 19.383 31.834v54.364a4 4 0 0 0 4 4M38 59.628c0 11.864 9.767 21.626 21.632 21.626c11.862-.001 21.623-9.769 21.623-21.631C81.253 47.761 71.491 38 59.628 38C47.762 38 38 47.763 38 59.627m6.959 158.058h29.307a4 4 0 0 0 4-4V101.66a4 4 0 0 0-4-4H44.959a4 4 0 0 0-4 4v112.025a4 4 0 0 0 4 4" />
             </g>
         </svg>
         
@@ -54,6 +57,10 @@ const props = Astro.props
         padding: 1vh;
         transition: all 0.3s ease;
         font-size: 20px;
+        cursor: pointer;
+    }
+    .icon-bar a:hover {
+        background-color: black;
     }
 
     .facebook {
@@ -71,6 +78,9 @@ const props = Astro.props
     .linkedin {
         background: #0a66c2;
     }
+    .linkedin svg:hover g path:hover {   
+        fill: black;
+    }
 
     svg{
         height: 3.5vh;
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index 4b6c639..ac7f4d7 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,25 +1,143 @@
 ---
-import 'bootstrap/dist/css/bootstrap.css'
+
+interface Routes {
+  path: string;
+  name: string;
+}
+
+const routes : Routes[] = [
+  { path: '/', name: 'Home' },
+  { path: '#purpose', name: 'About' },
+  { path: '/resources', name: 'Resources' },
+  { path: '/schedule', name: 'Schedule' },
+  { path: '#register', name: 'Register' },
+  { path: '#partners', name: 'Partners' },
+  { path: '#contact-us', name: 'Contact Us' },
+
+]
 ---
 
-<div class="navbar">
-  <a href="/" class="text-blue-800">Home</a>
-  <a href="#purpose" class="text-blue-800">About</a>
-  <a href="/resources" class="text-blue-800">Resources</a>
-  <a href="/schedule" class="text-blue-800">Schedule</a>
-  <a href="#register" class="text-blue-800">Register</a>
-  <a href="#partners" class="text-blue-800">Partners</a>
-  <a href="#contact-us" class="text-blue-800">Contact Us</a>
+
+<div class="navbar">{
+  routes.map(route => (
+    <a href={ route.path } class="text-blue-800">{ route.name }</a>
+  ))
+}</div>
+
+
+<div class="hamburger-navbar">
+  <nav>
+    <div class="ham-menu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </nav>
+</div>
+<div class="off-screen-menu">
+  {
+    routes.map(route => (
+      <a href={ route.path } class="text-blue-800">{ route.name }</a>
+    ))
+  }
 </div>
   <style>
+  
+    .hamburger-navbar{
+      position: fixed;
+      right: 0%;
+      display: none;
+    }
+    .off-screen-menu{
+      background-color: orange;
+      height: 45vh;
+      display: none;
+      width: 100%;
+      z-index: 5;
+      top: 22%;
+      position: sticky;
+      right: -450px;
+      flex-direction: column;
+      justify-content: center;
+      font-size: 3rem;
+    }
+
+    .off-screen-menu a{
+      font-size: 2.9vh;
+      text-decoration: none;
+      color: black;
+      font-weight: 400;
+      padding: 1vh 4vh;
+      z-index: 1001;
+    }
+    .off-screen-menu a:hover{
+      background-color: rgb(5, 5, 95);
+      color: white;
+    }
+
+    .off-screen-menu:active{
+      right: 0;
+    }
+    .active{
+      display: flex;
+    }
+
+    nav{
+      display: block;
+      background-color: orange;
+      padding: 1rem;
+      width: 100vw;
+      z-index: 10;
+    }
+    .ham-menu{
+      height: 40px;
+      width: 40px;
+      margin-left: auto;
+      position: sticky;
+      top: 0;
+    }
+
+    .ham-menu span{
+      height: 5px;
+      width: 100%;
+      background-color: #6f86ff;
+      border-radius: 25px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transition: .3s ease;
+      transform: translate(-50%, -50%);
+    }
+
+    .ham-menu span:nth-child(1){
+      top: 25%;
+    }
+    .ham-menu span:nth-child(3){
+      top: 75%;
+    }
+
+    .ham-menu.active span:nth-child(1){
+      top: 50%;
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    .ham-menu.active span:nth-child(2){
+      opacity: 0;
+    }
+
+    .ham-menu.active span:nth-child(3){
+      top: 50%;
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
     .navbar {
       font-family: 'Roboto', sans-serif;
       display: flex;
       justify-content: space-around;
-      padding: 0 20vw;
+      padding: 0 10.8vw;
       background-color: rgb(252, 230, 188);
       position: sticky;
-      top: 0; /* Add this line */
+      top: 0%; /* Add this line */
       z-index: 1000;
     }
     .navbar a {
@@ -34,13 +152,52 @@ import 'bootstrap/dist/css/bootstrap.css'
     }
 
     @media screen and (max-width: 613px) {
-    .container {
-      width: 100%; /* Adjust as needed */
+      .container {
+        width: 100%; /* Adjust as needed */
+      }
+      .navbar{
+        padding: 0 10vw;
+      }
     }
 
-    .navbar{
-      padding: 0 10vw;
+    @media screen and (max-width: 627px){
+      .off-screen-menu{
+        top: 18%;
+      }
     }
-  }
+    @media screen and (max-width: 770px){
+      .off-screen-menu{
+        top: 20%;
+      }
+    }
+    @media screen and (max-width: 982px){
+      .hamburger-navbar{
+        display: block;
+      }
+      .navbar{
+        display: none;
+      }
+      .nav{
+        padding: 1.3rem;
+      }
+    }
+    @media screen and (min-width: 983px){
+      .off-screen-menu{
+        display: none;
+      }
+
+    }
+
   </style>
 
+<script>
+
+  const hamMenu = document.querySelector('.ham-menu');
+  const offScreenMenu : Element | null = document.querySelector('.off-screen-menu');
+
+  hamMenu?.addEventListener('click', () => {
+    hamMenu.classList.toggle('active');
+    if(offScreenMenu)
+      offScreenMenu.classList.toggle('active');
+  })
+</script>
diff --git a/src/components/ScheduleBody.astro b/src/components/ScheduleBody.astro
index 64e1331..a143cbe 100644
--- a/src/components/ScheduleBody.astro
+++ b/src/components/ScheduleBody.astro
@@ -1,50 +1,81 @@
 ---
 import 'bootstrap/dist/css/bootstrap.css'
+interface ScheduleItem{
+    heading : string;
+    events : string[];
+}
+
+const scheduleItems : ScheduleItem[] = [
+    {
+    heading : "Week 1: Kickoff and Orientation [March 01 to 07, 2024]",
+        events : [
+            "Working Day 1: Registration and Welcome Ceremony",
+            "Working Day 2: Opening Keynote and Theme Announcement",
+            "Working Day 3: Workshop 1 - Introduction to Open Hardware and IoT",
+            "Working Day 4: Workshop 2 - Geospatial Technology Fundamentals",
+            "Working Day 5: Team Formation and Ideation Session",
+            "Working Day 6-7: Self-Study and Project Brainstorming"
+        ]
+    },
+    {
+    heading : "Week 2: Deep Dive into IoT and GIS [March 08 to 14, 2024]",
+        events : [
+            "Working Day 8: Workshop 3 - IoT Sensors and Data Collection",
+            "Working Day 9: Workshop 4 - Advanced GIS Applications",
+            "Working Day 10: Hacking Session Begins",
+            "Working Day 11-14: Guided Hacking, Team Check-Ins, and Progress Reports"
+        ]
+    },
+    {
+        heading : "Week 3: Prototyping and Development [March 15 to 21, 2024]",
+        events : [
+            "Working Day 15: Workshop 5 - Data Visualization with GIS",
+            "Working Day 16: Workshop 6 - Open Source Hardware Prototyping",
+            "Working Day 17-21: Dedicated Hacking and Prototype Development"
+        ]
+    },
+    {
+        heading : "Week 4: Final Touches and Presentations [March 22 to April 05, 2024]",
+        events : [
+            "Working Day 22: Workshop 7 - IoT Data Analysis",
+            "Working Day 23-25: Final Project Development and Testing",
+            "Working Day 26: Project Submissions",
+            "Working Day 27-28: Team Rehearsals and Presentation Prep"
+        ]
+    },
+    {
+        heading : "Week 5: Grand Finale and Awards",
+        events : [
+            "Working Day 29: Presentations by Hackathon Teams",
+            "April 12, 2023 (tentative): Judging and Results Declaration",
+            "Date to be announced: Awards Ceremony and Celebration"
+        ]
+    }
+]
 ---
 
+
 <div class="schedule-main">
     <div class="schedule-heading">
         <h1>National Level Open Hardware-IoT Geospatial Hackathon</h1>
     </div>
     <hr>
-    <div class="schedule-content">
-        <h2>Week 1: Kickoff and Orientation [March 01 to 07, 2024]</h2>
-        <div class="weeks">
-            <p>Working Day 1: Registration and Welcome Ceremony</p>
-            <p>Working Day 2: Opening Keynote and Theme Announcement</p>
-            <p>Working Day 3: Workshop 1 - Introduction to Open Hardware and IoT</p>
-            <p>Working Day 4: Workshop 2 - Geospatial Technology Fundamentals</p>
-            <p>Working Day 5: Team Formation and Ideation Session</p>
-            <p>Working Day 6-7: Self-Study and Project Brainstorming</p>
-        </div>
-        <h2>Week 2: Deep Dive into IoT and GIS [March 08 to 14, 2024]</h2>
-        <div class="weeks">
-            <p>Working Day 8: Workshop 3 - IoT Sensors and Data Collection</p>
-            <p>Working Day 9: Workshop 4 - Advanced GIS Applications</p>
-            <p>Working Day 10: Hacking Session Begins</p>
-            <p>Working Day 11-14: Guided Hacking, Team Check-Ins, and Progress Reports</p>
-        </div>
-        <h2>Week 3: Prototyping and Development [March 15 to 21, 2024]</h2>
-        <div class="weeks">
-            <p>Working Day 15: Workshop 5 - Data Visualization with GIS</p>
-            <p>Working Day 16: Workshop 6 - Open Source Hardware Prototyping</p>
-            <p>Working Day 17-21: Dedicated Hacking and Prototype Development</p>
-        </div>
-        <h2>Week 4: Final Touches and Presentations [March 22 to April 05, 2024]</h2>
-        <div class="weeks">
-            <p>Working Day 22: Workshop 7 - IoT Data Analysis</p>
-            <p>Working Day 23-25: Final Project Development and Testing</p>
-            <p>Working Day 26: Project Submissions</p>
-            <p>Working Day 27-28: Team Rehearsals and Presentation Prep</p>
-        </div>
-        <h2>Week 5: Grand Finale and Awards</h2>
-        <div class="weeks">
-            <p>Working Day 29: Presentations by Hackathon Teams</p>
-            <p>April 12, 2023 (tentative): Judging and Results Declaration</p>
-            <p>Date to be announced: Awards Ceremony and Celebration</p>
-        </div>
+    <div class="schedule-content">{
+        scheduleItems.map((item)=>(
+            <h2>{item.heading}</h2>
+            <div class="weeks">
+                {
+                    item.events.map((event)=>(
+                        <p>{event}</p>
+                    ))
+                }
+            </div>
+        ))
+    }
     </div>
 </div>
+
+
   <style>
 
     .schedule-heading h1{
@@ -62,8 +93,8 @@ import 'bootstrap/dist/css/bootstrap.css'
         padding: 0 0 0 25%;
     }
     .schedule-content h2{
-        font-size: 3.6vh;
-        width: 70%;
+        font-size: 3.3vh;
+        width:72%;
         background-color: rgb(252, 230, 188);
         padding: 1vh;
         margin-bottom: 2vh;
diff --git a/src/components/TopBar.astro b/src/components/TopBar.astro
index ad29a4e..b8978c4 100644
--- a/src/components/TopBar.astro
+++ b/src/components/TopBar.astro
@@ -51,7 +51,6 @@ import 'bootstrap/dist/css/bootstrap.css'
     }
 
     img{
-      /* height: 70% */
       width: 14vh;
     
     }
@@ -63,5 +62,13 @@ import 'bootstrap/dist/css/bootstrap.css'
       height: 30%;
       width: 23vh;
     }
+
+    @media screen and (max-width: 982px){
+      .banner-content{
+        position: sticky;
+        top: 0;
+        background-color: white;
+      }
+    }
   </style>
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 95d8b7b..96c1f83 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -22,4 +22,5 @@ import IconBar from '../components/IconBar.astro';
 </Layout>
 
 <style>
+	
 </style>