Update group.html

_pages/group.html

@@ -1,66 +1,138 @@
+---
+permalink: /group.html
+title: "Research Group"
+excerpt: "Group"
+author_profile: false
+redirect_from: 
+  - /group/
+---
+
+<!-- Bootstrap CSS CDN -->
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+
+<!-- Custom CSS -->
 <style>
-  /* Alumni List Styling */
-  .alumni-list {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 10px;
-    border-bottom: 1px solid #ddd;
+  /* Dynamic Card with Aspect Ratio */
+  .card {
+    position: relative;
+    overflow: hidden;
+    background-color: white;
+    border: 1px solid #ddd;
+    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
+    aspect-ratio: 3 / 4; /* Ensures dynamic height proportional to width */
+  }
+
+  .card:hover {
+    transform: scale(1.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  }
+
+  /* Image Container for Full Coverage */
+  .image-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
   }
 
-  .alumni-photo {
-    flex-shrink: 0;
-    width: 80px;
-    height: 80px;
+  .image-container img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
     object-fit: cover;
-    border-radius: 8px; /* Slightly rounded corners for photos */
-    margin-left: 15px;
+    transition: opacity 0.3s ease;
+  }
+
+  .image-container img.alt-photo {
+    opacity: 0;
+  }
+
+  .card:hover .image-container img.alt-photo {
+    opacity: 1;
   }
 
-  .alumni-text {
-    flex-grow: 1;
-    font-size: clamp(0.6rem, 1vw, 0.85rem); /* Dynamic font size for the text */
+  /* Card Text Overlay */
+  .card-body {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.9); /* Transparent background over image */
+    padding: 10px;
   }
 
-  .alumni-name {
+  .card-title {
+    font-size: clamp(0.7rem, 1vw, 1rem);
     font-weight: bold;
-    margin-bottom: 5px;
-    font-size: clamp(0.8rem, 1.2vw, 1rem); /* Slightly larger for the name */
   }
 
-  .alumni-details {
+  .card-text {
+    font-size: clamp(0.6rem, 0.8vw, 0.85rem);
     color: #555;
-    font-size: clamp(0.6rem, 1vw, 0.85rem); /* Subtle detail text */
   }
 
-  /* Hover Effect for the Alumni List */
-  .alumni-list:hover {
-    background-color: #f9f9f9;
+  /* Prevent Underline on Hover */
+  a.card-link {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  a.card-link:hover {
+    text-decoration: none;
   }
 </style>
 
 <div class="container my-5">
-  <h2 class="text-uppercase text-center mb-4">Alumni</h2>
+  <h1 class="text-center mb-4">Research Group</h1>
 
-  {% assign alumni = site.teams | where: "category", "Alumni" | sort: "graduation_end" %}
-  {% if alumni.size > 0 %}
-    <div>
-      {% for person in alumni %}
-        <div class="alumni-list">
-          <!-- Text Section -->
-          <div class="alumni-text">
-            <div class="alumni-name">
-              {{ person.name }}
-              <span class="alumni-details">({{ person.previous_position }} - {{ person.graduation_end }})</span>
+  <!-- Current Group Section -->
+  {% assign categories = "PhD, MSc, Staff" | split: ", " %}
+  {% for category in categories %}
+    {% assign people_in_category = site.teams | where: "category", category %}
+    {% if people_in_category.size > 0 %}
+      <div class="mb-5">
+        <h2 class="text-uppercase text-center mb-4">{{ category }}</h2>
+        <div class="row row-cols-2 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-4">
+          {% for person in people_in_category %}
+            <div class="col">
+              <a href="{{ person.website }}" class="card-link" target="_blank">
+                <div class="card h-100 text-center border-0">
+                  <div class="image-container">
+                    <img src="{{ person.photo }}" class="main-photo" alt="{{ person.name }}">
+                    {% if person.alt_photo %}
+                      <img src="{{ person.alt_photo }}" class="alt-photo" alt="Alternate Photo of {{ person.name }}">
+                    {% endif %}
+                  </div>
+                  <div class="card-body">
+                    <h6 class="card-title mb-1">
+                      {{ person.name }}
+                    </h6>
+                    <span class="card-text">
+                      {% if person.category == "PhD" or person.category == "MSc" %}
+                        {{ person.category }} ({{ person.starting_year }})
+                      {% elsif person.category == "Staff" %}
+                        ({{ person.role }})
+                      {% endif %}
+                    </span><br>
+                    <span class="card-text">
+                      {{ person.university }}
+                    </span><br>
+                    {% if person.co_advisor %}
+                    <span class="card-text">
+                      (Co-advised with {{ person.co_advisor }})
+                    </span>
+                    {% endif %}
+                  </div>
+                </div>
+              </a>
             </div>
-            <div class="alumni-details">
-              Current Position: {{ person.current_position }}
-            </div>
-          </div>
-          <!-- Photo Section -->
-          <img src="{{ person.photo }}" alt="Photo of {{ person.name }}" class="alumni-photo">
+          {% endfor %}
         </div>
-      {% endfor %}
-    </div>
-  {% endif %}
+      </div>
+    {% endif %}
+  {% endfor %}
 </div>
+
+<!-- Bootstrap JS + Icons -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">