update portfolio items; add new projects with descriptions and technologies, enhance carousel item layout for better presentation, and adjust collapsible component styles for improved interaction

.pugrc

@@ -83,10 +83,28 @@
 			}
 		],
 		"portfolio": [
+			{
+				"type": "image",
+				"src": "./src/assets/portfolio/mandala.png",
+				"href": "https://nextlevelshit.github.io/web-engineering-mandala/",
+				"technologies": ["D3.js", "HTML", "CSS3"],
+				"alt": "Screenshot of Web Engineering Mandala",
+				"caption": "Web Engineering Mandala",
+				"description": "A comprehensive guide to modern web development, showcasing the principles of 'HTML over JavaScript'. This project emphasizes the importance of semantic HTML and CSS in building accessible and performant web applications."
+			},
+			{
+				"type": "image",
+				"src": "./src/assets/portfolio/html-fundamentals.png",
+				"href": "https://nextlevelshit.github.io/html-over-js/",
+				"technologies": ["Vanilla JavaScript", "HTML", "CSS3"],
+				"alt": "Screenshot of HTML Fundamentals",
+				"caption": "HTML Fundamentals",
+				"description": "An educational resource that emphasizes the importance of HTML in web development. This project serves as a foundation for understanding web standards and best practices, promoting the use of semantic HTML and CSS over JavaScript-heavy solutions."
+			},
 			{
 				"type": "image",
 				"src": "./src/assets/portfolio/codecrispies.png",
-				"alt": "",
+				"alt": "Screenshot of Landingpage of CODE CRISPIES Web Application",
 				"href": "https://codecrispi.es",
 				"technologies": ["Vanilla JavaScript", "HTML", "CSS3"],
 				"caption": "CODE CRISPIES",

src/components/Carousel.pug

@@ -50,7 +50,7 @@ mixin Carousel(items, options)
 								loading=index < 3 ? "eager" : "lazy"
 							)
 							if item.caption
-								.p-4(class="sm:static sm:self-center")
+								.p-4(class="sm:static sm:self-center sm:w-1/2")
 									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

src/components/Collapsable.pug

@@ -6,7 +6,7 @@ mixin Collapsable(name, data, open)
 
 	details.mb-4(open=isExpanded, name=name)
 		summary(
-			class=`${color} rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg focus:outline-none focus:z-10 focus:ring-4 focus:no-underline`,
+			class=`${color} rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg focus:outline-none focus:z-10 focus:ring-2 focus:no-underline`,
 			onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
 		)= data.summary
 		.text-slate-600(class="dark:text-stone-300")