update portfolio and carousel; add technologies to portfolio items, enhance carousel functionality, and adjust carousel color

src/components/Carousel.pug

@@ -54,6 +54,13 @@ mixin Carousel(items, options)
 									p.text-lg.pt-2.font-bold(class="sm:text-xl")= item.caption
 									if item.description
 										p.text-sm.mt-2(class="sm:text-base")= item.description
+									//- Technology pills
+									if item.technologies && item.technologies.length > 0
+										.flex.flex-wrap.gap-2.mt-3
+											each tech in item.technologies
+												span.inline-block.px-3.py-1.text-sm.font-medium.rounded-full.shadow-sm(
+													class=`bg-nls-${color}/10 text-nls-${color} border border-nls-${color}/20`
+												)= tech
 									if item.href
 										p.text-sm.mt-4.underline(class="sm:text-base hover:text-nls-black dark:hover:text-nls-white")= item.href
 					else if item.type === "brand"
@@ -63,14 +70,14 @@ mixin Carousel(items, options)
 		script.
 			document.addEventListener("DOMContentLoaded", () => {
 				setInterval(
-					() => {
-						const track = document.querySelector(`##{id} .carousel-track`);
-						if (track.scrollLeft + track.clientWidth >= track.scrollWidth) {
-							track.scrollTo({left: 0, behavior: "smooth"});
-						} else {
-							carouselNext("#{id}");
-						}
-					},
-					#{autoScroll},
+						() => {
+							const track = document.querySelector(`##{id} .carousel-track`);
+							if (track.scrollLeft + track.clientWidth >= track.scrollWidth) {
+								track.scrollTo({left: 0, behavior: "smooth"});
+							} else {
+								carouselNext("#{id}");
+							}
+						},
+						#{autoScroll},
 				);
-			});
+			});

src/components/Portfolio.pug

@@ -10,4 +10,4 @@ section#portfolio
 			p.text-center.pb-12
 				| Free and Open Source Software, Customer Projects and other useful Applications
 		.max-w-screen.mx-auto.pb-32(class="sm:max-w-80vw")
-			+Carousel(portfolio, {id: "portfolio-carousel", color: "black", category: "portfolio", slideClasses: "w-full", autoScroll: false})
+			+Carousel(portfolio, {id: "portfolio-carousel", color: "black", category: "portfolio", slideClasses: "w-full", autoScroll: false, color: "violet"})