align about us

Author: nexusocean8

components/containers/Member.js

@@ -12,11 +12,7 @@ export default function Member({
   customClass,
 }) {
   return (
-    <div
-      className={
-        customClass ? `${styles.card} ${styles[customClass]}` : styles.card
-      }
-    >
+    <div className={styles.card}>
       {image && (
         <div className={styles.card__image}>
           <Image src={image} alt={name} className={styles.img} layout='fill' />

pages/about.js

@@ -12,7 +12,7 @@ import Title from '@/components/snippets/Title';
 import Container from '@/components/containers/Container';
 import Row from '@/components/containers/Row';
 import Member from '@/components/containers/Member';
-import { whoWeAre } from './data/about';
+import { whoWeAre } from '../utils/data/about';
 
 export default function AboutUs() {
   return (
@@ -223,20 +223,22 @@ export default function AboutUs() {
             <Title title='Who we are' />
 
             <Row>
-              {whoWeAre.map(_ => {
-                return (
-                  <Member
-                    key={_?.name}
-                    image={_?.image}
-                    name={_?.name}
-                    title={_?.title}
-                    position={_?.position}
-                    linkedIn={_?.linkedIn}
-                    portfolio={_?.portfolio}
-                    about={_?.about}
-                  />
-                );
-              })}
+              <div className={rowStyles.align__left}>
+                {whoWeAre.map(_ => {
+                  return (
+                    <Member
+                      key={_?.name}
+                      image={_?.image}
+                      name={_?.name}
+                      title={_?.title}
+                      position={_?.position}
+                      linkedIn={_?.linkedIn}
+                      portfolio={_?.portfolio}
+                      about={_?.about}
+                    />
+                  );
+                })}
+              </div>
             </Row>
           </Container>
         </section>

styles/Member.module.scss

@@ -5,9 +5,8 @@
   margin: 1rem 1rem 0 0.5rem;
   padding: 1rem;
   border-radius: 1.5rem;
-  box-shadow: $box-shadow;
   min-height: 35rem;
-  background-color: $white;
+  background-color: transparent;
   display: flex;
   justify-content: left;
   flex-direction: column;
@@ -23,9 +22,9 @@
   }
 
   @include desktop {
-    min-width: 25%;
-    max-width: 25%;
-    margin: 1.5rem 1.5rem 0 1.5rem;
+    min-width: 20%;
+    max-width: 20%;
+    margin: 1.5rem;
   }
 
   .name {
@@ -104,7 +103,7 @@
     margin: 0.5rem auto;
 
     img {
-      border-radius: 0.25rem;
+      border-radius: 50%;
     }
   }
 }

styles/Row.module.scss

@@ -11,6 +11,16 @@
   background-color: $white;
 }
 
+.align__left {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: left;
+
+  @include desktop-breakpoint-minus {
+    justify-content: space-between;
+  }
+}
+
 .wrapper {
   justify-content: center;
   flex-wrap: wrap;

pages/data/about.js renamed to utils/data/about.js

@@ -67,6 +67,6 @@ export const whoWeAre = [
     linkedIn: 'vincentm5',
     portfolio: 'vmcodes.com',
     about:
-      'Vincent is a professional in the IT industry and also a web developer that enjoys contributing to open-source projects in his spare time. Whether creating aesthetic web pages, coding server-side applications or configuring an environment to host software, he enjoys it all.',
+      'Vincent is a professional in the IT industry and also a web developer that enjoys contributing to open-source projects in his spare time.',
   },
 ];