Update About Us section

_config.yml

@@ -20,3 +20,61 @@ url: "http://clojurebridge-berlin.github.io" # the base hostname & protocol for
 
 # Build settings
 markdown: kramdown
+
+team:
+  - name: Ben
+    image: ben.png
+    url: https://twitter.com/socksy
+  - name: Franka
+    image: franka.jpg
+    url: http://franka.tech
+  - name: Danielle
+    image: dani.jpg
+    url:
+  - name: Dave
+    image: dave.png
+    url: http://daveliepmann.com
+  - name: Johanna
+    image: johanna.jpg
+    url:
+  - name: Julia
+    image: julia.jpg
+    url:
+  - name: Lisa
+    image: lislis.png
+    url: http://lislis.de
+  - name: Nils
+    image: nils.png
+    url:
+  - name: Saskia
+    image: saskia.jpg
+    url:
+  - name: Tibor
+    image: tibor.jpg
+    url:
+  - name: Anna
+    image: anna.jpg
+    url:
+  - name: daiyi
+    image: daiyi.jpg
+    url: https://twitter.com/daiyitastic
+
+team-alumni:
+  - name: Arne
+    url: https://twitter.com/plexus
+    image:
+  - name: Bettina
+    url: https://twitter.com/thatbettina
+    image:
+  - name: Jelle
+    url: https://twitter.com/jellea
+    image:
+  - name: Malwine
+    url: https://twitter.com/malweene
+    image:
+  - name: Martin
+    url: https://twitter.com/martinklepsch
+    image:
+  - name: Nicola
+    url: https://twitter.com/nicsnet
+    image:

_includes/team-alumni.html

@@ -0,0 +1,10 @@
+{% for person in include.people %}
+  <a href={{ person.url }}>{{ person.name }}</a>
+{% endfor %}
+
+<script>
+  var team = document.querySelector('.team-alumni');
+  for (var i = team.children.length; i >= 0; i--) {
+    team.appendChild(team.children[Math.random() * i | 0]);
+  }
+</script>

_includes/team.html

@@ -0,0 +1,13 @@
+{% for person in include.people %}
+  <div class="col-md-4 col-sm-2 col-xs-4 team-member">
+    <img src="/images/headshots/{{ person.image }}">
+    <a href={{ person.url }}>{{ person.name }}</a>
+  </div>
+{% endfor %}
+
+<script>
+  var team = document.querySelector('.team');
+  for (var i = team.children.length; i >= 0; i--) {
+    team.appendChild(team.children[Math.random() * i | 0]);
+  }
+</script>

assets/stylesheet.css

@@ -40,11 +40,18 @@ section.module.content {
   text-align: center;
 }
 
-.team {
-  margin-left: 15%;
+.team-member {
+  margin-bottom: 25px
+}
+
+.team-member img {
   border-radius: 50%;
-  width: 70%;
-  margin-bottom: 10%;
+  width: 100%;
+  margin-bottom: 5px;
+}
+
+.team-alumni a:not(:last-child)::after {
+  content: ", "
 }
 
 .arrow {

index.html

@@ -247,27 +247,15 @@ <h1></h1>
   <div class="container">
     <h2>About us</h2>
     <div class="row">
-      <div class="col-md-6">
-        <img class="team" src="/images/team2015.jpg">
-        <p><b>The Team:</b></p>
-        <p>
-          <a href="https://twitter.com/plexus">Arne</a>,
-          <a href="https://twitter.com/socksy">Ben</a>,
-          <a href="https://twitter.com/thatbettina">Bettina</a>,
-          <a href="https://twitter.com/franschm">Franziska</a>,
-          <a href="https://twitter.com/jellea">Jelle</a>,
-          <a href="https://twitter.com/anderspree">Julia</a>,
-          <a href="http://lislis.de/">Lisa</a>,
-          <a href="https://twitter.com/malweene">Malwine</a>,
-          <a href="https://twitter.com/martinklepsch">Martin</a> &
-          <a href="https://twitter.com/nicsnet">Nicola</a>.
-        </p>
-
-        <a href="https://github.com/clojurebridge-berlin/organization/wiki">
-          <button type="button" class="btn btn-primary">Join us!</button>
-        </a>
+      <div class="col-md-6 bottom-space">
+        <div class="col-md-12 centered team ">
+          {% include team.html people=site.team %}
+        </div>
+        <div class="col-md-12 centered team-alumni">
+          venerated alumni ♡ {% include team-alumni.html people=site.team-alumni %}
+        </div>
       </div>
-      <div class="col-md-6">
+      <div class="col-md-6 bottom-space">
         <p>ClojureBridge Berlin is organized with a lot of love by volunteers. We try our best to make the workshop a memorable event and bring more people into programming.</p>
         <p><i>ClojureBridge Berlin wird mit ganz viel Liebe von Freiwilligen organisiert. Wir versuchen unser Bestes, aus dem Workshop ein unvergessliches Event zu machen und mehr Menschen zum Programmieren anzuregen.</i></p>
         <p><b>Twitter: </b><a href="https://twitter.com/ClojureBridgede">@ClojureBridgeDE</a></p>
@@ -276,6 +264,11 @@ <h2>About us</h2>
         <p><b>Mail:</b> [email protected]</p>
         <p>For all kinds of questions mail us. We speak English and German.</p>
         <p><i>Bitte schreibe uns gerne ein Mail, wenn du Fragen oder Anregungen hast. Wir sprechen Deutsch und Englisch.</i></p>
+        <p>
+          <a href="https://github.com/clojurebridge-berlin/organization/wiki">
+            <button type="button" class="btn btn-primary">Join us!</button>
+          </a>
+        </p>
       </div>
     </div>