From b1c851b117a721b0926dec674bebba2b2905ecb6 Mon Sep 17 00:00:00 2001
From: Bryan Pan <bryanpan342@gmail.com>
Date: Mon, 12 Apr 2021 11:34:21 -0700
Subject: [PATCH 1/3] feat: team image greyscale aniamtioin

---
 components/TeamCard.tsx | 39 +++++++++++++++++++++------------------
 styles/Team.module.scss | 27 +++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/components/TeamCard.tsx b/components/TeamCard.tsx
index e8ae2ab..8f7538a 100644
--- a/components/TeamCard.tsx
+++ b/components/TeamCard.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import Image from 'next/image';
 import ReactTooltip from 'react-tooltip';
 
 import styles from '../styles/Team.module.scss';
@@ -14,24 +15,26 @@ function TeamCard(props: TeamCardProps): JSX.Element {
 
   return (
     <div className={styles['team-card']}>
-      {props.data.link ? (
-        <>
-          <a
-            data-tip
-            data-for={props.data.name}
-            target='_blank'
-            rel='noreferrer'
-            href={props.data.link}
-          >
-            {image}
-          </a>
-          <ReactTooltip id={props.data.name} className={styles['team-tooltip']} arrowColor='transparent' textColor='black' backgroundColor='#FFF740'>
-            {props.data.link.split('//').slice(-1)[0] + ' ↗'}
-          </ReactTooltip>
-        </>
-      ) : (
-        image
-      )}
+      <div className={styles['profile']}>
+        {props.data.link ? (
+          <>
+            <a
+              data-tip
+              data-for={props.data.name}
+              target='_blank'
+              rel='noreferrer'
+              href={props.data.link}
+            >
+              {image}
+            </a>
+            <ReactTooltip id={props.data.name} className={styles['team-tooltip']} arrowColor='transparent' textColor='black' backgroundColor='#FFF740'>
+              {props.data.link.split('//').slice(-1)[0] + ' ↗'}
+            </ReactTooltip>
+          </>
+        ) : (
+          image
+        )}
+      </div>
       <h4 className={styles['team-title']}>{props.data.name}</h4>
       <p>{props.alumni ? 'ALUMNI' : `CLASS OF ${props.data.class}`}</p>
       {props.data.roles.map((role) => (
diff --git a/styles/Team.module.scss b/styles/Team.module.scss
index ab938d1..bfccf9d 100644
--- a/styles/Team.module.scss
+++ b/styles/Team.module.scss
@@ -60,6 +60,33 @@
   object-fit: cover;
 }
 
+.profile {
+  height: 228px;
+  width: 228px;
+  position: relative;
+  overflow: hidden;
+
+
+  // this pseudo element allows us to animate the filter up
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    // background-color + mix-blend-mode (color) allows for a colored filter (in our case its black)
+    background-color: #000;
+    mix-blend-mode: color;
+    transition: transform .3s ease-in-out;
+  }
+
+  &:hover:after {
+    transform: translateY(-100%);
+  }
+}
+
 @media only screen and (max-width: 1300px) {
   .team-cards {
     grid-template-columns: repeat(3, 33.33%);

From e5dbba6dd432a184ca6c80e85eed07bfcb61fc43 Mon Sep 17 00:00:00 2001
From: Bryan Pan <bryanpan342@gmail.com>
Date: Mon, 12 Apr 2021 11:38:59 -0700
Subject: [PATCH 2/3] address linters

---
 components/TeamCard.tsx | 3 +--
 styles/Team.module.scss | 7 +++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/components/TeamCard.tsx b/components/TeamCard.tsx
index 8f7538a..0323693 100644
--- a/components/TeamCard.tsx
+++ b/components/TeamCard.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Image from 'next/image';
 import ReactTooltip from 'react-tooltip';
 
 import styles from '../styles/Team.module.scss';
@@ -15,7 +14,7 @@ function TeamCard(props: TeamCardProps): JSX.Element {
 
   return (
     <div className={styles['team-card']}>
-      <div className={styles['profile']}>
+      <div className={styles.profile}>
         {props.data.link ? (
           <>
             <a
diff --git a/styles/Team.module.scss b/styles/Team.module.scss
index bfccf9d..88bdd52 100644
--- a/styles/Team.module.scss
+++ b/styles/Team.module.scss
@@ -66,9 +66,8 @@
   position: relative;
   overflow: hidden;
 
-
   // this pseudo element allows us to animate the filter up
-  &:after {
+  &::after {
     content: '';
     position: absolute;
     top: 0;
@@ -79,10 +78,10 @@
     // background-color + mix-blend-mode (color) allows for a colored filter (in our case its black)
     background-color: #000;
     mix-blend-mode: color;
-    transition: transform .3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
   }
 
-  &:hover:after {
+  &:hover::after {
     transform: translateY(-100%);
   }
 }

From 3b6e5efb57cf0f83f921b44919331d998c24dbba Mon Sep 17 00:00:00 2001
From: Bryan Pan <bryanpan342@gmail.com>
Date: Wed, 14 Apr 2021 16:21:24 -0700
Subject: [PATCH 3/3] faster reveal

---
 styles/Team.module.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/Team.module.scss b/styles/Team.module.scss
index 88bdd52..2ca7715 100644
--- a/styles/Team.module.scss
+++ b/styles/Team.module.scss
@@ -78,7 +78,7 @@
     // background-color + mix-blend-mode (color) allows for a colored filter (in our case its black)
     background-color: #000;
     mix-blend-mode: color;
-    transition: transform 0.3s ease-in-out;
+    transition: transform 0.2s ease-in-out;
   }
 
   &:hover::after {