Polish people cards

_data/people.yml

@@ -36,12 +36,13 @@ core:
     period: "2025-"
     website: https://ema-ans.github.io/
     photo: /assets/images/people/eman.png
-  - name: Thinh Nguyen Truong (Theo)
+  - name: Thinh Nguyen Truong
     publication_names: [Thinh Nguyen Truong, Nguyen-Truong Thinh]
     program: MPhil CSE
     period: "2026-"
-    website: https://linkedin.com/in/thinh-nguyentruong
-    photo: /assets/images/people/theo.png
+    website: https://thinhnguyentruong.com
+    photo: /assets/images/people/theo.jpg
+    photo_fun: /assets/images/people/fun/theo.jpg
   - name: Jianheng Ouyang
     program: MPhil CSE
     period: "2026-"

_includes/people-card.html

@@ -1,14 +1,21 @@
 {% assign person = include.person %}
 {% assign photo = person.photo | default: '/assets/images/people/placeholder.svg' %}
 {% assign photo_fun = person.photo_fun | default: photo %}
+{% assign period_label = person.period %}
+{% assign period_end = person.period | slice: -1 %}
+{% if period_end == '-' %}{% assign period_label = period_label | append: 'present' %}{% endif %}
+{% assign period_label = period_label | replace: '-', '–' %}
 {% if person.website %}<a class="people-card people-card-link" href="{{ person.website }}" aria-label="{{ person.name }} website">{% else %}<article class="people-card">{% endif %}
   <div class="people-photo-swap">
     <img class="people-photo" src="{{ photo | relative_url }}" alt="Portrait of {{ person.name }}" loading="lazy">
     <img class="people-photo-fun" src="{{ photo_fun | relative_url }}" alt="" loading="lazy">
   </div>
   <h3 class="people-name">{{ person.name }}</h3>
-  <p class="people-program">{{ person.program }}{% if person.period %} · {{ person.period }}{% endif %}</p>
+  <p class="people-program">{{ person.program }}</p>
+  {% if period_label %}
+  <p class="people-period">{{ period_label }}</p>
+  {% endif %}
   {% if person.co_supervisor %}
-  <p class="people-co-supervisor">(co-supervised w/ {{ person.co_supervisor }})</p>
+  <p class="people-co-supervisor">Co-advised by <span class="nowrap">{{ person.co_supervisor }}</span></p>
   {% endif %}
 {% if person.website %}</a>{% else %}</article>{% endif %}

_sass/_people.scss

@@ -1,6 +1,6 @@
 .people-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
   gap: 0.65rem;
 }
 
@@ -27,17 +27,18 @@
 
 .people-photo-swap {
   position: relative;
-  width: 45%;
-  aspect-ratio: 7 / 8;
-  margin: 0 auto 0.45rem;
+  width: 62%;
+  aspect-ratio: 1;
+  margin: 0.15rem auto 0.6rem;
   perspective: 600px;
 
   img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
-    border-radius: 50% 50% 42% 42%;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px $border-color, 0 1px 3px rgba(0, 0, 0, 0.08);
     backface-visibility: hidden;
     object-fit: cover;
     transition: transform 0.42s ease;
@@ -64,16 +65,28 @@
 
 .people-program {
   margin: 0;
-  color: $grey-color;
+  color: $text-color;
   font-size: $min-font-size;
   line-height: 1.35;
 }
 
+.people-period {
+  margin: 0;
+  color: $grey-color;
+  font-size: 0.75rem;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.35;
+}
+
 .people-co-supervisor {
-  margin: 0.12rem 0 0;
+  margin: 0.3rem 0 0;
   color: $grey-color;
   font-size: 0.75rem;
   line-height: 1.25;
+
+  .nowrap {
+    white-space: nowrap;
+  }
 }
 
 .people-section {