Merge pull request #138 from Web-Dev-Path/feature/who-we-are-about-us

Adding "who we are" section to about us page

Author: mariana-caldas

.gitignore

@@ -3,6 +3,7 @@
 node_modules
 .env
 .DS_Store
+yarn-error.log
 
 # PWA files
 **/public/sw.js

CHANGELOG.md

@@ -51,7 +51,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - .prettierignore file
 - husky, lint-staged to auto format with prettier on git commit
 - lint and format script to run prettier check and write on all files respectively
-
+- who we are components
 
 ### Fixed
 
@@ -67,6 +67,3 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - updated mobile nav to automatically close when page route change is completed
 - adjust flex-basis of a few sections in the about page to better match the design file
 - prettierrc "end of line" to auto
-
-
-

components/containers/Member.js

@@ -0,0 +1,65 @@
+import Image from 'next/image';
+import styles from '@/styles/Member.module.scss';
+
+export default function Member({
+  image,
+  name,
+  title,
+  position,
+  about,
+  linkedIn,
+  portfolio,
+  customClass,
+}) {
+  return (
+    <div className={styles.card}>
+      {image && (
+        <div className={styles.card__image}>
+          <Image src={image} alt={name} className={styles.img} layout='fill' />
+        </div>
+      )}
+
+      <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.links}`}>
+            <Image
+              src='/images/svg/LinkedIn2.svg'
+              alt='LinkedIn'
+              height='25px'
+              width='25px'
+            />
+            <a
+              href={`https://linkedin.com/in/${linkedIn}`}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {linkedIn}
+            </a>
+          </div>
+        )}
+        {portfolio && (
+          <div className={`${styles.links}`}>
+            <Image
+              src='/images/svg/globe.svg'
+              alt='Web Site'
+              height='25px'
+              width='25px'
+            />
+            <a
+              href={`https://${portfolio}`}
+              target='_blank'
+              rel='noopener noreferrer'
+            >
+              {portfolio}
+            </a>
+          </div>
+        )}
+
+        <p>{about}</p>
+      </div>
+    </div>
+  );
+}

components/containers/Row.js

@@ -0,0 +1,16 @@
+import rowStyles from '@/styles/Row.module.scss';
+
+export default function Row({ customClass, children, styles }) {
+  return (
+    <div
+      className={
+        customClass
+          ? `${rowStyles.row} ${rowStyles[customClass]}`
+          : rowStyles.row
+      }
+      style={styles}
+    >
+      {children}
+    </div>
+  );
+}

components/containers/Wrapper.js

@@ -0,0 +1,15 @@
+import wrapperStyles from '@/styles/Wrapper.module.scss';
+
+export default function Wrapper({ customClass, children }) {
+  return (
+    <div
+      className={
+        customClass
+          ? `${wrapperStyles.wrapper} ${wrapperStyles[customClass]}`
+          : wrapperStyles.wrapper
+      }
+    >
+      {children}
+    </div>
+  );
+}

pages/about.js

@@ -6,9 +6,14 @@ import {
   primaryAccent,
   lightBgColor,
 } from '@/styles/TwoColumn.module.scss';
+import rowStyles from '@/styles/Row.module.scss';
 import CardsColumns from '@/components/containers/CardsColumns';
 import Title from '@/components/snippets/Title';
+import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
+import Row from '@/components/containers/Row';
+import Member from '@/components/containers/Member';
+import { whoWeAre } from '../utils/about';
 
 export default function AboutUs() {
   return (
@@ -142,7 +147,7 @@ export default function AboutUs() {
           customInnerClass='wanna-learn-more'
         />
         <TwoColumn
-          title="Junior Developers"
+          title='Junior Developers'
           content={
             'If you are a junior web developer looking for some guidance and mentoring, ' +
             'we invite you to join us and start coding our platform. ' +
@@ -159,7 +164,7 @@ export default function AboutUs() {
           customInnerClass='two-text-columns'
           secondTextColumn={
             <TwoColumn
-              title="Experienced Developers"
+              title='Experienced Developers'
               content={
                 'If you are an experienced and patient-loving developer, ' +
                 'a true rockstar who wants to mentor juniors, ' +
@@ -182,15 +187,24 @@ export default function AboutUs() {
           content={
             <div>
               After taking a look at our project&nbsp;
-              <a  target='_blank'
-                  href='https://github.com/Web-Dev-Path/web-dev-path#readme'
-                  rel='noopener noreferrer' >README</a> and&nbsp;
-              <a  target='_blank'
-                  href='https://github.com/Web-Dev-Path/web-dev-path/wiki'
-                  rel='noopener noreferrer' >wiki</a>,
-              just send us an email sharing with us about your journey in tech and
-              why you’re interested in joining us.
-              <br/>
+              <a
+                target='_blank'
+                href='https://github.com/Web-Dev-Path/web-dev-path#readme'
+                rel='noopener noreferrer'
+              >
+                README
+              </a>{' '}
+              and&nbsp;
+              <a
+                target='_blank'
+                href='https://github.com/Web-Dev-Path/web-dev-path/wiki'
+                rel='noopener noreferrer'
+              >
+                wiki
+              </a>
+              , just send us an email sharing with us about your journey in tech
+              and why you’re interested in joining us.
+              <br />
               We've got you!
             </div>
           }
@@ -199,11 +213,34 @@ export default function AboutUs() {
           color={primary}
           bgColor={white}
           customInnerClass='get-started'
-          link="mailto:hello@webdevpath.co"
-          linkText="Ping Us"
+          link='mailto:hello@webdevpath.co'
+          linkText='Ping Us'
           customBtnClass='inverted-grey'
         />
       </RevealContentContainer>
+      <RevealContentContainer>
+        <Wrapper customClass='primary__accent'>
+          <Container>
+            <Title title='Who we are' />
+            <Row customClass='align__left'>
+              {whoWeAre.map(_ => {
+                return (
+                  <Member
+                    key={_?.name}
+                    image={_?.image}
+                    name={_?.name}
+                    title={_?.title}
+                    position={_?.position}
+                    linkedIn={_?.linkedIn}
+                    portfolio={_?.portfolio}
+                    about={_?.about}
+                  />
+                );
+              })}
+            </Row>
+          </Container>
+        </Wrapper>
+      </RevealContentContainer>
     </div>
   );
 }