Alum display update

Author: schasins

src/app/page.tsx

@@ -6,14 +6,14 @@ import LabAlum from "@/components/people/LabAlum";
 import Project from "@/components/projects/Project";
 import Heading from "@/components/shared/Heading";
 import Text from "@/components/shared/Text";
-import { PEOPLE, Role } from "@/content/people";
+import { PEOPLE, Role, RoleOrder } from "@/content/people";
 import { PROJECTS } from "@/content/projects";
 import BerkeleyMini from "@/../public/images/berkeley-mini.png";
 
 const Index = () => {
   const [currentLabMembers, alumni] = partition(
     PEOPLE,
-    (person) => person.role !== Role.Alumni
+    (person) => !(person.alum)
   );
 
   return (
@@ -70,16 +70,16 @@ const Index = () => {
       <section className="stack stack-lg p-4">
         <Heading level="h2">People</Heading>
         <div className="stack stack-sm">
-          <div className="grid grid-cols-12 gap-5">
-            {currentLabMembers.map((person) => {
+          <div className="grid grid-cols-12 gap-10">
+            {orderBy(currentLabMembers, [p => RoleOrder[p.role], p => p.name.trim().split(" ").slice(-1)[0]], ["asc", "asc"]).map((person) => {
               return <LabMember key={person.id} {...person} />;
             })}
           </div>
         </div>
         <div className="stack stack-sm">
           <Heading level="h3">Alums</Heading>
-          <div className="grid grid-cols-12 gap-5">
-            {alumni.map((person) => {
+          <div className="grid grid-cols-12 gap-2">
+            {orderBy(alumni, (p) => p.graduation, ["desc"]).map((person) => {
               return <LabAlum key={person.id} {...person} />;
             })}
           </div>

src/components/people/LabAlum.tsx

@@ -7,18 +7,23 @@ type Props = Person;
 
 const LabAlum: React.FC<Props> = ({ name, role, website, headshot }) => {
   return (
+    
     <a
       href={website}
       target="_blank"
       rel="noopener noreferrer"
       className={cs(
-        "stack-sm col-span-6 md:col-span-4 lg:col-span-3",
+        "col-span-6 md:col-span-4 lg:col-span-3 flex items-center gap-2",
         website ? "transition-opacity hover:opacity-75" : ""
       )}
     >
+      <Image
+        src={headshot}
+        alt={name}
+        className="h-12 w-12 rounded object-cover shadow"
+      />
       <div className={cs(website ? "text-primary" : "text-black")}>
-        <p className="text-sm font-bold">{name}</p>
-        {role !== Role.Alumni ? <p className="text-xs italic">{role}</p> : null}
+        <p className="text-sm font-bold">{name}, <span className="text-xs italic">{role.split(" ")[0]}</span></p>
       </div>
     </a>
   );

src/content/people.ts

@@ -22,20 +22,31 @@ import SKanosue from "@/../public/headshots/skanosue.jpg";
 
 export enum Role {
   Faculty = "Faculty",
-  PhDCandidate = "Ph.D. Candidate",
-  PhdStudent = "Ph.D. Student",
-  MScStudent = "M.Sc. Student",
+  PhDCandidate = "PhD Candidate",
+  PhdStudent = "PhD Student",
+  MScStudent = "MS Student",
   UndergraduateStudent = "Undergraduate Student",
-  UndergraduateAssistant = "Undergraduate Student Assistant",
-  Alumni = "Alumni",
+  StudentAssistant = "Assistant",
+  OnLeave = "PhD Student (on leave)"
 }
+export const RoleOrder: Record<Role, number> = {
+  [Role.Faculty]: 1,
+  [Role.PhDCandidate]: 2,
+  [Role.PhdStudent]: 3,
+  [Role.MScStudent]: 4,
+  [Role.UndergraduateStudent]: 5,
+  [Role.StudentAssistant]: 6,
+  [Role.OnLeave]: 7,
+};
 
 export interface Person {
   id: string;
   name: string;
   role: Role;
   headshot: StaticImageData;
   website?: string;
+  alum: Boolean;
+  graduation?: number;
 }
 
 export const PEOPLE = [
@@ -45,127 +56,157 @@ export const PEOPLE = [
     role: Role.Faculty,
     headshot: SChasins,
     website: "https://schasins.com/",
+    alum: false,
   },
   {
     id: "rgarcia",
     name: "Rolando Garcia",
-    role: Role.Alumni,
+    role: Role.PhDCandidate,
     headshot: RGarcia,
     website: "https://rlnsanz.github.io/",
+    alum: true,
+    graduation: 2024
   },
   {
     id: "hhailunigatu",
     name: "Hellina Hailu Nigatu",
     role: Role.PhDCandidate,
     headshot: HHailuNigatu,
     website: "https://hhnigatu.github.io/",
+    alum: false,
   },
   {
     id: "slim",
     name: "Slim Lim",
-    role: Role.PhdStudent,
+    role: Role.OnLeave,
     headshot: SLim,
     website: "https://slim.computer/",
+    alum: false,
   },
   {
     id: "jlubin",
     name: "Justin Lubin",
     role: Role.PhDCandidate,
     headshot: JLubin,
     website: "https://jlubin.net",
+    alum: false,
   },
   {
     id: "dcao",
     name: "David Minh-Duy Cao",
     role: Role.PhdStudent,
     headshot: DCao,
     website: "https://cao.sh",
+    alum: false,
   },
   {
     id: "gmatute",
     name: "Gabriel Matute",
-    role: Role.Alumni,
+    role: Role.MScStudent,
     headshot: GMatute,
     website: "https://about.gmatute.dev/",
+    alum: true,
   },
   {
     id: "erawn",
     name: "Eric Rawn",
     role: Role.PhdStudent,
     headshot: ERawn,
     website: "https://www.ericrawn.media/",
+    alum: false,
   },
   {
     id: "pziegler",
     name: "Parker Ziegler",
     role: Role.PhdStudent,
     headshot: PZiegler,
     website: "https://parkerziegler.com/",
+    alum: false,
   },
   {
     id: "djayagopal",
     name: "Dhanya Jayagopal",
-    role: Role.Alumni,
+    role: Role.MScStudent,
     headshot: DJayagopal,
+    alum: true,
+    graduation: 2022
   },
   {
     id: "jyim",
     name: "Jacob Yim",
-    role: Role.Alumni,
+    role: Role.MScStudent,
     headshot: JYim,
+    alum: true,
+    graduation: 2024
   },
   {
     id: "skanosue",
     name: "Sora Kanosue",
-    role: Role.Alumni,
+    role: Role.MScStudent,
     headshot: SKanosue,
     website: "https://skanosue.com",
+    alum: true,
+    graduation: 2024
   },
   {
     id: "lrennels",
     name: "Lisa Rennels",
-    role: Role.Alumni,
+    role: Role.MScStudent,
     headshot: LRennels,
     website: "https://lisarennels.com/",
+    alum: true,
+    graduation: 2024
   },
   {
     id: "adermirci",
     name: "Arda Demirci",
-    role: Role.Alumni,
+    role: Role.UndergraduateStudent,
     headshot: ADemirci,
     website: "https://www.linkedin.com/in/ardademirci14/",
+    alum: true,
+    graduation: 2022
   },
   {
     id: "rhicke",
     name: "Rebecca Hicke",
-    role: Role.Alumni,
+    role: Role.UndergraduateStudent,
     headshot: RHicke,
     website: "https://rmatouschekh.github.io/",
+    alum: true,
+    graduation: 2021
   },
   {
     id: "skim",
     name: "Selina Kim",
-    role: Role.Alumni,
+    role: Role.UndergraduateStudent,
     headshot: SKim,
+    alum: true,
+    graduation: 2022
   },
   {
     id: "rmishra",
     name: "Rajavi Mishra",
-    role: Role.Alumni,
+    role: Role.UndergraduateStudent,
     headshot: RMishra,
+    alum: true,
+    graduation: 2022
   },
   {
     id: "hperlstein",
     name: "Hannah Perlstein",
-    role: Role.Alumni,
+    role: Role.UndergraduateStudent,
     headshot: HPerlstein,
     website: "https://www.linkedin.com/in/hannah-perlstein/",
+    alum: true,
+    graduation: 2022
   },
   {
     id: "lrojas",
     name: "Liliana Rojas",
-    role: Role.Alumni,
+    role: Role.StudentAssistant,
     headshot: LRojas,
     website: "https://www.linkedin.com/in/liliana-rojasl/",
+    alum: true,
+    graduation: 2024
   },
 ];