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

update portfolio section; correct caption text and enhance carousel layout

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-14 15:34:52 +02:00
parent 8352af4cc9
commit 9e13c0d5d1
5 changed files with 13 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.pugrc
View File

@@ -88,7 +88,7 @@
"src": "./src/assets/portfolio/codecrispies.png",
"alt": "",
"href": "https://codecrispi.es",
"caption": "Code Crispi.es",
"caption": "CODE CRISPIES",
"description": "A self-learning platform for coding, designed to enhance collaboration and learning among developers especially for CSS, TailwindCSS and usage of native HTML elements. It features a unique approach to coding education, focusing on practical skills and community engagement."
},
{

3
src/components/Brands.pug
View File

@@ -4,3 +4,6 @@ include Container
section#brands
.p-8.bg-nls-black.text-nls-white(class="sm:py-2")
+Carousel([...brands, ...brands, ...brands], {id: "brands-carousel", color: "black", category: "brands"})
p.text-center.pb-12.text-gray-400
| Companies and Organizations that I have worked with or contributed to

16
src/components/Carousel.pug
View File

@@ -7,7 +7,7 @@ mixin Carousel(items, options)
// Pass through options even if not used
- const autoScroll = options.autoScroll ?? 4_800;
.carousel-container.relative.w-full.overflow-hidden(id=id)
.carousel-container.relative.w-full.overflow-hidden.px-8(class="sm:px-12", id=id)
//- Navigation buttons
button.absolute.left-1.z-20.transform(
class=`-translate-y-1/2 top-1/2 sm:left-2 bg-white/40 hover:bg-white/80 text-nls-black rounded-full p-2 sm:p-3 shadow-lg transition-all focus:outline-none focus:ring-4 focus:ring-nls-${color}`,
@@ -36,22 +36,22 @@ 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.mx-6.mb-4(class="sm:flex-row sm:gap-6")
img.w-full.h-full.object-contain.transition-transform.rounded-lg.duration-300(
.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",
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="sm:static sm:bg-gradient-unset from-black/70 sm:text-nls-white dark:sm:text-nls-black sm:self-center"
.p-4(
class="sm:static sm:self-center"
)
p.text-white.text-xl.font-large= item.caption
p.text-lg.pt-2.font-large(class="sm:text-xl")= item.caption
if item.description
p.text-white.text-base.mt-2(class="sm:w-2/3")= item.description
p.text-sm.mt-2(class="sm:text-base sm:w-2/3")= item.description
if item.href
a.text-white.text-base.mt-4.underline(class="hover:text-nls-black dark:hover:text-nls-white", href=item.href, target="_blank", rel="noopener noreferrer")= 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
else if item.type === "brand"
.aspect-square.flex.items-center.justify-center.mx-2.mb-4
img.max-w-full.max-h-full.object-contain.p-4(src=item.logo, alt=item.name, loading=index < 6 ? "eager" : "lazy")

29
src/components/Head.pug
View File

@@ -150,10 +150,6 @@ head
border-radius: 0.2rem;
}
.carousel-container {
padding: 0 3rem;
}
.carousel-track {
/* Hide scrollbars but keep functionality */
scrollbar-width: none;
@@ -164,31 +160,6 @@ head
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: 33.333333%;*/
/* }*/
/*}*/
/*@media (min-width: 1025px) and (max-width: 1280px) {*/
/* .carousel-slide {*/
/* width: 25%;*/
/* }*/
/*}*/
/*@media (min-width: 1281px) {*/
/* .carousel-slide {*/
/* width: 20%;*/
/* }*/
/*}*/
/* Smooth button hover states */
.carousel-btn {
backdrop-filter: blur(4px);

2
src/components/Portfolio.pug
View File

@@ -2,7 +2,7 @@ include Carousel
include Container
section#portfolio
.p-8.bg-nls-black.text-nls-white(class="sm:py-2")
.p-8.bg-nls-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:py-2")
+Container
+Title("h2", true)
| Portfolio