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

add first css carousel with mock data; add missing decoration for anchors in paragraphs; update texts in general

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-13 19:23:45 +02:00
parent 1111e56b2c
commit 5e8b15f928
8 changed files with 225 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
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.sectionTitles.expertise}
+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,12 +26,12 @@ section#academia
+Container
// region Computer Science
+Title("h2")= academia.sectionTitles.computerScience
+Title("h2") !{academia.computerScience.title}
.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-700(class=`dark:text-slate-300 ${additionalClasses}`) !{paragraph}
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 Courses

57
src/components/Carousel.pug Normal file
View File

@@ -0,0 +1,57 @@
mixin Carousel(items, options)
- 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")
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-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"
)

64
src/components/Head.pug
View File

@@ -88,10 +88,6 @@ head
// region Custom CSS
style.
p a {
@apply underline;
}
/* Afacad Flux */
@font-face {
font-family: "Afacad Flux";
@@ -143,6 +139,66 @@ head
font-display: swap;
}
p a {
text-decoration: underline;
}
p a:hover,
p a:focus {
outline-offset: 2px;
outline: 1px currentColor solid;
border-radius: 0.2rem;
}
.carousel-track {
/* Hide scrollbars but keep functionality */
scrollbar-width: none;
-ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar {
display: none;
}
/* Responsive breakpoints - fewer items on smaller screens */
@media (max-width: 640px) {
.carousel-slide {
width: 100%;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
.carousel-slide {
width: 50%;
}
}
@media (min-width: 1025px) and (max-width: 1280px) {
.carousel-slide {
width: 33.333333%;
}
}
@media (min-width: 1281px) {
.carousel-slide {
width: 25%;
}
}
/* Smooth button hover states */
.carousel-btn {
backdrop-filter: blur(4px);
transition: all 0.2s ease;
}
.carousel-btn:hover {
transform: translateY(-50%) scale(1.05);
}
.carousel-btn:active {
transform: translateY(-50%) scale(0.95);
}
script(async, defer, data-website-id=head.umamiId, src=head.umamiSrc)
script.

4
src/components/Professional.pug
View File

@@ -1,7 +1,9 @@
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")