fix #108. Add about page

components/about-card.tsx

@@ -0,0 +1,45 @@
+import type { FC, ReactElement, ReactNode } from "react";
+import Grid from "@mui/material/Grid";
+import Card from "@mui/material/Card";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Typography from "@mui/material/Typography";
+import CardActionArea from "@mui/material/CardActionArea";
+
+interface AboutCardProps {
+  readonly imageName: string;
+  readonly name: string;
+  readonly children: ReactNode;
+}
+
+// eslint-disable-next-line @typescript-eslint/prefer-readonly-parameter-types
+const AboutCard: FC<AboutCardProps> = ({
+  imageName,
+  name,
+  children,
+}: AboutCardProps): ReactElement | null => {
+  return (
+    <Grid item>
+      <Card sx={{ width: 250, boxShadow: 1 }}>
+        <CardActionArea>
+          <CardMedia
+            component="img"
+            height={200}
+            image={`/images/${imageName}`}
+            alt={`picture of ${name}`}
+          />
+          <CardContent sx={{ height: 200 }}>
+            <Typography variant="h6" gutterBottom>
+              {name}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {children}
+            </Typography>
+          </CardContent>
+        </CardActionArea>
+      </Card>
+    </Grid>
+  );
+};
+
+export default AboutCard;

components/about-page.tsx

@@ -1,11 +1,53 @@
 import type { FC, ReactElement } from "react";
-import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import AboutCard from "@/components/about-card";
+import Grid from "@mui/material/Grid";
 
 const AboutPage: FC = (): ReactElement | null => {
   return (
-    <Paper sx={{ display: "flex", height: "80%", width: "50%", p: 4 }}>
-      This web application was written as a university project
-    </Paper>
+    <Grid container direction="column">
+      <Typography variant="h1" align="center">
+        About Us
+      </Typography>
+      <Typography variant="h6" sx={{ paddingBottom: 4 }} textAlign="center">
+        ChessTeacher is a semester project created by the group of computer
+        science students seen below. The project was created to understand how a
+        chess web app could be created, and to experiment with teaching
+        methodology. To enhance the teaching process, they combined the power of
+        chess engines with the social experience of player-versus-player
+        gameplay.
+      </Typography>
+      <Grid container spacing={2} justifyContent="center">
+        <AboutCard imageName="sebastian.jpg" name="Sebastian Mygind">
+          Sebastian Mygind, a 21-year-old computer science student at Aalborg
+          University Copenhagen, is one of the creators behind the ChessTeacher
+          chess web-app.
+        </AboutCard>
+        <AboutCard imageName="default_picture.jpg" name="Simon Woidmann">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          venenatis ex magna, eget viverra sem viverra et. Pellentesque nec
+          porttitor sapien.
+        </AboutCard>
+        <AboutCard imageName="default_picture.jpg" name="Martin Kedmenec">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          venenatis ex magna, eget viverra sem viverra et. Pellentesque nec
+          porttitor sapien.
+        </AboutCard>
+        <AboutCard imageName="default_picture.jpg" name="Mads Heilmann">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          venenatis ex magna, eget viverra sem viverra et. Pellentesque nec
+          porttitor sapien.
+        </AboutCard>
+        <AboutCard
+          imageName="default_picture.jpg"
+          name="Kristiyan Mariyan Georgiev"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+          venenatis ex magna, eget viverra sem viverra et. Pellentesque nec
+          porttitor sapien.
+        </AboutCard>
+      </Grid>
+    </Grid>
   );
 };