add about section content and styling

Author: cherylli

CHANGELOG.md

@@ -39,3 +39,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - normalized buttons' and links' styling
 - updated `package.json` commands for macOs
 - swipeable CardsColumns.js on mobile
+
+## Unreleased
+
+## Added
+
+- About page content (first section)
+
+### Fixed
+
+- component file structure

components/Title.js

@@ -1,55 +1,7 @@
-import TwoColumn from './TwoColumn';
-import { white, primary } from '../styles/TwoColumn.module.scss';
 import styles from '../styles/Title.module.scss';
-import Container from './Container';
 
-const Title = () => {
-  return (
-    <Container>
-      <h2 className={styles.title}>About Web Dev Path</h2>
-      <TwoColumn
-        content={
-          <div>
-            The Web Dev Path project was idealized in 2020 in consequence of
-            many conversations with aspirant web developers as well as by
-            considering some personal experiences. When talking to other junior
-            developers, it was evident the lack of practical experience with
-            version control in a team dynamic was making their integration in a
-            professional environment harder. Most of those new graduates used a
-            version control feature, such as <u>GitHub</u> or <u>Bitbucket</u>,
-            as a repository for their personal projects where they were the only
-            participants. So, all that “branch out and PR review” enriching
-            process was completely unknown to them. That happened to be a
-            problem either for being considered for “junior” positions and after
-            being hired because, in most cases, their team lead was a very, very
-            busy senior developer…
-          </div>
-        }
-        rowOrder="row-reverse"
-        image="/images/svg/open-square-bracket.svg"
-        color={primary}
-        bgColor={white}
-        customInnerClass="about-title"
-      />
-      <TwoColumn
-        content={
-          <div>
-            Another problem found out is that collaborating with open-source
-            projects, the way it is possible to gain some version control
-            experience, can be quite intimidating since there isn’t a clear
-            mentoring aspect. It can take years for someone to develop “a logic
-            mindset” that allows solving a problem by using a programming
-            language, so just going to an open-source project with a list of
-            available tasks that don’t make any sense won’t cut it.
-          </div>
-        }
-        image="/images/svg/open-angle-bracket.svg"
-        color={primary}
-        bgColor={white}
-        customInnerClass="about-title"
-      />
-    </Container>
-  );
+const Title = ({ title }) => {
+  return <h2 className={styles.title}>{title}</h2>;
 };
 
 export default Title;

components/TwoColumn.js

@@ -51,7 +51,6 @@ export default function TwoColumn({
               alt={altTag}
               className={styles.img}
               layout="fill"
-              objectFit="cover"
               priority
             />
           </div>

pages/about.js

@@ -1,11 +1,65 @@
 import RevealContentContainer from '../components/RevealContentContainer';
 import Title from '../components/Title';
+import TwoColumn from '../components/TwoColumn';
+import { white, primary } from '../styles/TwoColumn.module.scss';
+import Container from '../components/Container';
 
 export default function AboutUs() {
   return (
     <div className="about-us">
       <RevealContentContainer>
-        <Title />
+        <Container>
+          <Title title="About Web Dev Path" />
+          <TwoColumn
+            content={
+              <div>
+                The Web Dev Path project was idealized in 2020 in consequence of
+                many conversations with aspirant web developers as well as by
+                considering some personal experiences. When talking to other
+                junior developers, it was evident the lack of practical
+                experience with version control in a team dynamic was making
+                their integration in a professional environment harder. Most of
+                those new graduates used a version control feature, such as
+                <u>GitHub</u> or <u>Bitbucket</u>, as a repository for their
+                personal projects where they were the only participants. So, all
+                that “branch out and PR review” enriching process was completely
+                unknown to them. That happened to be a problem either for being
+                considered for “junior” positions and after being hired because,
+                in most cases, their team lead was a very, very busy senior
+                developer…
+              </div>
+            }
+            rowOrder="row-reverse"
+            image="/images/svg/open-square-bracket.svg"
+            color={primary}
+            bgColor={white}
+            customInnerClass="about-content"
+          />
+          <TwoColumn
+            content={
+              <div>
+                Another problem found out is that collaborating with open-source
+                projects, the way it is possible to gain some version control
+                experience, can be quite intimidating since there isn’t a clear
+                mentoring aspect. It can take years for someone to develop “a
+                logic mindset” that allows solving a problem by using a
+                programming language, so just going to an open-source project
+                with a list of available tasks that don’t make any sense won’t
+                cut it.
+              </div>
+            }
+            image="/images/svg/open-angle-bracket.svg"
+            color={primary}
+            bgColor={white}
+            customInnerClass="about-content"
+          />
+        </Container>
+      </RevealContentContainer>
+
+      <RevealContentContainer>
+        <Container>
+          <Title title="Our goals" />
+        </Container>
       </RevealContentContainer>
     </div>
   );

public/images/svg/open-angle-bracket.svg

@@ -24,15 +24,24 @@
       }
     }
 
-    &.about-title {
+    &.about-content {
+      align-items: center;
+      padding: 0px;
+      width: 100%;
+
       .inner__content {
         .content {
           margin-top: 0;
+          max-width: fit-content;
         }
         flex-basis: 70%;
       }
       .inner__image {
         flex-basis: 30%;
+        max-height: 25rem;
+        .img {
+          object-fit: none;
+        }
       }
     }
 
@@ -68,6 +77,7 @@
 
       .img {
         border-radius: 0.25rem;
+        object-fit: cover;
       }
     }
 

public/images/svg/open-square-bracket.svg

@@ -70,7 +70,6 @@ a {
 }
 
 .not-found,
-.about-us,
 .contact-us,
 .blog,
 .post {
@@ -81,3 +80,8 @@ a {
   margin: 10% auto;
   align-items: center;
 }
+
+.about-us {
+  margin: 5% auto;
+  max-width: $large-desktop-breakpoint;
+}