update portfolio section; enhance project descriptions and improve carousel layout

.pugrc

@@ -85,31 +85,35 @@
 		"portfolio": [
 			{
 				"type": "image",
-				"src": "./src/assets/screenshot-codecrispies.png",
+				"src": "./src/assets/portfolio/codecrispies.png",
 				"alt": "",
 				"href": "https://codecrispi.es",
-				"caption": "Code Crispi.es"
+				"caption": "Code Crispi.es",
+				"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."
 			},
 			{
 				"type": "image",
-				"src": "./src/assets/screenshot-codecrispies.png",
+				"src": "./src/assets/portfolio/sarahweisman.png",
 				"alt": "",
-				"href": "https://codecrispi.es",
-				"caption": "Code Crispi.es"
+				"href": "https://sarahesser.de/",
+				"caption": "Sarah Weisman - Sculptress",
+				"description": "A personal website showcasing the artistic works of Sarah Weisman, featuring her sculptures and artistic journey."
 			},
 			{
 				"type": "image",
-				"src": "./src/assets/screenshot-codecrispies.png",
+				"src": "./src/assets/portfolio/muellerprints.png",
 				"alt": "",
-				"href": "https://codecrispi.es",
-				"caption": "Code Crispi.es"
+				"href": "https://muellerprints-paperwork.com/",
+				"caption": "MUELLERPRINTS - Paperwork",
+				"description": "A creative platform for MUELLERPRINTS, focusing on unique paper-based artworks and prints, blending traditional craftsmanship with modern design."
 			},
 			{
 				"type": "image",
-				"src": "./src/assets/screenshot-codecrispies.png",
+				"src": "./src/assets/portfolio/thfradio.png",
 				"alt": "",
-				"href": "https://codecrispi.es",
-				"caption": "Code Crispi.es"
+				"href": "https://www.thfradio.de/en",
+				"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."
 			}
 		],
 		"intro": {

src/components/Carousel.pug

@@ -36,16 +36,20 @@ mixin Carousel(items, options)
 
 				.carousel-slide.flex-none.w-full.relative(class=slideClasses, style="scroll-snap-align: start")
 					if item.type === "image"
-						.flex.flex-col.aspect-video.relative.overflow-hidden.rounded-lg.mx-2.mb-4(class="sm:flex-row sm:gap-6")
-							img.w-full.h-full.object-cover.transition-transform.rounded-lg.duration-300(
-								class="hover:scale-105 sm:w-1/2",
+						.flex.flex-col.relative.overflow-hidden.rounded-lg.mx-6.mb-4(class="sm:flex-row sm:gap-6")
+							img.w-full.h-full.object-contain.transition-transform.rounded-lg.duration-300(
+								class="sm:w-1/2",
 								src=item.src,
 								alt=item.alt,
 								loading=index < 3 ? "eager" : "lazy"
 							)
 							if item.caption
-								.absolute.bottom-0.left-0.right-0.bg-gradient-to-t.p-4(class="sm:static sm:bg-gradient-unset from-black/70 sm:text-nls-white dark:sm:text-nls-black")
+								.absolute.bottom-0.left-0.right-0.bg-gradient-to-t.p-4(class="sm:static sm:bg-gradient-unset from-black/70 sm:text-nls-white dark:sm:text-nls-black sm:self-center")
 									p.text-white.text-xl.font-large= item.caption
+									if item.description
+										p.text-white.text-base.mt-2(class="sm:w-2/3")= item.description
+									if item.href
+										a.text-white.text-base.mt-4(class="underline hover:text-nls-black dark:hover:text-nls-white", href=item.href, target="_blank", rel="noopener noreferrer")= item.href
 					else if item.type === "brand"
 						.aspect-square.flex.items-center.justify-center.mx-2.mb-4
 							img.max-w-full.max-h-full.object-contain.p-4(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy")

src/components/Landingpage.pug

@@ -1,7 +1,7 @@
 header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black")
 	.teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20")
 		.max-w-3xl.mb-8.relative(class="w-4/5 min-h-[90vh]")
-			.peer.absolute.bottom-0.left-0.right-0.z-40.text-center.max-w-3xl.center.py-8
+			.peer.absolute.bottom-0.left-0.right-0.z-40.text-center.max-w-3xl.center.py-8.pointer-events-none
 				h2.tracking-widest.text-xl.font-semibold.opacity-100.transition(class="sm:text-2xl peer-hover:opacity-100", itemprop="name")= landingpage.name
 
 				h1.tracking-normal.text-md.mb-16.opacity-95.transition(class="sm:text-lg peer-hover:opacity-100", itemprop="jobTitle")