From 62b761f24d112eddc171e9bdd743322d29ec9487 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Sun, 18 Mar 2018 14:15:38 +1100
Subject: [PATCH] Adjusted AboutPage

---
 public/components/pages/AboutPage.jsx         | 124 +++++-------------
 .../styles/components/_page--style-about.scss |  54 ++++----
 2 files changed, 58 insertions(+), 120 deletions(-)

diff --git a/public/components/pages/AboutPage.jsx b/public/components/pages/AboutPage.jsx
index cddd371..d76831f 100644
--- a/public/components/pages/AboutPage.jsx
+++ b/public/components/pages/AboutPage.jsx
@@ -6,34 +6,26 @@
  *    styles/components/_page--style-about.scss
  *
  *  Version:
- *    1.0.0 - 2018/03/11
+ *    1.0.0 - 2018/03/18
  */
 
 import React from 'react';
+import { connect } from 'react-redux';
+
+import Language from './../../language/Language';
 
 import Page from './../Page';
 import BlankPromo from './../sections/BlankPromo';
 import BodySection from './../sections/BodySection';
 import SplitSection from './../sections/SplitSection';
-import { connect } from 'react-redux';
-import Language from './../../language/Language';
-
+import VideoTitle from './../title/VideoTitle';
 import Window95 from './../w95/Window95';
 
 import domsHead from './../../images/profile.png';
-
-const ProgrammingBox = function(props) {
-  return (
-    <div className="c-page--style-about__language">
-      <h2 className="c-page--style-about__language-heading">
-        {Language.get("about."+props.language+".name")}
-      </h2>
-      <p className="c-page--style-about__language-description">
-        {Language.get("about."+props.language+".description")}
-      </p>
-    </div>
-  )
-}
+import aboutMP4 from './../../videos/about/about.mp4';
+import programmingMP4 from './../../videos/about/programming.mp4';
+import apiMP4 from './../../videos/about/api.mp4';
+import otherMP4 from './../../videos/about/other.mp4';
 
 class AboutPage extends React.Component {
   constructor(props) {
@@ -45,89 +37,43 @@ class AboutPage extends React.Component {
       <Page className="c-page--style-about">
         <BlankPromo />
 
+        {/* Bio */}
         <SplitSection
+          className="c-page--style-about__bio-section"
+
           leftClass="c-page--style-about__profile-container"
           left={ <img src={domsHead} className="c-page--style-about__profile" /> }
 
-          right={ <p>{Language.get("about.descriptions.welcome")}</p> }
-          rightClass="c-page--style-about__blurb"
-          full
-        />
-
-
-        <SplitSection
-          leftClass="c-page--style-about__window-container"
-          left={
-            <Window95 menu={[]} title={Language.get("about.titles.me")} className="c-page--style-about__window">
-              <div className="c-text-field c-page--style-about__window-text">
-                { Language.get("about.descriptions.me") }
+          right={
+            <Window95 title="Bio" className="c-window--style-about">
+              <div className="c-text-field">
+                <p>{ Language.get("about.descriptions.welcome") }</p>
               </div>
             </Window95>
           }
-
-          rightClass="c-page--style-about__window-container"
-          right={ <div></div> }
-          full
+          rightClass="c-page--style-about__blurb"
         />
 
-
-        <BodySection>
-          <h1>{Language.get("about.titles.me")}</h1>
-          <p>
-            { Language.get("about.descriptions.me") }
-          </p>
-
-          <h2 className="c-page--style-about__subheading">
-            { Language.get("about.titles.programming")}
-          </h2>
-          <p>{ Language.get("about.descriptions.programming")}</p>
-
-          <div className="c-page--style-about__language-container">
-            <ProgrammingBox language="C#" />
-            <ProgrammingBox language="Java" />
-            <ProgrammingBox language="Javascript" />
-            <ProgrammingBox language="HTML" />
-            <ProgrammingBox language="PHP" />
-            <ProgrammingBox language="VB" />
-            <ProgrammingBox language="SQL" />
-            <ProgrammingBox language="Lua" />
-            <ProgrammingBox language="ActionScript" />
-            <ProgrammingBox language="Ruby" />
-            <ProgrammingBox language="Python" />
-          </div>
-
-          <h2 className="c-page--style-about__subheading">
-            { Language.get("about.titles.apis")}
-          </h2>
-          <div className="c-page--style-about__language-container">
-            <ProgrammingBox language="GL" />
-            <ProgrammingBox language="Node" />
-            <ProgrammingBox language="React" />
-            <ProgrammingBox language="Shopify" />
-            <ProgrammingBox language="neto" />
-            <ProgrammingBox language="jQuery" />
-            <ProgrammingBox language="NodeCG" />
-            <ProgrammingBox language="PhoneGap" />
-            <ProgrammingBox language="Other" />
-          </div>
-
-
-          <h2 className="c-page--style-about__subheading">
-            { Language.get("about.titles.other")}
-          </h2>
-          <p>{ Language.get("about.descriptions.other")}</p>
-          <div className="c-page--style-about__language-container">
-            <ProgrammingBox language="Video" />
-            <ProgrammingBox language="Animation" />
-            <ProgrammingBox language="Graphics" />
-            <ProgrammingBox language="Networking" />
-            <ProgrammingBox language="Software" />
-          </div>
-
-
+        {/* About Me */}
+        <BodySection
+          className="c-about-page__body-section"
+          title={
+            <VideoTitle
+              title="about.titles.me" mp4={aboutMP4}
+            />
+          }
+        >
+          { Language.get("about.descriptions.me") }
         </BodySection>
+
+        {/*  Programming */}
+        <BodySection className="c-about-page__body-section" title={[
+          <VideoTitle title="about.titles.programming" mp4={programmingMP4} to="/about/programming" />,
+          <VideoTitle title="about.titles.apis" mp4={apiMP4} />,
+          <VideoTitle title="about.titles.other" mp4={otherMP4} />
+        ]}></BodySection>
       </Page>
-    )
+    );
   }
 }
 
