Merge pull request #60 from FCCColumbus/dev

changes to home screen

src/components/Footer.jsx

@@ -23,6 +23,7 @@ function Footer() {
         </ul>
       </nav>
       <p>Copyright Free Code Camp Columbus 2023 - {new Date().getFullYear()}</p>
+      <a href="https://www.netlify.com" target="_blank" rel="noreferrer" className="image-wrapper"> <img src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg" alt="Deploys by Netlify" /> </a>
     </footer>
   );
 }

src/components/Members.jsx

@@ -1,36 +1,41 @@
 function Members() {
   const admin = [
-    { name: 'John', imgUrl: '/head.png' },
-    { name: 'Amy', imgUrl: '/head.png' },
-    { name: 'Kevin', imgUrl: '/head.png' },
+    { id: 0, firstName: 'John', lastName: 'Riley', title: 'Admin & Coding Mentor', imgUrl: 'https://avatars.githubusercontent.com/u/41979303?v=4' },
+    { id: 1, firstName: 'Kent', lastName: 'Utterback', title: 'Admin Emeritus & Coding Mentor', imgUrl: 'https://avatars.githubusercontent.com/u/17324971?v=4' },
+    { id: 2, firstName: 'Amy', lastName: 'Bedinghaus', title: 'Admin Emeritus', imgUrl: 'https://avatars.githubusercontent.com/u/28076677?v=4' },
+    { id: 3, firstName: 'Austin', lastName: 'Truss', title: 'Admin Emeritus', imgUrl: 'https://media.licdn.com/dms/image/C5603AQGQpynBhWiZLA/profile-displayphoto-shrink_200_200/0/1517355585710?e=1696464000&v=beta&t=DrPEzm5U1we4G7qUPoFrAA5gw_MHSN3dU8_02iWZYRA' },
+    { id: 4, firstName: 'Kevin', lastName: 'Bruland', title: 'Admin Emeritus', imgUrl: 'https://avatars.githubusercontent.com/u/17850505?v=4' },
+    { id: 5, firstName: 'Sarah', lastName: 'Lilly-Bruland', title: 'Admin Emeritus', imgUrl: 'https://avatars.githubusercontent.com/u/17872422?v=4' },
+    { id: 6, firstName: 'Justin', lastName: 'Woodward', title: 'Admin Emeritus', imgUrl: 'https://avatars.githubusercontent.com/u/17994108?v=4' },
   ]
   const members = [
-    { name: 'John', imgUrl: '/head.png' },
-    { name: 'Ismael', imgUrl: '/head.png' },
-    { name: 'Nirvignesh', imgUrl: '/head.png' },
-    { name: 'Tijana', imgUrl: '/head.png' },
-    { name: 'Jennifer', imgUrl: '/head.png' },
-    { name: 'Kellan', imgUrl: '/head.png' },
+    { id: 0, name: 'John', imgUrl: '/head.png' },
+    { id: 1, name: 'Ismael', imgUrl: '/head.png' },
+    { id: 2, name: 'Nirvignesh', imgUrl: '/head.png' },
+    { id: 3, name: 'Tijana', imgUrl: '/head.png' },
+    { id: 4, name: 'Jennifer', imgUrl: '/head.png' },
+    { id: 5, name: 'Kellan', imgUrl: '/head.png' },
   ]
   return (
     <div>
       <div className="members">
         <h3>Meet the Admins</h3>
         <div className="row">
           {admin.map((member) =>
-            <div key={member.name}>
-              <img className='admin' src={member.imgUrl} alt={`beautiful headshot of ${member.name}.`} />
-              <h4>{member.name}</h4>
+            <div key={member.id}>
+              <h4>{member.firstName}<br/> {member.lastName}</h4>
+              <img className='avatar admin-avatar' src={member.imgUrl} alt={`beautiful headshot of ${member.firstName} ${member.lastName}.`} />
+              <h5>{member.title}</h5>
             </div>
           )}
         </div>
       </div>
-      <div className="members">
+      <div className="members"> 
         <h3>Meet the Contributors</h3>
         <div className="row">
           {members.map((member) =>
-            <div key={member.name}>
-              <img className='member' src={member.imgUrl} alt={`beautiful headshot of ${member.name}.`} />
+            <div key={member.id}>
+              <img className='avatar member-avatar' src={member.imgUrl} alt={`beautiful headshot of ${member.name}.`} />
               <h4>{member.name}</h4>
             </div>
           )}

src/index.css

@@ -197,22 +197,34 @@ th {
   justify-content: space-evenly;
 }
 
-.admin,
-.member {
-  height: 140px;
-  width: 140px;
-  padding: .75em;
+.avatar {
   border: 1px solid #707070;
   background-color: #f5b742;
 }
 
-.member {
+.admin-avatar {
+  height: 140px;
+  width: 140px;
+}
+
+.member-avatar {
   height: 100px;
   width: 100px;
   border-radius: 50%;
 }
 
+.members h4 {
+  margin: 5px 0 5px 0;
+}
+
+.members h5 {
+  margin-top: 15px;
+}
+
 footer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
   background-color: #97dad0;
   padding: 1em 1em 2em 1em;
 }
@@ -228,4 +240,14 @@ footer p {
 
 footer p {
   margin: 0;
+}
+
+footer .image-wrapper {
+  display: inline-block;
+  width: 90px;
+  margin: 1rem auto 0;
+}
+
+footer img {
+  max-width: 100%;
 }

src/links.js

@@ -2,8 +2,8 @@ export default [
   { href: '/', text: 'Home' },
   { href: '#about', text: 'About' },
   { href: 'https://www.freecodecamp.org/', text: 'FreeCodeCamp' },
-  { href: 'https://discord.gg', text: 'Discord' },
+  { href: 'https://discord.com/invite/EXehPVnBYz', text: 'Discord' },
   { href: 'https://github.com/FCCColumbus', text: 'GitHub' },
   { href: '#events', text: 'Events' },
   { href: 'https://github.com/FCCColumbus/cbus-web/graphs/contributors', text: 'Contributors' },
-]
+];

src/test/App.test.js

@@ -12,7 +12,7 @@ describe("App", () => {
   describe("renders links to external sites", () => {
     it.each([
       ['freeCodeCamp.org homepage', 'freecodecamp.org'],
-      ['Discord homepage', 'discord.gg'],
+      ['Discord homepage', 'discord.com/invite/EXehPVnBYz'],
       ['FCCColumbus Github profile', 'github.com/FCCColumbus'],
       ['FCCColumbus Github contributors', 'github.com/FCCColumbus/cbus-web/graphs/contributors'],
     ])(`%s`, (_, expected) => {

src/test/__snapshots__/App.test.js.snap

@@ -34,7 +34,7 @@ exports[`App renders 1`] = `
         </li>
         <li>
           <a
-            href="https://discord.gg"
+            href="https://discord.com/invite/EXehPVnBYz"
           >
             Discord
           </a>
@@ -196,34 +196,116 @@ exports[`App renders 1`] = `
         className="row"
       >
         <div>
-          <img
-            alt="beautiful headshot of John."
-            className="admin"
-            src="/head.png"
-          />
           <h4>
             John
+            <br />
+             
+            Riley
           </h4>
+          <img
+            alt="beautiful headshot of John Riley."
+            className="avatar admin-avatar"
+            src="https://avatars.githubusercontent.com/u/41979303?v=4"
+          />
+          <h5>
+            Admin & Coding Mentor
+          </h5>
         </div>
         <div>
+          <h4>
+            Kent
+            <br />
+             
+            Utterback
+          </h4>
           <img
-            alt="beautiful headshot of Amy."
-            className="admin"
-            src="/head.png"
+            alt="beautiful headshot of Kent Utterback."
+            className="avatar admin-avatar"
+            src="https://avatars.githubusercontent.com/u/17324971?v=4"
           />
+          <h5>
+            Admin Emeritus & Coding Mentor
+          </h5>
+        </div>
+        <div>
           <h4>
             Amy
+            <br />
+             
+            Bedinghaus
           </h4>
+          <img
+            alt="beautiful headshot of Amy Bedinghaus."
+            className="avatar admin-avatar"
+            src="https://avatars.githubusercontent.com/u/28076677?v=4"
+          />
+          <h5>
+            Admin Emeritus
+          </h5>
         </div>
         <div>
+          <h4>
+            Austin
+            <br />
+             
+            Truss
+          </h4>
           <img
-            alt="beautiful headshot of Kevin."
-            className="admin"
-            src="/head.png"
+            alt="beautiful headshot of Austin Truss."
+            className="avatar admin-avatar"
+            src="https://media.licdn.com/dms/image/C5603AQGQpynBhWiZLA/profile-displayphoto-shrink_200_200/0/1517355585710?e=1696464000&v=beta&t=DrPEzm5U1we4G7qUPoFrAA5gw_MHSN3dU8_02iWZYRA"
           />
+          <h5>
+            Admin Emeritus
+          </h5>
+        </div>
+        <div>
           <h4>
             Kevin
+            <br />
+             
+            Bruland
           </h4>
+          <img
+            alt="beautiful headshot of Kevin Bruland."
+            className="avatar admin-avatar"
+            src="https://avatars.githubusercontent.com/u/17850505?v=4"
+          />
+          <h5>
+            Admin Emeritus
+          </h5>
+        </div>
+        <div>
+          <h4>
+            Sarah
+            <br />
+             
+            Lilly-Bruland
+          </h4>
+          <img
+            alt="beautiful headshot of Sarah Lilly-Bruland."
+            className="avatar admin-avatar"
+            src="https://avatars.githubusercontent.com/u/17872422?v=4"
+          />
+          <h5>
+            Admin Emeritus
+          </h5>
+        </div>
+        <div>
+          <h4>
+            Justin
+            <br />
+             
+            Woodward
+          </h4>
+          <img
+            alt="beautiful headshot of Justin Woodward."
+            className="avatar admin-avatar"
+            src="https://avatars.githubusercontent.com/u/17994108?v=4"
+          />
+          <h5>
+            Admin Emeritus
+          </h5>
         </div>
       </div>
     </div>
@@ -239,7 +321,7 @@ exports[`App renders 1`] = `
         <div>
           <img
             alt="beautiful headshot of John."
-            className="member"
+            className="avatar member-avatar"
             src="/head.png"
           />
           <h4>
@@ -249,7 +331,7 @@ exports[`App renders 1`] = `
         <div>
           <img
             alt="beautiful headshot of Ismael."
-            className="member"
+            className="avatar member-avatar"
             src="/head.png"
           />
           <h4>
@@ -259,7 +341,7 @@ exports[`App renders 1`] = `
         <div>
           <img
             alt="beautiful headshot of Nirvignesh."
-            className="member"
+            className="avatar member-avatar"
             src="/head.png"
           />
           <h4>
@@ -269,7 +351,7 @@ exports[`App renders 1`] = `
         <div>
           <img
             alt="beautiful headshot of Tijana."
-            className="member"
+            className="avatar member-avatar"
             src="/head.png"
           />
           <h4>
@@ -279,7 +361,7 @@ exports[`App renders 1`] = `
         <div>
           <img
             alt="beautiful headshot of Jennifer."
-            className="member"
+            className="avatar member-avatar"
             src="/head.png"
           />
           <h4>
@@ -289,7 +371,7 @@ exports[`App renders 1`] = `
         <div>
           <img
             alt="beautiful headshot of Kellan."
-            className="member"
+            className="avatar member-avatar"
             src="/head.png"
           />
           <h4>
@@ -318,7 +400,7 @@ exports[`App renders 1`] = `
         </li>
         <li>
           <a
-            href="https://discord.gg"
+            href="https://discord.com/invite/EXehPVnBYz"
           >
             Discord
           </a>
@@ -350,6 +432,19 @@ exports[`App renders 1`] = `
       Copyright Free Code Camp Columbus 2023 - 
       2023
     </p>
+    <a
+      className="image-wrapper"
+      href="https://www.netlify.com"
+      rel="noreferrer"
+      target="_blank"
+    >
+       
+      <img
+        alt="Deploys by Netlify"
+        src="https://www.netlify.com/v3/img/components/netlify-color-accent.svg"
+      />
+       
+    </a>
   </footer>
 </div>
 `;

src/test/components/Footer.test.js

@@ -7,4 +7,4 @@ describe("Footer", () => {
     const view = renderer.create(<Footer />);
     expect(view).toMatchSnapshot();
   });
-});
+});

src/test/components/Header.test.js

@@ -7,4 +7,4 @@ describe("Header", () => {
     const view = renderer.create(<Header />);
     expect(view).toMatchSnapshot();
   });
-});
+});