Merge pull request #38 from coderbunker/add-portfolio-link

Carms Ng · web-flow · commit 8edf031518c1 · 2021-09-16T21:17:41.000-04:00
Add the option to link one's portfolio to member card
diff --git a/src/assets/content/members/04_angdi_chu.json b/src/assets/content/members/04_angdi_chu.json
@@ -3,7 +3,7 @@
     "name": "Angdi \"Andie\" Chu",
     "title": "UI/UX Designer & Creative Developer",
     "linkedin": "https://www.linkedin.com/in/cad0420/",
-    "github": "http://andiechu.com",
+    "website": "http://andiechu.com",
     "image": "04_angdi_chu.jpg",
     "highlights": [
       "Designing & building creative experience with product thinking",
@@ -20,7 +20,7 @@
     "name": "Angdi \"Andie\" Chu",
     "title": "UI/UX Designer & Développeuse Créative",
     "linkedin": "https://www.linkedin.com/in/cad0420/",
-    "github": "http://andiechu.com",
+    "website": "http://andiechu.com",
     "image": "04_angdi_chu.jpg",
     "highlights": [
       "Design et construire l'expérience créative avec le Product Thinking",
diff --git a/src/components/carousel-card.js b/src/components/carousel-card.js
@@ -1,10 +1,11 @@
 import * as React from "react";
 import styled from 'styled-components';
 import { FiLinkedin, FiGithub, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import { MdWeb } from 'react-icons/md'
 import { GatsbyImage } from "gatsby-plugin-image";
 
 export default function CarouselCard({ member, index, count, teamIndex, setTeamIndex }) {
-  const { name, title, image, linkedin, github, highlights } = member
+  const { name, title, image, linkedin, github, website, highlights } = member
 
   // handle carousel navigation
   const handlePrev = () => {
@@ -30,8 +31,18 @@ export default function CarouselCard({ member, index, count, teamIndex, setTeamI
               <p className="text-sm sm:text-xl">{title}</p>
             </div>
             <div className="text-sm sm:text-2xl md:text-3xl flex">
-              <a href={linkedin} aria-label="social media icon Linkedin" target="_blank" rel="noreferrer"><FiLinkedin className="mr-3"/></a>
-              <a href={github} aria-label="social media icon Github" target="_blank" rel="noreferrer"><FiGithub className="md:ml-3"/></a>
+              {
+                linkedin &&
+                <a href={linkedin} aria-label="social media icon Linkedin" target="_blank" rel="noreferrer"><FiLinkedin className="mr-3"/></a>
+              }
+              {
+                github &&
+                <a href={github} aria-label="social media icon Github" target="_blank" rel="noreferrer"><FiGithub className="md:ml-3"/></a>
+              }
+              {
+                website &&
+                <a href={website} aria-label="social media icon Website" target="_blank" rel="noreferrer"><MdWeb className="md:ml-3"/></a>
+              }
             </div>
           </div>
           {/* Highlights for large screens, show all */}
diff --git a/src/components/carousel.js b/src/components/carousel.js
@@ -11,6 +11,8 @@ export default function Carousel({ teamIndex, setTeamIndex, locale }) {
           name
           title
           linkedin
+          website
+          github
           image {
             childImageSharp {
               gatsbyImageData(
@@ -22,12 +24,13 @@ export default function Carousel({ teamIndex, setTeamIndex, locale }) {
             }
           }
           highlights
-          github
         }
         fr {
           name
           title
           linkedin
+          website
+          github
           image {
             childImageSharp {
               gatsbyImageData(
@@ -38,7 +41,6 @@ export default function Carousel({ teamIndex, setTeamIndex, locale }) {
             }
           }
           highlights
-          github
         }
       }
     }

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,8 @@ export default function Carousel({ teamIndex, setTeamIndex, locale }) {`
`11`	`11`	`name`
`12`	`12`	`title`
`13`	`13`	`linkedin`
	`14`	`+ website`
	`15`	`+ github`
`14`	`16`	`image {`
`15`	`17`	`childImageSharp {`
`16`	`18`	`gatsbyImageData(`
`@@ -22,12 +24,13 @@ export default function Carousel({ teamIndex, setTeamIndex, locale }) {`
`22`	`24`	`}`
`23`	`25`	`}`
`24`	`26`	`highlights`
`25`		`- github`
`26`	`27`	`}`
`27`	`28`	`fr {`
`28`	`29`	`name`
`29`	`30`	`title`
`30`	`31`	`linkedin`
	`32`	`+ website`
	`33`	`+ github`
`31`	`34`	`image {`
`32`	`35`	`childImageSharp {`
`33`	`36`	`gatsbyImageData(`
`@@ -38,7 +41,6 @@ export default function Carousel({ teamIndex, setTeamIndex, locale }) {`
`38`	`41`	`}`
`39`	`42`	`}`
`40`	`43`	`highlights`
`41`		`- github`
`42`	`44`	`}`
`43`	`45`	`}`
`44`	`46`	`}`