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

.pugrc

@@ -88,6 +88,7 @@
 				"src": "./src/assets/portfolio/codecrispies.png",
 				"alt": "",
 				"href": "https://codecrispi.es",
+				"technologies": ["Vanilla JavaScript", "HTML", "CSS3"],
 				"caption": "CODE CRISPIES",
 				"description": "A self-learning platform for coding, designed to enhance collaboration and learning among developers especially for CSS, TailwindCSS and usage of native HTML elements. It features a unique approach to coding education, focusing on practical skills and community engagement."
 			},
@@ -96,6 +97,7 @@
 				"src": "./src/assets/portfolio/sarahweisman.png",
 				"alt": "",
 				"href": "https://sarahesser.de/",
+				"technologies": ["Gatsby", "docker", "react"],
 				"caption": "Sarah Weisman",
 				"description": "A personal website showcasing the artistic works of Sarah Weisman, featuring her sculptures and artistic journey."
 			},
@@ -104,6 +106,7 @@
 				"src": "./src/assets/portfolio/muellerprints.png",
 				"alt": "",
 				"href": "https://muellerprints-paperwork.com/",
+				"technologies": ["docker", "LaTeX", "Python", "VueJS", "TypeScript", "Strapi Headless-CMS", "Payment Integration"],
 				"caption": "MUELLERPRINTS - Paperwork",
 				"description": "A creative platform for MUELLERPRINTS, focusing on unique paper-based artworks and prints, blending traditional craftsmanship with modern design."
 			},
@@ -112,6 +115,7 @@
 				"src": "./src/assets/portfolio/thfradio.png",
 				"alt": "",
 				"href": "https://www.thfradio.de/en",
+				"technologies": ["Static Site Generation (SSG)", "Gatsby", "Document-based System", "HTML5", "CSS3"],
 				"caption": "THF Radio Berlin",
 				"description": "A radio station based in Berlin, offering a diverse range of music and cultural programming, with a focus on community engagement and local artists."
 			}

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"})