remove email event on landingpage,

fix missing links in academia technologies,
change site order,
improve readability

index.pug

@@ -6,8 +6,8 @@ html.scroll-smooth(lang=lang)
 		main.flex.flex-col
 			article(itemscope, itemtype="http://schema.org/Person")
 				include src/components/Landingpage
-				include src/components/Professional
 				include src/components/Academia
+				include src/components/Professional
 				include src/components/Footer
 
 		script.
@@ -31,3 +31,13 @@ html.scroll-smooth(lang=lang)
 					}
 				});
 			sections.forEach((section) => sectionObserver(section.id).observe(section));
+
+			let yearsOfAge = 0;
+			let yearsOfDeveloping = 0;
+
+			setInterval(() => {
+				yearsOfAge = (new Date().getTime() - new Date("1988-10-07").getTime()) / 1000 / 60 / 60 / 24 / 365.25;
+				yearsOfDeveloping = (new Date().getTime() - new Date("2005-07-07").getTime()) / 1000 / 60 / 60 / 24 / 365.25;
+				document.getElementById("yearsOfAge").innerText = yearsOfAge.toFixed(6);
+				document.getElementById("yearsOfDeveloping").innerText = yearsOfDeveloping.toFixed(6);
+			}, 100);

src/components/Academia.pug

@@ -5,42 +5,12 @@ include Container
 section#academia.bg-nls-black.text-white
 	.p-8(class="sm:p-20 min-h-[120vh]")
 		+Container
-			// region Computer Science
-			+Title("h2")= academia.sectionTitles.computerScience
-			.mb-12
-				.mb-8.max-w-prose.prose(class="lg:prose-xl")
-					each paragraph, i in academia.intro
-						- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-tight sm:text-xl text-lg";
-						p(class=additionalClasses)= paragraph
-			// endregion
-
-			// region Courses
-			.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
-				div
-					details.mb-4
-						summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
-							class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
-							onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
-						)= academia.courseInstitutions.dhbw
-						ul.list-disc.list-inside
-							li= academia.courses.dhbw[0]
-				div
-					details.mb-4
-						summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
-							class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
-							onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
-						)= academia.courseInstitutions.lfh
-						ul.list-disc.list-inside
-							each course in academia.courses.lfh
-								li= course
-			// endregion
-
 			// region Skills
 			+Title("h2")= academia.sectionTitles.expertise
-			.mb-8.max-w-prose.prose(class="lg:prose-xl")
+			.mb-8.max-w-prose
 				each paragraph, i in academia.expertise.intro
-					- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-tight sm:text-xl text-md";
+					- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest sm:text-md text-sm tracking-tight w-5/6 text-white";
-					p(class=additionalClasses)= paragraph
+					p.text-slate-200(class=`hover:text-white transition ${additionalClasses}`) !{paragraph}
 			// endregion
 
 			// region Expertise
@@ -53,3 +23,35 @@ section#academia.bg-nls-black.text-white
 				+Collapsable(academia.expertise.bestPractices)
 				+Collapsable(academia.expertise.tracking)
 			// endregion
+
+		+Container
+			// region Computer Science
+			+Title("h2")= academia.sectionTitles.computerScience
+			.mb-12
+				.mb-8.max-w-prose.prose(class="lg:prose-xl")
+					each paragraph, i in academia.intro
+						- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest sm:text-md text-sm tracking-tight w-5/6 text-white";
+						p.text-slate-200(class=`hover:text-white transition ${additionalClasses}`) !{paragraph}
+			// endregion
+
+			// region Courses
+			.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
+				div
+					details.mb-4
+						summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
+							class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
+							onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
+						)= academia.courseInstitutions.dhbw
+						ul.list-disc.list-inside
+							each course in academia.courses.dhbw
+								li= course
+				div
+					details.mb-4
+						summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
+							class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
+							onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
+						)= academia.courseInstitutions.lfh
+						ul.list-disc.list-inside
+							each course in academia.courses.lfh
+								li= course
+			// endregion

src/components/Landingpage.pug

@@ -1,47 +1,33 @@
 header.bg-nls-black.text-white
 	.teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20")
 		.max-w-3xl.group.mb-8.relative(class="w-4/5 min-h-[90vh]")
-			a.block(
+			img.absolute.z-10.left-0.right-0.mx-auto.opacity-0.transition(
-				onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })",
+				class="top-[30vh] max-h-[37vh] group-hover:opacity-100 group-hover:scale-150",
-				onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })",
+				src=landingpage.emojiSvg
-				href=footer.emailLink,
-				rel="noopener noreferrer",
-				itemprop="email"
 			)
