1 files changed, 56 insertions, 0 deletions
diff --git a/frontend/src/components/home/TeamSection.js b/frontend/src/components/home/TeamSection.js
new file mode 100644
index 00000000..b86655b4
--- /dev/null
+++ b/frontend/src/components/home/TeamSection.js
@@ -0,0 +1,56 @@
+import React from "react";
+import ContentSection from "./ContentSection";
+
+const TeamMember = ({ photoId, name, description }) => (
+  <div className="col-xl-3 col-lg-3 col-md-5 col-sm-6 col-12 justify-content-center">
+    <img
+      src={"img/portraits/" + photoId + ".png"}
+      className="col-xl-10 col-lg-10 col-md-10 col-sm-8 col-5 mb-2 mt-2"
+      alt={name}
+    />
+    <div className="col-12">
+      <h4>{name}</h4>
+      <div className="team-member-description">{description}</div>
+    </div>
+  </div>
+);
+
+const TeamSection = () => (
+  <ContentSection name="team" title="Core Team">
+    <div className="row justify-content-center">
+      <TeamMember
+        photoId="aiosup"
+        name="Prof. dr. ir. Alexandru Iosup"
+        description="Project Lead"
+      />
+      <TeamMember
+        photoId="gandreadis"
+        name="Georgios Andreadis"
+        description="Technology Lead and Software Engineer responsible for the frontend web application"
+      />
+      <TeamMember
+        photoId="fmastenbroek"
+        name="Fabian Mastenbroek"
+        description="Software Engineer responsible for the datacenter simulator"
+      />
+      <TeamMember
+        photoId="loverweel"
+        name="Leon Overweel"
+        description="Software Engineer responsible for the web server, database, and API specification"
+      />
+    </div>
+    <div className="text-center lead mt-3">
+      See{" "}
+      <a
+        target="_blank"
+        href="http://atlarge.science/opendc#team"
+        rel="noopener noreferrer"
+      >
+        atlarge.science/opendc
+      </a>{" "}
+      for the full team!
+    </div>
+  </ContentSection>
+);
+
+export default TeamSection;