Update contents

docs/_includes/js/education/transcript.js

@@ -0,0 +1,15 @@
+const selectors = '.btn-r-1, .btn-r-2, .btn-r-3, .btn-r-4';
+const selectorsActive = '.btn-r-1.active, .btn-r-2.active, .btn-r-3.active, .btn-r-4.active';
+
+document.querySelectorAll(selectors).forEach(button => {
+  button.addEventListener('click', () => {
+    if (!button.classList.contains('active')) {
+      document.querySelector(selectorsActive)?.classList.remove('active');
+      button.classList.add('active');
+    }
+  });
+});
+
+function changePdf(pdfFile) {
+  document.getElementById('pdfViewer').src = pdfFile;
+}

docs/_sass/custom/buttons/button-responsive.scss

@@ -0,0 +1,92 @@
+@import "buttons";
+@import "../local_variables.scss";
+
+$button-r-width: 85px;
+
+.btn-r-1 {
+  @extend .btn;
+  @extend .addition;
+
+  width: calc(
+    (100% - #{$sp-1} * 3) / 4
+  );
+  text-align: center;
+  margin-left: 0;
+  padding-left: 0;
+  padding-right: 0;
+  border-radius: $corner-radius;
+
+  @include mq(lg) {
+    width: $button-r-width;
+    margin-left: 0;
+  }
+}
+
+.btn-r-1.active {
+  @extend .btn-secondary;
+}
+
+.btn-r-2 {
+  @extend .btn;
+  @extend .addition;
+
+  width: calc(
+    (100% - #{$sp-1} * 3) / 4
+  );
+  text-align: center;
+  border-radius: $corner-radius;
+
+  @include mq(lg) {
+    width: $button-r-width;
+    margin-left: 0;
+  }
+}
+
+.btn-r-2.active {
+  @extend .btn-secondary;
+}
+
+.btn-r-3 {
+  @extend .btn;
+  @extend .addition;
+
+  width: calc(
+    (100% - #{$sp-1} * 3) / 4
+  );
+  text-align: center;
+  border-radius: $corner-radius;
+
+  @include mq(lg) {
+    width: $button-r-width;
+    margin-left: 0;
+  }
+}
+
+.btn-r-3.active {
+  @extend .btn-secondary;
+}
+
+.btn-r-4 {
+  @extend .btn;
+  @extend .addition;
+
+  width: calc(
+    (100% - #{$sp-1} * 3) / 4
+  );
+  text-align: center;
+  border-radius: $corner-radius;
+
+  @include mq(lg) {
+    width: $button-r-width;
+    margin-left: 0;
+  }
+}
+
+.btn-r-filler {
+  display: inline-block;
+  width: $sp-1;
+}
+
+.btn-r-4.active {
+  @extend .btn-secondary;
+}

docs/_sass/custom/custom.scss

@@ -1,6 +1,9 @@
 @import "./transition.scss";
 
 @import "./snoidepaedia_spacing.scss";
+
+@import "./buttons/button-responsive.scss";
+
 @import "./iframes/iframe-calendar.scss";
 @import "./iframes/iframe-pdf.scss";
 

docs/education/transcript.md

@@ -13,8 +13,12 @@ Records of *@snoidetx*'s academic performance.
 
 ---
 
-You may click on each tab to view my respective transcript:
+You may click on each button below to view my respective transcript:
+
+<span class="btn-r-1 active" onclick="changePdf('https://drive.google.com/viewerng/viewer?embedded=true&url=https://raw.githubusercontent.com/snoidetx/Snoidepaedia/main/docs/education/pdf/transcript-ug.pdf')">Bach.</span> <span class='btn-small-filler'></span> <span class="btn-r-2" onclick="changePdf('https://drive.google.com/viewerng/viewer?embedded=true&url=https://raw.githubusercontent.com/snoidetx/Snoidepaedia/main/docs/education/pdf/transcript-g.pdf')">Ph.D.</span>
 
 <div class="iframe-pdf-wrapper">
-  <iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://raw.githubusercontent.com/snoidetx/Snoidepaedia/main/docs/education/pdf/transcript.pdf" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>
+  <iframe src="https://drive.google.com/viewerng/viewer?embedded=true&url=https://raw.githubusercontent.com/snoidetx/Snoidepaedia/main/docs/education/pdf/transcript.pdf" id="pdf-viewer" width="100%" height="600" frameborder="0" scrolling="auto"></iframe>
 </div>
+
+<script>{% include js/education/transcript.js %}</script>

docs/index.md

@@ -16,13 +16,19 @@ Personal website of Xiao Tian *@snoidetx*.
 
 ---
 
-I am Xiao <u>Tian</u> (a.k.a. *@snoidetx*), an incoming Ph.D. in Computer Science student at [**National University of Singapore**](https://nus.edu.sg/) (NUS), starting from Spring 2025. I am fortunate to be supervised by [**Prof. Bryan Kian Hsiang Low**](https://www.comp.nus.edu.sg/cs/people/lowkh/). Currently, I am an honours year undergraduate student at NUS pursuing a **double honours degree** in Applied Mathematics and Computer Science. My research interests include **data-centric machine learning**, **multi-agent machine learning** and **privacy-preserving machine learning**. Refer to my [**Research**](./research/) page to find out more about my research and past works. I have also been working as teaching assistant in NUS School of Computing. Refer to my [**Teaching**](./teaching/) page to know about the courses I have taught.
+I am **Xiao <u>Tian</u>**, a **Ph.D. in Computer Science** student at [**National University of Singapore**](https://nus.edu.sg/) (NUS), starting from Spring 2025. I am fortunate to be supervised by [**Prof. Bryan Kian Hsiang Low**](https://www.comp.nus.edu.sg/cs/people/lowkh/). My research interests include **data-centric machine learning**, **multi-agent machine learning** and **privacy-preserving machine learning**. Refer to my [**Research**](./research/) page to find out more about my research and past works. I have also been working as **teaching assistant** in NUS School of Computing. Refer to my [**Teaching**](./teaching/) page to know about the courses I have taught. 
 
-Check out my **résumé** above to know more about me!
+I obtained my **Bachelor of Science in Applied Mathematics (Honours)** and **Bachelor of Computing in Computer Science (Honours)** degrees from NUS in Fall 2024. Check out my **résumé** above to know more about me!
+
+Fun fact: ***Snoíde*** is my pseudonym.
 
 ## Education 🎓 <span class="see-more">[<a href="./education/">see more</a>]</span>
 
 <div style="height: 0"></div>
+**National University of Singapore, School of Computing (Ongoing)**
+<p class="addition">2025 - 2028 (Expected) · Doctor of Philosophy in Computer Science · A*STAR Computing and Information Science (ACIS) Scholarship</p>
+
+<div style="height: 0.5rem"></div>
 **National University of Singapore, School of Computing**
 <p class="addition">2020 - 2024 · Bachelor of Computing in Computer Science · Honours (Highest Distinction) · Turing Programme · Science & Technology (S&T) Undergraduate Merit Scholarship</p>