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

remove email event on landingpage,

Browse Source 
fix missing links in academia technologies,
change site order,
improve readability
This commit is contained in:
Michael Czechowski
2024-10-22 00:26:30 +02:00
parent 97d632f63a
commit 5477fec7cd
6 changed files with 502 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
.pugrc
View File

File diff suppressed because it is too large Load Diff

12
index.pug
View File

@@ -6,8 +6,8 @@ html.scroll-smooth(lang=lang)
main.flex.flex-col
article(itemscope, itemtype="http://schema.org/Person")
include src/components/Landingpage
include src/components/Professional
include src/components/Academia
include src/components/Professional
include src/components/Footer
script.
@@ -31,3 +31,13 @@ html.scroll-smooth(lang=lang)
}
});
sections.forEach((section) => sectionObserver(section.id).observe(section));
let yearsOfAge = 0;
let yearsOfDeveloping = 0;
setInterval(() => {
yearsOfAge = (new Date().getTime() - new Date("1988-10-07").getTime()) / 1000 / 60 / 60 / 24 / 365.25;
yearsOfDeveloping = (new Date().getTime() - new Date("2005-07-07").getTime()) / 1000 / 60 / 60 / 24 / 365.25;
document.getElementById("yearsOfAge").innerText = yearsOfAge.toFixed(6);
document.getElementById("yearsOfDeveloping").innerText = yearsOfDeveloping.toFixed(6);
}, 100);

68
src/components/Academia.pug
View File

@@ -5,42 +5,12 @@ include Container
section#academia.bg-nls-black.text-white
.p-8(class="sm:p-20 min-h-[120vh]")
+Container
// region Computer Science
+Title("h2")= academia.sectionTitles.computerScience
.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-tight sm:text-xl text-lg";
p(class=additionalClasses)= paragraph
// endregion
// region Courses
.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
div
details.mb-4
summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.dhbw
ul.list-disc.list-inside
li= academia.courses.dhbw[0]
div
details.mb-4
summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.lfh
ul.list-disc.list-inside
each course in academia.courses.lfh
li= course
// endregion
// region Skills
+Title("h2")= academia.sectionTitles.expertise
.mb-8.max-w-prose.prose(class="lg:prose-xl")
.mb-8.max-w-prose
each paragraph, i in academia.expertise.intro
- const additionalClasses = i !== 0 ? "indent-3" : "mb-2 font-serif leading-tight sm:text-xl text-md";
p(class=additionalClasses)= paragraph
- 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-200(class=`hover:text-white transition ${additionalClasses}`) !{paragraph}
// endregion
// region Expertise
@@ -53,3 +23,35 @@ section#academia.bg-nls-black.text-white
+Collapsable(academia.expertise.bestPractices)
+Collapsable(academia.expertise.tracking)
// endregion
+Container
// region Computer Science
+Title("h2")= academia.sectionTitles.computerScience
.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-200(class=`hover:text-white transition ${additionalClasses}`) !{paragraph}
// endregion
// region Courses
.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
div
details.mb-4
summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.dhbw
ul.list-disc.list-inside
each course in academia.courses.dhbw
li= course
div
details.mb-4
summary.rounded-sm.text-white.transition.underline-offset-2.mb-2.cursor-pointer(
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.lfh
ul.list-disc.list-inside
each course in academia.courses.lfh
li= course
// endregion

66
src/components/Landingpage.pug
View File

@@ -1,47 +1,33 @@
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]")
a.block(
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"
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",
src=landingpage.emojiSvg
)
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",
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)
a.z-60.block(
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"
)
.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]}
a.z-60.block(
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"
)
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]}
.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]}
.hidden
| Years of age:
span#yearsOfAge
|
| |
| Years of developing:
span#yearsOfDeveloping

6
src/components/Professional.pug
View File

@@ -24,13 +24,11 @@ section#professional.bg-nls-black.text-white
| #{item.text}
p.mb-8.mt-12.max-w-prose.prose(class="lg:prose-xl")
| #{professional.principlesIntro}
ul.list-disc.list-inside.mb-8
.list-disc.list-inside.mb-8
each person, i in professional.principlesPeople
// - const data = {"color":"orange","category":"tracking","summary":"Analytics & Tracking","items":[{"links":[{"text":"Umami","url":"https://umami.is/","description":"Simple, fast, privacy-focused alternative to Google Analytics","label":"Umami"}]},{"links":[{"text":"Google Analytics","url":"https://developers.google.com/analytics/","description":"Web analytics service offered by Google","label":"Google"}]},{"links":[{"text":"Amplitude","url":"https://amplitude.com/","description":"Product analytics platform","label":"Amplitude"}]},{"links":[{"text":"Hotjar","url":"https://www.hotjar.com/","description":"Behavior analytics and user feedback platform","label":"Hotjar"}]}]}
- const data = {summary: `${person.name} — ${person.concept}`, color: "white", category: "professional"};
- const isOpen = i === 0;
//li #{person.name} – #{person.concept} #{isOpen(i)}
+Collapsable(data, isOpen)
each paragraph, j in person.paragraphs
- const additionalClasses = j !== 0 ? "indent-3" : "";
- const additionalClasses = j !== 0 ? "indent-3" : "mt-4";
p.pl-4(class=`sm:w-5/6 ${additionalClasses}`)= paragraph

6
src/components/Title.pug
View File

@@ -1,11 +1,11 @@
mixin Title(tag)
case tag
when "h2"
h2.font-bold.font-serif.text-xl.mb-2(class="sm:text-2xl w-5/6")
h2.font-bold.font-serif.text-xl.mb-2(class="sm:text-2xl w-3/4")
block
when "h3"
h3.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")
h3.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-3/4")
block
default
h1.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")
h1.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-3/4")
block