removed hardcode html to component and added favicon

src/pages/Team/BoardMembers.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import TeamCard from './TeamCard'
+import jaskirat from './Jaskirat.jpeg';
+import devesh from './Devesh.jpeg';
+import shivam from './Shivam.jpeg';
+import vaibhav from './Vaibhav.jpeg';
+import './TeamCardWrapper.css'
+var BoardMembers = [
+    {
+        name:"Jaskirat Singh",
+        post:"Founder",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:jaskirat,
+        github:'',
+        linkedin:''
+    },
+    {
+        name:"Devesh",
+        post:"Donut Maintainer",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:devesh,
+        github:'',
+        linkedin:''
+    },
+    {
+        name:"Vaibhav D. Aren",
+        post:"Co-Founder",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:vaibhav,
+        github:'',
+        linkedin:''
+
+    },
+    {
+        name:"Shivam Luthra",
+        post:"CodeBadge Maintainer",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:shivam,
+        github:'',
+        linkedin:''
+
+    },
+    {
+        name:"Ayush Nagar",
+        post:"CodeBadge Maintainer",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:'https://avatars1.githubusercontent.com/u/32647423?s=460&v=4',
+        github:'',
+        linkedin:''
+
+    },
+    {
+        name:"Siddharth",
+        post:"Designer",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:'https://avatars1.githubusercontent.com/u/33068322?s=460&v=4',
+        github:'',
+        linkedin:''
+
+    },
+]
+const InjectedJSX = BoardMembers.map((member,index) => {
+    return <TeamCard member={member}/>
+})
+const BoardMembersWrapper = () => {
+    return (
+        <div className="grid">
+            {InjectedJSX}
+        </div>
+    )
+}
+export default BoardMembersWrapper

src/pages/Team/CoreContributors.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import TeamCard from './TeamCard'
+import './TeamCardWrapper.css'
+
+var CoreContributors = [
+    {
+        name:"Rupeshiya",
+        post:"Core Colaborator",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:'https://avatars0.githubusercontent.com/u/31209617?s=460&v=4',
+        github:'',
+        linkedin:''
+    },
+    {
+        name:"Tushar",
+        post:"Core Colaborator",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:'https://avatars2.githubusercontent.com/u/34160672?s=460&v=4',
+        github:'',
+        linkedin:''
+    },
+    {
+        name:"Shivansh",
+        post:"Core Colaborator",
+        headline:'Matthew is a musician living in Nashville.',
+        profile:'https://avatars3.githubusercontent.com/u/43990819?s=460&v=4',
+        github:'',
+        linkedin:''
+    },
+]
+const InjectedJSX = CoreContributors.map((member,index) => {
+    return <TeamCard member={member}/>
+})
+const CoreContributorsWrapper = () => {
+    return (
+        <div className="grid">
+            {InjectedJSX}
+        </div>
+    )
+}
+export default CoreContributorsWrapper

src/pages/Team/Team.js

@@ -1,19 +1,19 @@
 import React, { Component } from 'react';
+
 import PropTypes from 'prop-types';
 // import {Card,Button} from 'react-bootstrap'
-import jaskirat from './Jaskirat.jpeg';
-import devesh from './Devesh.jpeg';
-import shivam from './Shivam.jpeg';
-import vaibhav from './Vaibhav.jpeg';
+
 import './Team.css';
+import BoardMembersWrapper from './BoardMembers'
+import CoreContributorsWrapper from './CoreContributors'
 import axios from 'axios';
 import $ from 'jquery';
