diff --git a/src/components/Carousel.pug b/src/components/Carousel.pug index 812534e..82c8c4d 100644 --- a/src/components/Carousel.pug +++ b/src/components/Carousel.pug @@ -14,7 +14,7 @@ mixin Carousel(items, options) 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="sm:w-6 sm:h-6", fill="none", stroke="currentColor", viewBox="0 0 24 24") + svg.w-6.h-6.text-gray-800(class="sm:w-8 sm:h-8", 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.absolute.right-0.z-20.transform( @@ -22,7 +22,7 @@ mixin Carousel(items, options) 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="sm:w-6 sm:h-6", fill="none", stroke="currentColor", viewBox="0 0 24 24") + svg.w-6.h-6.text-gray-800(class="sm:w-8 sm:h-8", 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 @@ -36,9 +36,9 @@ mixin Carousel(items, options) .carousel-slide.flex-none.w-full.relative(class=slideClasses, style="scroll-snap-align: start") if item.type === "image" - .flex.flex-col.relative.overflow-hidden.rounded-lg.mb-4.py-4(class="sm:mx-6 sm:flex-row sm:gap-6") - img.w-full.h-full.object-contain.transition-transform.rounded-lg.shadow-md.duration-300( - class="sm:w-1/2", + a.text-left.flex.flex-col.relative.overflow-hidden.rounded-lg.mb-4.py-4(class="sm:px-6 sm:flex-row sm:gap-6",onclick=`umami.track('carousel image clicked', { category: '${category}', position: 'carousel', label: '${item.alt || item.caption || "image"}', visitDuration: getVisitDuration() })`, href=href, target="_blank", rel="noopener noreferrer") + img.w-full.h-full.object-contain.transition-transform.rounded-lg.duration-300( + class="sm:w-1/2 shadow-lg", src=item.src, alt=item.alt, loading=index < 3 ? "eager" : "lazy" @@ -49,9 +49,9 @@ mixin Carousel(items, options) ) p.text-lg.pt-2.font-large(class="sm:text-xl")= item.caption if item.description - p.text-sm.mt-2(class="sm:text-base sm:w-2/3")= item.description + p.text-sm.mt-2(class="sm:text-base")= item.description if item.href - a.text-sm.mt-4.underline(class="sm:text-base hover:text-nls-black dark:hover:text-nls-white", href=item.href, target="_blank", rel="noopener noreferrer")= item.href + p.text-sm.mt-4.underline(class="sm:text-base hover:text-nls-black dark:hover:text-nls-white")= item.href else if item.type === "brand" .aspect-video.flex.items-center.justify-center.mx-2.mb-4(class="sm:mx-12") img.max-w-full.max-h-full.min-h-64.object-contain.p-4(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy") diff --git a/src/components/Container.pug b/src/components/Container.pug index 51fed0e..a2f5ff1 100644 --- a/src/components/Container.pug +++ b/src/components/Container.pug @@ -1,3 +1,4 @@ -mixin Container - .max-w-screen-sm.mx-auto +mixin Container(orientation) + - const classes = !orientation ? "mx-auto" : orientation === "left" ? "mr-auto" : "ml-auto"; + .max-w-screen-sm(class=classes) block diff --git a/src/components/Footer.pug b/src/components/Footer.pug index 2b167d4..4975576 100644 --- a/src/components/Footer.pug +++ b/src/components/Footer.pug @@ -24,7 +24,7 @@ footer#footer .p-8.bg-white.text-nls-black.pt-20(class="sm:pt-48 dark:bg-nls-black dark:text-white sm:p-20") +Container // region Contact - h2.text-5xl.mb-4 #{footer.title} + h2.text-4xl.mb-4 #{footer.title} p.mb-8.max-w-prose #{footer.content} .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") diff --git a/src/components/Landingpage.pug b/src/components/Landingpage.pug index 7145c56..0fd4e55 100644 --- a/src/components/Landingpage.pug +++ b/src/components/Landingpage.pug @@ -2,7 +2,7 @@ header.bg-white.text-nls-black.relative.overflow-hidden(class="dark:text-white d .teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20") .max-w-3xl.mb-8.relative(class="w-4/5 min-h-[90vh]") .peer.absolute.bottom-0.left-0.right-0.z-40.text-center.max-w-3xl.center.py-8.pointer-events-none - h2.tracking-widest.text-xl.font-semibold.opacity-100.transition(class="sm:text-2xl peer-hover:opacity-100", itemprop="name")= landingpage.name + h2.tracking-normal.font-serif.text-xl.font-semibold.opacity-100.transition(class="sm:text-2xl peer-hover:opacity-100", itemprop="name")= landingpage.name h1.tracking-normal.text-md.mb-16.opacity-95.transition(class="sm:text-lg peer-hover:opacity-100", itemprop="jobTitle") | #{landingpage.jobTitle[0]} @@ -377,10 +377,10 @@ header.bg-white.text-nls-black.relative.overflow-hidden(class="dark:text-white d const canvas = document.getElementById("aurora-canvas"); if (canvas) { const curtain = new GuillocheCurtain(canvas, { - spread: 7, + spread: 5, segments: 222, lineWidth: 2, - splineCount: 12, + splineCount: 22, groupCount: 2, canvasExtension: 0.3, offset: 0.4, diff --git a/src/components/Portfolio.pug b/src/components/Portfolio.pug index 8fcc6a8..645c4d8 100644 --- a/src/components/Portfolio.pug +++ b/src/components/Portfolio.pug @@ -10,4 +10,4 @@ section#portfolio p.text-center.pb-12 | Free and Open Source Software, Customer Projects and other useful Applications .max-w-screen.mx-auto.pb-32(class="sm:max-w-80vw") - +Carousel([...portfolio, ...portfolio, ...portfolio], {id: "portfolio-carousel", color: "black", category: "portfolio", slideClasses: "w-full", autoScroll: false}) + +Carousel(portfolio, {id: "portfolio-carousel", color: "black", category: "portfolio", slideClasses: "w-full", autoScroll: false})