Updated Person card component + created People grid view component

web/frontend/src/components/People/index.js

@@ -2,14 +2,12 @@ import React from "react";
 import Person from "../Person";
 
 
-const People = ({ people }) => {
-  return (
-    <div>
-    {people.map((person, i) => {
-      return <Person person={person} key={`people__${people.id}`} />;
-    })}
-  </div>
-  );
+const People = ({people}) => {
+    return (
+        <div className="people-container">
+          {people.map((person, i) => <Person person={person} key={`people__${people.id}`}/>)}
+        </div>
+    );
 };
 
 export default People;

web/frontend/src/components/Person/index.js

@@ -1,30 +1,22 @@
 import React from "react";
-import { Link } from "react-router-dom";
+import {Link} from "react-router-dom";
 
-const Person = ({ person }) => {
+const Person = ({person}) => {
     console.log(person);
-  const imageUrl =
-    process.env.NODE_ENV !== "development"
-      ? person.image.url
-      : process.env.REACT_APP_BACKEND_URL + person.image.url;
-  return (
-
-
-
-    <Link to={`/people/${person.name}`} className="uk-link-reset">
-      <div className="uk-card uk-card-muted">
-        <div className="uk-card-media-top">
-          <img src={imageUrl} alt={person.image.url} height="100" />
-        </div>
-        <div className="uk-card-body">
-          <p id="category" className="uk-text-uppercase">
-            {person.name}
-          </p>
-
-        </div>
-      </div>
-    </Link>
-  );
+    const imageUrl =
+        process.env.NODE_ENV !== "development"
+            ? person.image.url
+            : process.env.REACT_APP_BACKEND_URL + person.image.url;
+    return (
+        <Link to={`/people/${person.name}`} className="uk-link-reset">
+            <div className="person-container">
+                <div className="person-img" role="img" aria-label={'Photo of ' + person.name}
+                     style={{backgroundImage: 'url(' + imageUrl + ')'}}/>
+                <h2 className="person-name">{person.name}</h2>
+                <h3 className="person-subtitle">{person.deathDate}</h3>
+            </div>
+        </Link>
+    );
 };
 
 export default Person;

web/frontend/src/containers/People/index.js

@@ -4,30 +4,40 @@ import Query from "../../components/Query";
 import PEOPLE_QUERY from "../../queries/people/people";
 
 const Home = () => {
-  return (
-    // <div>
-    //   <div className="uk-section">
-    //     <div className="uk-container uk-container-large">
-    //       <h1>Say Their Names</h1>
-    //       <Query query={ARTICLES_QUERY}>
-    //         {({ data: { articles } }) => {
-    //           return <Articles articles={articles} />;
-    //         }}
-    //       </Query>
-    //     </div>
-    //   </div>
-    // </div>
+    // Placeholder Data
+    const data = [{
+        name: "John Doe", deathDate: "01.01.2020", coverImage: "https://via.placeholder.com/150"
+    }, {
+        name: "Jane Doe", deathDate: "01.01.2020", coverImage: "" +
+            "https://via.placeholder.com/150"
+    }, {
+        name: "Jean Doe", deathDate: "01.07.2002", coverImage: "https://via.placeholder.com/150"
+    }];
 
-    <div>
-      <div className="home">
-          <Query query={PEOPLE_QUERY}>
-          {({ data: { people } }) => {
-               return <People people={people} />;
-          }}
-          </Query>
+    return (
+        // <div>
+        //   <div className="uk-section">
+        //     <div className="uk-container uk-container-large">
+        //       <h1>Say Their Names</h1>
+        //       <Query query={ARTICLES_QUERY}>
+        //         {({ data: { articles } }) => {
+        //           return <Articles articles={articles} />;
+        //         }}
+        //       </Query>
+        //     </div>
+        //   </div>
+        // </div>
+
+        <div>
+            <div className="home">
+                <Query query={PEOPLE_QUERY}>
+                    {({data: {people}}) => {
+                        return <People people={people}/>;
+                    }}
+                </Query>
+            </div>
         </div>
-    </div>
-  );
+    );
 };
 
 export default Home;

web/frontend/src/index.css

@@ -50,3 +50,71 @@ img:hover {
   opacity: 1;
   transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
 }
+
+.people-container {
+  max-width: 85%;
+  margin: auto;
+  padding: 10px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+}
+
+@media (max-width: 700px) {
+  /* CSS that should be displayed if width is equal to or less than 800px goes here */
+  .people-container {
+    max-width: 85%;
+    margin: auto;
+    padding: 10px;
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+  }
+}
+
+@media (min-width: 1000px) {
+  /* CSS that should be displayed if width is equal to or less than 800px goes here */
+  .people-container {
+    max-width: 85%;
+    margin: auto;
+    padding: 10px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    grid-column-gap: 16px;
+    grid-row-gap: 16px;
+  }
+}
+
+.person-container:hover {
+
+}
+
+.person-name {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 24px;
+  margin-bottom: -36px;
+}
+
+.person-img {
+  width: 100%;
+  padding-top: 100%; /* 1:1 Aspect Ratio */
+  position: relative;
+  background-size: cover;
+  transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.person-img:hover {
+  opacity: 0.9;
+}
+
+.person-subtitle {
+  text-transform: uppercase;
+  font-size: 18px;
+  color: #969696;
+}
+