team

package.json

@@ -5,13 +5,16 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-brands-svg-icons": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mui/icons-material": "^5.6.1",
     "@mui/material": "^5.6.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
-    "dotenv": "^16.0.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",

src/Components/TeamCard.js

@@ -0,0 +1,32 @@
+import { Grid } from "@mui/material";
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCode } from "@fortawesome/free-solid-svg-icons";
+import { faTwitter, faLinkedin } from "@fortawesome/free-brands-svg-icons";
+
+const TeamCard = ({ x }) => {
+  return (
+    <Grid item xs={12} sm={12} md={6}>
+      <div className="team-card">
+        <img src={x.image} alt=""></img>
+        <div className="team-content">
+          <h3>{x.name}</h3>
+          <p>{x.about}</p>
+          <Grid container>
+            <a href="/">
+              <FontAwesomeIcon icon={faCode} />
+            </a>
+            <a href="/">
+              <FontAwesomeIcon icon={faLinkedin} />
+            </a>
+            <a href="/">
+              <FontAwesomeIcon icon={faTwitter} />
+            </a>
+          </Grid>
+        </div>
+      </div>
+    </Grid>
+  );
+};
+
+export default TeamCard;

src/Components/TeamRoute.js

@@ -1,9 +1,40 @@
+import { Grid } from "@mui/material";
 import React from "react";
+import { sig_contri, team } from "../Constants/team";
+import TeamCard from "./TeamCard";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faTwitter, faLinkedin } from "@fortawesome/free-brands-svg-icons";
 
 const TeamRooute = () => {
   return (
     <div className="team-route-wrapper">
       <h1>Minds behind PolyPhy</h1>
+      <div style={{ margin: "4rem 0 2rem 0" }}>
+        <h2>Current Stakeholders</h2>
+        <Grid container spacing={3} justifyContent="center">
+          {team.map((x) => {
+            return <TeamCard x={x} key={x.name} />;
+          })}
+        </Grid>
+      </div>
+      <div style={{ margin: "4rem auto 2rem auto", maxWidth: "700px" }}>
+        <h2>Significant Contributors</h2>
+        {sig_contri.map((x) => {
+          return (
+            <div className="sig-contri" key={x.name}>
+              <p>{x.name}</p>
+              <div style={{ display: "flex" }}>
+                <a href="/">
+                  <FontAwesomeIcon icon={faLinkedin} />
+                </a>
+                <a href="/">
+                  <FontAwesomeIcon icon={faTwitter} />
+                </a>
+              </div>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 };

src/Constants/team.js

@@ -0,0 +1,38 @@
+import oskar from "../Assets/oskar_elek.jpg";
+import joseph from "../Assets/joseph.jpeg";
+import carlos from "../Assets/carlos.jfif";
+import angus from "../Assets/angus.jfif";
+
+export const team = [
+    {
+        name: "Oskar Elek",
+        about: "Primary author, computational media researcher at Creative Coding lab, UC Santa Cruz",
+        image: oskar
+    },
+    {
+        name: "Joseph N. Burchett",
+        about: "Astronomer at UC Santa Cruz, expert in galactic ecosystems",
+        image: joseph
+    },
+
+    {
+        name: "Carlos Maltzahn",
+        about: "Founder and Director of the UC Santa Cruz Center for Research in Open Source Software (CROSS)",
+        image: carlos
+    },
+    {
+        name: "Angus G. Forbes",
+        about: "Director of Creative Coding lab, UC Santa Cruz",
+        image: angus
+    },
+]
+
+export const sig_contri = [
+    {name: "J. Xavier Prochaska"},
+    {name: "Jan Ivanecky"},
+    {name: "Sage Jenson"},
+    {name: "Daisuke Nagai"},
+    {name: "Sebastian Herholz"},
+    {name: "Jaroslav Křivánek"},
+    {name: "Drew Ehrlich"},
+]