kyler/siteHomeNavBar

Author: Kyler-Chiago

mlflow-site/src/app/assets/GithubLogo.png renamed to mlflow-site/public/assets/GithubLogo.png

@@ -1,7 +1,6 @@
 'use client';
 
 import Image from 'next/image';
-import githubLogo from '../assets/GithubLogo.png';
 
 const NavBar = () => {
   return (
@@ -46,7 +45,7 @@ const NavBar = () => {
           href='https://github.com/oslabs-beta/mlflow-js'
           className='navBarLinksGithub'
         >
-          <Image src={githubLogo} width={24} height={24} alt='G' />
+          <Image src={'/assets/GithubLogo.png'} width={24} height={24} alt='G' />
         </a>
       </div>
     </div>

mlflow-site/src/app/assets/LinkedInLogo.png renamed to mlflow-site/public/assets/LinkedInLogo.png

@@ -6,42 +6,55 @@ const Team = () => {
       name: 'Yiqun Zheng',
       github: 'https://github.com/yiqunzheng',
       linkedIn: 'https://www.linkedin.com/in/yiqunzheng/',
+      pfp: '',
     },
     {
       name: 'Kyler Chiago',
       github: 'https://github.com/Kyler-Chiago',
       linkedIn: 'https://www.linkedin.com/in/kyler-chiago/',
+      pfp: '/assets/kylerpfp.png',
     },
     {
       name: 'Austin Fraser',
       github: 'https://github.com/austinbfraser',
       linkedIn: 'http://www.linkedin.com/in/austin-fraser',
+      pfp: '',
     },
     {
       name: 'Stephany Ho',
       github: 'https://github.com/seneyu/',
       linkedIn: 'https://www.linkedin.com/in/stephanyho/',
+      pfp: '',
     },
-    {
-      name: 'Winston Ludlam',
-      github: 'https://github.com/winjolu/',
-      linkedIn: 'https://www.linkedin.com/in/wjludlam/',
-    },
+    // {
+    //   name: 'Winston Ludlam',
+    //   github: 'https://github.com/winjolu/',
+    //   linkedIn: 'https://www.linkedin.com/in/wjludlam/',
+    //   pfp: '',
+    // },
   ];
 
   return (
     <div className='team' id='team'>
-      <div className='centered'>Meet the team</div>
+      <div className='centered teamHead'>Meet the team</div>
       <div className='teamCards'>
         {teamArray.map((member, index) => (
           <TeamCard 
             key={index} 
             name={member.name} 
             github={member.github} 
             linkedIn={member.linkedIn} 
+            pfp={member.pfp}
           />
         ))}
       </div>
+      <TeamCard 
+      key={'soloCard'}
+      name={'Winston Ludlam'}
+      github={'https://github.com/winjolu/'}
+      linkedIn={'https://www.linkedin.com/in/wjludlam/'}
+      pfp={''}
+      />
     </div>
   );
 };

mlflow-site/src/app/assets/imageNotFound.jpg renamed to mlflow-site/public/assets/imageNotFound.jpg

@@ -1,25 +1,34 @@
-// import imageNotFound from '/../..//assets/imageNotFound.jpg'
+import Image from 'next/image';
 
 interface TeamCardProps {
   name: string;
   github: string;
   linkedIn: string;
+  pfp: string;
 }
 
-const TeamCard: React.FC<TeamCardProps> = ({
-  name,
-  github,
-  linkedIn,
-}) => {
+const TeamCard: React.FC<TeamCardProps> = ({ name, github, linkedIn, pfp }) => {
   return (
     <div className='teamcard'>
-      {/* <div style={{ backgroundImage: 'url(../../assets/imageNotFound.jpg)' }} className='teamCardImg'></div> */}
-      {/* <img src={imageNotFound} alt='Miss'></img> */}
-      {/* <img src={require('../../assets/imageNotFound.jpg')} alt="Test"></img> */}
+      <Image src={pfp} width={70} height={70} alt='No Image' />
       <div>{name}</div>
-      <div>
-        <a href={github}>G </a>
-        <a href={linkedIn}>L </a>
+      <div className='teamcardLinks'>
+        <a href={github} className='teamCardLink1'>
+          <Image
+            src={'/assets/GithubLogo.png'}
+            width={20}
+            height={20}
+            alt='G'
+          />
+        </a>
+        <a href={linkedIn} className='teamCardLink2'>
+          <Image
+            src={'/assets/LinkedInLogo.png'}
+            width={20}
+            height={20}
+            alt='L'
+          />
+        </a>
       </div>
     </div>
   );

mlflow-site/public/assets/kylerpfp.png

@@ -142,7 +142,7 @@ body {
   grid-row: 4;
   width: 100%;
   height: fit-content;
-  background-color: yellow;
+  /* background-color: yellow; */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -214,16 +214,20 @@ body {
   grid-template-rows: min-content;
 }
 
+.teamHead {
+  font-size: 1.35rem;
+}
+
 .teamCards {
   width: 100%;
   display: grid;
   grid-template-columns: 50% 50%;
   grid-template-rows: repeat(calc(100%/3), 3);
-  /* border: #0a0a0a; */
-  background-color: red;
+  /* background-color: red; */
 }
 
 .teamcard {
+  margin-top: 0.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -233,4 +237,18 @@ body {
 .teamCardImg {
   width: 50px;
   height: 50px;
+}
+
+.teamcardLinks {
+  display: grid;
+  grid-template-columns: 45% 10% 45%;
+  grid-template-rows: 100%;
+}
+
+.teamCardLink1 {
+  grid-column: 1;
+}
+
+.teamCardLink2 {
+  grid-column: 3;
 }