add flip cards

_data/people.yml

@@ -22,6 +22,7 @@ people:
     flags:
       - ch
       - de
+    projects: All
 
 
   artemio:
@@ -34,6 +35,7 @@ people:
     start_year: 2020
     flags:
       - it
+    projects: kugelblitz
 
   hejing:
     name: Hejing Li
@@ -45,6 +47,7 @@ people:
     start_year: 2022
     flags:
       - cn
+    projects: simbricks, splitsim
 
   matheus:
     name: Matheus Stolet
@@ -56,6 +59,7 @@ people:
     start_year: 2021
     flags:
       - br
+    projects: virtuoso, tas
 
   tejas:
     name: Tejas Harith
@@ -67,6 +71,7 @@ people:
     start_year: 2023
     flags:
       - us
+    projects: coming soon
 
   vaastav:
     name: Vaastav Anand
@@ -78,6 +83,7 @@ people:
     start_year: 2020
     flags:
       - in
+    projects: blueprint, iridescent
 
 
   jakob:
@@ -89,6 +95,7 @@ people:
     start_year: 2023
     flags:
       - de
+    projects: columbo
 
   jonas:
     name: Jonas Kaufmann
@@ -99,6 +106,7 @@ people:
     start_year: 2022
     flags:
       - de
+    projects: energy_est, simbricks
 
   liam:
     name: Liam Arzola
@@ -110,6 +118,7 @@ people:
     flags:
       - us
       - cu
+    projects: tas_largeflows, virtuoso
 
   marvin:
     name: Marvin Meiers
@@ -120,6 +129,7 @@ people:
     start_year: 2023
     flags:
       - de
+    projects: cc_eval
 
 
   mehrshad:
@@ -143,6 +153,7 @@ people:
     start_year: 2020
     flags:
       - de
+    projects: eating, sleeping
 
   dalloway:
     name: Dalloway
@@ -152,4 +163,5 @@ people:
     category: canine
     start_year: 2023
     flags:
-      - de
\ No newline at end of file
+      - de
+    projects: eating, sleeping
\ No newline at end of file

_layouts/people.html

@@ -18,11 +18,22 @@ layout: base
     {%- for person in sorted_people -%}
     <div class="grid-item">
         <div class="card hoverable">
+          <div class="flip-card">
+            <div class="flip-card-inner">
+              <div class="flip-card-front">
           <div class="flags">
             {%- for flag in person.flags %}
             <img src="/assets/images/flags/1x1/{{flag}}.svg">
             {%- endfor %}
           </div>
+          </div>
+          <div class="flip-card-back">
+            {%- if person.projects %}
+            <p> <b>Projects:</b> {{ person.projects }}
+
+            </p>
+            {%- endif -%}
+          </div>
 
           {%- if person.website %}
           <a href="{{ person.website }}">
@@ -32,6 +43,7 @@ layout: base
           {%- else -%}
           <img class="profile" src="/assets/images/people/anonymous.png">
           {%- endif -%}
+          </div>
             <h3 class="card-title">{{ person.name }}</h3>
           {%- if person.website %}
           </a>
@@ -40,6 +52,7 @@ layout: base
     
             </p>
             <p class="description">{{ person.description }}</p>
+          </div>
         </div>
 
     </div>

_sass/people.scss

@@ -41,6 +41,44 @@ article.people {
         margin: 0px;
         color: $col-os-grey;
       }
+
+      div.flip-card {
+        background-color: transparent;
+        width: 180px;
+        perspective: 1000px; /* Remove this if you don't want the 3D effect */
+      }
+      
+      /* This container is needed to position the front and back side */
+      div.flip-card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        transition: transform 0.8s;
+        transform-style: preserve-3d;
+      }
+      
+      /* Do an horizontal flip when you move the mouse over the flip box container */
+      div.flip-card:hover div.flip-card-inner {
+        transform: rotateY(180deg);
+      }
+      
+      /* Position the front and back side */
+      div.flip-card-front, div.flip-card-back {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        -webkit-backface-visibility: hidden; /* Safari */
+        backface-visibility: hidden;
+      }
+      
+           
+      /* Style the back side */
+      div.flip-card-back {
+        background-color: white;
+        color: black;
+        transform: rotateY(180deg);
+      }
     }
   }
 }
\ No newline at end of file