diff --git a/.gitignore b/.gitignore index f06235c..8d67a86 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ +.DS_Store node_modules dist diff --git a/src/i18n/translations.de.js b/src/i18n/translations.de.js index 4428a20..d634529 100644 --- a/src/i18n/translations.de.js +++ b/src/i18n/translations.de.js @@ -1,5 +1,6 @@ const translations = { navbar: { + about: "Team", contact: "Kontakt", }, footer: { @@ -53,6 +54,23 @@ const translations = { }, ], }, + about: { + title: "Unser Team", + team_members: [ + { + name: "Johanna Appel", + role: "Senior Consultant & Co-Founder", + description: "Johanna ist eine erfahrene Beraterin mit einem starken Fokus auf Kundenorientierung und Prozessoptimierung. Mit ihrer Expertise in der Automatisierung von Prozessen und der Implementierung von KI-Lösungen hat sie einen wesentlichen Beitrag zur Verbesserung der Effizienz und der Effektivität unserer Kunden geleistet.", + image: "/static/images/johanna_profile.png", + }, + { + name: "Laura Drasovean", + role: "Senior Consultant & Co-Founder", + description: "Laura ist eine erfahrene Beraterin mit einem starken Fokus auf Kundenorientierung und Prozessoptimierung. Mit ihrer Expertise in der Automatisierung von Prozessen und der Implementierung von KI-Lösungen hat sie einen wesentlichen Beitrag zur Verbesserung der Effizienz und der Effektivität unserer Kunden geleistet.", + image: "/static/images/laura_profile.png", + }, + ], + }, contact: { content: "Kontaktieren Sie uns gern unter", email: "info@fasterhorses.tech", diff --git a/src/i18n/translations.en.js b/src/i18n/translations.en.js index 4a0d43c..0ba2acb 100644 --- a/src/i18n/translations.en.js +++ b/src/i18n/translations.en.js @@ -1,5 +1,6 @@ const translations = { navbar: { + about: "Team", contact: "Contact", }, footer: { @@ -51,6 +52,23 @@ const translations = { }, ], }, + about: { + title: "Our Team", + team_members: [ + { + name: "Johanna Appel", + role: "Senior Consultant & Co-Founder", + description: "Johanna is an experienced consultant with a strong focus on customer orientation and process optimization. With her expertise in automating processes and implementing AI solutions, she has made a significant contribution to improving the efficiency and effectiveness of our customers.", + image: "/static/images/johanna_profile.png", + }, + { + name: "Laura Drasovean", + role: "Senior Consultant & Co-Founder", + description: "Laura is an experienced consultant with a strong focus on customer orientation and process optimization. With her expertise in automating processes and implementing AI solutions, she has made a significant contribution to improving the efficiency and effectiveness of our customers.", + image: "/static/images/laura_profile.png", + }, + ], + }, contact: { content: "Contact us at", email: "info@fasterhorses.tech", diff --git a/src/index.pug b/src/index.pug index f0cc536..e6e5960 100644 --- a/src/index.pug +++ b/src/index.pug @@ -9,6 +9,7 @@ mixin header header +page_link.brand("/") faster#[span.accent horses]#[span.thin .tech] nav + +page_link("/about")!= t("navbar.about") +page_link("/contact")!= t("navbar.contact") @@ -113,4 +114,25 @@ mixin theme-switcher +footer ++page("about") + +header + main + section.team-cards + h1!= t("about.title") + .card-container + each member in t("about.team_members") + article.team-card + .profile-image( + style=`background-image: url(${member.image})` + role="img" + aria-label=member.name + ) + .content-wrapper + .header + h2!= member.name + .content + p!= member.description + +footer + + diff --git a/src/static/images/johanna_profile.png b/src/static/images/johanna_profile.png new file mode 100644 index 0000000..60c824a Binary files /dev/null and b/src/static/images/johanna_profile.png differ diff --git a/src/static/images/laura_profile.png b/src/static/images/laura_profile.png new file mode 100644 index 0000000..bee1858 Binary files /dev/null and b/src/static/images/laura_profile.png differ diff --git a/src/static_inject/global.css b/src/static_inject/global.css index 827718d..53c749c 100644 --- a/src/static_inject/global.css +++ b/src/static_inject/global.css @@ -246,7 +246,7 @@ h1 { width: clamp(80%, 105vh, 100%); /* Looks weird, but it works */ - margin-bottom: clamp(var(--space-sm), 18vh, var(--space-3xl)); + margin-bottom: clamp(var(--space-sm), 18vh, calc(var(--space-3xl)*2)); padding: clamp(var(--space-lg), 2vw, var(--space-2xl)); font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl)); font-weight: var(--font-weight-thin); @@ -315,6 +315,81 @@ } } } + + section.team-cards { + h1 { + text-align: center; + margin-bottom: var(--space-3xl); + } + + .card-container { + display: grid; + grid-template-columns: 1fr; + gap: clamp(var(--space-md), 4vw, var(--space-2xl)); + max-width: var(--max-width); + } + + article.team-card { + position: relative; + padding: clamp(var(--space-lg), 2vw, var(--space-2xl)); + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-3xl); + align-items: start; + + @media (max-width: 640px) { + grid-template-columns: 1fr; + justify-items: center; + text-align: center; + + .content-wrapper { + width: 100%; + } + } + + .profile-image { + --size: clamp(8rem, 15vw, 12rem); + width: var(--size); + height: var(--size); + position: relative; + + &::before { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: var(--accent); + transform: rotate(10deg); + z-index: -1; + } + + &::after { + content: ''; + position: absolute; + inset: 0; + background-size: cover; + background-position: center; + background-image: inherit; + } + } + + .content-wrapper { + .header { + margin-bottom: var(--space-md); + + h2 { + font-size: var(--text-xl); + margin: var(--space-xs) 0 0; + } + } + + .content p { + line-height: 1.5; + font-size: var(--text-lg); + } + } + } + } } header {