Merge pull request #299 from blz-it/team-page

src/assets/data/team.json

@@ -0,0 +1,79 @@
+[
+  {
+    "img": "/src/assets/img/team/Benjamin Frost.webp",
+    "name": "Benjamin Frost",
+    "lastRole": { "de": "Jury", "en": "Jury" },
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Jonas Wanke.webp",
+    "name": "Jonas Wanke",
+    "lastRole": { "en": "Expert", "de": "Bundestrainer" },
+    "skill": {
+      "de": "App-Entwicklung",
+      "en": "Mobile Applications Development"
+    },
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Dr. Olaf Kappler.webp",
+    "name": "Dr. Olaf Kappler",
+    "lastRole": { "en": "Expert", "de": "Bundestrainer" },
+    "skill": {
+      "de": "Software-Entwicklung",
+      "en": "Software Applications Development"
+    }
+  },
+  {
+    "img": "/src/assets/img/team/Doreen Kappler.webp",
+    "name": "Doreen Kappler",
+    "lastRole": { "de": "Good Fairy", "en": "Good Fairy" }
+  },
+  {
+    "img": "/src/assets/img/team/Glenn Skrzypczak.webp",
+    "name": "Glenn Skrzypczak",
+    "lastRole": { "en": "Expert", "de": "Bundestrainer" },
+    "skill": {
+      "de": "Web-Entwicklung",
+      "en": "Web Technologies"
+    },
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Elisa Boose.webp",
+    "name": "Elisa Boose",
+    "lastRole": { "en": "Trainer", "de": "Trainer" }
+  },
+  {
+    "img": "/src/assets/img/team/Michael Boose.webp",
+    "name": "Michael Boose",
+    "lastRole": { "en": "Trainer", "de": "Trainer" }
+  },
+  {
+    "img": "/src/assets/img/team/Joachim Schiller.webp",
+    "name": "Joachim Schiller",
+    "lastRole": { "de": "Jury", "en": "Jury" },
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Justin Konratt.webp",
+    "name": "Justin Konratt",
+    "lastRole": { "de": "Jury", "en": "Jury" },
+    "hasMultipleRoles": true
+  },
+  {
+    "img": "/src/assets/img/team/Kai Redmann.webp",
+    "name": "Kai Redmann",
+    "lastRole": { "en": "Workshop-Manager", "de": "Workshop Manager" }
+  },
+  {
+    "img": "/src/assets/img/team/Lukas Fischer.webp",
+    "name": "Lukas Fischer",
+    "lastRole": { "en": "Workshop-Manager", "de": "Workshop Manager" }
+  },
+  {
+    "img": "/src/assets/img/team/Thomas Steinfeld.webp",
+    "name": "Thomas Steinfeld",
+    "lastRole": { "en": "Mr. Speed Programming", "de": "Mr. Speed Programming" }
+  }
+]

src/components/Header.astro

