Added API Skills and Other Skills Pages

public/App.jsx

@@ -20,6 +20,8 @@ import IndexPage from './components/pages/IndexPage';
 
 import AboutPage from './components/pages/AboutPage';
 import ProgrammingPage from './components/pages/about/ProgrammingPage';
+import APIPage from './components/pages/about/APIPage';
+import OtherSkillsPage from './components/pages/about/OtherSkillsPage';
 
 import PrivacyPolicyPage from './components/pages/PrivacyPolicyPage';
 
@@ -42,6 +44,8 @@ class App extends React.Component {
 
               <Route exact path="/about" component={AboutPage} />
               <Route exact path="/about/programming" component={ProgrammingPage} />
+              <Route exact path="/about/api" component={APIPage} />
+              <Route exact path="/about/other" component={OtherSkillsPage} />
 
               <Route exact path="/privacy-policy" component={PrivacyPolicyPage} />
               <Route exact path="/privacy" component={PrivacyPolicyPage} />

public/components/pages/AboutPage.jsx

@@ -69,8 +69,8 @@ class AboutPage extends React.Component {
         {/*  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} />
+          <VideoTitle title="about.titles.apis" mp4={apiMP4} to="/about/api" />,
+          <VideoTitle title="about.titles.other" mp4={otherMP4} to="/about/other" />
         ]}></BodySection>
       </Page>
     );

public/components/pages/about/APIPage.jsx

@@ -0,0 +1,64 @@
+/*
+ *  API Page
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    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 VideoTitle from './../../title/VideoTitle';
+import SkillBox from './SkillBox';
+
+import apiMP4 from './../../../videos/about/api.mp4';
+
+class APIPage extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Page className="c-page--style-api-skills">
+        <BlankPromo />
+
+        <BodySection
+          title={
+            <VideoTitle
+              title="about.titles.apis" mp4={apiMP4}
+            />
+          }
+        >
+          <p>{ Language.get("about.descriptions.apis") }</p>
+
+          <div className="o-skill-box__container">
+            <SkillBox language="gl" />
+            <SkillBox language="node" />
+            <SkillBox language="react" />
+            <SkillBox language="shopify" />
+            <SkillBox language="neto" />
+            <SkillBox language="jquery" />
+            <SkillBox language="nodecg" />
+            <SkillBox language="phonegap" />
+            <SkillBox language="other" />
+          </div>
+        </BodySection>
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+export default connect(mapStateToProps)(APIPage);

public/components/pages/about/OtherSkillsPage.jsx

@@ -0,0 +1,60 @@
+/*
+ *  Other Skills Page
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    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 VideoTitle from './../../title/VideoTitle';
+import SkillBox from './SkillBox';
+
+import otherMP4 from './../../../videos/about/other.mp4';
+
+class OtherSkillsPage extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Page className="c-page--style-other-skills">
+        <BlankPromo />
+
+        <BodySection
+          title={
+            <VideoTitle
+              title="about.titles.other" mp4={otherMP4}
+            />
+          }
+        >
+          <p>{ Language.get("about.descriptions.other") }</p>
+
+          <div className="o-skill-box__container">
+            <SkillBox language="video" />
+            <SkillBox language="animation" />
+            <SkillBox language="graphics" />
+            <SkillBox language="networking" />
+            <SkillBox language="software" />
+          </div>
+        </BodySection>
+      </Page>
+    );
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+export default connect(mapStateToProps)(OtherSkillsPage);

public/components/pages/about/ProgrammingPage.jsx

@@ -3,7 +3,6 @@
  *    About that one lad.
  *
  *  Dependencies:
- *    styles/components/_page--style-about.scss
  *
  *  Version:
  *    1.0.0 - 2018/03/18

public/language/en-AU.jsx

@@ -44,6 +44,8 @@ module.exports = {
         "skillset every day. I am fluent in many computing technologies and "+
         "languages. Below are just some of the languages I'm fluent in.",
 
+      "apis": " ",
+
       "other": "Beyond programming I have other skills in Computing Systems and " +
         "media."
     },