-				img.absolute.z-10.left-0.right-0.mx-auto.opacity-0.transition(
-					class="top-[30vh] max-h-[37vh] group-hover:opacity-100 group-hover:scale-150",
-					src=landingpage.emojiSvg
-				)
 
 			img.absolute.z-0.left-0.right-0.mx-auto.transition(class="h-[54vh] group-hover:opacity-60 group-hover:scale-50", src=landingpage.logoSvg)
 
-			a.z-60.block(
+			.absolute.bottom-0.left-0.right-0.z-40
-				onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })",
+				.bottom-0.text-center.max-w-3xl.center.py-8
-				onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })",
+					h2.text-xl.font-semibold.opacity-80.transition(class="sm:text-2xl group-hover:opacity-100", itemprop="name")= landingpage.name
-				href=footer.emailLink,
+					h1.text-md.opacity-80.transition(class="sm:text-lg group-hover:opacity-100", itemprop="jobTitle")
-				rel="noopener noreferrer",
+						| #{landingpage.jobTitle[0]}
-				itemprop="email"
+						|
-			)
+						wbr
-				.absolute.bottom-0.left-0.right-0.z-40
+						|
-					.bottom-0.text-center.max-w-3xl.center.py-8
+						| & #{landingpage.jobTitle[1]}
-						h2.text-xl.font-semibold.opacity-80.transition(class="sm:text-2xl group-hover:opacity-100", itemprop="name")= landingpage.name
+						h2.text-2xl.mt-8(class="sm:text-5xl sm:mt-16", itemprop="email")
-						h1.text-md.opacity-80.transition(class="sm:text-lg group-hover:opacity-100", itemprop="jobTitle")
+							.whitespace-nowrap.items-center.transition(class="group-hover:opacity-100")
-							| #{landingpage.jobTitle[0]}
+								span(class="group-hover:opacity-100") #{landingpage.email[0]}
-							|
+								span.opacity-20 –
-							wbr
+								span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[1]}
-							|
+								span.opacity-20 –
-							| & #{landingpage.jobTitle[1]}
+								span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[2]}
-						a.z-60.block(
+	.hidden
-							onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })",
+		| Years of age:
-							onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })",
+		span#yearsOfAge
-							href=footer.emailLink,
+		|
-							rel="noopener noreferrer",
+		| |
-							itemprop="email"
+		| Years of developing:
-						)
+		span#yearsOfDeveloping
-							h2.text-2xl.mt-8(class="sm:text-5xl sm:mt-16", itemprop="email")
-								.whitespace-nowrap.items-center.transition(class="group-hover:opacity-100")
-									span(class="group-hover:opacity-100") #{landingpage.email[0]}
-									span.opacity-20 –
-									span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[1]}
-									span.opacity-20 –
-									span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[2]}

src/components/Professional.pug

@@ -24,13 +24,11 @@ section#professional.bg-nls-black.text-white
 						| #{item.text}
 				p.mb-8.mt-12.max-w-prose.prose(class="lg:prose-xl")
 					| #{professional.principlesIntro}
-			ul.list-disc.list-inside.mb-8
+			.list-disc.list-inside.mb-8
 				each person, i in professional.principlesPeople
-					// - const data = {"color":"orange","category":"tracking","summary":"Analytics & Tracking","items":[{"links":[{"text":"Umami","url":"https://umami.is/","description":"Simple, fast, privacy-focused alternative to Google Analytics","label":"Umami"}]},{"links":[{"text":"Google Analytics","url":"https://developers.google.com/analytics/","description":"Web analytics service offered by Google","label":"Google"}]},{"links":[{"text":"Amplitude","url":"https://amplitude.com/","description":"Product analytics platform","label":"Amplitude"}]},{"links":[{"text":"Hotjar","url":"https://www.hotjar.com/","description":"Behavior analytics and user feedback platform","label":"Hotjar"}]}]}
 					- const data = {summary: `${person.name} — ${person.concept}`, color: "white", category: "professional"};
 					- const isOpen = i === 0;
-					//li #{person.name} – #{person.concept} #{isOpen(i)}
 					+Collapsable(data, isOpen)
 						each paragraph, j in person.paragraphs
-							- const additionalClasses = j !== 0 ? "indent-3" : "";
+							- const additionalClasses = j !== 0 ? "indent-3" : "mt-4";
 							p.pl-4(class=`sm:w-5/6 ${additionalClasses}`)= paragraph

src/components/Title.pug

@@ -1,11 +1,11 @@
 mixin Title(tag)
 	case tag
 		when "h2"
-			h2.font-bold.font-serif.text-xl.mb-2(class="sm:text-2xl w-5/6")
+			h2.font-bold.font-serif.text-xl.mb-2(class="sm:text-2xl w-3/4")
 				block
 		when "h3"
-			h3.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")
+			h3.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-3/4")
 				block
 		default
-			h1.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")
+			h1.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-3/4")
 				block