fix a11y issues and format code

.pugrc

@@ -1,5 +1,6 @@
 {
 	"locals": {
+		"lang": "en",
 		"head": {
 			"author": "Michael W. Czechowski",
 			"charset": "UTF-8",

package.json

@@ -7,7 +7,7 @@
 		"prestart": "rm -rf dist .parcel-cache .cache",
 		"start": "parcel --public-url / index.pug",
 		"prebuild": "rm -rf dist .parcel-cache .cache",
-		"build": "parcel build index.pug --no-minify",
+		"build": "parcel build index.pug",
 		"format": "npx prettier --write src/**/*.pug index.pug package.json && npx prettier --write --parser json .pugrc",
 		"deploy": "make deploy"
 	},

src/components/Academia.pug

@@ -6,7 +6,7 @@ section#academia
 	.p-8.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:p-20 min-h-[120vh]")
 		+Container
 			// region Skills
-			+Title("h2") !{academia.expertise.title}
+			+Title("h2")!{academia.expertise.title}
 			.mb-8.max-w-prose
 				each paragraph, i in academia.expertise.intro
 					- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest sm:text-md text-sm tracking-tight w-5/6";
@@ -26,7 +26,7 @@ section#academia
 
 		+Container
 			// region Computer Science
-			+Title("h2") !{academia.computerScience.title}
+			+Title("h2")!{academia.computerScience.title}
 			.mb-12
 				.mb-8.max-w-prose.prose(class="lg:prose-xl")
 					each paragraph, i in academia.computerScience.intro

src/components/Carousel.pug

@@ -1,7 +1,7 @@
 mixin Carousel(items, options)
-    - const id = options.id || 'carousel';
+	- const id = options.id || "carousel";
-    - const color = options.color || 'orange';
+	- const color = options.color || "orange";
-    - const category = options.category || 'portfolio';
+	- const category = options.category || "portfolio";
 
 	.carousel-container.relative.w-full.overflow-hidden(id=id)
 		//- Navigation buttons
@@ -22,36 +22,17 @@ mixin Carousel(items, options)
 				path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M9 5l7 7-7 7")
 
 		//- Carousel track
-        .carousel-track.flex.overflow-x-auto.scroll-smooth.scrollbar-hide(
+		.carousel-track.flex.overflow-x-auto.scroll-smooth.scrollbar-hide(style="scroll-snap-type: x mandatory", role="region", aria-label="Image carousel")
-            style="scroll-snap-type: x mandatory;",
-            role="region",
-            aria-label="Image carousel"
-        )
 			each item, index in items
-                - const href = item?.href || "#"
+				- const href = item?.href || "#";
 
-                .carousel-slide.flex-none.w-full.relative(
+				.carousel-slide.flex-none.w-full.relative(class="sm:w-1/2 lg:w-1/3 xl:w-1/4", style="scroll-snap-align: start")
-                    class="sm:w-1/2 lg:w-1/3 xl:w-1/4",
+					if item.type === "image"
-                    style="scroll-snap-align: start;"
+						.aspect-video.relative.overflow-hidden.rounded-lg.mx-2.mb-4
-                )
+							img.w-full.h-full.object-cover.transition-transform.duration-300(class="hover:scale-105", src=item.src, alt=item.alt, loading=index < 3 ? "eager" : "lazy")
-                    if item.type === 'image'
-                        .aspect-video.relative.overflow-hidden.rounded-lg.mx-2.mb-4(
-                        )
-                            img.w-full.h-full.object-cover.transition-transform.duration-300(
-                                class="hover:scale-105",
-                                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(
+								.absolute.bottom-0.left-0.right-0.bg-gradient-to-t.p-4(class="from-black/70")
-                                    class="from-black/70"
-                                )
 									p.text-white.text-sm.font-medium= item.caption
-                    else if item.type === 'brand'
+					else if item.type === "brand"
 						.aspect-square.flex.items-center.justify-center.bg-white.rounded-lg.mx-2.mb-4.shadow-sm(class="dark:bg-gray-800")
-                            img.max-w-full.max-h-full.object-contain.p-4(
+							img.max-w-full.max-h-full.object-contain.p-4(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy")
-                                src=item.logo,
-                                alt=item.name,
-                                loading=index < 6 ? "eager" : "lazy"
-                            )

src/components/Collapsable.pug

@@ -9,8 +9,9 @@ mixin Collapsable(name, data, open)
 			class=`rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg text-nls-${color} dark:text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black dark:focus:text-white	 focus:no-underline`,
 			onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
 		)= data.summary
-		ul.list-disc.list-inside.text-slate-600(class="dark:text-stone-300")
+		.text-slate-600(class="dark:text-stone-300")
 			if data.items
+				ul.list-disc.list-inside
 					each item in data.items
 						li
 							if item.text

src/components/Footer.pug

@@ -5,7 +5,7 @@ mixin Link(href, label, target, rel)
 	- const eventCategory = "footer";
 	- const onclick = `umami.track('${eventName}', { category: 'icons', position: 'footer', label: '${label}', visitDuration: getVisitDuration() })`;
 
-	a.transition-colors.text-nls-black(href=href, class="dark:text-white hover:text-amber-300", target=target, rel=rel, onclick=onclick)
+	a.transition-colors.text-nls-black(href=href, class="dark:text-white hover:text-amber-300", target=target, rel=rel, onclick=onclick, aria-label=label, title=label)
 		block
 
 mixin Svg
@@ -18,8 +18,8 @@ footer#footer
 			// region Contact
 			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 gap-8 sm:gap-2")
+				.flex.flex-col.items-center.space-y-12.mb-8.gap-8(class="sm:flex-row sm:space-x-6 sm:space-y-0 sm:gap-2")
-					+Link(footer.githubUrl, "github", "_blank", "noopener noreferrer")
+					+Link(footer.githubUrl, "Visit GitHub profile", "_blank", "noopener noreferrer")
 						+Svg
 							path(
 								clip-rule="evenodd",
@@ -28,7 +28,7 @@ footer#footer
 								style="fill: currentColor"
 							)
 
-					+Link(footer.linkedinUrl, "linkedin", "_blank", "noopener noreferrer")
+					+Link(footer.linkedinUrl, "Visit LinkedIn profile", "_blank", "noopener noreferrer")
 						+Svg
 							path(
 								clip-rule="evenodd",
@@ -37,7 +37,7 @@ footer#footer
 								style="fill: currentColor"
 							)
 
-					+Link(footer.xingUrl, "xing", "_blank", "noopener noreferrer")
+					+Link(footer.xingUrl, "Visit Xing profile", "_blank", "noopener noreferrer")
 						+Svg
 							path(
 								d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z",
@@ -48,11 +48,13 @@ footer#footer
 						href=footer.emailLink,
 						class="dark:text-white hover:text-amber-300",
 						rel="noopener noreferrer",
+						title=footer.emailText,
+						aria-label=footer.emailText,
 						onclick="umami.track('email clicked', { position: 'footer', visitDuration: getVisitDuration() })"
 					) #{footer.emailText}
 
-					+Link("./src/assets/CV_2024_Michael-Werner-Czechowski_de.pdf", "CV", "_blank", "noopener noreferrer")
+					+Link("./src/assets/CV_2024_Michael-Werner-Czechowski_de.pdf", "Download CV (PDF)", "_blank", "noopener noreferrer")
 						| CV
 
-					+Link("https://git.dailysh.it/nextlevelshit/dailysh.it", "gitea", "_blank", "noopener noreferrer")= footer.gitea
+					+Link("https://git.dailysh.it/nextlevelshit/dailysh.it", "Visit git repository (gitea)", "_blank", "noopener noreferrer")= footer.gitea
 			// endregion

src/components/Landingpage.pug

@@ -11,7 +11,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 					|
 					| & #{landingpage.jobTitle[1]}
 
-	canvas#aurora-canvas.absolute.z-0.left-0.right-0.bottom-0.top-0.mx-auto.transition(class="h-[100vh] w-full")
+	canvas#aurora-canvas.absolute.z-0.left-0.right-0.bottom-0.top-0.mx-auto.transition.w-full(class="h-[100vh]")
 
 	script(src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js")
 
@@ -43,14 +43,14 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 					offset: 5, // General offset between splines
 					startOffset: 0.0, // Y-offset at spline start
 					endOffset: 0.0, // Y-offset at spline end
-					offsetTransition: 'smooth',      // 'linear', 'smooth', 'sine'
+					offsetTransition: "smooth", // 'linear', 'smooth', 'sine'
 					canvasExtension: 1.0, // How far beyond canvas borders (-1.0 means 50% extra on each side)
 
 					// Wave complexity
 					waveFrequencies: [1, 2, 3, 5, 8, 13], // Multiple harmonics
 					waveAmplitudes: [0.4, 0.25, 0.15, 0.1, 0.02, 0.001], // Corresponding amplitudes
 
-					...options
+					...options,
 				};
 
 				this.scene = new THREE.Scene();
@@ -58,7 +58,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 				this.renderer = new THREE.WebGLRenderer({
 					canvas: canvas,
 					alpha: true,
-					antialias: true
+					antialias: true,
 				});
 
 				this.time = 0;
@@ -85,8 +85,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 						y: (Math.random() - 0.5) * 2,
 						phase: Math.random() * Math.PI * 2,
 						radius: 0.2 + Math.random() * 0.3,
-						speed: this.options.nodeSpeed.min +
+						speed: this.options.nodeSpeed.min + Math.random() * (this.options.nodeSpeed.max - this.options.nodeSpeed.min),
-								Math.random() * (this.options.nodeSpeed.max - this.options.nodeSpeed.min)
 					});
 				}
 			}
