libretech/M6C9.de
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Activity

fix a11y issues and format code

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-14 01:02:20 +02:00
parent e816dc1801
commit feee47d1db
8 changed files with 115 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.pugrc
View File

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

2
package.json
View File

@@ -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"
},

4
src/components/Academia.pug
View File

@@ -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

85
src/components/Carousel.pug
View File

@@ -1,57 +1,38 @@
mixin Carousel(items, options)
- const id = options.id || 'carousel';
- const color = options.color || 'orange';
- const category = options.category || 'portfolio';
- const id = options.id || "carousel";
- const color = options.color || "orange";
- const category = options.category || "portfolio";
.carousel-container.relative.w-full.overflow-hidden(id=id)
//- Navigation buttons
button.carousel-btn.carousel-prev.absolute.left-4.z-20.transform(
class=`-translate-y-1/2 top-1/2 bg-white/80 hover:bg-white dark:bg-black/80 dark:hover:bg-black rounded-full p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
aria-label="Previous slide",
onclick=`carouselPrev('${id}'); umami.track('carousel navigation', { direction: 'prev', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(class="dark:text-white", fill="none", stroke="currentColor", viewBox="0 0 24 24")
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M15 19l-7-7 7-7")
.carousel-container.relative.w-full.overflow-hidden(id=id)
//- Navigation buttons
button.carousel-btn.carousel-prev.absolute.left-4.z-20.transform(
class=`-translate-y-1/2 top-1/2 bg-white/80 hover:bg-white dark:bg-black/80 dark:hover:bg-black rounded-full p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
aria-label="Previous slide",
onclick=`carouselPrev('${id}'); umami.track('carousel navigation', { direction: 'prev', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(class="dark:text-white", fill="none", stroke="currentColor", viewBox="0 0 24 24")
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M15 19l-7-7 7-7")
button.carousel-btn.carousel-next.absolute.right-4.z-20.transform(
class=`top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white dark:bg-black/80 dark:hover:bg-black rounded-full p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
aria-label="Next slide",
onclick=`carouselNext('${id}'); umami.track('carousel navigation', { direction: 'next', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(class="dark:text-white", fill="none", stroke="currentColor", viewBox="0 0 24 24")
path(stroke-linecap="round", stroke-linejoin="round", stroke-width="2", d="M9 5l7 7-7 7")
button.carousel-btn.carousel-next.absolute.right-4.z-20.transform(
class=`top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white dark:bg-black/80 dark:hover:bg-black rounded-full p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
aria-label="Next slide",
onclick=`carouselNext('${id}'); umami.track('carousel navigation', { direction: 'next', category: '${category}', visitDuration: getVisitDuration() })`
)
svg.w-6.h-6.text-gray-800(class="dark:text-white", fill="none", stroke="currentColor", viewBox="0 0 24 24")
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(
style="scroll-snap-type: x mandatory;",
role="region",
aria-label="Image carousel"
)
each item, index in items
- const href = item?.href || "#"
//- Carousel track
.carousel-track.flex.overflow-x-auto.scroll-smooth.scrollbar-hide(style="scroll-snap-type: x mandatory", role="region", aria-label="Image carousel")
each item, index in items
- const href = item?.href || "#";
.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;"
)
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(
class="from-black/70"
)
p.text-white.text-sm.font-medium= item.caption
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(
src=item.logo,
alt=item.name,
loading=index < 6 ? "eager" : "lazy"
)
.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")
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(class="from-black/70")
p.text-white.text-sm.font-medium= item.caption
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(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy")

41
src/components/Collapsable.pug
View File

@@ -9,26 +9,27 @@ 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
each item in data.items
li
if item.text
= item.text
if item.links
each link, index in item.links
a(
class=`transition underline-offset-2 underline text-nls-${color} hover:text-nls-black dark:hover:text-white hover:decoration-2 focus:text-nls-black dark:focus:text-white focus:decoration-2`,
href=link.url,
title=link.description,
target="_blank",
aria-label=link.description,
rel="noopener noreferrer",
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
) #{link.text}
if index < item.links.length - 1
| ,&nbsp;
if item.suffix
= ` ${item.suffix}`
ul.list-disc.list-inside
each item in data.items
li
if item.text
= item.text
if item.links
each link, index in item.links
a(
class=`transition underline-offset-2 underline text-nls-${color} hover:text-nls-black dark:hover:text-white hover:decoration-2 focus:text-nls-black dark:focus:text-white focus:decoration-2`,
href=link.url,
title=link.description,
target="_blank",
aria-label=link.description,
rel="noopener noreferrer",
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
) #{link.text}
if index < item.links.length - 1
| ,&nbsp;
if item.suffix
= ` ${item.suffix}`
else
block

16
src/components/Footer.pug
View File

@@ -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")
+Link(footer.githubUrl, "github", "_blank", "noopener noreferrer")
.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, "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

106
src/components/Landingpage.pug
View File

@@ -11,7 +11,7 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
|
| &amp; #{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")
@@ -21,36 +21,36 @@ header.bg-white.text-nls-black.relative(class="dark:text-white dark:bg-nls-black
this.canvas = canvas;
this.options = {
// Visual parameters
spread: 0.25, // Main spread factor (was 0.08)
lineWidth: 0.8, // Line thickness
opacity: 0.6, // Base opacity
splineCount: 40, // Lines per group
groupCount: 6, // Number of spline groups
spread: 0.25, // Main spread factor (was 0.08)
lineWidth: 0.8, // Line thickness
opacity: 0.6, // Base opacity
splineCount: 40, // Lines per group
groupCount: 6, // Number of spline groups
// Animation parameters
animationSpeed: 0.005, // Global time multiplier
nodeCount: 7, // Attractor nodes
animationSpeed: 0.005, // Global time multiplier
nodeCount: 7, // Attractor nodes
nodeSpeed: {min: 0.3, max: 0.8},
// Color parameters
hueBase: 0.55, // Base hue (cyan-ish)
hueVariation: 0.1, // Color spread
hueBase: 0.55, // Base hue (cyan-ish)
hueVariation: 0.1, // Color spread
saturation: {min: 0.3, max: 0.7},
lightness: {min: 0.25, max: 0.65},
// Spline parameters
segments: 100, // Resolution per spline
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'
canvasExtension: 1.0, // How far beyond canvas borders (-1.0 means 50% extra on each side)
segments: 100, // Resolution per spline
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'
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
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 +
Math.random() * (this.options.nodeSpeed.max - this.options.nodeSpeed.min)
speed: 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 +
normalizedGroup * this.options.hueVariation +
Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
const hue = this.options.hueBase + normalizedGroup * this.options.hueVariation + Math.sin(normalizedSpline * Math.PI * 2) * 0.05;
const saturation = this.options.saturation.min +
(this.options.saturation.max - this.options.saturation.min) *
(1 - Math.abs(offset) / this.options.spread);
const saturation = this.options.saturation.min + (this.options.saturation.max - this.options.saturation.min) * (1 - Math.abs(offset) / this.options.spread);
const lightness = this.options.lightness.min +
(this.options.lightness.max - this.options.lightness.min) *
(1 - Math.abs(offset) / this.options.spread * 0.6);
const lightness = this.options.lightness.min + (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 +
(this.time + timeOffset) * node.speed +
groupIndex * 0.2 +
splineIndex * 0.01;
const animatedPhase = node.phase + (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) *
waveAmplitude * amplitude;
y += Math.sin(t * Math.PI * freq + animatedPhase * phaseMultiplier) * 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) +
transitionOffset;
y += offset * (1 + Math.sin(t * Math.PI * 2 + (this.time + timeOffset) * 0.5) * 0.3) + 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,26 +289,26 @@ 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
spread: 7, // Wider spread
segments: 222,
lineWidth: 2, // Thicker lines
splineCount: 12, // More lines
lineWidth: 2, // Thicker lines
splineCount: 12, // More lines
groupCount: 2,
canvasExtension: 0.3,
offset: 0.4,
startOffset: -0.6, // Slight downward start
endOffset: 0.4, // Slight upward end
offsetTransition: 'sine', // Smooth transition
animationSpeed: 0.001, // Slower animation
hueBase: 0.55, // More blue-green
startOffset: -0.6, // Slight downward start
endOffset: 0.4, // Slight upward end
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('resize', () => curtain.resize());
window.addEventListener("beforeunload", () => curtain.destroy());
window.addEventListener("resize", () => curtain.resize());
}
});

2
src/components/Professional.pug
View File

@@ -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")