Update ambassadors (linkerd#1900)

Signed-off-by: Ivan Porta <[email protected]>
GTRekter · Dec 20, 2024 · 4b3363b · 4b3363b
1 parent 4af51f7
commit 4b3363b
Show file tree

Hide file tree

Showing 4 changed files with 158 additions and 123 deletions.
diff --git a/linkerd.io/assets/scss/app/_ambassadors.scss b/linkerd.io/assets/scss/app/_ambassadors.scss
@@ -3,7 +3,23 @@
 */
 
 .ambassadors {
+  // Override all h2s on the page
+  h2 {
+    font-size: $font-size-h1;
+  }
   .page__container {
+    @include make-stack(7);
+  }
+  .ambassadors__section {
+    @include make-stack(5);
+
+    @media (min-width: breakpoint-min-width("lg")) {
+      h2 {
+        text-align: center;
+      }
+    }
+  }
+  .ambassadors__items {
     display: grid;
     gap: spacer(4);
     grid-template-columns: 1fr;
@@ -18,22 +34,18 @@
     .card__footer {
       gap: spacer(1);
     }
-    &.ambassadors__emeritus {
-      border: solid 2px $blue;
+    .ambassadors__emeritus-badge {
+      position: absolute;
 
-      .badge {
-        position: absolute;
-
-        @media (max-width: breakpoint-max-width("lg")) {
-          left: spacer(4);
-          bottom: spacer(4);
-          width: 128px; // Thumbnail width
-          text-align: center; // Center badge under thumbnail
-        }
-        @media (min-width: breakpoint-min-width("xl")) {
-          top: spacer(3);
-          right: spacer(3);
-        }
+      @media (max-width: breakpoint-max-width("lg")) {
+        left: spacer(4);
+        bottom: spacer(4);
+        width: 128px; // Thumbnail width
+        text-align: center; // Center badge under thumbnail
+      }
+      @media (min-width: breakpoint-min-width("xl")) {
+        top: spacer(3);
+        right: spacer(3);
       }
     }
   }

diff --git a/linkerd.io/content/community/ambassadors/_index.md b/linkerd.io/content/community/ambassadors/_index.md
@@ -10,81 +10,92 @@ description: |-
   Interested in becoming a Linkerd Ambassador? **[Learn more](../ambassadors-apply/)**
 layout: ambassadors
 params:
-  ambassadors:
-    - name: Charles Pretzer
-      role: Field Engineer
-      image: images/charles-pretzer.png
-      flag: 🇺🇸
-      urls:
-        github: https://github.com/cpretzer
-        linkedin: https://www.linkedin.com/in/charlespretzer/
-    - name: Chris Campbell
-      role: Cloud Software Engineer
-      image: images/chris-campbell.png
-      flag: 🇺🇸
-      urls:
-        github: https://github.com/campbel
-        twitter: https://twitter.com/ChrsCmpbl
-        linkedin: https://www.linkedin.com/in/chris-campbell-28410839/
-    - name: Christian Hüning
-      role: Director of Cloud Technologies
-      image: images/christian-huning.png
-      flag: 🇩🇪
-      urls:
-        github: https://github.com/christianhuening
-        twitter: https://twitter.com/chrishuen
-        linkedin: https://www.linkedin.com/in/christian-h%C3%BCning-964191a3/
-    - name: Dominik Táskai
-      role: Junior DevOps Engineer
-      image: images/dominik-taskai.jpg
-      flag: 🇭🇺
-      urls:
-        github: https://github.com/dtaskai
-        linkedin: https://www.linkedin.com/in/dtaskai/
-    - name: Eli Goldberg
-      role: Platform Team Lead
-      image: images/eli-goldberg.jpg
-      flag: 🇮🇱
-      urls:
-        github: https://github.com/Eli-Goldberg
-        twitter: https://twitter.com/EliG0ldberg
-        linkedin: https://www.linkedin.com/in/eli-go/
-    - name: Fredrik Klingenberg
-      role: Developer
-      image: images/fredrik-klingenberg.png
-      flag: 🇳🇴
-      urls:
-        github: https://github.com/fredrkl
-        twitter: https://twitter.com/fredrkl
-        linkedin: https://www.linkedin.com/in/fredrikklingenberg/
-    - name: María Teresa Rojas
-      role: SRE
-      image: images/maria-rojas.png
-      flag: 🇵🇹
-      urls:
-        github: https://github.com/mtrojas
-        linkedin: https://www.linkedin.com/in/mtrojas/
-    - name: Sergio Méndez
-      role: DevOps Engineer
-      image: images/sergio-mendez.png
-      flag: 🇬🇹
-      urls:
-        github: https://github.com/sergioarmgpl
-        twitter: https://twitter.com/sergioarmgpl
-        linkedin: https://www.linkedin.com/in/sergioarmgpl/
-    - name: Steve Gray
-      role: Founder & CEO
-      image: images/steve-gray.png
-      flag: 🇦🇺
-      urls:
-        linkedin: https://www.linkedin.com/in/eventualconsistency/
-    - name: Kasper Nissen
-      role: Lead Platform Architect
-      image: images/kasper-nissen.png
-      flag: 🇩🇰
-      urls:
-        github: https://github.com/kaspernissen
-        twitter: https://twitter.com/phennex
-        linkedin: https://www.linkedin.com/in/kaspernissen/
-      emeritus: true
+  sections:
+    - title: 
+      items:
+        - name: Chris Campbell
+          role: Cloud Software Engineer
+          image: images/chris-campbell.png
+          flag: 🇺🇸
+          urls:
+            github: https://github.com/campbel
+            twitter: https://twitter.com/ChrsCmpbl
+            linkedin: https://www.linkedin.com/in/chris-campbell-28410839/
+        - name: Christian Hüning
+          role: Director of Cloud Technologies
+          image: images/christian-huning.png
+          flag: 🇩🇪
+          urls:
+            github: https://github.com/christianhuening
+            twitter: https://twitter.com/chrishuen
+            linkedin: https://www.linkedin.com/in/christian-h%C3%BCning-964191a3/
+        - name: Dominik Táskai
+          role: Junior DevOps Engineer
+          image: images/dominik-taskai.jpg
+          flag: 🇭🇺
+          urls:
+            github: https://github.com/dtaskai
+            linkedin: https://www.linkedin.com/in/dtaskai/
+        - name: Eli Goldberg
+          role: Platform Team Lead
+          image: images/eli-goldberg.jpg
+          flag: 🇮🇱
+          urls:
+            github: https://github.com/Eli-Goldberg
+            twitter: https://twitter.com/EliG0ldberg
+            linkedin: https://www.linkedin.com/in/eli-go/
+        - name: Sergio Méndez
+          role: DevOps Engineer
+          image: images/sergio-mendez.png
+          flag: 🇬🇹
+          urls:
+            github: https://github.com/sergioarmgpl
+            twitter: https://twitter.com/sergioarmgpl
+            linkedin: https://www.linkedin.com/in/sergioarmgpl/
+        - name: William Rizzo
+          role: Consulting Architect
+          image: images/william-rizzo.jpg
+          flag: 🇳🇱
+          urls:
+            github: https://github.com/wrkode
+            linkedin: https://www.linkedin.com/in/william-rizzo/
+    - title: Linkerd Ambassadors Emeriti
+      emeriti: true
+      items:
+        - name: Charles Pretzer
+          role: Field Engineer
+          image: images/charles-pretzer.png
+          flag: 🇺🇸
+          urls:
+            github: https://github.com/cpretzer
+            linkedin: https://www.linkedin.com/in/charlespretzer/
+        - name: Fredrik Klingenberg
+          role: Developer
+          image: images/fredrik-klingenberg.png
+          flag: 🇳🇴
+          urls:
+            github: https://github.com/fredrkl
+            twitter: https://twitter.com/fredrkl
+            linkedin: https://www.linkedin.com/in/fredrikklingenberg/
+        - name: Kasper Nissen
+          role: Lead Platform Architect
+          image: images/kasper-nissen.png
+          flag: 🇩🇰
+          urls:
+            github: https://github.com/kaspernissen
+            twitter: https://twitter.com/phennex
+            linkedin: https://www.linkedin.com/in/kaspernissen/
+        - name: María Teresa Rojas
+          role: SRE
+          image: images/maria-rojas.png
+          flag: 🇵🇹
+          urls:
+            github: https://github.com/mtrojas
+            linkedin: https://www.linkedin.com/in/mtrojas/
+        - name: Steve Gray
+          role: Founder & CEO
+          image: images/steve-gray.png
+          flag: 🇦🇺
+          urls:
+            linkedin: https://www.linkedin.com/in/eventualconsistency/
 ---
diff --git a/linkerd.io/content/community/ambassadors/images/william-rizzo.jpg b/linkerd.io/content/community/ambassadors/images/william-rizzo.jpg
diff --git a/linkerd.io/layouts/community/ambassadors.html b/linkerd.io/layouts/community/ambassadors.html
@@ -3,40 +3,52 @@
     {{ partial "components/hero" . }}
     <div class="page">
       <div class="page__container container">
-        {{ range .Params.ambassadors }}
-          <div class="card card--horz card--center card--inset-media{{ with .emeritus }} ambassadors__emeritus{{ end }}">
-            {{ with .emeritus }}
-              <span class="badge">Emeritus</span>
+        {{ range .Params.sections }}
+          {{ $emeriti := .emeriti }}
+          <section class="ambassadors__section">
+            {{ with .title }}
+              <h2>
+                {{ . }}
+              </h2>
             {{ end }}
-            <div class="card__media">
-              {{ $alt := .name }}
-              {{ with $.Resources.Get .image }}
-                {{ with partial "utils/process-image" (dict
-                  "res" .
-                  "width" 256
-                  "height" 256
-                  "process" "fill jpg q80 lanczos"
-                )}}
-                  <img src="{{ .RelPermalink }}" alt="{{ $alt }}" class="img img--round img--128 img--cover">
-                {{ end }}
+            <div class="ambassadors__items">
+              {{ range .items }}
+                <div class="card card--horz card--center card--inset-media">
+                  {{ if $emeriti }}
+                    <span class="badge ambassadors__emeritus-badge">Emeritus</span>
+                  {{ end }}
+                  <div class="card__media">
+                    {{ $alt := .name }}
+                    {{ with $.Resources.Get .image }}
+                      {{ with partial "utils/process-image" (dict
+                        "res" .
+                        "width" 256
+                        "height" 256
+                        "process" "fill jpg q80 lanczos"
+                      )}}
+                        <img src="{{ .RelPermalink }}" alt="{{ $alt }}" class="img img--round img--128 img--cover">
+                      {{ end }}
+                    {{ end }}
+                  </div>
+                  <div class="card__body">
+                    <div class="card__header">
+                      <h3>
+                        {{ .name }} {{ .flag }}
+                      </h3>
+                      <p>
+                        {{ .role }}
+                      </p>
+                    </div>
+                    <div class="card__footer">
+                      {{ range $k, $v := .urls }}
+                        {{ partial "components/icon-button" (dict "href" $v "icon" $k "variant" "secondary") }}
+                      {{ end }}
+                    </div>
+                  </div>
+                </div>
               {{ end }}
             </div>
-            <div class="card__body">
-              <div class="card__header">
-                <h3>
-                  {{ .name }} {{ .flag }}
-                </h3>
-                <p>
-                  {{ .role }}
-                </p>
-              </div>
-              <div class="card__footer">
-                {{ range $k, $v := .urls }}
-                  {{ partial "components/icon-button" (dict "href" $v "icon" $k "variant" "secondary") }}
-                {{ end }}
-              </div>
-            </div>
-          </div>
+          </section>
         {{ end }}
       </div>
     </div>