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

re-arrange content

Browse Source
This commit is contained in:
Michael Czechowski
2024-10-23 00:24:34 +02:00
parent 9c29d4560b
commit a38e765194
3 changed files with 93 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Landingpage.pug
View File

@@ -1,29 +1,36 @@
header.bg-nls-black.text-white
.teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20")
.max-w-3xl.group.mb-8.relative(class="w-4/5 min-h-[90vh]")
.max-w-3xl.mb-8.relative(class="w-4/5 min-h-[90vh]")
img.absolute.z-10.left-0.right-0.mx-auto.opacity-0.transition(
class="top-[30vh] max-h-[37vh] group-hover:opacity-100 group-hover:scale-150",
class="top-[30vh] max-h-[37vh] peer-hover:opacity-100 peer-hover:scale-150",
src=landingpage.emojiSvg
)
img.absolute.z-0.left-0.right-0.mx-auto.transition(class="h-[54vh] group-hover:opacity-60 group-hover:scale-50", src=landingpage.logoSvg)
img.absolute.z-0.left-0.right-0.mx-auto.transition(class="h-[54vh] peer-hover:opacity-60 peer-hover:scale-50", src=landingpage.logoSvg)
.absolute.bottom-0.left-0.right-0.z-40
.bottom-0.text-center.max-w-3xl.center.py-8
h2.text-xl.font-semibold.opacity-80.transition(class="sm:text-2xl group-hover:opacity-100", itemprop="name")= landingpage.name
h1.text-md.opacity-80.transition(class="sm:text-lg group-hover:opacity-100", itemprop="jobTitle")
| #{landingpage.jobTitle[0]}
|
wbr
|
| & #{landingpage.jobTitle[1]}
h2.text-2xl.mt-8(class="sm:text-5xl sm:mt-16", itemprop="email")
.whitespace-nowrap.items-center.transition(class="group-hover:opacity-100")
span(class="group-hover:opacity-100") #{landingpage.email[0]}
span.opacity-20 –
span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[1]}
span.opacity-20 –
span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[2]}
.peer.absolute.bottom-0.left-0.right-0.z-40.text-center.max-w-3xl.center.py-8
h2.tracking-widest.text-xl.font-semibold.opacity-80.transition(class="sm:text-2xl peer-hover:opacity-100", itemprop="name")= landingpage.name
h1.tracking-normal.text-md.mb-16.opacity-80.transition(class="sm:text-lg peer-hover:opacity-100", itemprop="jobTitle")
| #{landingpage.jobTitle[0]}
|
wbr
|
| & #{landingpage.jobTitle[1]}
a.group.text-2xl.mt-8(
class="sm:text-5xl sm:mt-16",
onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })",
onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })",
href=footer.emailLink,
rel="noopener noreferrer",
itemprop="email"
)
.whitespace-nowrap.items-center.transition(class="group-hover:opacity-100")
span(class="group-hover:opacity-100") #{landingpage.email[0]}
span.opacity-20 –
span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[1]}
span.opacity-20 –
span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[2]}
.hidden
| Years of age:
span#yearsOfAge

34
src/components/Professional.pug
View File

@@ -6,24 +6,24 @@ section#professional.bg-nls-black.text-white
.p-8(class="sm:p-20 min-h-[120vh]")
+Container
+Title("h2")= professional.title
p.mb-8.max-w-prose.prose.indent-3(class="lg:prose-xl")
p.mb-4.max-w-prose.prose.indent-3(class="lg:prose-xl")
| #{professional.description}
ul.list-disc.list-inside.mb-8
each item, i in professional.keyConcepts
li
if item.link
a.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-white.underline(
href=item.link.href,
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
title=item.link.title,
target="_blank",
rel="noopener noreferrer",
onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}', visitDuration: getVisitDuration() })`,
aria-label=item.link.ariaLabel
) #{item.link.text}
| #{item.text}
p.mb-8.mt-12.max-w-prose.prose(class="lg:prose-xl")
| #{professional.principlesIntro}
//ul.list-disc.list-inside.mb-8
// each item, i in professional.keyConcepts
// li
// if item.link
// a.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer.text-white.underline(
// href=item.link.href,
// class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
// title=item.link.title,
// target="_blank",
// rel="noopener noreferrer",
// onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}', visitDuration: getVisitDuration() })`,
// aria-label=item.link.ariaLabel
// ) #{item.link.text}
// | #{item.text}
p.mb-8.max-w-prose.prose(class="lg:prose-xl")
| #{professional.principlesIntro}
.list-disc.list-inside.mb-8
each person, i in professional.principlesPeople
- const data = {summary: `${person.name} — ${person.concept}`, color: "white", category: "professional"};