-import { Card, Icon, Image } from 'semantic-ui-react'
 class Team extends Component {
 
     constructor(props){
         super(props);
         this.state={
+            boardMembers:[],
             contributors:[]
         }
     }
@@ -47,198 +47,12 @@ class Team extends Component {
 			<div class="mt-12"></div>
             <h2>Board</h2>
         <div class="container pt-8 pb-6">
-
-      <div class="row"style={{display:"flex",justifyContent:"space-between"}}>
-
-			<div class="col-md-4">
-
-			<Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src={jaskirat} wrapped ui={false}/>
-    <Card.Content>
-      <Card.Header>Jaskirat Singh</Card.Header>
-      <Card.Meta>
-        <span className='date'>Founder</span>
-      </Card.Meta>
-      <Card.Description>
-        Open Source Enthusiast.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-      <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-    <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-		<a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  <div class="col-md-4">
-  <Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src={devesh} wrapped ui={false}/>
-    <Card.Content>
-      <Card.Header>Devesh</Card.Header>
-      <Card.Meta>
-        <span className='date'>Donut Maintainer</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-      <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-        <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-        <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  <div class="col-md-4">
-  <Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src={vaibhav} wrapped ui={false} />
-    <Card.Content>
-      <Card.Header>Vaibhav D. Aren</Card.Header>
-      <Card.Meta>
-        <span className='date'>Co-Founder</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-      <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-        <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-        <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  <div class="col-md-4">
-  <Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src={shivam} wrapped ui={false} />
-    <Card.Content>
-      <Card.Header>Shivam Luthra</Card.Header>
-      <Card.Meta>
-        <span className='date'>CodeBadge Maintainer</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-      <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-        <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-        <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  <div class="col-md-4">
-  <Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src="https://avatars1.githubusercontent.com/u/32647423?s=460&v=4" wrapped ui={false} width={{maxWidth:"350px"}}/>
-    <Card.Content>
-      <Card.Header>Ayush Nagar</Card.Header>
-      <Card.Meta>
-        <span className='date'>CodeBadge Maintainer</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-    <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-    <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-		<a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  <div class="col-md-4">
-  <Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src="https://avatars1.githubusercontent.com/u/33068322?s=460&v=4" wrapped ui={false} />
-    <Card.Content>
-      <Card.Header>Siddharth</Card.Header>
-      <Card.Meta>
-        <span className='date'>Designer</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-    <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-    <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-		<a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  </div>
-</div>
-<h2>Our Backbone</h2>
-        <div class="container pt-8 pb-6" style={{display:"flex",justifyContent:"space-evenly"}}>
-			<div class="row">
-			<div class="col-md-4">
-
-			<Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src="https://avatars0.githubusercontent.com/u/31209617?s=460&v=4" wrapped ui={false}/>
-    <Card.Content>
-      <Card.Header>Rupeshiya</Card.Header>
-      <Card.Meta>
-        <span className='date'>Core Colaborator</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-    <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-    <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-		<a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  <div class="col-md-4">
-  <Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src="https://avatars2.githubusercontent.com/u/34160672?s=460&v=4" wrapped ui={false} width={{maxWidth:"350px"}}/>
-    <Card.Content>
-      <Card.Header>Tushar</Card.Header>
-      <Card.Meta>
-        <span className='date'>Core Colaborator</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-    <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-    <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-		<a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
-      </div>
-    </Card.Content>
-  </Card>
-  </div>
-  <div class="col-md-4">
-  <Card style={{marginBottom:"2vh",border:"0px"}}>
-    <Image src="https://avatars3.githubusercontent.com/u/43990819?s=460&v=4" wrapped ui={false} />
-    <Card.Content>
-      <Card.Header>Shivansh</Card.Header>
-      <Card.Meta>
-        <span className='date'>Core Colaborator</span>
-      </Card.Meta>
-      <Card.Description>
-        Matthew is a musician living in Nashville.
-      </Card.Description>
-    </Card.Content>
-    <Card.Content extra>
-    <div class="container" style={{display:"flex",justifyContent:"space-evenly"}}>
-    <a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
-		<a class="btn btn-primary mr-1" href="https://github.com/codeuino/codebadge" role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-facebook" aria-hidden="true"></i></a>
+          <BoardMembersWrapper/>
+        </div>
+    <h2>Our Backbone</h2>
+      <div class="container pt-8 pb-6" style={{display:"flex",justifyContent:"space-evenly"}}>
+          <CoreContributorsWrapper/>
       </div>
-    </Card.Content>
-  </Card>
-  </div>
-  </div>
-  </div>
             <h2>Our Awesome Contributors</h2>
             <div id="cotributors" className="container d-flex">
                 <div class="row" style={{display:"flex",justifyContent:"center"}}>

src/pages/Team/TeamCard.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Card, Image } from 'semantic-ui-react'
+
+
+const TeamCard = (props) => {
+    console.log(props)
+    return (
+        <Card style={{marginBottom:"2vh",border:"0px"}}>
+        <Image src={props.member.profile} wrapped ui={false}/>
+        <Card.Content>
+    <Card.Header>{props.member.name}</Card.Header>
+          <Card.Meta>
+            <span className='date'>{props.member.post}</span>
+          </Card.Meta>
+          <Card.Description>
+            {props.member.headline}
+          </Card.Description>
+        </Card.Content>
+        <Card.Content extra>
+            <div class="container" style={{display:"flex",justifyContent:"space-evenly",marginTop:20}}>
+             <a class="btn btn-primary mr-1" href={props.member.github} role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-github" aria-hidden="true"></i></a>
+            <a class="btn btn-primary mr-1" href={props.member.linkedin} role="button" style={{borderRadius:"50%",backgroundColor:" #22247A"}}><i class="fa fa-linkedin" aria-hidden="true"></i></a>
+          </div>
+        </Card.Content>
+      </Card>
+    )
+}
+export default TeamCard

src/pages/Team/TeamCardWrapper.css

@@ -0,0 +1,11 @@
+.grid {
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-gap: 30px;
+    grid-row-gap: 50px;
+}
+@media screen and (max-width:767px) {
+    .grid {
+        grid-template-columns: auto;
+    }
+}