Merge pull request #38 from Sweetdevil144/main

Update Cards Styles

src/components/CardList.js

@@ -23,7 +23,19 @@ const PeopleCard = (props) => {
  alignItems: "center",
  }}
  >
- <img src={props.img} alt="Image alt text" title="Logo Title Text 1" />
+ <img
+ src={props.img}
+ className="cardImage"
+ alt="Image alt text"
+ title="Logo Title Text"
+ style={{
+ maxWidth: "250px",
+ maxHeight: "250px",
+ objectFit: "contain",
+ width: "100%",
+ height: "100%",
+ }}
+ />
  </div>
  <div
  className="card__footer"
@@ -55,15 +67,22 @@ const PeopleCard = (props) => {
 };
 
 const CardList = () => {
+ const half = Math.ceil(contributors.length / 2);
+ const firstHalf = contributors.slice(0, half);
+ const secondHalf = contributors.slice(half);
  return (
- <>
- <h2 style={{ textAlign: "center",margin:'0.5rem' }}>People</h2>
- <div className={styles.peopleContainer}>
- {contributors.map((person, index) => {
- return <PeopleCard key={index} {...person} />;
- })}
+ <div className={styles.mainContainer}>
+ <div className={styles.column}>
+ {firstHalf.map((person, index) => (
+ <PeopleCard key={index} {...person} />
+ ))}
  </div>
- </>
+ <div className={styles.column}>
+ {secondHalf.map((person, index) => (
+ <PeopleCard key={index} {...person} />
+ ))}
+ </div>
+ </div>
  );
 };
 export default CardList;

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%;
+ }
+}

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 (
  <Layout title="people">
  <div>
  <h2 style={{ textAlign: "center", margin: "0.5rem" }}>
  Project Alumni
  </h2>
- <div className={styles.peopleContainer}>
- {projectAlumni.map((person, index) => {
- return <PeopleCard key={index} {...person} />;
- })}
+ <div className={styles.mainContainer}>
+ <div className={styles.column}>
+ {firstHalf.map((person, index) => (
+ <PeopleCard key={index} {...person} />
+ ))}
+ </div>
+ <div className={styles.column}>
+ {secondHalf.map((person, index) => (
+ <PeopleCard key={index} {...person} />
+ ))}
+ </div>
  </div>
  </div>
  </Layout>
  );
 };
+
 export default Alumni;

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",