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

83
.pugrc
View File

@@ -53,38 +53,6 @@
}, },
"professional": { "professional": {
"title": "Professional Approach", "title": "Professional Approach",
"keyConcepts": [
{
"link": {
"href": "https://12factor.net/",
"title": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).",
"ariaLabel": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).",
"text": "The 12-Factor App"
},
"text": " Microservices and Software-as-a-Service Methodology"
},
{
"text": "Testing Pyramid"
},
{
"text": "Accessibility (a11y)"
},
{
"text": "Rapid Prototyping and Design Thinking"
},
{
"text": "Scalability and Reliability"
},
{
"text": "Continuous Integration and Continuous Deployment (CI/CD)"
},
{
"text": "DevOps and Site Reliability Engineering (SRE)"
},
{
"text": "Agile and Lean Development"
}
],
"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:", "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:",
"principlesPeople": [ "principlesPeople": [
{ {
@@ -1122,7 +1090,26 @@
"label": "Web" "label": "Web"
} }
] ]
} },
{
"links": [
{
"url": "https://12factor.net/",
"title": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).",
"ariaLabel": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).",
"text": "The 12-Factor App (Microservices and Software-as-a-Service Methodology)"
}
]
},
{"text": "Testing Pyramid"},
{"text": "Accessibility (a11y)"},
{"text": "Rapid Prototyping and Design Thinking"},
{"text": "Scalability and Reliability"},
{
"text": "Continuous Integration and Continuous Deployment (CI/CD)"
},
{"text": "DevOps and Site Reliability Engineering (SRE)"},
{"text": "Agile and Lean Development"}
] ]
}, },
"tracking": { "tracking": {
@@ -1169,6 +1156,36 @@
"label": "Hotjar" "label": "Hotjar"
} }
] ]
},
{
"link": {
"href": "https://12factor.net/",
"title": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).",
"ariaLabel": "The twelve-factor methodology can be applied to apps written in any programming language, and which use any combination of backing services (database, queue, memory cache, etc).",
"text": "The 12-Factor App"
},
"text": " Microservices and Software-as-a-Service Methodology"
},
{
"text": "Testing Pyramid"
},
{
"text": "Accessibility (a11y)"
},
{
"text": "Rapid Prototyping and Design Thinking"
},
{
"text": "Scalability and Reliability"
},
{
"text": "Continuous Integration and Continuous Deployment (CI/CD)"
},
{
"text": "DevOps and Site Reliability Engineering (SRE)"
},
{
"text": "Agile and Lean Development"
} }
] ]
} }

45
src/components/Landingpage.pug
View File

@@ -1,29 +1,36 @@
header.bg-nls-black.text-white header.bg-nls-black.text-white
.teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20") .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( 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 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 .peer.absolute.bottom-0.left-0.right-0.z-40.text-center.max-w-3xl.center.py-8
.bottom-0.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
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") h1.tracking-normal.text-md.mb-16.opacity-80.transition(class="sm:text-lg peer-hover:opacity-100", itemprop="jobTitle")
| #{landingpage.jobTitle[0]} | #{landingpage.jobTitle[0]}
| |
wbr wbr
| |
| & #{landingpage.jobTitle[1]} | & #{landingpage.jobTitle[1]}
h2.text-2xl.mt-8(class="sm:text-5xl sm:mt-16", itemprop="email") a.group.text-2xl.mt-8(
.whitespace-nowrap.items-center.transition(class="group-hover:opacity-100") class="sm:text-5xl sm:mt-16",
span(class="group-hover:opacity-100") #{landingpage.email[0]} onclick="umami.track('email clicked', { position: 'title', visitDuration: getVisitDuration() })",
span.opacity-20 – onmouseover="umami.track('email hovered', { position: 'title', visitDuration: getVisitDuration() })",
span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[1]} href=footer.emailLink,
span.opacity-20 – rel="noopener noreferrer",
span.opacity-90(class="group-hover:opacity-20") #{landingpage.email[2]} 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 .hidden
| Years of age: | Years of age:
span#yearsOfAge 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]") .p-8(class="sm:p-20 min-h-[120vh]")
+Container +Container
+Title("h2")= professional.title +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} | #{professional.description}
ul.list-disc.list-inside.mb-8 //ul.list-disc.list-inside.mb-8
each item, i in professional.keyConcepts // each item, i in professional.keyConcepts
li // li
if item.link // 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( // 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, // 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", // 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, // title=item.link.title,
target="_blank", // target="_blank",
rel="noopener noreferrer", // rel="noopener noreferrer",
onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}', visitDuration: getVisitDuration() })`, // onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}', visitDuration: getVisitDuration() })`,
aria-label=item.link.ariaLabel // aria-label=item.link.ariaLabel
) #{item.link.text} // ) #{item.link.text}
| #{item.text} // | #{item.text}
p.mb-8.mt-12.max-w-prose.prose(class="lg:prose-xl") p.mb-8.max-w-prose.prose(class="lg:prose-xl")
| #{professional.principlesIntro} | #{professional.principlesIntro}
.list-disc.list-inside.mb-8 .list-disc.list-inside.mb-8
each person, i in professional.principlesPeople each person, i in professional.principlesPeople
- const data = {summary: `${person.name} — ${person.concept}`, color: "white", category: "professional"}; - const data = {summary: `${person.name} — ${person.concept}`, color: "white", category: "professional"};