From 755f6f4e19d89fe48090b2f71b0eb74aee928d4e Mon Sep 17 00:00:00 2001
From: satoshi-sh <satoss1108@gmail.com>
Date: Tue, 15 Jul 2025 19:57:13 -0500
Subject: [PATCH 1/4] Migrated Member to scss

---
 .../containers/Member/Member.module.scss      |  99 ++++++++++++++++
 components/containers/Member/index.js         |  30 ++---
 components/containers/Member/styles.js        | 107 ------------------
 styles/themes.scss                            |   1 +
 4 files changed, 115 insertions(+), 122 deletions(-)
 create mode 100644 components/containers/Member/Member.module.scss
 delete mode 100644 components/containers/Member/styles.js

diff --git a/components/containers/Member/Member.module.scss b/components/containers/Member/Member.module.scss
new file mode 100644
index 00000000..aa49c20b
--- /dev/null
+++ b/components/containers/Member/Member.module.scss
@@ -0,0 +1,99 @@
+@use '@/styles/mixins' as *;
+
+.Card {
+  margin: 1rem 1rem 0 0.5rem;
+  padding: 1rem;
+  border-radius: 1.5rem;
+  min-height: 35rem;
+  background-color: var(--color-transparent);
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  width: 100%;
+
+  @include tablet {
+    height: 30rem;
+    width: 40%;
+  }
+
+  @include medium-desktop {
+    min-width: 20%;
+    max-width: 20%;
+    margin: 1.5rem;
+  }
+}
+
+.Name {
+  font-style: italic;
+  font-family: var(--font-heading);
+  font-size: 1.5rem !important;
+  color: var(--color-primary-content);
+  margin-bottom: 0px;
+  line-height: unset;
+}
+
+%headingStyle {
+  font-family: var(--font-heading);
+  font-size: 1rem !important;
+  color: var(--color-primary-content);
+  text-align: left;
+  line-height: normal;
+  margin: 0px !important;
+
+  @include tablet {
+    font-size: 2rem;
+  }
+}
+
+.H3 {
+  @extend %headingStyle;
+}
+
+.Title {
+  @extend %headingStyle;
+}
+
+.Position {
+  @extend %headingStyle;
+}
+
+.Content {
+  align-items: center;
+  margin: auto;
+}
+
+.Paragraph {
+  font-size: 1rem !important;
+  text-align: left;
+  line-height: normal;
+}
+
+.LinkWrapper {
+  font-size: 1rem !important;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  margin-bottom: 1rem;
+
+  a {
+    padding-left: 1rem;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    &:hover {
+      opacity: 0.6;
+      text-decoration: none;
+    }
+  }
+}
+
+.ImageWrapper {
+  min-width: 10rem;
+  min-height: 10rem;
+  position: relative;
+  margin: 0.5rem auto;
+
+  img {
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
diff --git a/components/containers/Member/index.js b/components/containers/Member/index.js
index 5bc308ea..b4ae4085 100644
--- a/components/containers/Member/index.js
+++ b/components/containers/Member/index.js
@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import S from './styles';
+import styles from './Member.module.scss';
 
 export default function Member({
   image,
@@ -11,19 +11,19 @@ export default function Member({
   portfolio,
 }) {
   return (
-    <S.Card>
+    <div className={styles.Card}>
       {image && (
-        <S.ImageWrapper>
+        <div className={styles.ImageWrapper}>
           <Image src={image} alt={name} fill />
-        </S.ImageWrapper>
+        </div>
       )}
 
-      <S.Name>{name}</S.Name>
-      <S.Title>{title}</S.Title>
-      <S.Position>{position}</S.Position>
-      <S.Content>
+      <h2 className={styles.Name}>{name}</h2>
+      <h3 className={styles.Title}>{title}</h3>
+      <h3 className={styles.Position}>{position}</h3>
+      <div className={styles.Content}>
         {linkedIn && (
-          <S.LinkWrapper>
+          <div className={styles.LinkWrapper}>
             <Image
               src='/images/svg/linkedin-portfolio.svg'
               alt='LinkedIn'
@@ -37,10 +37,10 @@ export default function Member({
             >
               {linkedIn}
             </a>
-          </S.LinkWrapper>
+          </div>
         )}
         {portfolio && (
-          <S.LinkWrapper>
+          <div className={styles.LinkWrapper}>
             <Image
               src='/images/svg/globe.svg'
               alt='Web Site'
@@ -54,11 +54,11 @@ export default function Member({
             >
               {portfolio}
             </a>
-          </S.LinkWrapper>
+          </div>
         )}
 
-        <S.Paragraph>{about}</S.Paragraph>
-      </S.Content>
-    </S.Card>
+        <p className={styles.Paragraph}>{about}</p>
+      </div>
+    </div>
   );
 }
diff --git a/components/containers/Member/styles.js b/components/containers/Member/styles.js
deleted file mode 100644
index 10f5260e..00000000
--- a/components/containers/Member/styles.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import styled, { css } from 'styled-components';
-
-const Card = styled.div`
-  margin: 1rem 1rem 0 0.5rem;
-  padding: 1rem;
-  border-radius: 1.5rem;
-  min-height: 35rem;
-  background-color: ${({ theme }) => theme.colors.transparent};
-  display: flex;
-  justify-content: left;
-  flex-direction: column;
-  width: 100%;
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.tablet}) {
-      height: 30rem;
-      width: 40%;
-    }
-  `}
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.mediumDesktop}) {
-      min-width: 20%;
-      max-width: 20%;
-      margin: 1.5rem;
-    }
-  `}
-`;
-
-const Name = styled.h2`
-  font-style: italic;
-  font-family: ${({ theme }) => theme.fonts.heading};
-  font-size: 1.5rem !important;
-  color: ${({ theme }) => theme.colors.primaryContent};
-  margin-bottom: 0px;
-  line-height: unset;
-`;
-
-const H3 = styled.h3`
-  font-family: ${({ theme }) => theme.fonts.heading};
-  font-size: 1rem !important;
-  color:${({ theme }) => theme.colors.primaryContent};
-  text-align: left;
-  line-height: normal;
-  margin: 0px !important;
-
-  ${props => css`
-    @media (min-width: ${props.theme.breakpoints.tablet}) {
-      font-size: 2rem;
-    }
-  `}
-`;
-const Title = styled(H3)``;
-const Position = styled(H3)``;
-
-const Content = styled.div`
-  align-items: center;
-  margin: auto;
-`;
-
-const Paragraph = styled.p`
-  font-size: 1rem !important;
-  text-align: left;
-  line-height: normal;
-`;
-
-const LinkWrapper = styled.div`
-  font-size: 1rem !important;
-  display: flex;
-  flex-direction: row;
-  justify-content: left;
-  margin-bottom: 1rem;
-
-  a {
-    padding-left: 1rem;
-    text-decoration: underline;
-    text-underline-offset: 2px;
-
-    &:hover {
-      opacity: 0.6;
-      text-decoration: none;
-    }
-  }
-`;
-
-const ImageWrapper = styled.div`
-  min-width: 10rem;
-  min-height: 10rem;
-  position: relative;
-  margin: 0.5rem auto;
-
-  img {
-    border-radius: 50%;
-    object-fit: cover;
-  }
-`;
-
-export default {
-  Card,
-  Name,
-  Title,
-  Position,
-  Content,
-  Paragraph,
-  LinkWrapper,
-  ImageWrapper,
-};
diff --git a/styles/themes.scss b/styles/themes.scss
index ac7641b2..1ee02df5 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -11,6 +11,7 @@
   --color-box-shadow: rgba(0, 0, 0, 0.08);
   --dark-bg: #023047;
   --error: #be1313;
+  --font-heading: 'Open Sans';
 }
 
 // placeholder colors

From 35d4795be737cdd7ac8539a65d8fc77c222175d5 Mon Sep 17 00:00:00 2001
From: satoshi-sh <satoss1108@gmail.com>
Date: Tue, 15 Jul 2025 19:57:57 -0500
Subject: [PATCH 2/4] Upgraded CHANGELOG.md

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 77b466e7..e269ff64 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -167,5 +167,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - SearchBar
   - BlogPostsContainer
   - RevealContentContainer
+  - Member
+  
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling 
\ No newline at end of file

From e7be205de6b5d764d72ed63bc119dc9bcd4a0a21 Mon Sep 17 00:00:00 2001
From: satoshi-sh <satoss1108@gmail.com>
Date: Wed, 16 Jul 2025 07:03:56 -0500
Subject: [PATCH 3/4] Removed !important and H3

---
 .../containers/Member/Member.module.scss       | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/components/containers/Member/Member.module.scss b/components/containers/Member/Member.module.scss
index aa49c20b..7fa42c53 100644
--- a/components/containers/Member/Member.module.scss
+++ b/components/containers/Member/Member.module.scss
@@ -26,7 +26,7 @@
 .Name {
   font-style: italic;
   font-family: var(--font-heading);
-  font-size: 1.5rem !important;
+  font-size: 1.5rem;
   color: var(--color-primary-content);
   margin-bottom: 0px;
   line-height: unset;
@@ -34,19 +34,11 @@
 
 %headingStyle {
   font-family: var(--font-heading);
-  font-size: 1rem !important;
+  font-size: 1rem;
   color: var(--color-primary-content);
   text-align: left;
   line-height: normal;
-  margin: 0px !important;
-
-  @include tablet {
-    font-size: 2rem;
-  }
-}
-
-.H3 {
-  @extend %headingStyle;
+  margin: 0px;
 }
 
 .Title {
@@ -63,13 +55,13 @@
 }
 
 .Paragraph {
-  font-size: 1rem !important;
+  font-size: 1rem;
   text-align: left;
   line-height: normal;
 }
 
 .LinkWrapper {
-  font-size: 1rem !important;
+  font-size: 1rem;
   display: flex;
   flex-direction: row;
   justify-content: left;

From 116007fc3a3c5613143f678d9a60b67e2a9f107f Mon Sep 17 00:00:00 2001
From: satoshi-sh <satoss1108@gmail.com>
Date: Fri, 18 Jul 2025 06:29:36 -0500
Subject: [PATCH 4/4] Updated scss class names to follow camelcases

---
 .../containers/Member/Member.module.scss       | 16 ++++++++--------
 components/containers/Member/index.js          | 18 +++++++++---------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/components/containers/Member/Member.module.scss b/components/containers/Member/Member.module.scss
index 7fa42c53..7717cad0 100644
--- a/components/containers/Member/Member.module.scss
+++ b/components/containers/Member/Member.module.scss
@@ -1,6 +1,6 @@
 @use '@/styles/mixins' as *;
 
-.Card {
+.card {
   margin: 1rem 1rem 0 0.5rem;
   padding: 1rem;
   border-radius: 1.5rem;
@@ -23,7 +23,7 @@
   }
 }
 
-.Name {
+.name {
   font-style: italic;
   font-family: var(--font-heading);
   font-size: 1.5rem;
@@ -41,26 +41,26 @@
   margin: 0px;
 }
 
-.Title {
+.title {
   @extend %headingStyle;
 }
 
-.Position {
+.position {
   @extend %headingStyle;
 }
 
-.Content {
+.content {
   align-items: center;
   margin: auto;
 }
 
-.Paragraph {
+.paragraph {
   font-size: 1rem;
   text-align: left;
   line-height: normal;
 }
 
-.LinkWrapper {
+.linkWrapper {
   font-size: 1rem;
   display: flex;
   flex-direction: row;
@@ -78,7 +78,7 @@
   }
 }
 
-.ImageWrapper {
+.imageWrapper {
   min-width: 10rem;
   min-height: 10rem;
   position: relative;
diff --git a/components/containers/Member/index.js b/components/containers/Member/index.js
index b4ae4085..b14e9576 100644
--- a/components/containers/Member/index.js
+++ b/components/containers/Member/index.js
@@ -11,19 +11,19 @@ export default function Member({
   portfolio,
 }) {
   return (
-    <div className={styles.Card}>
+    <div className={styles.card}>
       {image && (
-        <div className={styles.ImageWrapper}>
+        <div className={styles.imageWrapper}>
           <Image src={image} alt={name} fill />
         </div>
       )}
 
-      <h2 className={styles.Name}>{name}</h2>
-      <h3 className={styles.Title}>{title}</h3>
-      <h3 className={styles.Position}>{position}</h3>
-      <div className={styles.Content}>
+      <h2 className={styles.name}>{name}</h2>
+      <h3 className={styles.title}>{title}</h3>
+      <h3 className={styles.position}>{position}</h3>
+      <div className={styles.content}>
         {linkedIn && (
-          <div className={styles.LinkWrapper}>
+          <div className={styles.linkWrapper}>
             <Image
               src='/images/svg/linkedin-portfolio.svg'
               alt='LinkedIn'
@@ -40,7 +40,7 @@ export default function Member({
           </div>
         )}
         {portfolio && (
-          <div className={styles.LinkWrapper}>
+          <div className={styles.linkWrapper}>
             <Image
               src='/images/svg/globe.svg'
               alt='Web Site'
@@ -57,7 +57,7 @@ export default function Member({
           </div>
         )}
 
-        <p className={styles.Paragraph}>{about}</p>
+        <p className={styles.paragraph}>{about}</p>
       </div>
     </div>
   );