make title, container and landingpage component, update content, expand people principles
This commit is contained in:
Michael Czechowski
parent
50c6eb6c6d
commit
691c734afb
GPG Key ID:
3DB96851AACDE749
|
|
@ -5,7 +5,7 @@ html.scroll-smooth(lang=lang)
|
|||
body.m-0.p-0
|
||||
main.flex.flex-col
|
||||
article(itemscope, itemtype="http://schema.org/Person")
|
||||
include src/components/Title
|
||||
include src/components/Landingpage
|
||||
include src/components/Professional
|
||||
include src/components/Academia
|
||||
include src/components/Footer
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
include Collapsable
|
||||
include Title
|
||||
include Container
|
||||
|
||||
section#academia.bg-nls-black.text-white
|
||||
.p-8(class="sm:p-20 min-h-[120vh]")
|
||||
.max-w-screen-md.mx-auto
|
||||
+Container
|
||||
// region Computer Science
|
||||
h2.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")= academia.sectionTitles.computerScience
|
||||
+Title("h2")= academia.sectionTitles.computerScience
|
||||
.mb-12
|
||||
.mb-8.max-w-prose.prose(class="lg:prose-xl")
|
||||
each paragraph in academia.intro
|
||||
p= paragraph
|
||||
each paragraph, i in academia.intro
|
||||
- const additionalClasses = i !== 0 ? "indent-3" : "";
|
||||
p(class=additionalClasses)= paragraph
|
||||
// endregion
|
||||
|
||||
// region Courses
|
||||
|
|
@ -33,7 +36,7 @@ section#academia.bg-nls-black.text-white
|
|||
// endregion
|
||||
|
||||
// region Skills
|
||||
h2.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")= academia.sectionTitles.expertise
|
||||
+Title("h2")= academia.sectionTitles.expertise
|
||||
p.mb-8.max-w-prose.prose(class="lg:prose-xl")
|
||||
| #{academia.expertise.intro}
|
||||
// endregion
|
||||
|
|
|
|||
|
|
@ -18,23 +18,26 @@ mixin Collapsable(data, open)
|
|||
class=`sm:text-lg text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
|
||||
onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
|
||||
)= data.summary
|
||||
ul.list-disc.list-inside.text-gray-400
|
||||
each item in data.items
|
||||
li
|
||||
if item.text
|
||||
= item.text
|
||||
if item.links
|
||||
each link, index in item.links
|
||||
a.transition.underline-offset-2.underline(
|
||||
class=`text-nls-${color} hover:text-white hover:decoration-2`,
|
||||
href=link.url,
|
||||
title=link.description,
|
||||
target="_blank",
|
||||
aria-label=link.description,
|
||||
rel="noopener noreferrer",
|
||||
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
|
||||
)= link.text
|
||||
if index < item.links.length - 1
|
||||
| ,
|
||||
if item.suffix
|
||||
= ` ${item.suffix}`
|
||||
ul.list-disc.list-inside.text-stone-300
|
||||
if data.items
|
||||
each item in data.items
|
||||
li
|
||||
if item.text
|
||||
= item.text
|
||||
if item.links
|
||||
each link, index in item.links
|
||||
a.transition.underline-offset-2.underline(
|
||||
class=`text-nls-${color} hover:text-white hover:decoration-2`,
|
||||
href=link.url,
|
||||
title=link.description,
|
||||
target="_blank",
|
||||
aria-label=link.description,
|
||||
rel="noopener noreferrer",
|
||||
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
|
||||
)= link.text
|
||||
if index < item.links.length - 1
|
||||
| ,
|
||||
if item.suffix
|
||||
= ` ${item.suffix}`
|
||||
else
|
||||
block
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
mixin Container
|
||||
.max-w-screen-sm.mx-auto
|
||||
block
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
include Container
|
||||
|
||||
mixin Link(href, label, target, rel)
|
||||
- const eventName = "external link clicked";
|
||||
- const eventCategory = "footer";
|
||||
|
|
@ -12,7 +14,7 @@ mixin Svg
|
|||
|
||||
footer#footer.bg-nls-black.text-white
|
||||
.p-8(class="sm:p-20 min-h-[120vh]")
|
||||
.max-w-screen-md.mx-auto
|
||||
+Container
|
||||
// region Contact
|
||||
h2.text-5xl.mb-4 #{footer.title}
|
||||
p.mb-8.max-w-prose #{footer.content}
|
||||
|
|
|
|||
|
|
@ -70,6 +70,9 @@ head
|
|||
"nls-orange": "#F9A03F",
|
||||
"nls-yellow": "#F9C74F",
|
||||
"nls-black": "#0f0f11",
|
||||
"nls-white": "#f9f9f9",
|
||||
white: "#f9f9f9",
|
||||
black: "#0f0f11",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
header.bg-nls-black.text-white
|
||||
.teaser.p-8.flex.flex-col.items-center.justify-center.h-full(class="sm:p-20 min-h-[90vh]")
|
||||
.max-w-3xl.mb-8(class="w-4/5")
|
||||
object.w-full(data=title.logoSvg, type="image/svg+xml")
|
||||
.text-center.max-w-3xl.center.py-8
|
||||
h2.text-xl.opacity-80(class="sm:text-2xl", itemprop="name")= title.name
|
||||
h1.text-md.opacity-60(class="sm:text-lg", itemprop="jobTitle")
|
||||
| #{title.jobTitle[0]}
|
||||
|
|
||||
wbr
|
||||
|
|
||||
| & #{title.jobTitle[1]}
|
||||
h2.text-2xl.mt-8.opacity-90.group(class="sm:text-5xl sm:mt-16", itemprop="email")
|
||||
a(
|
||||
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"
|
||||
)
|
||||
span.whitespace-nowrap.items-center.opacity-10.transition(class="group-hover:opacity-100")
|
||||
span 👋
|
||||
span(class="group-hover:underline-2") #{title.email[0]}
|
||||
span.opacity-20 –
|
||||
span(class="group-hover:opacity-20") #{title.email[1]}
|
||||
span.opacity-20 –
|
||||
span(class="group-hover:opacity-20") #{title.email[2]}
|
||||
|
|
@ -1,8 +1,12 @@
|
|||
include Collapsable
|
||||
include Title
|
||||
include Container
|
||||
|
||||
section#professional.bg-nls-black.text-white
|
||||
.p-8(class="sm:p-20 min-h-[120vh]")
|
||||
.max-w-screen-md.mx-auto
|
||||
h2.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")= professional.title
|
||||
p.mb-8.max-w-prose.prose(class="lg:prose-xl")
|
||||
+Container
|
||||
+Title("h2")= professional.title
|
||||
p.mb-8.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
|
||||
|
|
@ -22,4 +26,11 @@ section#professional.bg-nls-black.text-white
|
|||
| #{professional.principlesIntro}
|
||||
ul.list-disc.list-inside.mb-8
|
||||
each person, i in professional.principlesPeople
|
||||
li #{person.name} – #{person.concept}
|
||||
// - 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" : "";
|
||||
p.pl-4(class=`sm:w-5/6 ${additionalClasses}`)= paragraph
|
||||
|
|
|
|||
|
|
@ -1,25 +1,11 @@
|
|||
header.bg-nls-black.text-white
|
||||
.teaser.p-8.flex.flex-col.items-center.justify-center.h-full(class="sm:p-20 min-h-[90vh]")
|
||||
.max-w-3xl.mb-8(class="w-4/5")
|
||||
object.w-full(data=title.logoSvg, type="image/svg+xml")
|
||||
.text-center.max-w-3xl.center.py-8
|
||||
h2.text-xl.opacity-80(class="sm:text-2xl", itemprop="name")= title.name
|
||||
h1.text-md.opacity-60(class="sm:text-lg", itemprop="jobTitle")
|
||||
| #{title.jobTitle[0]}
|
||||
wbr
|
||||
| & #{title.jobTitle[1]}
|
||||
h2.text-2xl.mt-8.opacity-90.group(class="sm:text-5xl sm:mt-16", itemprop="email")
|
||||
a(
|
||||
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"
|
||||
)
|
||||
span.whitespace-nowrap.items-center.opacity-10.transition(class="group-hover:opacity-100")
|
||||
span 👋
|
||||
span(class="group-hover:underline-2") #{title.email[0]}
|
||||
span.opacity-20 –
|
||||
span(class="group-hover:opacity-20") #{title.email[1]}
|
||||
span.opacity-20 –
|
||||
span(class="group-hover:opacity-20") #{title.email[2]}
|
||||
mixin Title(tag)
|
||||
case tag
|
||||
when "h2"
|
||||
h2.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")
|
||||
block
|
||||
when "h3"
|
||||
h3.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")
|
||||
block
|
||||
default
|
||||
h1.font-bold.font-serif.text-xl.mb-4(class="sm:text-2xl w-5/6")
|
||||
block
|
||||
|
|
|
|||
Loading…
Reference in New Issue