Merge pull request #59 from oslabs-beta/kyler/siteTeam

feat: setup of Team section of the website done

Author: austinbfraser

mlflow-site/src/app/assets/GithubLogo.png 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 mlflow-site/public/assets/LinkedInLogo.png

@@ -6,42 +6,49 @@ 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/',
-    },
-    {
-      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 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

@@ -2,18 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-} */
-
 body {
   color: var(--foreground);
   background: var(--background);
@@ -83,7 +71,6 @@ body {
   grid-row: 2;
   width: 100%;
   height: 100%;
-  /* background-color: #7e7e7e; */
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: 100%;
@@ -134,15 +121,13 @@ body {
   grid-row: 3;
   width: 100%;
   height: 100%;
-  /* background-color: aqua; */
 }
 
 .team {
   grid-column: 2/5;
   grid-row: 4;
   width: 100%;
   height: fit-content;
-  background-color: yellow;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -154,7 +139,6 @@ body {
   grid-column: 2/5;
   grid-row: 3;
   width: 100%;
-  /* background-color: rgb(102, 102, 54); */
 }
 
 .homeButton {
@@ -176,7 +160,6 @@ body {
 
 .button {
   width: 100%;
-  /* background-color: rgb(14, 69, 129); */
 }
 
 .features {
@@ -214,16 +197,19 @@ 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;
 }
 
 .teamcard {
+  margin-top: 0.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -233,4 +219,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;
 }