[WIP] about page

.gitignore

@@ -1,2 +1,3 @@
+.DS_Store
 node_modules
 dist

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",

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",

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
+
+
 

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 {