update cv and add dark mode
This commit is contained in:
parent
92d10e8a62
commit
cb191a42fd
5
.pugrc
5
.pugrc
|
@ -45,6 +45,7 @@
|
|||
"email": ["hello", "at", "dailysh.it"],
|
||||
"name": "Michael W. Czechowski",
|
||||
"logoSvg": "./src/assets/nls.svg",
|
||||
"logoSvgInverted": "./src/assets/nls_inverted.svg",
|
||||
"emojiSvg": "./src/assets/waving-hand.svg",
|
||||
"jobTitle": ["Enterprise Software Architect", "Digital Transformation Expert"]
|
||||
},
|
||||
|
@ -129,7 +130,7 @@
|
|||
],
|
||||
"sectionTitles": {
|
||||
"computerScience": "Computer Science",
|
||||
"expertise": "Software Architecture and Development"
|
||||
"expertise": "Software <wbr/>Architect­ure <wbr/>and <wbr/>Develop­ment"
|
||||
},
|
||||
"courseInstitutions": {
|
||||
"dhbw": "Duale Hochschule Baden-Württemberg (DHBW)",
|
||||
|
@ -1164,7 +1165,7 @@
|
|||
"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": "Microservices and Software-as-a-Service Methodology"
|
||||
},
|
||||
{
|
||||
"text": "Testing Pyramid"
|
||||
|
|
19
index.pug
19
index.pug
|
@ -32,12 +32,15 @@ html.scroll-smooth(lang=lang)
|
|||
});
|
||||
sections.forEach((section) => sectionObserver(section.id).observe(section));
|
||||
|
||||
let yearsOfAge = 0;
|
||||
let yearsOfDeveloping = 0;
|
||||
// tailwindcss set correct dark/light theme depending on client preference
|
||||
// https://tailwindcss.com/docs/dark-mode#toggling-dark-mode
|
||||
|
||||
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);
|
||||
}, 500);
|
||||
// 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);
|
||||
// }, 500);
|
||||
|
|
Binary file not shown.
1261
src/assets/nls.svg
1261
src/assets/nls.svg
File diff suppressed because it is too large
Load Diff
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 3.2 KiB |
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="566.93px" height="566.93px" viewBox="0 0 566.93 566.93" enable-background="new 0 0 566.93 566.93" xml:space="preserve">
|
||||
<g id="White">
|
||||
<polygon id="T_1_" fill="#0f0f11" points="413.833,379.251 433.337,374.94 435.333,457.917 466.25,451.084 463.587,368.856
|
||||
482.583,365.084 481.833,337.251 413,351.501 "/>
|
||||
<polygon id="I" fill="#0f0f11" points="351.974,364.436 383.417,358.334 387.333,468.167 355.417,475.084 "/>
|
||||
<polygon id="H" fill="#0f0f11" points="268.667,419.667 284.833,416.833 283.25,378.167 314.833,371.333 318.417,481.917
|
||||
286.834,488.5 285.833,445.5 269.917,448.416 271.25,491.333 240,497.917 236.417,387.666 267.5,381.5 "/>
|
||||
<path id="S" fill="#0f0f11" d="M190.917,430l13.501-26.666c0,0-9.335-6.334-21.168-5.834s-29.667,4.25-39.833,19.583
|
||||
s-4.333,33.251-1,38.667c4.225,6.866,12.5,11,19.5,13.666s10.338,3.531,12.083,7.417c1.833,4.083-2.417,8.834-6.917,9.334
|
||||
s-8,0.083-11-0.917s-5.361-1.978-5.361-1.978l-13.055,27.394c0,0,5.75,5.583,24.083,5.25s27.083-6.666,31.917-11.166
|
||||
s10.584-9.417,12.75-23.75s-4.25-24.167-8.083-28.334S187.583,445,176.417,441c-8.756-3.137-5.75-9.75-4.583-11.584
|
||||
s5.833-3.203,8.667-3.166C186.917,426.333,190.917,430,190.917,430z"/>
|
||||
<polygon id="L" fill="#0f0f11" points="144.5,258.167 146.916,338.501 174.347,332.589 175.083,362.5 115.917,375
|
||||
112.333,265.083 "/>
|
||||
<polygon id="E_2_" fill="#0f0f11" points="340.5,217.417 395.874,205.667 396.708,234.333 371.334,239.667 371.874,251.667
|
||||
394.874,247.167 395.874,273.667 372.667,278.417 373.374,292 401.708,286.105 402.124,314.92 344.333,327.333 "/>
|
||||
<polygon id="V" fill="#0f0f11" points="242.5,237.833 275.667,230.75 290.75,301.334 298.916,225.584 332.5,218.667
|
||||
310.908,333.433 271.416,341.251 "/>
|
||||
<polygon id="E_1_" fill="#0f0f11" points="180.833,250.083 236.25,238.667 237.084,267.333 211.833,272.5 212,285.333
|
||||
235.25,280.167 236.25,306.667 213.167,311.417 213.5,325.25 242.084,319.104 242.5,347.919 185.084,359.833 "/>
|
||||
<polygon id="L_1_" fill="#0f0f11" points="441.5,196.251 443.5,276.313 471.75,270.313 472.188,300.375 413.688,312.5
|
||||
409.75,202.5 "/>
|
||||
<polygon id="T" fill="#0f0f11" points="372.063,88.125 391.125,84.188 393.625,166.438 424.563,160.25 421.667,78 440.625,73.75
|
||||
440,45.75 371.625,60.125 "/>
|
||||
<polygon id="X" fill="#0f0f11" points="269.063,81.813 301,75.25 311.875,102.063 321.188,70.563 353.813,63.938 331.438,121.125
|
||||
359.167,173.833 326.125,180.25 314.625,153.063 304.124,185.111 271.375,191.75 294.5,129.688 "/>
|
||||
<polygon id="E" fill="#0f0f11" points="191.25,98.5 246.5,87.333 247.333,116 222.667,121.167 222.5,133.333 245.75,128.563
|
||||
246.5,155.333 224.333,159.833 224.063,173.063 251.688,167.5 252.75,196.688 195.083,208.333 "/>
|
||||
<polygon id="N" fill="#0f0f11" points="82.083,121 115.417,114.333 135.417,166.417 133.417,110.583 160,104.917 163.667,215
|
||||
131.083,221.5 110.833,170.5 113.25,225.5 85.917,230.833 "/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 3.2 KiB |
|
@ -2,15 +2,15 @@ include Collapsable
|
|||
include Title
|
||||
include Container
|
||||
|
||||
section#academia.bg-nls-black.text-white
|
||||
.p-8(class="sm:p-20 min-h-[120vh]")
|
||||
section#academia
|
||||
.p-8.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:p-20 min-h-[120vh]")
|
||||
+Container
|
||||
// region Skills
|
||||
+Title("h2")= academia.sectionTitles.expertise
|
||||
+Title("h2") !{academia.sectionTitles.expertise}
|
||||
.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 text-white";
|
||||
p.text-slate-200(class=`hover:text-white transition ${additionalClasses}`) !{paragraph}
|
||||
- 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 Expertise
|
||||
|
@ -31,15 +31,15 @@ section#academia.bg-nls-black.text-white
|
|||
.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}
|
||||
p.text-slate-700(class=`dark:text-slate-300 ${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",
|
||||
summary.rounded-sm.text-nls-black.transition.underline-offset-2.mb-2.cursor-pointer(
|
||||
class="dark:text-white focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-black dark:focus:ring-white focus:bg-nls-black focus:text-white dark:focus:bg-white dark:focus:text-nls-black focus:no-underline",
|
||||
onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
|
||||
)= academia.courseInstitutions.dhbw
|
||||
ul.list-disc.list-inside
|
||||
|
@ -47,8 +47,8 @@ section#academia.bg-nls-black.text-white
|
|||
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",
|
||||
summary.rounded-sm.text-md.text-nls-black.transition.underline-offset-2.mb-2.cursor-pointer(
|
||||
class="sm:text-lg dark:text-white focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-black dark:focus:ring-white focus:bg-nls-black focus:text-white dark:focus:bg-white dark:focus:text-nls-black focus:no-underline",
|
||||
onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
|
||||
)= academia.courseInstitutions.lfh
|
||||
ul.list-disc.list-inside
|
||||
|
|
|
@ -6,11 +6,11 @@ mixin Collapsable(data, open)
|
|||
|
||||
div
|
||||
details.mb-4(open=isExpanded)
|
||||
summary.rounded-sm.transition.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer(
|
||||
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`,
|
||||
summary(
|
||||
class=`rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg text-nls-${color} dark: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-stone-300
|
||||
ul.list-disc.list-inside.text-slate-600(class="dark:text-stone-300")
|
||||
if data.items
|
||||
each item in data.items
|
||||
li
|
||||
|
@ -18,15 +18,15 @@ mixin Collapsable(data, open)
|
|||
= 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`,
|
||||
a(
|
||||
class=`transition underline-offset-2 underline text-nls-${color} hover:text-nls-black dark: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
|
||||
) #{link.text}
|
||||
if index < item.links.length - 1
|
||||
| ,
|
||||
if item.suffix
|
||||
|
|
|
@ -5,15 +5,15 @@ 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-white(href=href, class="hover:text-amber-300", target=target, rel=rel, onclick=onclick)
|
||||
a.transition-colors.text-nls-black(href=href, class="dark:text-white hover:text-amber-300", target=target, rel=rel, onclick=onclick)
|
||||
block
|
||||
|
||||
mixin Svg
|
||||
svg.w-24.h-24(class="sm:w-8 sm:h-8", aria-hidden="true", fill="currentColor", viewbox="0 0 24 24")
|
||||
block
|
||||
|
||||
footer#footer.bg-nls-black.text-white
|
||||
.p-8(class="sm:p-20 min-h-[120vh]")
|
||||
footer#footer
|
||||
.p-8.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white sm:p-20 min-h-[120vh]")
|
||||
+Container
|
||||
// region Contact
|
||||
h2.text-5xl.mb-4 #{footer.title}
|
||||
|
@ -44,14 +44,14 @@ footer#footer.bg-nls-black.text-white
|
|||
style="fill: currentColor"
|
||||
)
|
||||
|
||||
a.transition-colors.text-white.uppercase.font-semibold(
|
||||
a.transition-colors.text-nls-black.uppercase.font-semibold(
|
||||
href=footer.emailLink,
|
||||
class="hover:text-amber-300",
|
||||
class="dark:text-white hover:text-amber-300",
|
||||
rel="noopener noreferrer",
|
||||
onclick="umami.track('email clicked', { position: 'footer', visitDuration: getVisitDuration() })"
|
||||
) #{footer.emailText}
|
||||
|
||||
+Link("./src/assets/CV_2019_Michael-Werner-Czechowski_en.pdf", "CV", "_blank", "noopener noreferrer")
|
||||
+Link("./src/assets/CV_2024_Michael-Werner-Czechowski_de.pdf", "CV", "_blank", "noopener noreferrer")
|
||||
| CV
|
||||
|
||||
+Link("https://git.dailysh.it/nextlevelshit/dailysh.it", "gitea", "_blank", "noopener noreferrer")= footer.gitea
|
||||
|
|
|
@ -51,6 +51,7 @@ head
|
|||
script(src="https://cdn.tailwindcss.com")
|
||||
script.
|
||||
tailwind.config = {
|
||||
darkMode: "media",
|
||||
theme: {
|
||||
fontFamily: {
|
||||
mono: ["Roboto Mono", "monospace"],
|
||||
|
@ -146,3 +147,26 @@ head
|
|||
const getVisitDuration = () => {
|
||||
return Math.floor((Date.now() - window.visitDuration) / 1000);
|
||||
};
|
||||
|
||||
// Check for saved user preference, if any, on load of the website
|
||||
const darkMode = localStorage.getItem("darkMode");
|
||||
|
||||
// If no preference is set, check system preference
|
||||
if (darkMode === null) {
|
||||
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("darkMode", "dark");
|
||||
}
|
||||
} else if (darkMode === "dark") {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
|
||||
function toggleDarkMode() {
|
||||
if (document.documentElement.classList.contains("dark")) {
|
||||
document.documentElement.classList.remove("dark");
|
||||
localStorage.setItem("darkMode", "light");
|
||||
} else {
|
||||
document.documentElement.classList.add("dark");
|
||||
localStorage.setItem("darkMode", "dark");
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
header.bg-nls-black.text-white
|
||||
header.bg-white.text-nls-black(class="dark:text-white dark:bg-nls-black")
|
||||
//button.absolute.top-0.right-0.w-8.h-8.m-3.p-3.rounded-full.bg-slate-300(
|
||||
// onclick="toggleDarkMode()"
|
||||
//)
|
||||
// div(class="block dark:hidden")
|
||||
// span.sr-only Toggle dark mode
|
||||
// | 🌙
|
||||
// div(class="hidden dark:block")
|
||||
// span.sr-only Toggle light mode
|
||||
// | ☀️
|
||||
|
||||
.teaser.p-8.flex.flex-col.items-center.justify-center(class="sm:p-20")
|
||||
.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] 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] peer-hover:opacity-60 peer-hover:scale-50", src=landingpage.logoSvg)
|
||||
|
||||
.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
|
||||
|
||||
|
@ -17,24 +20,12 @@ header.bg-nls-black.text-white
|
|||
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
|
||||
|
|
||||
| |
|
||||
| Years of developing:
|
||||
span#yearsOfDeveloping
|
||||
|
||||
//img.absolute.z-10.left-0.right-0.mx-auto.opacity-0.transition(
|
||||
// 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.invisible(class="dark:visible h-[54vh]", src=landingpage.logoSvg)
|
||||
|
||||
img.absolute.z-0.left-0.right-0.mx-auto.transition.visible(class="dark:invisible h-[54vh]", src=landingpage.logoSvgInverted)
|
||||
|
|
|
@ -1,18 +1,14 @@
|
|||
include Collapsable
|
||||
include Title
|
||||
include Container
|
||||
|
||||
section#professional.bg-nls-black.text-white
|
||||
section#professional.bg-white.text-nls-black(class="dark:bg-nls-black dark:text-white")
|
||||
.p-8(class="sm:p-20 min-h-[120vh]")
|
||||
+Container
|
||||
+Title("h2")= professional.title
|
||||
p.mb-4.max-w-prose.prose.indent-3(class="lg:prose-xl")
|
||||
p.mb-4.max-w-prose.prose.indent-3(class="lg:prose-xl dark:prose-invert")
|
||||
| #{professional.description}
|
||||
p.mb-8.max-w-prose.prose(class="lg:prose-xl")
|
||||
p.mb-8.max-w-prose.prose(class="lg:prose-xl dark:prose-invert")
|
||||
| #{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"};
|
||||
- const data = {summary: `${person.name} — ${person.concept}`, color: "text-nls-black dark:text-white", category: "professional"};
|
||||
- const isOpen = i === 0;
|
||||
+Collapsable(data, isOpen)
|
||||
each paragraph, j in person.paragraphs
|
||||
|
|
Loading…
Reference in New Issue