update layout; adjust component order and enhance spacing in various sections

index.pug

@@ -6,11 +6,11 @@ html.scroll-smooth(lang=head.lang)
 		main.flex.flex-col
 			article(itemscope, itemtype="http://schema.org/Person")
 				include src/components/Landingpage
-				include src/components/Brands
 				include src/components/Academia
-				include src/components/Portfolio
 				include src/components/Professional
+				include src/components/Portfolio
 				include src/components/Footer
+				include src/components/Brands
 
 		script.
 			const footerEl = document.querySelector("#footer");

src/components/Academia.pug

@@ -24,18 +24,19 @@ section#academia
 				+Collapsable("academia", academia.expertise.tracking)
 			// endregion
 
-		+Container
-			// region Computer Science
-			+Title("h2") !{academia.computerScience.title}
-			.mb-12
-				.mb-8.max-w-prose.prose(class="lg:prose-xl")
-					each paragraph, i in academia.computerScience.intro
-						- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest sm:text-md text-sm tracking-tight w-5/6";
-						p(class=`text-slate-700 dark:text-slate-300 ${additionalClasses}`) !{paragraph}
-			// endregion
+		.mt-48
+			+Container
+				// region Computer Science
+				+Title("h2") !{academia.computerScience.title}
+				.mb-12
+					.mb-8.max-w-prose.prose(class="lg:prose-xl")
+						each paragraph, i in academia.computerScience.intro
+							- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest sm:text-md text-sm tracking-tight w-5/6";
+							p(class=`text-slate-700 dark:text-slate-300 ${additionalClasses}`) !{paragraph}
+				// endregion
 
-			// region Academic Courses
-			.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
-				each institution in academia.institutions
-					+Collapsable("academia", institution)
-			// endregion
+				// region Academic Courses
+				.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
+					each institution in academia.institutions
+						+Collapsable("academia", institution)
+				// endregion

src/components/Carousel.pug

@@ -53,7 +53,7 @@ mixin Carousel(items, options)
 									if item.href
 										a.text-sm.mt-4.underline(class="sm:text-base 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
+						.aspect-square.flex.items-center.justify-center.mx-20.mb-4
 							img.max-w-full.max-h-full.object-contain.p-4(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy")
 	if autoScroll
 		script.

src/components/Footer.pug

@@ -21,7 +21,7 @@ mixin Svg
 		block
 
 footer#footer
-	.p-8.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:p-20 min-h-[120vh]")
+	.p-8.bg-white.text-nls-black.pt-48(class="dark:bg-nls-black dark:text-white sm:p-20")
 		+Container
 			// region Contact
 			h2.text-5xl.mb-4 #{footer.title}

src/components/Portfolio.pug

@@ -1,5 +1,6 @@
 include Carousel
 include Container
+include Title
 
 section#portfolio
 	.p-8.bg-nls-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:py-2")
@@ -8,5 +9,5 @@ section#portfolio
 				| Portfolio
 			p.text-center.pb-12
 				| Free and Open Source Software, Customer Projects and other useful Applications
-		.max-w-screen.mx-auto(class="sm:max-w-80vw")
+		.max-w-screen.mx-auto.pb-32(class="sm:max-w-80vw")
 			+Carousel([...portfolio, ...portfolio, ...portfolio], {id: "portfolio-carousel", color: "black", category: "portfolio", slideClasses: "w-full", autoScroll: false})