implemented updating carousel

public/portfolio/index.html

@@ -89,10 +89,6 @@
   </body>
 
     <footer>
-
-        <!-- JavaScript Bundle with Popper -->
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
-
     </footer>
-
 </html>

public/portfolio/projects/css/style.css

@@ -85,6 +85,11 @@ p {
 
 .label-text {
   font-size: 1.5vw;
+  max-width: 80%; /* Limit the width of the description */
+  text-align: center;
+  --white-space: nowrap; /* Optional: prevent text from wrapping to multiple lines */
+  --overflow: hidden; /* Hide overflow text */
+  --text-overflow: ellipsis;
 }
 
 /* NAV-BAR */
@@ -193,7 +198,8 @@ input[type="radio"]:hover + label {
 }
 
 .panels {
-  overflow: hidden;
+  flex: 1;
+  --overflow: hidden;
 }
 
 .panel {
@@ -222,14 +228,14 @@ input[type="radio"]:hover + label {
 }
 
 .panel > *:nth-child(2) {
-  transform: translateX(1000%);
+  transform: translateX(-1000%);
 }
 .panel.open-active > *:nth-child(2) {
-  transform: translateX(0%);
+  transform: translateX(12.5%);
 }
 
 .panel > *:last-child {
-  transform: translateX(1000%);
+  transform: translateX(-1000%);
   transition: 800ms;
 }
 .panel.open-active > *:last-child {
@@ -253,6 +259,16 @@ input[type="radio"]:hover + label {
   font-size: 2em;
 }
 
+.carousel-wrapper {
+  flex: 0 0 40%;
+  padding-top: 5vw;
+}
+
+/* Optional: You can adjust the width of the carousel */
+.carousel {
+  width: 100%; /* Ensure the carousel takes up all the space in its wrapper */
+}
+
 @media only screen and (max-width: 600px) {
   .panel p {
     font-size: 0.8em;
@@ -261,6 +277,9 @@ input[type="radio"]:hover + label {
 
 /*Projects display wrapper div*/
 .projects-display {
+  display: flex;
+  justify-content: space-between;
+  gap: 3vw;
   padding: 5vw;
 }
 

public/portfolio/projects/index.html

@@ -7,7 +7,6 @@
     <link href="css/style.css" rel="stylesheet">
   </head>
   <body>
-    <!-- Navigation -->
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
       <a class="navbar-brand" href="index.html">Josh Ashton</a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -15,15 +14,17 @@
       </button>
       <div class="collapse navbar-collapse" id="navbarNav">
         <ul class="navbar-nav nav-fill w-100">
-                <a class="nav-link" href="../projects">
+          <a class="nav-link" href="..">
             <li class="nav-item">Projects</li>
           </a>
         </ul>
       </div>
     </nav>
 
-    <!--Wrapper div, to separate filter options from the rest of the projects.-->
+    <!-- Wrapper for the panels and carousel -->
     <div class="projects-display">
+      <!-- Project panels -->
+      <div class="panels">
         <form class="filter-buttons">
             <input type="radio" class="search btn btn-primary" name="filter" id="html" />
             <label for="html">HTML</label>
@@ -51,17 +52,17 @@
 
             <input type="radio" class="search btn btn-primary" name="filter" id="bash" />
             <label for="bash">Bash</label>
+
         </form>
 
-      <!--Selectable projects that dynamically resize to fit more information.-->
+        <!-- Project panels (cards) here -->
-      <div class="panels">
+        <div class="panel go flutter" id="one-ai" data-carousel-images='["img/one-ai-1.jpg", "img/one-ai-3.jpg"]'>
-        <div class="panel go flutter" id="tbn">
           <h3 class="label">One AI</h3>
           <h4 class="label-text">End-to-end self-hosted AI solution using Ollama, a Go backend, and Flutter frontend.</h4>
           <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/one-ai" target="_blank">View Code on Github</a></button>
         </div>
 
-        <div class="panel go flutter" id="pokedex">
+        <div class="panel go flutter" id="pokedex" data-carousel-images='["img/pokedex-2.jpeg", "img/pokedex-3.jpeg"]'>
           <h3 class="label">Pokedex</h3>
           <h4 class="label-text">End-to-end self-hosted Pokedex using PokeAPI, a Go backend, and Flutter frontend.</h4>
           <button type="button" class="btn btn-primary"><a href="https://github.com/quaxlyqueen/pokedex" target="_blank">View Code on Github</a></button>
@@ -99,10 +100,26 @@
 
       </div>
 
+      <!-- Carousel placed to the right -->
+      <div class="carousel-wrapper">
+        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
+          <div class="carousel-inner">
+            <!-- Dynamic images will be injected here -->
+          </div>
+          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Previous</span>
+          </button>
+          <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="visually-hidden">Next</span>
+          </button>
+        </div>
+      </div>
     </div>
-  </body>
 
-  <footer>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>
     <script src="js/script.js"></script>
-  </footer>
+  </body>
 </html>

public/portfolio/projects/js/script.js

@@ -7,6 +7,15 @@ const panels = [...document.querySelectorAll('.panel')];
     panels.forEach(panel => panel.addEventListener('click', toggleOpen));
     panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
 
+// Store the reference to the carousel container where images will be displayed
+const carouselContainer = document.querySelector('.carousel-inner');
+
+
+// Add event listeners to the panels (cards)
+//const panels = [...document.querySelectorAll('.panel')];
+//panels.forEach(panel => panel.addEventListener('click', toggleActive));
+
+
 // buttons to filter projects
 const searchButtons = document.querySelectorAll('.search');
   // add event listeners to each button
@@ -41,15 +50,30 @@ function toggleActive(e) {
     let currentActive = document.querySelector('.open-active');
     if(currentActive !== null && currentActive !== this) currentActive.classList.toggle('open-active');
     this.classList.toggle('open-active');
-    //updateCarousel(e);
+    currentActive = document.querySelector('.open-active');
+    updateCarousel(currentActive);
   }
 }
 
-/*
+// Function to update the carousel with the selected project's images
- * Update the carousel to use the selected project's screenshot folder.
+function updateCarousel(panel) {
- */
+  console.log(panel);
-function updateCarousel(e) {
+  // Get the image URLs from the data attribute of the selected project
-  console.log(e.target.id); // TODO: Need to implement.
+  const imageUrls = JSON.parse(panel.getAttribute('data-carousel-images'));
+
+  // Clear the current carousel content
+  carouselContainer.innerHTML = '';
+
+  // Add new images to the carousel
+  imageUrls.forEach((url, index) => {
+    const isActive = index === 0 ? 'active' : ''; // The first image should be active
+    const carouselItem = `
+      <div class="carousel-item ${isActive}">
+        <img src="${url}" class="d-block w-100" alt="...">
+      </div>
+    `;
+    carouselContainer.innerHTML += carouselItem; // Add the new image item to the carousel
+  });
 }
 
  /*