From 44aea6fc14f4883267479dbd04ec8ee8d4f13e6f Mon Sep 17 00:00:00 2001
From: aleung30 <aleung30@student.ubc.ca>
Date: Wed, 31 Dec 2025 18:11:55 -0800
Subject: [PATCH] Implemented roster page and team member information

---
 _pages/roster.html | 585 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 585 insertions(+)
 create mode 100644 _pages/roster.html

diff --git a/_pages/roster.html b/_pages/roster.html
new file mode 100644
index 0000000..f50d5a9
--- /dev/null
+++ b/_pages/roster.html
@@ -0,0 +1,585 @@
+---
+layout: default
+title: Roster
+permalink: /roster/
+---
+
+<div class="roster-page">
+  <section class="relative pt-32 pb-16 flex items-center justify-center">
+    <div class="container mx-auto px-4 max-w-7xl">
+      <div class="text-center mb-20">
+        <h2
+          class="text-5xl md:text-6xl font-black text-gray-900 dark:text-white mb-3"
+        >
+          ROSTER 2025-2026
+        </h2>
+
+        <p class="text-sm font-black text-black dark:text-white mb-3">
+            Stay tuned for team photos!
+        </p>
+
+        <!-- SUBTEAM BUTTONS -->
+     <!-- SUBTEAM BUTTONS -->
+<div class="flex flex-col md:flex-row gap-3 justify-center">
+  <a
+    href="#captains"
+    class="obot_button text-sm border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-bold py-2 px-4 rounded-lg transition-colors tracking-wide text-center"
+  >
+    <span class="relative z-10">CAPTAINS</span>
+  </a>
+  <a
+  
+    href="#admin"
+    class="obot_button text-sm border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-bold py-2 px-4 rounded-lg transition-colors tracking-wide text-center"
+  >
+    <span class="relative z-10">ADMIN</span>
+  </a>
+
+  <a
+    href="#arm"
+    class="obot_button text-sm border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-bold py-2 px-4 rounded-lg transition-colors tracking-wide text-center"
+  >
+    <span class="relative z-10">ROBOT ARM</span>
+  </a>
+  <a
+  
+    href="#circuit"
+    class="obot_button text-sm border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-bold py-2 px-4 rounded-lg transition-colors tracking-wide text-center"
+  >
+    <span class="relative z-10">CIRCUITBOTS</span>
+  </a>
+  <a
+  
+    href="#gripper"
+    class="obot_button text-sm border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-bold py-2 px-4 rounded-lg transition-colors tracking-wide text-center"
+  >
+    <span class="relative z-10">GRIPPER</span>
+  </a>
+  <a
+  
+    href="#panorama"
+    class="obot_button text-sm border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white font-bold py-2 px-4 rounded-lg transition-colors tracking-wide text-center"
+  >
+    <span class="relative z-10">PANORAMA</span>
+  </a>
+</div>
+      </div>
+
+      <!-- CAPTAINS SECTION -->
+      <section id="captains" class="mb-16">
+        <h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-8 text-left">
+          CAPTAINS
+        </h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+          <!-- MEMBERS -->
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Albin Soni</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">OpBots Co-Captain</p>
+          </div>
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Felipe Nunes</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">OpBots Co-Captain</p>
+          </div>
+       
+        </div>
+      </section>
+
+      <!-- ADMIN SECTION -->
+      <section id="admin" class="mb-16 scroll-mt-32">
+        <h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-8 text-left">
+          ADMIN
+        </h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+
+            <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">David Chen</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Admin</p>
+              </div>
+    
+
+          
+            <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Anita Leung</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
+              </div>
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Jose Damara Hadriana</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>
+          </div>
+
+        </div>
+      </section>
+
+      <!-- ROBOT ARM SECTION -->
+      <section id="arm" class="mb-16 scroll-mt-32">
+        <h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-8 text-left">
+          ROBOT ARM
+        </h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+
+            <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Kevin Gao</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Lead</p>
+              </div>
+            <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Cody Liu</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Brian Tian</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Artur Kochetygov</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Nam Ha</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Soma Inokuchi</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+           
+
+        </div>
+      </section>
+
+      <!-- CIRCUITBOTS SECTION -->
+      <section id="circuit" class="mb-16 scroll-mt-32">
+        <h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-8 text-left">
+          CIRCUITBOTS
+        </h2>
+
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+
+        <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Patrick Delfin</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Lead</p>
+          </div>
+        <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Trieu Truong</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Harry Nguyen</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Andy Setiawan</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Jamie Kang</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Guanyu Zhu</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+        </div>
+
+        </div>
+      </section>
+
+      <!-- GRIPPER SECTION -->
+      <section id="gripper" class="mb-16 scroll-mt-32">
+        <h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-8 text-left">
+          GRIPPER
+        </h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+
+            <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Felipe Nunes</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Lead</p>
+              </div>
+            <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Susana Phuong</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Daylen Chun</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Noah Ndambuki</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Cathy Chou</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Alina Zhou</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Sharvari Dhuri</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Jacky Chan</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+              </div>
+    
+    
+    
+    
+    
+    
+        </div>
+      </section>
+
+      <!-- PANORAMA SECTION -->
+      <section id="panorama" class="mb-16 scroll-mt-32">
+        <h2 class="text-3xl md:text-4xl font-black text-gray-900 dark:text-white mb-8 text-left">
+          PANORAMA
+        </h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+       
+
+
+            <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Alex Zhou</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Lead</p>
+              </div>
+
+              <div class="flex flex-col items-center">
+                <img
+                  src=""
+                  alt=""
+                  class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+                />
+                <h3 class="font-bold text-lg text-gray-900 dark:text-white">Nate Noguera</h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">Lead</p>
+              </div>
+    
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Nimesh Pandey</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Daniel Li</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Nikoo Vali</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Brian Liu</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Sofia Di Fluri</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Kenneth Manohar</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Bradley Wong</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Henry Van Weelderen</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Bianca Li</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Nami Maleki</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Clayton Chung</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Hasna Aulia</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+  
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Mo Ngai</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+          <div class="flex flex-col items-center">
+            <img
+              src=""
+              alt=""
+              class="w-32 h-32 rounded-full object-cover mb-4 border-4 border-red-600"
+            />
+            <h3 class="font-bold text-lg text-gray-900 dark:text-white">Kathryne Zong</h3>
+            <p class="text-sm text-gray-600 dark:text-gray-400">Member</p>
+          </div>
+
+
+
+        
+
+
+         
+
+         
+         
+
+        </div>
+      </section>
+
+    </div>
+  </section>
+</div>
\ No newline at end of file