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

57
.pugrc
View File

@@ -5,22 +5,22 @@
"charset": "UTF-8",
"description": "Michael W. Czechowski: Visionary Software Architect with 20+ years of experience transforming businesses through cutting-edge web technologies and enterprise solutions. Trusted advisor to C-level executives, delivering strategic insights and innovative architectures that drive digital transformation and competitive advantage.",
"distribution": "global",
"keywords": "software architect, enterprise solutions, web development, digital transformation, C-level advisor, Stuttgart, open source, cloud architecture, 20 years experience, Michael Czechowski",
"keywords": "software engineering, software development, software architect, platform architect, cloud architecture, web development, leadership, enterprise solutions, digital transformation, c-level consultant, stuttgart, open source, 20 years experience, Michael Czechowski",
"lang": "en",
"language": "English",
"ogDescription": "Visionary Software Architect with 20+ years of experience. Trusted C-level advisor for enterprise web technologies and digital transformation strategies. Expertise in cloud architecture, microservices, and scalable solutions that drive business growth and innovation.",
"ogDescription": "Expert in Web Technologies & Enterprise Software Architecture ...",
"ogImage": "./src/assets/og-image.png",
"ogTitle": "Michael W. Czechowski - Enterprise Software Architecture & Digital Transformation Expert",
"ogTitle": "Michael W. Czechowski - Expert in Web Technologies & Enterprise Software Architecture",
"ogType": "website",
"ogUrl": "https://dailysh.it/",
"rating": "general",
"revisitAfter": "7 days",
"robots": "index, follow",
"title": "NEXT LEVEL SHIT · Michael W. Czechowski - Expert in Web Technologies & Enterprise Software Architecture",
"title": "Michael W. Czechowski - Expert in Web Technologies & Enterprise Software Architecture",
"twitterCard": "summary_large_image",
"twitterDescription": "Visionary Software Architect with 20+ years of experience. Trusted C-level advisor for enterprise web technologies and digital transformation strategies. Expertise in cloud architecture, microservices, and scalable solutions that drive business growth and innovation.",
"twitterDescription": "Expert in Web Technologies & Enterprise Software Architecture ...",
"twitterImage": "./src/assets/twitter-image.png",
"twitterTitle": "Michael W. Czechowski - Enterprise Software Architecture & Digital Transformation Expert",
"twitterTitle": "Michael W. Czechowski - Expert in Web Technologies & Enterprise Software Architecture",
"twitterUrl": "https://dailysh.it/",
"umamiId": "9e83ef75-cbfb-49cf-ae4f-a7485ca46ba8",
"umamiSrc": "https://dailysh.it/u/script.js",
@@ -47,14 +47,14 @@
"logoSvg": "./src/assets/nls.svg",
"logoSvgInverted": "./src/assets/nls_inverted.svg",
"emojiSvg": "./src/assets/waving-hand.svg",
"jobTitle": ["Enterprise Software Architect", "Digital Transformation Expert"]
"jobTitle": ["Expert in Web Technologies", "Enterprise Software Architecture"]
},
"intro": {
"heading": "After $1"
},
"professional": {
"title": "Professional Approach",
"principlesIntro": "Throughout my career, I've been guided by the philosophies and innovations of industry pioneers. These principles form the foundation of my approach to software architecture and digital transformation:",
"title": "Make it run<br>Make it right<br>Make it fast",
"principlesIntro": "Throughout my career, I've been guided by the philosophies and innovations of free software and industry pioneers. These principles form the foundation of my approach to software engineering and didactics:",
"principlesPeople": [
{
"name": "Robert C. Martin",
@@ -65,6 +65,15 @@
"These principles have been especially valuable in my academic work, forming a core part of how I teach sustainable software development practices to computer science students at DHBW Stuttgart."
]
},
{
"name": "Aral Balkan",
"concept": "Ethical Design",
"paragraphs": [
"Balkan's ethical design principles form a crucial component of my approach to software architecture, particularly relevant in my teaching of social engineering at LFH.",
"His framework provides valuable insights for developing systems that respect user privacy while meeting enterprise requirements, a balance I emphasize in both my academic and professional work.",
"These principles have become increasingly relevant in my work with enterprise systems, where privacy and ethical considerations must be balanced with business requirements."
]
},
{
"name": "Eric Evans",
"concept": "Domain-Driven Design",
@@ -109,29 +118,10 @@
"His concepts of distributed systems align closely with my teaching of web development, where I emphasize the importance of resilient, scalable architectures.",
"These principles have proven especially relevant in enterprise contexts where system reliability and scalability are paramount."
]
},
{
"name": "Aral Balkan",
"concept": "Ethical Design",
"paragraphs": [
"Balkan's ethical design principles form a crucial component of my approach to software architecture, particularly relevant in my teaching of social engineering at LFH.",
"His framework provides valuable insights for developing systems that respect user privacy while meeting enterprise requirements, a balance I emphasize in both my academic and professional work.",
"These principles have become increasingly relevant in my work with enterprise systems, where privacy and ethical considerations must be balanced with business requirements."
]
}
]
},
"academia": {
"intro": [
"As a passionate advocate for open source software and a university lecturer since the beginning of this decade, I bring a unique perspective to the intersection of academia and industry.",
"My courses in web development, software engineering, and computer science for economics are designed to bridge the gap between theoretical knowledge and real-world application. By integrating cutting-edge industry practices into the curriculum, I prepare the next generation of software engineers to tackle the complex challenges of tomorrow's digital landscape.",
"<a href=\"https://leibnizfh.de\" target=\"_blank\">At Leibniz Fachhochschule (LFH)</a> in Hannover, Germany, I've pioneered a course on Social Engineering, addressing a critical yet often overlooked aspect of cybersecurity. This innovative program equips students with the knowledge and ethical framework to protect themselves and their future employers from sophisticated social manipulation tactics. By focusing on real-world scenarios and practical defense strategies, I ensure that graduates are well-prepared to navigate the human element of cybersecurity in their professional careers.",
"In my role as a lecturer for Web Development at DHBW Stuttgart, I lead students through an immersive exploration of modern web technologies, frameworks, and software architecture concepts. My teaching philosophy centers on fostering a deep understanding of foundational principles while keeping pace with the rapidly evolving tech ecosystem. Through hands-on projects and real-world case studies, I challenge students to think critically about scalability, performance, and user experience – skills that are invaluable in today's competitive tech industry."
],
"sectionTitles": {
"computerScience": "Computer Science",
"expertise": "Software <wbr/>Architect&shy;ure <wbr/>and <wbr/>Develop&shy;ment"
},
"courseInstitutions": {
"dhbw": "Duale Hochschule Baden-Württemberg (DHBW)",
"lfh": "Leibniz Fachhochschule (LFH)"
@@ -150,7 +140,18 @@
"2021 „Social Engineering“"
]
},
"computerScience": {
"title": "Didac&shy;tics and the <wbr/><nobr>Es&shy;sence of Learn&shy;ing</nobr>",
"subtitle": "Motivation generates Motivation",
"intro": [
"As a passionate advocate for open source software and a university lecturer since the beginning of this decade, I bring a unique perspective to the intersection of academia and industry.",
"My courses in web development, software engineering, and computer science for economics are designed to bridge the gap between theoretical knowledge and real-world application. By integrating cutting-edge industry practices into the curriculum, I prepare the next generation of software engineers to tackle the complex challenges of tomorrow's digital landscape.",
"At <a href=\"https://leibniz-fh.de\" target=\"_blank\">Leibniz Fachhochschule (LFH)</a> in Hannover, Germany, I've pioneered a course on Social Engineering, addressing a critical yet often overlooked aspect of cybersecurity. This innovative program equips students with the knowledge and ethical framework to protect themselves and their future employers from sophisticated social manipulation tactics. By focusing on real-world scenarios and practical defense strategies, I ensure that graduates are well-prepared to navigate the human element of cybersecurity in their professional careers.",
"In my role as a lecturer for Web Development at <a href=\"https://dhbw-stuttgart.de\" target=\"_blank\">DHBW Stuttgart</a>, I lead students through an immersive exploration of modern web technologies, frameworks, and software architecture concepts. My teaching philosophy centers on fostering a deep understanding of foundational principles while keeping pace with the rapidly evolving tech ecosystem. Through hands-on projects and real-world case studies, I challenge students to think critically about scalability, performance, and user experience – skills that are invaluable in today's competitive tech industry."
]
},
"expertise": {
"title": "Software Develop&shy;ment <wbr/>and set&shy;ting <wbr/>the right Priori&shy;ties",
"intro": [
"With over two decades at the forefront of software development and architecture, I've navigated the ever-evolving landscape of technology, consistently delivering innovative solutions across diverse sectors.",
"My expertise spans a comprehensive range of technologies and methodologies, enabling me to provide both strategic guidance and hands-on leadership to organizations seeking to innovate and maintain a competitive edge. From developing robust, scalable software architectures to implementing agile practices and leveraging the latest in cloud and DevOps technologies, I bring a wealth of knowledge and practical experience to every project. My approach is rooted in a deep understanding of both current trends and time-tested principles, ensuring solutions that are not only cutting-edge but also sustainable and aligned with long-term business objectives."

69
index.pug
View File

@@ -1,11 +1,25 @@
doctype html
html.scroll-smooth(lang=lang)
include src/components/Head
include src/components/Carousel
body.m-0.p-0
main.flex.flex-col
article(itemscope, itemtype="http://schema.org/Person")
include src/components/Landingpage
//- Portfolio carousel
+Carousel(
[
{type: "image", src: "/src/assets/screenshot-codecrispies.png", alt: "Code Crispies", caption: "Coding Learning Platform"},
{type: "image", src: "/src/assets/project1.png", alt: "Project Alpha", caption: "AI-powered marketplace"},
{type: "image", src: "/src/assets/project1.png", alt: "Project Alpha", caption: "AI-powered marketplace"},
{type: "image", src: "/src/assets/project1.png", alt: "Project Alpha", caption: "AI-powered marketplace"},
{type: "image", src: "/src/assets/project1.png", alt: "Project Alpha", caption: "AI-powered marketplace"},
{type: "image", src: "/src/assets/project2.png", alt: "Project Beta", caption: "Real-time analytics dashboard"},
{type: "image", src: "/src/assets/project3.png", alt: "Project Gamma", caption: "Accessibility-first design system"},
],
{id: "portfolio", category: "portfolio", color: "orange"},
)
include src/components/Academia
include src/components/Professional
include src/components/Footer
@@ -31,3 +45,58 @@ html.scroll-smooth(lang=lang)
}
});
sections.forEach((section) => sectionObserver(section.id).observe(section));
// carousel.js - Just the essentials
function carouselPrev(carouselId) {
const track = document.querySelector(`#${carouselId} .carousel-track`);
const slideWidth = track.querySelector(".carousel-slide").offsetWidth;
track.scrollBy({left: -slideWidth, behavior: "smooth"});
updateCarouselDots(carouselId);
}
function carouselNext(carouselId) {
const track = document.querySelector(`#${carouselId} .carousel-track`);
const slideWidth = track.querySelector(".carousel-slide").offsetWidth;
track.scrollBy({left: slideWidth, behavior: "smooth"});
updateCarouselDots(carouselId);
}
function carouselGoTo(carouselId, index) {
const track = document.querySelector(`#${carouselId} .carousel-track`);
const slideWidth = track.querySelector(".carousel-slide").offsetWidth;
track.scrollTo({left: slideWidth * index, behavior: "smooth"});
updateCarouselDots(carouselId);
}
function updateCarouselDots(carouselId) {
// Debounced dot state update
clearTimeout(window.carouselDotTimeout);
window.carouselDotTimeout = setTimeout(() => {
const track = document.querySelector(`#${carouselId} .carousel-track`);
const dots = document.querySelectorAll(`#${carouselId} .carousel-dot`);
const slideWidth = track.querySelector(".carousel-slide").offsetWidth;
const currentIndex = Math.round(track.scrollLeft / slideWidth);
dots.forEach((dot, index) => {
if (index === currentIndex) {
dot.className = dot.className.replace(/bg-gray-\d+/, "bg-nls-orange");
} else {
dot.className = dot.className.replace(/bg-nls-\w+/, "bg-gray-300 dark:bg-gray-600");
}
});
}, 100);
}
// Auto-initialize all carousels
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll(".carousel-track").forEach((track) => {
track.addEventListener(
"scroll",
() => {
const carouselId = track.closest(".carousel-container").id;
updateCarouselDots(carouselId);
},
{passive: true},
);
});
});

3
package.json
View File

@@ -4,7 +4,8 @@
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "parcel --public-url / index.pug --open",
"start": "parcel --public-url / index.pug",
"prebuild": "rm -rf dist .parcel-cache",
"build": "parcel build index.pug --no-minify",
"format": "npx prettier --write src/**/*.pug index.pug package.json && npx prettier --write --parser json .pugrc",
"deploy": "make deploy"

BIN
src/assets/screenshot-codecrispies.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

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