update fonts

src/components/Academia.pug

@@ -4,7 +4,7 @@ section#academia.bg-nls-black.text-white
 	.p-8(class="sm:p-20 min-h-[120vh]")
 		.max-w-screen-md.mx-auto
 			// region Computer Science
-			h2.text-2xl.mb-4= academia.sectionTitles.computerScience
+			h2.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")= academia.sectionTitles.computerScience
 			.mb-12
 				.mb-8.max-w-prose.prose(class="lg:prose-xl")
 					each paragraph in academia.intro
@@ -33,7 +33,7 @@ section#academia.bg-nls-black.text-white
 			// endregion
 
 			// region Skills
-			h2.text-2xl.mb-4= academia.sectionTitles.expertise
+			h2.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")= academia.sectionTitles.expertise
 			p.mb-8.max-w-prose.prose(class="lg:prose-xl")
 				| #{academia.expertise.intro}
 			// endregion

src/components/Collapsable.pug

@@ -14,8 +14,8 @@ mixin Collapsable(data, open)
 
 	div
 		details.mb-4(open=isExpanded)
-			summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer(
-				class=`text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
+			summary.rounded-sm.transition.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer(
+				class=`sm:text-lg text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
 				onclick=`umami.track('collapsable clicked', { category: '${category}' })`
 			)= data.summary
 			ul.list-disc.list-inside.text-gray-400
@@ -35,6 +35,6 @@ mixin Collapsable(data, open)
 									onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}' })`
 								)= link.text
 								if index < item.links.length - 1
-									| ,
+									| ,&nbsp;
 						if item.suffix
-							= item.suffix
+							= ` ${item.suffix}`

src/components/Footer.pug

@@ -14,10 +14,9 @@ footer#footer.bg-nls-black.text-white
 	.p-8(class="sm:p-20 min-h-[120vh]")
 		.max-w-screen-md.mx-auto
 			// region Contact
-			h2.text-2xl.mb-4 #{footer.title}
-			p.mb-4.max-w-prose #{footer.content}
-			.max-w-prose
-				.flex.items-center.space-x-6.mb-8
+			h2.text-5xl.mb-4 #{footer.title}
+			p.mb-8.max-w-prose #{footer.content}
+				.flex.flex-col.items-center.space-y-12.mb-8(class="sm:flex-row sm:space-x-6 sm:space-y-0")
 					+Link(footer.githubUrl, 'github', '_blank', 'noopener noreferrer')
 						+Svg
 							path(

src/components/Head.pug

@@ -35,7 +35,7 @@ head
 			"@context": "https://schema.org",
 			"@type": "Person",
 			"name": "Michael W. Czechowski",
-			"jobTitle": "Digital Transformation & Software Architecture",
+			"jobTitle": "Web Technologies & Software Architecture",
 			"url": "https://dailysh.it",
 			"sameAs": ["https://github.com/nextlevelshit", "https://www.linkedin.com/in/michael-werner-czechowski/", "https://www.xing.com/profile/Michael_Czechowski"]
 		}
@@ -46,7 +46,20 @@ head
 	script.
 		tailwind.config = {
 			theme: {
+				fontFamily: {
+					mono: ["Roboto Mono", "monospace"],
+					serif: ["Libre Baskerville", "serif"],
+					sans: ["Afacad Flux", "sans-serif"],
+				},
 				extend: {
+					fontSize: {
+						sm: "1rem",
+						base: "1.25rem",
+						xl: "1.563rem",
+						"2xl": "1.953rem",
+						"3xl": "2.441rem",
+						"4xl": "3.052rem",
+					},
 					colors: {
 						"nls-green": "#79C28D",
 						"nls-blue": "#5A99C3",
@@ -86,4 +99,11 @@ head
 		}
 	// endregion
 
+	link(rel="preconnect", href="https://fonts.googleapis.com")
+	link(rel="preconnect", href="https://fonts.gstatic.com", crossorigin)
+	link(
+		rel="stylesheet",
+		href="https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
+	)
+
 	script(async, defer, data-website-id=head.umamiId, src=head.umamiSrc)

src/components/Professional.pug

@@ -1,7 +1,7 @@
 section#professional.bg-nls-black.text-white
 	.p-8(class="sm:p-20 min-h-[120vh]")
 		.max-w-screen-md.mx-auto
-			h2.text-2xl.mb-4 #{professional.title}
+			h2.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")= professional.title
 			p.mb-8.max-w-prose.prose(class="lg:prose-xl")
 				| #{professional.description}
 			ul.list-disc.list-inside.mb-8

src/components/Title.pug

@@ -3,12 +3,12 @@ header.bg-nls-black.text-white
 		.max-w-3xl.mb-8(class="w-4/5")
 			object.w-full(data=title.logoSvg, type="image/svg+xml")
 		.text-center.max-w-3xl.center.py-8
-			p.text-lg.opacity-80(class="sm:text-2xl", itemprop="name") #{title.name}
-			p.text-md.opacity-60(class="sm:text-xl", itemprop="jobTitle")
+			h2.text-xl.opacity-80(class="sm:text-2xl", itemprop="name")= title.name
+			h1.text-md.opacity-60(class="sm:text-lg", itemprop="jobTitle")
 				| #{title.jobTitle[0]}
 				wbr
 				| & #{title.jobTitle[1]}
-			h1.text-lg.mt-8.opacity-90.group(class="sm:text-5xl", itemprop="email")
+			h2.text-2xl.mt-8.opacity-90.group(class="sm:text-5xl sm:mt-16", itemprop="email")
 				a(
 					onclick="umami.track('email clicked', { position: 'title' })",
 					onmouseover="umami.track('email hovered', { position: 'title' })",