diff --git a/public/styles/components/_page--style-about.scss b/public/styles/components/_page--style-about.scss
index 4ed624f..ec1aa3a 100644
--- a/public/styles/components/_page--style-about.scss
+++ b/public/styles/components/_page--style-about.scss
@@ -10,13 +10,28 @@
  *  Version:
  *    1.0.0 - 2018/03/11
  */
+
+//Body Section Margin
+.c-about-page__body-section {
+  margin-bottom: 3em;
+}
+
+//About Section
+.c-page--style-about__bio-section {
+  margin-bottom: 5em;
+}
+
 .c-page--style-about {
-  background: url('./../images/dotted_bg_yellow.png');
-  background-size: 16px 16px;
 }
 
 .c-page--style-about__profile-container {
-  margin-bottom: 5em;
+}
+
+.c-window--style-about {
+  max-width: 25em;
+  margin: 0 auto;
+  display: block;
+  width: 90%;
 }
 
 .c-page--style-about__profile {
@@ -27,15 +42,13 @@
 
 .c-page--style-about__blurb {
   font-size: 1.25em;
-  max-width: 25em;
 }
 
-.c-page--style-about__blurb,
 .c-page--style-about__profile-container {
   text-align: center;
 }
 
-
+//Window adjustments for about section
 .c-page--style-about__window {
   display: block;
   width: 90%;
@@ -46,36 +59,15 @@
   resize: none;
 }
 
-
-/*
-.c-page--style-about__language-container {
-  @extend %t-flexbox;
-  @include t-flex-wrap(wrap);
-}
-
-.c-page--style-about__language {
-  width: 100%;
-  padding: 1em;
-}
-
-.c-page--style-about__language-heading,
-.c-page--style-about__language-description {
-  text-align: center;
-}
-
-.c-page--style-about__subheading {
-  margin-top: 4em;
-}
-*/
+//Media queries
 @include t-media-query($s-small-up) {
+  .c-page--style-about__blurb {
+  }
+
   .c-page--style-about__window-container {
     width: 50%;
   }
   .c-page--style-about__window {
     width: 50%;
   }
-
-  /*.c-page--style-about__language {
-    width: 50%;
-  }*/
 }