Feature: Add Officer Section (#21)

* Add basic officer card component

Co-authored-by: Phantom0110 <146048575+phantom0110@users.noreply.github.com>

* Fix lint issues

* Add multiple cards to officer section

Co-authored-by: Phantom0110 <146048575+Phantom0110@users.noreply.github.com>

* Decreased social link sizes. Added officer names and position. Need to add officer pictures and social links.

* Added images of officers. Need to add social links. Some pictures also seem to not fit well in the officer card and social media icons popping out of card as a result. #18

* Add styles to make officer portraits the same size

* Change officer social links to use their real links

* Update size of cards to fit 3 columns in 800px content width

* Change social links to open in new tab

* Add web logo for officer cards

* Change officer names to be center aligned

* Delete eric-navar.webp

* Remove unnecessary comments from CSS files

* Remove alt prop from OfficerCard and data and export SocialLink

* Rename OfficerCardProperties to -Props and add eslint exception

* Change officer heading to be center aligned wrt container

* Change .eslintrc.js to use LF line endings

* Move officerCardData to separate officer-data.ts file

---------

Co-authored-by: Phantom0110 <146048575+phantom0110@users.noreply.github.com>
Co-authored-by: Phantom0110 <mohamali9173@gmail.com>

.eslintrc.js

@@ -11,4 +11,15 @@ module.exports = {
   parserOptions: {
     project: "./tsconfig.json",
   },
+  rules: {
+    "unicorn/prevent-abbreviations": [
+      "error",
+      {
+        "replacements": {
+          "prop": false,
+          "props": false,
+        }
+      }
+    ]
+  }
 };

src/app/about/About.module.css

@@ -4,6 +4,45 @@
     text-align: center;
 }
 
+.imageContainer {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+}
+
+.title {
+    margin-bottom: 5rem;
+    font-size: 3rem;
+}
+
+.description {
+    margin: 0 auto;
+    max-width: 1000px;
+}
+
 .image {
     margin: auto;
 }
