Starting to add content to about page

public/language/en-AU.jsx

@@ -26,6 +26,37 @@ module.exports = {
       "video": {
         "heading": "Learn about me",
         "paragraph": "Watch this short video about me, made by.. me!"
+      },
+      "programming": {
+        "heading": "Programmer",
+        "paragraph": () => {
+          return (<Fragment>
+            <p>
+              I am a programmer, it's my job, as well as my passion. I have been
+              doing programming in some form for as long as I can remember, and
+              continue to learn and enhance my knowledge in the field.
+            </p>
+            <p>
+              With over { new Date().getFullYear() - 2004 } years of experience,
+              and countless lines of code written, there isn't much I can't
+              develop. Whether you're looking to build a web project, create a
+              game engine, convert data from one format to another, or maintain
+              an old legacy system, I can do it all.
+            </p>
+          </Fragment>);
+        }
+      },
+      "admin": {
+        "heading": "Systems Admin",
+        "paragraph": () => {
+          return (<Fragment>
+            <p>
+              Beyond programming knowledge, I also have extensive knowledge in
+              the field of systems administration, and while a little outdated,
+              I can still solve most systems issues.
+            </p>
+          </Fragment>);
+        }
       }
     },
 

public/page/about/AboutPage.jsx

@@ -51,9 +51,10 @@ const AboutPage = (props) => {
       </ImageSection>
 
       { /* Promo Video */ }
-      <Section className="p-about-page__promo-video">
+      <Section className="p-about-page__promo p-about-page__promo-video">
         <PageBoundary>
           <SplitSection align="center">
+
             <Split className="u-text-center" padded>
               <ElementScrollFader>
                 <Video
@@ -76,9 +77,56 @@ const AboutPage = (props) => {
                 </ContentBox>
               </ElementScrollFader>
             </Split>
+
           </SplitSection>
         </PageBoundary>
       </Section>
+
+      {/* Programming */}
+      <Section className="p-about-page__promo p-about-page__promo-programming">
+        <PageBoundary small>
+          <ElementScrollFader from="bottom">
+            <ContentBox box>
+              <Title className="u-text-center">
+                { Language.get("pages.about.programming.heading") }
+              </Title>
+              <Paragraph>
+                { Language.get("pages.about.programming.paragraph") }
+              </Paragraph>
+            </ContentBox>
+          </ElementScrollFader>
+        </PageBoundary>
+      </Section>
+
+      {/* Systems Admin */}
+      <Section className="p-about-page__promo p-about-page__promo-admin">
+        <PageBoundary>
+          <SplitSection align="center">
+          <Split className="u-text-center" padded>
+            <ElementScrollFader from="left">
+              <Video
+                image={ require('./../../videos/bunny/big_buck_bunny.jpg') }
+                mp4={ require('./../../videos/bunny/big_buck_bunny.mp4') }
+                controls
+              />
+            </ElementScrollFader>
+          </Split>
+
+            <Split padded>
+              <ElementScrollFader from="right">
+                <ContentBox box>
+                  <Title>
+                    { Language.get("pages.about.admin.heading") }
+                  </Title>
+                  { Language.get("pages.about.admin.paragraph") }
+                </ContentBox>
+              </ElementScrollFader>
+            </Split>
+          </SplitSection>
+        </PageBoundary>
+      </Section>
+
+      {/* Media */}
     </Page>
   );
 }

public/styles/pages/_about-page.scss

@@ -8,10 +8,26 @@
  *    1.0.0 - 2018/06/06
  */
 .p-about-page {
+  &__promo {
+    padding: 6em 0;
+    background-size: 50%;
 
-  &__promo-video {
+    &-video {
-    padding: 5em 0;
-    background-image: url('./../images/banners/homepage/palms.svg');
       background-size: cover;
+      background-image: url('./../images/banners/homepage/palms.svg');
+    }
+
+    &-programming {
+      background-image: url('./../images/patterns/third-dimension-squiggle.svg');
+    }
+
+
+    &-admin {
+      background-image: url('./../images/patterns/lemon-triangle.svg');
+    }
+
+    &-media {
+
+    }
   }
 }