@@ -96,11 +95,11 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 				const {startOffset, endOffset, offsetTransition} = this.options;
 
 				switch (offsetTransition) {
-					case 'linear':
+					case "linear":
 						return startOffset + (endOffset - startOffset) * t;
-					case 'sine':
+					case "sine":
 						return startOffset + (endOffset - startOffset) * Math.sin(t * Math.PI * 0.5);
-					case 'smooth':
+					case "smooth":
 					default:
 						// Smooth hermite interpolation
 						const t2 = t * t;
@@ -129,7 +128,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 						group,
 						splines,
 						baseOffset: groupIndex * 0.6,
-						phase: groupIndex * 0.8
+						phase: groupIndex * 0.8,
 					});
 					this.scene.add(group);
 				}
@@ -143,25 +142,19 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 				const normalizedGroup = groupIndex / (this.options.groupCount - 1);
 				const normalizedSpline = splineIndex / (this.options.splineCount - 1);
 
-				const hue = this.options.hueBase +
+				const hue = this.options.hueBase + normalizedGroup * this.options.hueVariation + Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
-						normalizedGroup * this.options.hueVariation +
-						Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
 
-				const saturation = this.options.saturation.min +
+				const saturation = this.options.saturation.min + (this.options.saturation.max - this.options.saturation.min) * (1 - Math.abs(offset) / this.options.spread);
-						(this.options.saturation.max - this.options.saturation.min) *
-						(1 - Math.abs(offset) / this.options.spread);
 