+
+.officers {
+    margin-top: 50px;
+    height: 400px;
+    text-align: left;
+    display: flex;
+    justify-content: center;
+}
+
+.container {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.cardContainer {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+}

src/app/about/OfficerCard.module.css

@@ -0,0 +1,50 @@
+.officerCard {
+  width: 250px;
+  max-width: 100%;
+  height: 320px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 10px;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.portrait {
+  height: 180px;
+  width: 180px;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.officerCard h3 {
+  font-size: 1.3rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.officerCard h4 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  text-align: center;
+}
+
+.socialLinks {
+  display: flex;
+  gap: 1rem;
+}
+
+/* 
+The website logo is slightly smaller than the other logos.
+This scales it up a tiny bit.
+This is where the logo comes from:
+https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Alanguage%3AFILL%401%3Bwght%40400%3BGRAD%400%3Bopsz%4024
+*/
+.socialLinks img[data-name="Website"] {
+  transform: scale(1.2);
+}
+
+.socialLinks a:hover {
+  transform: scale(1.1);
+}

src/app/about/officer-card.tsx

@@ -0,0 +1,54 @@
+import Image from "next/image";
+import styles from "./OfficerCard.module.css";
+
+export type SocialLink = {
+  name: string;
+  url: string;
+  icon: string;
+};
+
+export type OfficerCardProps = {
+  position: string;
+  image: string;
+  name: string;
+  socialLinksData: SocialLink[];
+};
+
+export default function OfficerCard({
+  position,
+  image,
+  name,
+  socialLinksData,
+}: OfficerCardProps) {
+  const socialLinks = socialLinksData.map((link) => (
+    <a
+      href={link.url}
+      key={link.name}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Image
+        src={link.icon}
+        alt={link.name}
+        height={30}
+        width={30}
+        data-name={link.name}
+      />
+    </a>
+  ));
+
+  return (
+    <div className={styles.officerCard}>
+      <h3>{position}</h3>
+      <Image
+        className={styles.portrait}
+        src={image}
+        alt={`Profile picture of ${name}`}
+        height={180}
+        width={180}
+      />
+      <h4>{name}</h4>
+      <div className={styles.socialLinks}>{socialLinks}</div>
+    </div>
+  );
+}

src/app/about/officer-data.ts

@@ -0,0 +1,88 @@
+import { OfficerCardProps } from "./officer-card";
+
+const officerCardData: OfficerCardProps[] = [
+  {
+    position: "President",
+    image: "public/officers/Yonas_Bahre.jpg",
+    name: "Yonas Bahre",
+    socialLinksData: [
+      {
+        name: "LinkedIn",
+        url: "https://www.linkedin.com/in/yonasbahre/",
+        icon: "/linkedin_logo.png",
+      },
+    ],
+  },
+  {
+    position: "Vice President",
+    image: "public/officers/Michael_Hayworth.jpg",
+    name: "Michael Hayworth",
+    socialLinksData: [
+      {
+        name: "LinkedIn",
+        url: "https://www.linkedin.com/in/michaeldhayworth/",
+        icon: "/linkedin_logo.png",
+      },
+    ],
+  },
+  {
+    position: "Treasurer",
+    image: "public/officers/Stephen_Coomes.jpg",
+    name: "Stephen Coomes",
+    socialLinksData: [
+      {
+        name: "LinkedIn",
+        url: "https://www.linkedin.com/in/stephen-coomes-8a4885221/",
+        icon: "/linkedin_logo.png",
+      },
+    ],
+  },
+  {
+    position: "Outreach Officer",
+    image: "public/officers/Angel_Lopez.png",
+    name: "Angel Lopez",
+    socialLinksData: [
+      {
+        name: "GitHub",
+        url: "https://github.com/angel1254mc",
+        icon: "/github_logo.svg",
+      },
+      {
+        name: "LinkedIn",
+        url: "https://www.linkedin.com/in/angel1254/",
+        icon: "/linkedin_logo.png",
+      },
+      {
+        name: "Website",
+        url: "https://www.angel1254.com/",
+        icon: "/web_logo.svg",
+      },
+    ],
+  },
+  {
+    position: "Program Officer",
+    image: "public/officers/Param_Gupta.jpg",
+    name: "Param Gupta",
+    socialLinksData: [
+      {
+        name: "LinkedIn",
+        url: "https://www.linkedin.com/in/paramg/",
+        icon: "/linkedin_logo.png",
+      },
+    ],
+  },
+  {
+    position: "Involvement Officer",
+    image: "public/officers/CJ_Weir.jpg",
+    name: "CJ Weir",
+    socialLinksData: [
+      {
+        name: "LinkedIn",
+        url: "https://www.linkedin.com/in/cj-weir/",
+        icon: "/linkedin_logo.png",
+      },
+    ],
+  },
+];
+
+export default officerCardData;

src/app/about/page.tsx

@@ -1,7 +1,20 @@
 import Image from "next/image";
 import styles from "./About.module.css";
 
+import OfficerCard from "./officer-card";
+import officerCardData from "./officer-data";
+
 export default function About() {
+  const officerCards = officerCardData.map((cardData) => (
+    <OfficerCard
+      key={cardData.position}
+      position={cardData.position}
+      image={cardData.image}
+      name={cardData.name}
+      socialLinksData={cardData.socialLinksData}
+    />
+  ));
+
   return (
     <main className={styles.content}>
       <h1>About</h1>
@@ -16,13 +29,21 @@ export default function About() {
           careers in software development.
         </p>
       </div>
-      <Image
-        className={styles.image}
-        src="fall_2022_planning_meeting.jpg"
-        alt="SSD members (about 30) at our Fall 2022 planning meeting in CISE."
-        height={600}
-        width={600}
-      />
+      <div className={styles.imageContainer}>
+        <Image
+          className={styles.image}
+          src="fall_2022_planning_meeting.jpg"
+          alt="SSD members (about 30) at our Fall 2022 planning meeting in CISE."
+          height={600}
+          width={600}
+        />
+      </div>
+      <section className={styles.officers}>
+        <div className={styles.container}>
+          <h2>Officers</h2>
+          <div className={styles.cardContainer}>{officerCards}</div>
+        </div>
+      </section>
     </main>
   );
 }