Populate Team Members

src/components/ProfileCard.vue

@@ -17,6 +17,19 @@ const handleImgErr = (e: Event) => {
   const target = e.target as HTMLImageElement
   target.src = emptyPic
 }
+
+const turnOrdinal = (year : number) => {
+  switch(year % 10) {
+    case 1:
+      return year + 'st'
+    case 2:
+      return year + 'nd'
+    case 3:
+      return year + 'rd'
+    default:
+      return year + 'th'
+  }
+}
 </script>
 
 <template>
@@ -58,7 +71,7 @@ const handleImgErr = (e: Event) => {
         <div class="flex flex-col items-center content-start gap-0 p-[0.5rem] max-h-full">
           <div class="text-lg font-bold text-white">{{ member?.name }}</div>
           <div class="text-xs font-normal relative bottom-1">
-            {{ member?.major }} · {{ member?.year }}th
+            {{ member?.major }} · {{ turnOrdinal(member?.year) }}
           </div>
           <p class="text-justify px-[1.6rem] overflow-y-scroll invisible-scroller">
             {{ member?.description }}

src/components/lab-notebook/TableOfContents.vue

@@ -13,7 +13,6 @@ onMounted(() => {
     entries.forEach((entry) => {
       if (entry.isIntersecting) {
         activeElementId.value = entry.target.innerHTML.trim()
-        console.log(activeElementId.value)
       }
     })
   }

src/views/TeamView.vue

@@ -22,7 +22,6 @@ const handleClick = (inc: number) => {
     finalState.value = inc < 0 ? 'translate-x-full opacity-0' : '-translate-x-full opacity-0'
     changingTeam.value = false
   }
-  console.log(initialState)
 }
 
 let currTeam: Ref<string> = ref('All')
@@ -114,7 +113,7 @@ const { isSwiping, direction, lengthX, lengthY } = useSwipe(swipeableContainer,
 
       <!-- Desktop -->
       <div
-        class="hidden min-[866px]:gap-x-[1rem] min-[866px]:py-[2rem] min-[866px]:flex min-[866px]:flex-row lg:gap-x-[3rem]"
+        class="hidden w-full gap-x-[1rem] min-[866px]:flex min-[866px]:flex-row min-[866px]:justify-center min-[866px]:py-[2rem]"
       >
         <TransparentButton
           v-for="(team, i) in teams"