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

update layout; enhance responsiveness and spacing for various sections, adjust styles for footer and brands; add general spacing between sections; add xl responsive layout

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-14 18:33:17 +02:00
parent df7dbb8e43
commit 2f1e97b1ed
7 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.pug
View File

@@ -2,15 +2,14 @@ doctype html
html.scroll-smooth(lang=head.lang)
include src/components/Head
body.m-0.p-0
body.m-0.p-0(class="bg-nls-white text-nls-black dark:bg-nls-black dark:text-white")
main.flex.flex-col
article(itemscope, itemtype="http://schema.org/Person")
include src/components/Landingpage
include src/components/Portfolio
include src/components/Academia
include src/components/Professional
include src/components/Portfolio
include src/components/Brands
include src/components/Academia
include src/components/Footer
script.

53
src/components/Academia.pug
View File

@@ -3,40 +3,39 @@ include Title
include Container
section#academia
.p-8.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:p-20 min-h-[120vh]")
.grid.grid-cols-1.p-8.bg-white.text-nls-black(class="xl:grid-cols-2 xl:gap-36 xl:grid-cols-2 dark:bg-nls-black dark:text-white xl:p-20 min-h-[120vh]")
+Container
// region Skills
+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";
- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest xl:text-md text-sm tracking-tight w-5/6";
p(class=`text-slate-700 dark:text-slate-300 ${additionalClasses}`) !{paragraph}
// endregion
// region Expertise
.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
+Collapsable(null, academia.expertise.frontendTechnologies)
+Collapsable(null, academia.expertise.devopsAndCloud)
+Collapsable(null, academia.expertise.backendTechnologies)
+Collapsable(null, academia.expertise.databaseAndData)
+Collapsable(null, academia.expertise.crossPlatform)
+Collapsable(null, academia.expertise.bestPractices)
+Collapsable(null, academia.expertise.tracking)
// region Expertise
.grid.grid-cols-1.gap-6.mb-8.col-span-1.self-start(class="xl:gap-0 xl:grid-cols-1 xl:grid-cols-2")
+Collapsable(null, academia.expertise.frontendTechnologies)
+Collapsable(null, academia.expertise.devopsAndCloud)
+Collapsable(null, academia.expertise.backendTechnologies)
+Collapsable(null, academia.expertise.databaseAndData)
+Collapsable(null, academia.expertise.crossPlatform)
+Collapsable(null, academia.expertise.bestPractices)
+Collapsable(null, academia.expertise.tracking)
// endregion
+Container
// region Computer Science
+Title("h2") !{academia.computerScience.title}
.mb-12
.mb-8.max-w-prose.prose(class="lg:prose-xl")
each paragraph, i in academia.computerScience.intro
- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-widest xl:text-md text-sm tracking-tight w-5/6";
p(class=`text-slate-700 dark:text-slate-300 ${additionalClasses}`) !{paragraph}
// endregion
.mt-48
+Container
// region Computer Science
+Title("h2") !{academia.computerScience.title}
.mb-12
.mb-8.max-w-prose.prose(class="lg:prose-xl")
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 Academic Courses
.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
each institution in academia.institutions
+Collapsable("academia", institution)
// endregion
// region Academic Courses
.grid.grid-cols-1.gap-6.mb-8.col-span-1.self-start(class="xl:gap-2 xl:grid-cols-1")
each institution in academia.institutions
+Collapsable("academia", institution)
// endregion

4
src/components/Brands.pug
View File

@@ -2,7 +2,9 @@ include Carousel
include Container
section#brands
.p-8.bg-nls-black.text-nls-white(class="sm:py-2")
.p-8.bg-nls-black.text-nls-white(class="sm:py-6")
.mt-20
+Carousel([...brands, ...brands, ...brands], {id: "brands-carousel", color: "black", category: "brands"})
p.text-center.pb-12.text-gray-600.text-sm.mx-auto(class="w-4/5 sm:text-base")

8
src/components/Footer.pug
View File

@@ -5,9 +5,9 @@ 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.rounded.ring-offset-2.ring-nls-black(
a.text-2xl.transition-colors.text-nls-black.rounded.ring-offset-2.ring-nls-black(
href=href,
class="dark:text-white hover:ring-2 dark:ring-nls-white",
class="sm:text-lg dark:text-white hover:ring-2 dark:ring-nls-white",
target=target,
rel=rel,
onclick=onclick,
@@ -52,9 +52,9 @@ footer#footer
style="fill: currentColor"
)
a.transition-colors.text-nls-black.uppercase.font-semibold.rounded.ring-offset-2.ring-nls-black(
a.text-2xl.transition-colors.text-nls-black.uppercase.font-semibold.rounded.ring-offset-2.ring-nls-black(
href=footer.emailLink,
class="dark:text-white hover:ring-2 dark:ring-nls-white",
class="sm:text-lg dark:text-white hover:ring-2 dark:ring-nls-white",
rel="noopener noreferrer",
title=footer.emailText,
aria-label=footer.emailText,

6
src/components/Head.pug
View File

@@ -144,6 +144,12 @@ head
margin-left: 1.22rem;
}
section ~ section,
section ~ footer,
section ~ header {
padding-top: 4rem;
}
p a {
text-decoration: underline;
}

2
src/components/Portfolio.pug
View File

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

4
src/components/Professional.pug
View File

@@ -1,7 +1,9 @@
include Collapsable
include Title
include Container
section#professional.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white")
.p-8(class="sm:p-20 min-h-[120vh]")
.p-8(class="sm:p-20")
+Container
+Title("h2") !{professional.title}
p.mb-4.max-w-prose.prose.indent-3(class="lg:prose-xl dark:prose-invert")