From 5bd2ee97eb8fb78723f9d1a9b814299e79c9d791 Mon Sep 17 00:00:00 2001
From: Nazareno Oviedo <nazareno@basement.studio>
Date: Wed, 6 Apr 2022 10:51:41 -0300
Subject: [PATCH] feat: improve data, ui

---
 src/components/icons/socials.tsx              |  29 +++-
 .../sections/about/team/team.module.scss      | 149 +++++++++---------
 src/components/sections/about/team/team.tsx   |  52 +++---
 src/components/sections/about/team/teams.ts   |  63 ++++----
 4 files changed, 164 insertions(+), 129 deletions(-)

diff --git a/src/components/icons/socials.tsx b/src/components/icons/socials.tsx
index f193386..3131eec 100644
--- a/src/components/icons/socials.tsx
+++ b/src/components/icons/socials.tsx
@@ -130,6 +130,24 @@ const Linkedin = ({
   )
 }
 
+const Github = ({ className, fill }: { className?: string; fill?: string }) => {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 1C5.923 1 1 5.923 1 12c0 4.867 3.149 8.979 7.521 10.436.55.096.756-.233.756-.522 0-.262-.013-1.128-.013-2.049-2.764.509-3.479-.674-3.699-1.292-.124-.317-.66-1.293-1.128-1.554-.385-.206-.935-.715-.013-.729.866-.014 1.485.797 1.691 1.128.99 1.663 2.571 1.196 3.204.907.096-.715.385-1.196.701-1.471-2.447-.275-5.005-1.224-5.005-5.431 0-1.197.426-2.187 1.128-2.957-.11-.275-.495-1.402.11-2.915 0 0 .92-.288 3.024 1.128.88-.248 1.816-.372 2.75-.372.936 0 1.87.124 2.75.372 2.104-1.43 3.025-1.128 3.025-1.128.605 1.513.22 2.64.11 2.915.702.77 1.128 1.747 1.128 2.957 0 4.22-2.571 5.156-5.019 5.43.399.345.743 1.005.743 2.036 0 1.471-.014 2.654-.014 3.025 0 .288.206.632.756.522A11.02 11.02 0 0 0 23 12c0-6.077-4.922-11-11-11Z"
+        fill={fill || 'var(--color-white)'}
+      />
+    </svg>
+  )
+}
+
 const Facebook = ({
   className,
   fill
@@ -257,4 +275,13 @@ const Discourse = ({
   )
 }
 
-export { Discourse, Facebook, Instagram, Linkedin, Reddit, Telegram, Twitter }
+export {
+  Discourse,
+  Facebook,
+  Github,
+  Instagram,
+  Linkedin,
+  Reddit,
+  Telegram,
+  Twitter
+}
diff --git a/src/components/sections/about/team/team.module.scss b/src/components/sections/about/team/team.module.scss
index a999848..3aca871 100644
--- a/src/components/sections/about/team/team.module.scss
+++ b/src/components/sections/about/team/team.module.scss
@@ -16,22 +16,22 @@
 
     > div:nth-child(2) {
       display: flex;
-      margin: auto;
-      width: tovw(1076px, 'default', 400px);
-      gap: tovw(24px, 'default', 24px);
       justify-content: space-between;
+      width: tovw(1076px, 'default', 400px);
+      margin: auto;
       padding-top: tovw(68px, 'default', 40px);
+      gap: tovw(24px, 'default', 24px);
 
       @media screen and (max-width: 800px) {
-        width: 100%;
         flex-direction: column;
+        width: 100%;
       }
 
       p {
-        margin: 0;
-        width: tovw(524px, 'default', 300px);
         font-size: tovw(24px, 'default', 18px);
         line-height: 1.32;
+        width: tovw(524px, 'default', 300px);
+        margin: 0;
         letter-spacing: -0.01em;
 
         @media screen and (max-width: 800px) {
@@ -45,10 +45,10 @@
 .team {
   display: flex;
   flex-direction: column;
-  margin: auto;
-  gap: tovw(64px, 'default', 26px);
-  padding-top: tovw(120px, 'default', 60px);
   width: tovw(1076px, 'default', 400px);
+  margin: auto;
+  padding-top: tovw(120px, 'default', 60px);
+  gap: tovw(64px, 'default', 26px);
 
   @media screen and (max-width: 800px) {
     width: 100%;
@@ -71,9 +71,9 @@
     }
 
     span:last-child {
-      padding-top: tovw(18px, 'default', 8px);
-      font-size: tovw(16px, 'default', 12px);
       font-family: var(--font-dm-mono), sans-serif;
+      font-size: tovw(16px, 'default', 12px);
+      padding-top: tovw(18px, 'default', 8px);
       color: var(--color-grey-light);
 
       @media screen and (max-width: 800px) {
@@ -88,85 +88,86 @@
         scaleX(2.2) scaleY(1.6);
 
       @media screen and (max-width: 800px) {
+        height: tovw(32px, 'default', 32px);
         transform: rotate(-90deg) scaleX(2.2) scaleY(1.4)
           translateY(tovw(-2px, 'mobile', -3px));
-        height: tovw(32px, 'default', 32px);
       }
     }
   }
+}
 
-  .profilesContainer {
-    @media screen and (min-width: 1400px) {
-      display: flex;
-      justify-content: flex-start;
-      gap: tovw(100px, 'default', 40px);
+.profiles__container {
+  @media screen and (min-width: 1400px) {
+    display: flex;
+    justify-content: flex-start;
+    gap: tovw(100px, 'default', 40px);
+  }
+
+  @media screen and (max-width: 800px) {
+    width: 100vw;
+    margin: 0 tovw(-70px, 'tablet', -35px);
+    scroll-behavior: smooth;
+  }
+}
+
+.member {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: tovw(194px, 'default', 80px);
+  transition: filter var(--normal-transition);
+  gap: tovw(24px, 'default', 18px);
+
+  img {
+    overflow: hidden;
+    border-radius: tovw(5px, 'default', 5px);
+  }
+
+  .description {
+    font-family: var(--font-tt-hoves);
+    font-size: tovw(18px, 'default', 16px);
+    line-height: 1.3;
+    display: flex;
+    flex-direction: column;
+    letter-spacing: -0.02em;
+    gap: tovw(5px, 'default', 5px);
+
+    span:last-child {
+      color: var(--color-grey-light);
+    }
+  }
+
+  .socials {
+    display: flex;
+    gap: tovw(14px, 'default', 14px);
+
+    button {
+      cursor: pointer;
+      border: none;
+      background-color: unset;
     }
 
-    @media screen and (max-width: 800px) {
-      width: 100vw;
-      margin: 0 tovw(-70px, 'tablet', -35px);
-      scroll-behavior: smooth;
-    }
+    svg {
+      width: tovw(23px, 'default', 18px);
 
-    .member {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      gap: tovw(24px, 'default', 18px);
-      width: tovw(194px, 'default', 80px);
-      transition: filter 350ms;
-
-      img {
-        border-radius: tovw(5px, 'default', 5px);
-      }
-    }
-
-    .darker {
-      @media screen and (max-width: 1400px) {
-        filter: opacity(40%);
-        transition: filter 200ms;
-      }
-    }
-
-    .description {
-      display: flex;
-      flex-direction: column;
-      gap: tovw(5px, 'default', 5px);
-      letter-spacing: -0.02em;
-      line-height: 1.3;
-      font-family: var(--font-tt-hoves), sans-serif;
-      font-size: tovw(18px, 'default', 16px);
-
-      span:last-child {
-        color: var(--color-grey-light);
-      }
-    }
-
-    .socials {
-      display: flex;
-      gap: tovw(14px, 'default', 14px);
-
-      button {
-        cursor: pointer;
-        border: none;
-        background-color: unset;
+      @media screen and (max-width: 800px) {
+        width: tovw(12px, 'mobile', 19px);
       }
 
-      svg {
-        width: tovw(23px, 'default', 18px);
-
-        @media screen and (max-width: 800px) {
-          width: tovw(12px, 'mobile', 19px);
-        }
-
-        &:hover {
-          filter: opacity(80%);
-        }
+      &:hover {
+        filter: opacity(80%);
       }
     }
   }
 }
 
+.darker {
+  @media screen and (max-width: 1400px) {
+    transition: filter var(--normal-transition);
+    filter: opacity(40%);
+  }
+}
+
 .arrow {
   position: absolute;
   left: tovw(312px, 'default');
diff --git a/src/components/sections/about/team/team.tsx b/src/components/sections/about/team/team.tsx
index 28208ba..752f0ad 100644
--- a/src/components/sections/about/team/team.tsx
+++ b/src/components/sections/about/team/team.tsx
@@ -1,10 +1,11 @@
 import 'keen-slider/keen-slider.min.css'
 
+import clsx from 'clsx'
 import { useKeenSlider } from 'keen-slider/react'
 import { useState } from 'react'
 
 import Line from '~/components/icons/line'
-import { Facebook, Linkedin, Twitter } from '~/components/icons/socials'
+import { Github, Linkedin, Twitter } from '~/components/icons/socials'
 import Heading from '~/components/primitives/heading'
 
 import s from './team.module.scss'
@@ -12,33 +13,39 @@ import s from './team.module.scss'
 type Team = {
   member: {
     fullName: string
-    position: string
+    github: string
     image: string
-    twitter: string
-    facebook: string
     linkedin: string
+    position: string
+    twitter: string
   }
   className?: string
 }
 
 function MemberProfile({ member, className }: Team) {
   return (
-    <div className={`${s.member} ${className}`}>
-      <img src={member.image} alt="team member" />
-      <div className={s.description}>
+    <div className={clsx(s['member'], className)}>
+      <img alt={member.fullName} loading="lazy" src={member.image} />
+      <div className={s['description']}>
         <span>{member.fullName}</span>
         <span>{member.position}</span>
       </div>
-      <div className={s.socials}>
-        <a href={member.twitter} target={'_blank'} rel="noopener">
-          <Twitter />
-        </a>
-        <a href={member.facebook} target={'_blank'} rel="noopener">
-          <Facebook />
-        </a>
-        <a href={member.linkedin} target={'_blank'} rel="noopener">
-          <Linkedin />
-        </a>
+      <div className={s['socials']}>
+        {member.twitter && (
+          <a href={member.twitter} target="_blank" rel="noopener">
+            <Twitter />
+          </a>
+        )}
+        {member.github && (
+          <a href={member.github} target="_blank" rel="noopener">
+            <Github />
+          </a>
+        )}
+        {member.linkedin && (
+          <a href={member.linkedin} target="_blank" rel="noopener">
+            <Linkedin />
+          </a>
+        )}
       </div>
     </div>
   )
@@ -47,11 +54,11 @@ function MemberProfile({ member, className }: Team) {
 type Teams = {
   members: {
     fullName: string
-    position: string
+    github: string
     image: string
-    twitter: string
-    facebook: string
     linkedin: string
+    position: string
+    twitter: string
   }[]
   teamName: string
   teamNumber: string
@@ -95,7 +102,10 @@ function Team({ members, teamName, teamNumber, teamDept }: Teams) {
         </div>
         <span>{teamNumber}</span>
       </div>
-      <div ref={sliderRef} className={`${s.profilesContainer} keen-slider`}>
+      <div
+        ref={sliderRef}
+        className={clsx(s['profiles__container'], 'keen-slider')}
+      >
         {members.map((member: any, i) => (
           <MemberProfile
             className={`keen-slider__slide ${
diff --git a/src/components/sections/about/team/teams.ts b/src/components/sections/about/team/teams.ts
index 14a26c2..7732ce3 100644
--- a/src/components/sections/about/team/teams.ts
+++ b/src/components/sections/about/team/teams.ts
@@ -3,33 +3,33 @@ export const laconicTeam = [
     fullName: 'Rick Dudley',
     position: 'Chief Architect, Cerc',
     image: '/images/about/team/rick-dudley.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    github: 'https://github.com/AFDudley',
+    linkedin: 'https://www.linkedin.com/in/afdudley/',
+    twitter: 'https://twitter.com/AFDudley0'
   },
   {
     fullName: 'Maly Ly',
     position: 'Chief Architect, Cerc',
     image: '/images/about/team/maly-ly.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    github: '',
+    linkedin: 'https://www.linkedin.com/in/malytly/',
+    twitter: 'https://twitter.com/malytly'
   },
   {
     fullName: 'Boris Mann',
     position: 'CEO, Fission',
     image: '/images/about/team/boris-mann.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    github: 'https://github.com/bmann',
+    linkedin: 'https://www.linkedin.com/in/boris/',
+    twitter: 'https://twitter.com/bmann'
   },
   {
     fullName: 'Brooklyn Zelenka',
     position: 'CTO, Fission',
     image: '/images/about/team/brooklyn-zelenka.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    github: 'https://github.com/expede',
+    linkedin: 'https://www.linkedin.com/in/brooklynzelenka/',
+    twitter: 'https://twitter.com/expede'
   }
 ]
 
@@ -38,33 +38,33 @@ export const cercTeam = [
     fullName: 'Ashwin Phatak',
     position: 'VP of Engineering',
     image: '/images/about/team/ashwin-phatak.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    twitter: 'https://twitter.com/ashwinphatak',
+    linkedin: 'https://www.linkedin.com/in/ashwinphatak/',
+    github: 'https://github.com/ashwinphatak'
   },
   {
     fullName: 'Ian Norden',
     position: 'Engineering Lead',
     image: '/images/about/team/ian-norden.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    twitter: '',
+    linkedin: 'https://www.linkedin.com/in/ian-s-norden/',
+    github: 'https://github.com/i-norden'
   },
   {
     fullName: 'Leah Light',
     position: 'Operations Manager',
     image: '/images/about/team/leah-light.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    twitter: '',
+    linkedin: 'https://www.linkedin.com/in/leah-light-a308535/',
+    github: ''
   },
   {
     fullName: 'Erik Dies',
     position: 'Product Lead',
     image: '/images/about/team/erik-dies.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    twitter: 'https://twitter.com/thelesserdies',
+    linkedin: '',
+    github: 'https://github.com/erikdies'
   }
 ]
 
@@ -73,24 +73,21 @@ export const xylmTeam = [
     fullName: 'Robert Douglass',
     position: 'VP of Ecosystem',
     image: '/images/about/team/robert-douglass.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    twitter: 'https://twitter.com/robertDouglass',
+    linkedin: 'https://www.linkedin.com/in/roberttdouglass/'
   },
   {
     fullName: 'Michael Gushansky',
     position: 'Engineering Lead',
     image: '/images/about/team/michael-gushansky.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    twitter: 'https://twitter.com/mikegushansky',
+    linkedin: 'https://www.linkedin.com/in/michael-gushansky-08698384/'
   },
   {
     fullName: 'Olive Kimoto',
     position: 'Creative & Program Lead',
     image: '/images/about/team/olive-kimoto.jpg',
-    twitter: 'https://twitter.com',
-    facebook: 'https://facebook.com',
-    linkedin: 'https://linkedin.com'
+    twitter: 'https://twitter.com/olivekimoto',
+    linkedin: 'https://www.linkedin.com/in/olive-kimoto-71433b138/'
   }
 ]