@@ -24,7 +24,7 @@ const skills = [
   {
     name: t({
       de: "Web-Entwicklung",
-      en: "Web Technologies"
+      en: "Web Technologies",
     }),
     href: getRelativeLocaleUrl(lang, "web-technologies"),
   },
@@ -46,20 +46,27 @@ const skills = [
         </a>
         <div class="ml-10 hidden space-x-8 lg:block">
           <a
-            href={getRelativeLocaleUrl(lang)}
+            href={getRelativeLocaleUrl(lang, "/")}
             class="text-base font-medium text-white hover:text-gray-100"
           >
             {t({ de: "Startseite", en: "Home" })}
           </a>
         </div>
-
         <div class="ml-10 hidden lg:block">
           <SkillsDropdown
             client:load
             title={t({ de: "Unsere Disziplinen", en: "Our Skills" })}
             skills={skills}
           />
         </div>
+        <div class="ml-10 hidden space-x-8 lg:block">
+          <a
+            href={getRelativeLocaleUrl(lang, "/our-team")}
+            class="text-base font-medium text-white hover:text-gray-100"
+          >
+            {t({ de: "Unser Team", en: "Our Team" })}
+          </a>
+        </div>
       </div>
       <LanguageDropdown
         client:load

src/components/Hero.astro

@@ -6,7 +6,7 @@ import HeroBgImage from "~/assets/img/hero-bg.jpg";
 
 interface Props {
   title: string;
-  subtitle: string;
+  subtitle?: string;
   img?: ImageMetadata;
   size?: "md" | "lg";
 }
@@ -27,7 +27,7 @@ const { title, subtitle, img = HeroBgImage, size = "lg" } = Astro.props;
     class={clsx(
       "relative mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8",
       { "py-8 sm:py-16 md:py-32": size === "md" },
-      { "py-16 sm:py-32 md:py-64": size === "lg" },
+      { "py-16 sm:py-32 md:py-64": size === "lg" }
     )}
   >
     <h1

src/components/team/Person.astro

@@ -1,27 +1,36 @@
 ---
-import type { ComponentProps } from "astro/types";
-import SocialMediaList from "./SocialMediaList.astro";
+import { getLangFromUrl, useTranslations } from "~/i18n/utils";
+import { PersonImage } from "./PersonImage";
+import type { Language } from "~/i18n";
 
-type Props = ComponentProps<typeof SocialMediaList> & {
+interface Props {
   name: string;
-  img: string;
-  info?: string;
-};
+  lastRole: Record<Language, string>;
+  img?: string;
+  skill?: Record<Language, string>;
+  hasMultipleRoles?: boolean;
+}
 
-const { name, img, info, links = [] } = Astro.props;
+const { name, img, lastRole, skill, hasMultipleRoles = false } = Astro.props;
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 
 <div class="space-y-6">
-  <img
-    class="mx-auto h-40 w-40 rounded-full object-cover shadow-lg xl:h-56 xl:w-56"
-    src={img}
-    alt=""
-  />
-  <div class="space-y-2">
-    <div class="space-y-1 text-lg font-medium leading-6">
-      <h3>{name}</h3>
-      {info && <p class="text-wsg-orange-500">{info}</p>}
+  <PersonImage img={img} />
+  <div class="text-md text-center font-light">
+    <h3 class="mb-1 text-lg font-medium">{name}</h3>
+    <div>
+      <p class="inline-block">
+        {t(lastRole)}
+      </p>
+      <p class="inline-block">
+        {hasMultipleRoles && t({ de: "und mehr", en: "and more" })}
+      </p>
     </div>
-    <SocialMediaList links={links} />
+    <p>
+      {skill || <br />}
+    </p>
   </div>
 </div>

src/components/team/PersonImage.tsx

@@ -0,0 +1,18 @@
+import clsx from "clsx";
+
+export type PersonImageProps = {
+  img?: string;
+};
+
+export const PersonImage = ({ img }: PersonImageProps) => {
+  return (
+    <img
+      className={clsx(
+        `mx-auto h-40 w-40 rounded-full object-cover shadow-lg xl:h-56 xl:w-56`,
+        img || "p-5",
+      )}
+      src={img ?? "/imgs/wsg/wsg_hands.svg"}
+      alt=""
+    />
+  );
+};

src/components/team/Team.astro

@@ -1,23 +1,24 @@
 ---
-import type { ComponentProps } from "astro/types";
 import Person from "./Person.astro";
-
-interface Props {
-  members: ComponentProps<typeof Person>[];
-}
-
-const { members } = Astro.props;
+import team from "~/assets/data/team.json";
 ---
 
-<ul
-  role="list"
-  class="mx-auto space-y-16 sm:grid sm:grid-cols-2 sm:gap-16 sm:space-y-0 lg:max-w-5xl lg:grid-cols-3"
->
-  {
-    members.map((member) => (
-      <li>
-        <Person {...member} />
-      </li>
-    ))
-  }
-</ul>
+<div class="bg-white py-16">
+  <div
+    class="mx-8 grid grid-cols-2 gap-y-16 md:mx-24 md:grid-cols-3 lg:grid-cols-4"
+  >
+    {
+      team
+        .sort((first, second) => first["name"].localeCompare(second["name"]))
+        .map((member) => (
+          <Person
+            name={member["name"]}
+            img={member["img"]}
+            lastRole={member["lastRole"]}
+            skill={member["skill"]}
+            hasMultipleRoles={member["hasMultipleRoles"]}
+          />
+        ))
+    }
+  </div>
+</div>

src/layouts/SkillPage.astro

@@ -7,7 +7,6 @@ import HeadedSection from "~/components/sections/HeadedSection.astro";
 import WavedSection from "~/components/sections/WavedSection.astro";
 import SkillInformation from "~/components/skill/SkillInformation.astro";
 import SkillRoadmap from "~/components/skill/SkillRoadmap.astro";
-import type Person from "~/components/team/Person.astro";
 import TimeLine from "~/components/timeline/TimeLine.astro";
 import { getLangFromUrl, useTranslations } from "~/i18n";
 import Layout from "./Layout.astro";
@@ -18,7 +17,6 @@ interface Props {
   skillInformation: ComponentProps<typeof SkillInformation>;
   img: ImageMetadata;
   contact: string;
-  nationalTeam: ComponentProps<typeof Person>[];
   timelineEntries: ComponentProps<typeof TimeLine>["entries"];
   additionalLinks: ComponentProps<typeof LinkCard>[];
 }
@@ -28,7 +26,6 @@ const {
   skillDescription,
   skillInformation,
   img,
-  nationalTeam,
   timelineEntries,
   additionalLinks,
   contact,

src/pages/[lang]/our-team.astro

@@ -0,0 +1,17 @@
+---
+import { getLangFromUrl, localeParams, useTranslations } from "~/i18n/utils";
+import Hero from "../../components/Hero.astro";
+import TeamPage from "../../components/team/Team.astro";
+import Layout from "../../layouts/Layout.astro";
+import TeamImage from "~/assets/img/team.webp";
+
+export const getStaticPaths = localeParams;
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<Layout title={t({ de: "Unser Team", en: "Our Team" })}>
+  <Hero title={t({ de: "Unser Team", en: "Our Team" })} img={TeamImage} />
+  <TeamPage />
+</Layout>

src/pages/en/it-software-solutions-for-business.astro

@@ -24,7 +24,6 @@ const historyData = historyJson[lang]["skill09"];
   }}
   img={Skill09Image}
   contact="mailto:[email protected]"
-  nationalTeam={[]}
   timelineEntries={Object.values(historyData)}
   additionalLinks={[
     {

src/pages/en/mobile-applications-development.astro

@@ -24,7 +24,6 @@ const historyData = historyJson[lang]["skill08"];
   }}
   img={Skill08Image}
   contact="mailto:[email protected]"
-  nationalTeam={[]}
   timelineEntries={Object.values(historyData)}
   additionalLinks={[
     {

src/pages/en/web-technologies.astro

@@ -24,7 +24,6 @@ const historyData = historyJson[lang]["skill17"];
   }}
   img={Skill09Image}
   contact="mailto:[email protected]"
-  nationalTeam={[]}
   timelineEntries={Object.values(historyData)}
   additionalLinks={[
     {

src/pages/it-software-solutions-for-business.astro

@@ -24,7 +24,6 @@ const historyData = historyJson[lang]["skill09"];
   }}
   img={Skill09Image}
   contact="mailto:[email protected]"
-  nationalTeam={[]}
   timelineEntries={Object.values(historyData)}
   additionalLinks={[
     {

src/pages/mobile-applications-development.astro

@@ -24,7 +24,6 @@ const historyData = historyJson[lang]["skill08"];
   }}
   img={Skill08Image}
   contact="mailto:[email protected]"
-  nationalTeam={[]}
   timelineEntries={Object.values(historyData)}
   additionalLinks={[
     {

src/pages/web-technologies.astro

@@ -24,7 +24,6 @@ const historyData = historyJson[lang]["skill17"];
   }}
   img={Skill09Image}
   contact="mailto:[email protected]"
-  nationalTeam={[]}
   timelineEntries={Object.values(historyData)}
   additionalLinks={[
     {