-				const lightness = this.options.lightness.min +
+				const lightness = this.options.lightness.min + (this.options.lightness.max - this.options.lightness.min) * (1 - (Math.abs(offset) / this.options.spread) * 0.6);
-						(this.options.lightness.max - this.options.lightness.min) *
-						(1 - Math.abs(offset) / this.options.spread * 0.6);
 
 				const material = new THREE.LineBasicMaterial({
 					color: new THREE.Color().setHSL(hue, saturation, lightness),
 					transparent: true,
 					// Add shading for depth
-					opacity: this.options.opacity / (splineIndex / 6) * (1 - Math.abs(offset) / this.options.spread * 0.1),
+					opacity: (this.options.opacity / (splineIndex / 6)) * (1 - (Math.abs(offset) / this.options.spread) * 0.1),
 					//opacity: this.options.opacity * (1 - Math.abs(offset) / this.options.spread * 0.1),
-					linewidth: this.options.lineWidth
+					linewidth: this.options.lineWidth,
 				});
 
 				return new THREE.Line(geometry, material);
@@ -183,10 +176,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 						const distance = Math.abs(baseX - node.x);
 						const influence = Math.exp(-distance * distance * 2);
 
-						const animatedPhase = node.phase +
+						const animatedPhase = node.phase + (this.time + timeOffset) * node.speed + groupIndex * 0.2 + splineIndex * 0.01;
-								(this.time + timeOffset) * node.speed +
-								groupIndex * 0.2 +
-								splineIndex * 0.01;
 
 						const waveAmplitude = node.radius * influence;
 
