diff --git a/src/components/CardList.js b/src/components/CardList.js index 1e70e26..70c5095 100644 --- a/src/components/CardList.js +++ b/src/components/CardList.js @@ -23,7 +23,19 @@ const PeopleCard = (props) => { alignItems: "center", }} > - Image alt text + Image alt text
{ }; const CardList = () => { + const half = Math.ceil(contributors.length / 2); + const firstHalf = contributors.slice(0, half); + const secondHalf = contributors.slice(half); return ( - <> -

People

-
- {contributors.map((person, index) => { - return ; - })} +
+
+ {firstHalf.map((person, index) => ( + + ))}
- +
+ {secondHalf.map((person, index) => ( + + ))} +
+
); }; export default CardList; diff --git a/src/components/people.module.css b/src/components/people.module.css index 44bf21e..322639b 100644 --- a/src/components/people.module.css +++ b/src/components/people.module.css @@ -1,12 +1,34 @@ -.peopleContainer { +.card { + margin: 2rem; + max-width: 400px; + flex: 1 1 auto; +} + +.mainContainer { display: flex; - flex-wrap: wrap; justify-content: center; align-items: center; - margin: 2rem 0; + margin: 0; + padding: 0 5rem; + max-width: 100%; } -.card { - margin: 2rem 4rem; - max-width: 400px; - flex: 1 1 auto; + +.column { + display: flex; + flex-direction: column; + align-items: center; + flex: 1; + margin: 0 1rem; } + +@media (max-width: 768px) { + .mainContainer { + flex-direction: column; + padding: 0; + } + + .column { + margin: 0; + width: 100%; + } +} \ No newline at end of file diff --git a/src/pages/alumni.js b/src/pages/alumni.js index 1043d77..8f3e957 100644 --- a/src/pages/alumni.js +++ b/src/pages/alumni.js @@ -56,19 +56,32 @@ const PeopleCard = (props) => { }; const Alumni = () => { + // Splitting the projectAlumni array into two + const half = Math.ceil(projectAlumni.length / 2); + const firstHalf = projectAlumni.slice(0, half); + const secondHalf = projectAlumni.slice(half); + return (

Project Alumni

-
- {projectAlumni.map((person, index) => { - return ; - })} +
+
+ {firstHalf.map((person, index) => ( + + ))} +
+
+ {secondHalf.map((person, index) => ( + + ))} +
); }; + export default Alumni; diff --git a/static/utils/contributors.js b/static/utils/contributors.js index 9def73e..ad54712 100644 --- a/static/utils/contributors.js +++ b/static/utils/contributors.js @@ -11,7 +11,7 @@ const contributors = [ email: "dlebauer@email.arizona.edu", role: "PEcAn Co-PI", profession: "Staff Scientist, Indigo Ag", - img: "https://datascience.cct.arizona.edu/sites/datascience.cct.arizona.edu/files/styles/large/public/images/people/david_lebauer.jpg", + img: "https://datascience.cct.arizona.edu/sites/datascience.cct.arizona.edu/files/styles/az_medium/public/2023-11/david_lebauer.jpeg", }, { name: "Dr. Kenton McHenry",