Feat: randomize team on About on page load (#216)

compilerla · Jun 27, 2024 · a596c3c · a596c3c
2 parents eeeb1ff + d264410
commit a596c3c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 59 deletions.
diff --git a/src/_data/team.yml b/src/_data/team.yml
@@ -1,79 +1,63 @@
-- name: Shelby Miller
-  title: Managing Partner
-  image: "shelby-miller.png"
-  classes: ""
-
-- name: Machiko Yasuda
-  title: Senior Software Engineer
-  image: "machiko-yasuda.png"
-  classes: ""
-
-- name: Scott Frazier
-  title: Managing Partner
-  image: "scott-frazier.png"
-  classes: ""
-
-- name: Laney Mangan
-  title: Associate Consultant, Customer Support Specialist
-  image: "laney-mangan.png"
-  classes: ""
-
-- name: Sarah Henry
-  title: UX Designer
-  image: "sarah-henry.png"
-  classes: ""
-
-- name: Vyki Englert
-  title: Managing Partner
-  image: "vyki-englert.png"
-  classes: "collapseMore collapse"
-
-- name: Olivia Ramacier
-  title: Associate Researcher, Customer Success Specialist
-  image: "olivia-ramacier.png"
-  classes: "collapseMore collapse"
+- name: Adam Linder
+  title: Account Manager
+  image: "adam-linder.png"
 
 - name: Angela Tran
   title: Senior Software Engineer
   image: "angela-tran.png"
-  classes: "collapseMore collapse"
 
 - name: Anthony Rollins
   title: Managing Partner
   image: "anthony-rollins.png"
-  classes: "collapseMore collapse"
-
-- name: Milo Green
-  title: Executive Assistant, Business Development
-  image: "milo-green.png"
-  classes: "collapseMore collapse"
 
 - name: Kegan Maher
   title: Managing Partner
   image: "kegan-maher.png"
-  classes: "collapseMore collapse"
+
+- name: Laney Mangan
+  title: Associate Consultant, Customer Support Specialist
+  image: "laney-mangan.png"
+
+- name: Luis Alvergue
+  title: Senior Software Engineer
+  image: "luis-alvergue.png"
+
+- name: Machiko Yasuda
+  title: Senior Software Engineer
+  image: "machiko-yasuda.png"
+
+- name: Marie Araneta
+  title: Account Manager
+  image: "marie-araneta.png"
 
 - name: Marissa Rosemblat
   title: Product Manager
   image: "marissa-rosemblat.png"
-  classes: "collapseMore collapse"
 
-- name: Adam Linder
-  title: Account Manager
-  image: "adam-linder.png"
-  classes: "collapseMore collapse"
+- name: Milo Green
+  title: Executive Assistant, Business Development
+  image: "milo-green.png"
 
 - name: Nina Dinh
   title: Account Manager
   image: "nina-dinh.png"
-  classes: "collapseMore collapse"
 
-- name: Marie Araneta
-  title: Account Manager
-  image: "marie-araneta.png"
-  classes: "collapseMore collapse"
+- name: Olivia Ramacier
+  title: Associate Researcher, Customer Success Specialist
+  image: "olivia-ramacier.png"
 
-- name: Luis Alvergue
-  title: Senior Software Engineer
-  image: "luis-alvergue.png"
-  classes: "collapseMore collapse"
+- name: Sarah Henry
+  title: UX Designer
+  image: "sarah-henry.png"
+
+- name: Scott Frazier
+  title: Managing Partner
+  image: "scott-frazier.png"
+
+- name: Shelby Miller
+  title: Managing Partner
+  image: "shelby-miller.png"
+
+- name: Vyki Englert
+  title: Managing Partner
+  image: "vyki-englert.png"
diff --git a/src/about.html b/src/about.html
@@ -67,7 +67,7 @@ <h2 class="text-dark mb-4">Recent work</h2>
                     <span class="text-white pill border-0 ps-0 pb-md-5 mb-md-3 pb-4 mb-3 d-inline-block">Our philosophy</span>
                 </div>
                 <div class="offset-lg-1 col-lg-5">
-                    <h2 class="text-white mb-3 mb-md-4">Empower government workers </h1>
+                    <h2 class="text-white mb-3 mb-md-4">Empower government workers</h2>
                     <p class="mb-4 pb-2">Through service design, human-centered policy, and intentional technology choices, we make government services equitable and accessible for all.</p>
                 </div>
                 <div class="offset-lg-1 col-lg-5">
@@ -117,9 +117,12 @@ <h2 class="text-white mb-2">Meet the team</h2>
                 <div class="offset-lg-1 col-lg-10 pt-md-4 mt-md-3 pt-4">
                     <div class="row row-cols-2 row-cols-sm-3 row-cols-md-5">
                         {% for member in site.data.team %}
-                            <div class="{{ member.classes }}">
+                            <div class="team-member">
                                 <div class="bg-white rounded">
-                                    <img class="img-fluid d-block mx-auto" src="/assets/team_members/{{ member.image }}" alt="Watercolor illustration of {{member.name}}">
+                                    <img
+                                        class="img-fluid d-block mx-auto"
+                                        src="/assets/team_members/{{ member.image }}"
+                                        alt="Watercolor illustration of {{member.name}}">
                                 </div>
                                 <h3 class="h4 pt-3 mb-1 d-inline-block text-white">{{ member.name }}</h3>
                                 <p class="fs-7 text-white">{{ member.title }}</p>
@@ -150,3 +153,27 @@ <h3 class="text-dark">Ready to work together?</h3>
         </div>
     </div>
 </section>
+
+<script>
+    const randomizeTeam = function() {
+        // get an array of all team members
+        let members = [...document.querySelectorAll(".team-member")];
+        let currentIndex = members.length;
+        // and shuffle
+        while (currentIndex != 0) {
+            let shuffleIndex = Math.floor(Math.random() * currentIndex);
+            currentIndex--;
+            [members[currentIndex], members[shuffleIndex]] = [members[shuffleIndex], members[currentIndex]];
+        }
+        // then override the flex order with new shuffled index
+        // hiding all but the first 5
+        members.forEach((m, i) => {
+            m.style.order = i;
+            if (i > 4) {
+                m.classList.add("collapse", "collapseMore");
+            }
+        })
+    };
+
+    randomizeTeam();
+</script>