@@ -195,8 +185,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 							const amplitude = this.options.waveAmplitudes[freqIndex] || 0.1;
 							const phaseMultiplier = 1 + freqIndex * 0.3;
 
-							y += Math.sin(t * Math.PI * freq + animatedPhase * phaseMultiplier) *
+							y += Math.sin(t * Math.PI * freq + animatedPhase * phaseMultiplier) * waveAmplitude * amplitude;
-									waveAmplitude * amplitude;
 						});
 
 						// Horizontal modulation for more organic feel
@@ -205,8 +194,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 
 					// Apply spread offset with transition
 					const transitionOffset = this.getOffsetTransition(t);
-					y += offset * (1 + Math.sin(t * Math.PI * 2 + (this.time + timeOffset) * 0.5) * 0.3) +
+					y += offset * (1 + Math.sin(t * Math.PI * 2 + (this.time + timeOffset) * 0.5) * 0.3) + transitionOffset;
-							transitionOffset;
 
 					points.push(new THREE.Vector3(x, y, 0));
 				}
@@ -262,7 +250,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 			rebuild() {
 				// Clean up existing splines
 				this.splineGroups.forEach(({group}) => {
-					group.children.forEach(child => {
+					group.children.forEach((child) => {
 						child.geometry.dispose();
 						child.material.dispose();
 					});
@@ -274,7 +262,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 			}
 
 			resize() {
-				console.log('Resizing canvas and updating camera');
+				console.log("Resizing canvas and updating camera");
 				const width = this.canvas.clientWidth;
 				const height = this.canvas.clientHeight;
 
@@ -290,7 +278,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 
 			destroy() {
 				this.splineGroups.forEach(({group}) => {
-					group.children.forEach(child => {
+					group.children.forEach((child) => {
 						child.geometry.dispose();
 						child.material.dispose();
 					});
@@ -301,7 +289,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 
 		// Usage example with custom options
 		document.addEventListener("DOMContentLoaded", () => {
-			const canvas = document.getElementById('aurora-canvas');
+			const canvas = document.getElementById("aurora-canvas");
 			if (canvas) {
 				const curtain = new GuillocheCurtain(canvas, {
 					spread: 7, // Wider spread
@@ -313,14 +301,14 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
 					offset: 0.4,
 					startOffset: -0.6, // Slight downward start
 					endOffset: 0.4, // Slight upward end
-					offsetTransition: 'sine',   // Smooth transition
+					offsetTransition: "sine", // Smooth transition
 					animationSpeed: 0.001, // Slower animation
 					hueBase: 0.55, // More blue-green
 					hueVariation: 0.3,
-					opacity: 0.3
+					opacity: 0.3,
 				});
 
-				window.addEventListener('beforeunload', () => curtain.destroy());
+				window.addEventListener("beforeunload", () => curtain.destroy());
-				window.addEventListener('resize', () => curtain.resize());
+				window.addEventListener("resize", () => curtain.resize());
 			}
 		});

src/components/Professional.pug

@@ -3,7 +3,7 @@ include Collapsable
 section#professional.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white")
 	.p-8(class="sm:p-20 min-h-[120vh]")
 		+Container
-			+Title("h2") !{professional.title}
+			+Title("h2")!{professional.title}
 			p.mb-4.max-w-prose.prose.indent-3(class="lg:prose-xl dark:prose-invert")
 				| #{professional.description}
 			p.mb-8.max-w-prose.prose(class="lg:prose-xl dark:prose-invert")