People: add a gallery for group photos

assets/css/gallery.css

@@ -0,0 +1,102 @@
+/* --- Fancy Vertical Timeline for Group Photos --- */
+
+.people-gallery-timeline {
+  position: relative;
+  padding-left: 2rem;
+  border-left: 3px solid rgba(0,0,0,0.12);
+  margin: 2rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3.5rem;
+}
+
+/* Timeline dot */
+.people-gallery-item:before {
+  content: "";
+  position: absolute;
+  left: -1.1rem;
+  top: 0.45rem;
+  width: 1rem;
+  height: 1rem;
+  background: linear-gradient(135deg, #3182ce, #63b3ed);
+  border-radius: 50%;
+  border: 3px solid white;
+  box-shadow: 0 0 8px rgba(49,130,206,0.4);
+}
+
+/* Each timeline item */
+.people-gallery-item {
+  position: relative;
+  padding-left: 1.5rem;
+  animation: fadeInUp 0.4s ease-out both;
+}
+
+/* Year header */
+.people-gallery-item h3 {
+  margin: 0 0 1rem;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #2b6cb0;
+}
+
+/* Card that wraps photo group */
+.people-gallery-card {
+  background: #fff;
+  border-radius: 0.6rem;
+  padding: 1rem;
+  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.people-gallery-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+
+/* Grid for multiple photos per year */
+.people-gallery-photos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.people-gallery-photos figure {
+  margin: 0;
+}
+
+.people-gallery-photos img {
+  border-radius: 0.5rem;
+  width: 100%;
+  height: auto;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  transition: transform 0.25s ease;
+}
+
+.people-gallery-photos img:hover {
+  transform: scale(1.03);
+}
+
+.people-gallery-photos .figure-caption {
+  text-align: center;
+  margin-top: 0.4rem;
+  font-size: 0.95rem;
+  color: #555;
+}
+
+/* Timeline animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .people-gallery-timeline { padding-left: 1.3rem; }
+  .people-gallery-item:before { left: -0.85rem; }
+  .people-gallery-card { padding: 0.8rem; }
+}

content/event/_index.md

@@ -25,18 +25,18 @@ Timetable for upcoming events in AY25/26 (subject to changes):
 | Aug 26 | <font color=blue>Why the Proof Fails in Different Versions of Theorem Provers: An Empirical Study of Compatibility Issues in Isabelle </font> | Ningke Li | Xiaokun Luan |
 | Sep 2  | <font color=blue>Static bug detection in the era of LLMs</font> | Yibo Dong | Yiling Lou |
 | Sep 9  | Canceled | \ | \  |
-| Sep 16 | <font color=brown>Group Discussion: Existing Progress and Remaining Challenges</font> |   |            |
+| Sep 16 | <font color=brown>Group Discussion: Self Introduction</font> |   |            |
 | Sep 23 | <font color=gray>Recess Week</font> |  |  |
 | Sep 30  | <font color=blue>"My productivity is boosted, but ..." Demystifying Users' Perception on Al Coding Assistants </font> | Junwen An | Yunbo Lyu  |
 | Oct 7  |  <font color=brown>OOPSLA SRC Dry Run</font>   |           |            |
 | Oct 10  | <font color=blue>Linalg is All Your Need</font>  |  TEST Lab | Ivan Ho | 
 | Oct 14  | <font color=gray>OOPSLA Week </font> | \ | \ |
 | Oct 21  | <font color=gray>PUBLIC HOLIDAY </font> | \ | \ |
 | Oct 28  | <font color=blue>Finding Bugs in MLIR Compiler Infrastructure via Lowering Space Exploration </font> | Yibo Dong | Jingjing Liang |
-| Nov 4 | <font color=brown>Group Discussion </font> |           |            |
-| Nov 11 | <font color=brown>Advances in Hardware Model Checking: Algorithms, Challenges, and Performance Diagnosis</font>  | Ningke  | Yibo |
+| Nov 4 | <font color=brown>Group Discussion: Insight behind current/previous research </font> |           |            |
+| Nov 11 | <font color=brown>FYP Presentation Dry Run</font>  |   |   |
 | Nov 18 | <font color=brown>Zhaokun Presentation</font> | Zhaokun | \ |
-| Nov 25 |                                                              |           |            |
+| Nov 25 | Canceled for Final Exams |           |            |
 | Dec 2 | <font color=brown>Group Discussion</font> |           |            |
 | ... |                                                              |           |            |
 

content/people/gallery.md

@@ -0,0 +1,24 @@
+---
+# Group Photos gallery shown on the People page
+widget: blank
+headless: true
+weight: 69
+title: "Group Photos"
+subtitle: "Group photos from recent years"
+---
+
+<link rel="stylesheet" href="/css/gallery.css">
+
+Below are some of our group photos:star: 
+
+<!-- Vertical timeline gallery -->
+<div class="people-gallery-timeline">
+<div class="people-gallery-item">
+		{{< figure src="/media/group-photos/group-2025-1.png" >}}
+		{{< figure src="/media/group-photos/group-2025-2.png" caption="December 2025, by Sun Changsheng" >}}
+</div>
+<div class="people-gallery-item">
+		{{< figure src="/media/group-photos/group-2024-1.jpg" >}}
+		{{< figure src="/media/group-photos/group-2024-2.jpg" caption="2024, by Sun Changsheng" >}}
+</div>
+</div>

static/css/gallery.css

@@ -0,0 +1,102 @@
+/* --- Fancy Vertical Timeline for Group Photos --- */
+
+.people-gallery-timeline {
+  position: relative;
+  padding-left: 2rem;
+  border-left: 3px solid rgba(0,0,0,0.12);
+  margin: 2rem 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3.5rem;
+}
+
+/* Timeline dot */
+.people-gallery-item:before {
+  content: "";
+  position: absolute;
+  left: -1.1rem;
+  top: 0.45rem;
+  width: 1rem;
+  height: 1rem;
+  background: linear-gradient(135deg, #3182ce, #63b3ed);
+  border-radius: 50%;
+  border: 3px solid white;
+  box-shadow: 0 0 8px rgba(49,130,206,0.4);
+}
+
+/* Each timeline item */
+.people-gallery-item {
+  position: relative;
+  padding-left: 1.5rem;
+  animation: fadeInUp 0.4s ease-out both;
+}
+
+/* Year header */
+.people-gallery-item h3 {
+  margin: 0 0 1rem;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #2b6cb0;
+}
+
+/* Card that wraps photo group */
+.people-gallery-card {
+  background: #fff;
+  border-radius: 0.6rem;
+  padding: 1rem;
+  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+}
+
+.people-gallery-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+}
+
+/* Grid for multiple photos per year */
+.people-gallery-photos {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
+.people-gallery-photos figure {
+  margin: 0;
+}
+
+.people-gallery-photos img {
+  border-radius: 0.5rem;
+  width: 100%;
+  height: auto;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  transition: transform 0.25s ease;
+}
+
+.people-gallery-photos img:hover {
+  transform: scale(1.03);
+}
+
+.people-gallery-photos .figure-caption {
+  text-align: center;
+  margin-top: 0.4rem;
+  font-size: 0.95rem;
+  color: #555;
+}
+
+/* Timeline animation */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 768px) {
+  .people-gallery-timeline { padding-left: 1.3rem; }
+  .people-gallery-item:before { left: -0.85rem; }
+  .people-gallery-card { padding: 0.8rem; }
+}

static/media/group-photos/README.md

@@ -0,0 +1,7 @@
+Place group photos here.
+
+Naming suggestion:
+- `group-2024.jpg`
+- `group-2023.jpg`
+
+After adding images, they will be available at `media/group-2024.jpg` and can be referenced from `content/people/gallery.md`.