From d83894e28323658699b51d070f1394ab0ca1afb8 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Mon, 12 Mar 2018 12:27:00 +1100
Subject: [PATCH] Made about page

---
 public/App.jsx                                |   4 +-
 public/components/navigation/Navbar.jsx       |   1 +
 public/components/pages/AboutPage.jsx         | 106 ++++++++++++
 public/components/pages/IndexPage.jsx         |  31 ++--
 public/components/sections/BodySection.jsx    |   4 +-
 public/components/sections/SplitSection.jsx   |  46 ++++++
 public/images/profile.png                     | Bin 0 -> 38353 bytes
 public/language/Language.jsx                  |   5 +-
 public/language/en-AU.jsx                     | 152 ++++++++++++++++++
 .../styles/components/_page--style-about.scss |  47 ++++++
 .../components/_page--style-contact.scss      |   2 +-
 .../styles/components/_page--style-index.scss |  12 ++
 .../components/_section--style-body.scss      |   8 +-
 .../components/_section--style-split.scss     |  34 ++++
 public/styles/elements/_dt.scss               |  25 +++
 public/styles/elements/_p.scss                |  11 ++
 public/styles/index.scss                      |   5 +
 17 files changed, 470 insertions(+), 23 deletions(-)
 create mode 100644 public/components/pages/AboutPage.jsx
 create mode 100644 public/components/sections/SplitSection.jsx
 create mode 100644 public/images/profile.png
 create mode 100644 public/styles/components/_page--style-about.scss
 create mode 100644 public/styles/components/_page--style-index.scss
 create mode 100644 public/styles/components/_section--style-split.scss
 create mode 100644 public/styles/elements/_dt.scss
 create mode 100644 public/styles/elements/_p.scss

diff --git a/public/App.jsx b/public/App.jsx
index 43e9750..8d36d69 100644
--- a/public/App.jsx
+++ b/public/App.jsx
@@ -16,6 +16,7 @@ import Header from './components/Header';
 import Footer from './components/Footer';
 
 import IndexPage from './components/pages/IndexPage';
+import AboutPage from './components/pages/AboutPage';
 import ContactPage from './components/pages/ContactPage';
 
 class App extends React.Component {
@@ -31,7 +32,8 @@ class App extends React.Component {
 
             <Switch>
               <Route exact path="/" component={IndexPage} />
-              <Route path="/contact" component={ContactPage} />
+              <Route exact path="/about" component={AboutPage} />
+              <Route exact path="/contact" component={ContactPage} />
             </Switch>
 
             <Footer />
diff --git a/public/components/navigation/Navbar.jsx b/public/components/navigation/Navbar.jsx
index 9734c12..1d9b4fa 100644
--- a/public/components/navigation/Navbar.jsx
+++ b/public/components/navigation/Navbar.jsx
@@ -38,6 +38,7 @@ class Navbar extends React.Component {
 
         <div className="c-navbar__links">
           <NavbarLink exact to="/">Home</NavbarLink>
+          <NavbarLink to="/about">About</NavbarLink>
           <NavbarLink to="/contact">Contact</NavbarLink>
         </div>
       </nav>
diff --git a/public/components/pages/AboutPage.jsx b/public/components/pages/AboutPage.jsx
new file mode 100644
index 0000000..21efa56
--- /dev/null
+++ b/public/components/pages/AboutPage.jsx
@@ -0,0 +1,106 @@
+/*
+ *  About Page
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *    styles/components/_page--style-about.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+
+import React from 'react';
+
+import Page from './../Page';
+import Poly from './../sections/Poly';
+import BodySection from './../sections/BodySection';
+import SplitSection from './../sections/SplitSection';
+import { connect } from 'react-redux';
+import Language from './../../language/Language';
+
+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>
+  )
+}
+
+class AboutPage extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Page>
+        <Poly />
+
+        <SplitSection
+          left={ <img src={domsHead} className="c-page--style-about__profile" /> }
+
+          right={ <p>{Language.get("about.descriptions.welcome")}</p> }
+          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>
+
+
+        </BodySection>
+      </Page>
+    )
+  }
+}
+
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(AboutPage);
diff --git a/public/components/pages/IndexPage.jsx b/public/components/pages/IndexPage.jsx
index a37a98c..92941ec 100644
--- a/public/components/pages/IndexPage.jsx
+++ b/public/components/pages/IndexPage.jsx
@@ -2,6 +2,9 @@
  *  Index Page
  *    Homepage.
  *
+ *  Dependencies:
+ *    styles/components/_page--style-index.scss
+ *
  *  Version:
  *    1.0.1 - 2018/03/01
  */
@@ -11,6 +14,9 @@ import React from 'react';
 import Page from './../Page';
 import Poly from './../sections/Poly';
 import BodySection from './../sections/BodySection';
+import SplitSection from './../sections/SplitSection';
+import { connect } from 'react-redux';
+import Language from './../../language/Language';
 
 class IndexPage extends React.Component {
   constructor(props) {
@@ -21,26 +27,19 @@ class IndexPage extends React.Component {
     return (
       <Page>
         <Poly />
+
         <BodySection>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
-          <p>Lorem</p>
+          <p>test</p>
         </BodySection>
       </Page>
     )
   }
 }
 
-export default IndexPage;
+const mapStateToProps = function(state) {
+  return {
+    code: state.language.code
+  }
+}
+
+export default connect(mapStateToProps)(IndexPage);
diff --git a/public/components/sections/BodySection.jsx b/public/components/sections/BodySection.jsx
index b9ae73e..b2e983b 100644
--- a/public/components/sections/BodySection.jsx
+++ b/public/components/sections/BodySection.jsx
@@ -20,7 +20,9 @@ class BodySection extends React.Component {
   render() {
     return (
       <Section section="body">
-        {this.props.children}
+        <div className="c-section--style-body__inner">
+          {this.props.children}
+        </div>
       </Section>
     )
   }
diff --git a/public/components/sections/SplitSection.jsx b/public/components/sections/SplitSection.jsx
new file mode 100644
index 0000000..b026312
--- /dev/null
+++ b/public/components/sections/SplitSection.jsx
@@ -0,0 +1,46 @@
+/*
+ *  Poly
+ *    Poly styled section.
+ *
+ *  Dependencies:
+ *    styles/components/_section--style-split.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+import React from 'react';
+import Section from './../Section';
+
+const SplitSectionSection = function(props) {
+  let clazz = "c-section--style-split__split-part";
+
+  if(typeof props.className !== typeof undefined) clazz += " " + props.className;
+
+  return (
+    <div className={clazz}>
+      {props.children}
+    </div>
+  );
+}
+
+class SplitSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Section section="split">
+        <SplitSectionSection className={this.props.leftClass}>
+          {this.props.left}
+        </SplitSectionSection>
+
+        <SplitSectionSection className={this.props.rightClass}>
+          {this.props.right}
+        </SplitSectionSection>
+      </Section>
+    );
+  }
+}
+
+export default SplitSection;
diff --git a/public/images/profile.png b/public/images/profile.png
new file mode 100644
index 0000000000000000000000000000000000000000..0599885ec223a29bf36a0c4b78ee8373d4b8e76f
GIT binary patch
literal 38353
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

literal 0
HcmV?d00001

diff --git a/public/language/Language.jsx b/public/language/Language.jsx
index 625c461..369ada4 100644
--- a/public/language/Language.jsx
+++ b/public/language/Language.jsx
@@ -19,7 +19,9 @@ class Language {
   }
 
   get(key) {
-    return this.getRecursive(key.split(".")) || "Missing \"" + key + "\"";
+    let j = this.getRecursive(key.split("."));
+    if(typeof j === typeof undefined || j == null) return "Missing \"" + key + "\"";
+    return j;
   }
 
   getRecursive(key_array, data_obj) {
@@ -29,6 +31,7 @@ class Language {
     let k = key_array[0];
     let o = data_obj[k];
     if(typeof o === typeof undefined) return null;
+    if(typeof o === 'function') o = o();
 
     //Awesome
     if(key_array.length > 1) {
diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx
index 2a68bed..f7681d0 100644
--- a/public/language/en-AU.jsx
+++ b/public/language/en-AU.jsx
@@ -1,4 +1,156 @@
+import React from 'react';
+
 module.exports = {
+  "about": {
+    "titles": {
+      "me": "About Me",
+      "programming": "Programming",
+      "apis": "APIs, Libraries, Tools and Platforms"
+    },
+    "descriptions": {
+      "welcome": "Hello! My name is Dominic \"YourWishes\" Masters, and welcome to my little place on the web!",
+      "me": "I am a 23 year old programmer from Sydney, Australia. I have " +
+        "been programming , and generally working with computers and other " +
+        "technology for as long as I can remember.",
+
+      "programming": "Programming is my passion, and I continue to develop my " +
+        "skillset every day. I am fluent in many computing technologies and "+
+        "languages. Below are just some of the languages I'm fluent in."
+    },
+
+
+    "C#": {
+      "name": "C#",
+      "description": "I have been working with C# since late 2012, starting " +
+        "with libraries like XNA and .NET."
+    },
+
+    "Java": {
+      "name": "Java",
+      "description": "I have been using Java since late 2011 as an introduction " +
+        "into OOP and Desktop Software writing."
+    },
+
+    "Javascript": {
+      "name": "Javascript",
+      "description": "I have been using Javascript for various projects since " +
+        "around 2009."
+    },
+
+    "HTML": {
+      "name": "HTML/CSS",
+      "description": "I have been using and playing with HTML for websites since " +
+        "around 2006 as one of my first steps into programming."
+    },
+
+    "PHP": {
+      "name": "PHP",
+      "description": "I have been using PHP as a server language since 2011, " +
+        "although lately I tend to favour libraries such as node for this."
+    },
+
+    "VB": {
+      "name": "VB",
+      "description": "While an underappreciated language I have used VB for " +
+        "university projects and system scripting since 2010."
+    },
+
+    "SQL": {
+      "name": "SQL",
+      "description": "I have used SQL Servers for various projects since 2011 " +
+        "mostly with MySQL or PGSQL."
+    },
+
+    "Lua": {
+      "name": "Lua",
+      "description": "While rarely used anymore I have used Lua for scripting " +
+        "and game development since late 2009."
+    },
+
+    "ActionScript": {
+      "name": "ActionScript",
+      "description": "My first taste of programming, I have been using ActionScript " +
+        "in all it's flavours since early 2005, starting with some Flash Animations and " +
+        "developing into game programming."
+    },
+
+    "Ruby": {
+      "name": "Ruby",
+      "description": "Not one of my strongest languages, I have used Ruby for "+
+        "Shopify, an eCommerce platform since 2017."
+    },
+
+    "Python": {
+      "name": "Python",
+      "description": "Another language I'm not super fluent in, however I have "+
+        "used it for scripts and for personal projects since 2015."
+    },
+
+
+
+    "GL": {
+      "name": "GL",
+      "description": "I have been working with various Graphics Libaries, incuding "+
+        "OpenGL, LWJGL, JOGL, XNA, MonoGame, Unity C#, WebGL and Playstation " +
+        "Mobile SDK in various forms since early 2009."
+    },
+
+    "Node": {
+      "name": "Node",
+      "description": "I write software, servers and scripts in Node, it is " +
+        "becoming my most used platform to develop for. I have been using Node " +
+        " since early 2014."
+    },
+
+    "React": {
+      "name": "React & Redux",
+      "description": "Since 2015 I have been writing apps using the React, " +
+        "Redux and JSX frameworks."
+    },
+
+    "Shopify": {
+      "name": "Shopify",
+      "description": "I have been working with Shopify as part of my daily job " +
+        "since October of 2017. Utilizing Shopify's Liquid Markup, as well as " +
+        "the Shopify API's for app development."
+    },
+
+    "neto": {
+      "name": "neto",
+      "description": "I have worked with the neto eCommerce platform since mid "+
+        "2015, as well as their b@se templating language."
+    },
+
+    "jQuery": {
+      "name": "jQuery",
+      "description": "Many websites I have developed have utilized the jQuery " +
+        "library, since late 2009. Despite is fading popularity I still use it " +
+        "from time to time, however tend to drop it in favour of native JS."
+    },
+
+    "NodeCG": {
+      "name": "NodeCG",
+      "description": "Being an avid content creator for livestreams and videos, " +
+        "I have extensive experince with the NodeCG Stream Graphics Library."
+    },
+
+    "PhoneGap": {
+      "name": "PhoneGap/Cordova",
+      "description": "I have written ReactJS apps for mobile devices using Adobe's " +
+        "PhoneGap tools built ontop of Apache's Cordova software."
+    },
+
+    "Other": {
+      "name": "Other Tools",
+      "description": "SCSS, LESS, JOGL, Webpack, Express, Babel, Grunt, JSON, " +
+        "XML, YML, Typescript, ECMAScript, FFMPEG, Google API, Heroku, YouTube, " +
+        "Twitch.TV, OAUTH2, VirtueMart, Joomla, WordPress, Craft CMS, opus, " +
+        "SourceMod, Twitter Bootstrap, Bukkit, BTC Markets, ITCSS, BEM, " +
+        "ionic, PHPBB, Xenforo, WebSockets, Twitter, Facebook, Instagram, " +
+        "eBay, PayPal & more."
+    }
+  },
+
   "contact": {
     "form": {
       "title": "Contact",
diff --git a/public/styles/components/_page--style-about.scss b/public/styles/components/_page--style-about.scss
new file mode 100644
index 0000000..d5529b5
--- /dev/null
+++ b/public/styles/components/_page--style-about.scss
@@ -0,0 +1,47 @@
+/*
+ *  About Page
+ *    Styles for index page elements
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_flex.scss
+ *    styles/tools/_responsive.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+.c-page--style-about__profile {
+  width: 100%;
+  max-width: 256px;
+  margin: 0 auto;
+}
+
+.c-page--style-about__blurb {
+  font-size: 1.25em;
+  max-width: 25em;
+}
+
+.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;
+}
+
+@include t-media-query($s-small-up) {
+  .c-page--style-about__language {
+    width: 50%;
+  }
+}
diff --git a/public/styles/components/_page--style-contact.scss b/public/styles/components/_page--style-contact.scss
index a39d4b8..7ccf764 100644
--- a/public/styles/components/_page--style-contact.scss
+++ b/public/styles/components/_page--style-contact.scss
@@ -6,7 +6,7 @@
  *    styles/settings/responsive.scss
  *    styles/tools/_repsonsive.scss
  *    styles/tools/_flex.scss
- *    styles/components/_style.scss
+ *    styles/components/_page.scss
  *
  *  Version:
  *    1.0.0 - 2018/03/10
diff --git a/public/styles/components/_page--style-index.scss b/public/styles/components/_page--style-index.scss
new file mode 100644
index 0000000..cfdf89a
--- /dev/null
+++ b/public/styles/components/_page--style-index.scss
@@ -0,0 +1,12 @@
+/*
+ *  Index Page
+ *    Styles for index page elements
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_repsonsive.scss
+ *    styles/tools/_flex.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
diff --git a/public/styles/components/_section--style-body.scss b/public/styles/components/_section--style-body.scss
index ff41873..8f4607b 100644
--- a/public/styles/components/_section--style-body.scss
+++ b/public/styles/components/_section--style-body.scss
@@ -10,15 +10,17 @@
  *  Version:
  *    1.0.0 - 2018/02/28
  */
-.c-section--style-body {
+.c-section--style-body__inner {
   background: $s-color--background-default;
   padding: 1em;
 }
 
 @include t-media-query($s-small-up) {
   .c-section--style-body {
-    margin-left: 4%;
-    width: 96%;
+    padding-left: 4%;
+  }
+
+  .c-section--style-body__inner {
     @include t-box-shadow(-10px, 10px, 0px, rgba(0, 0, 0, 0.5));
   }
 }
diff --git a/public/styles/components/_section--style-split.scss b/public/styles/components/_section--style-split.scss
new file mode 100644
index 0000000..35126d6
--- /dev/null
+++ b/public/styles/components/_section--style-split.scss
@@ -0,0 +1,34 @@
+/*
+ *  Section Style Split
+ *    Styles for split style section
+ *
+ *  Dependencies:
+ *    styles/settings/responsive.scss
+ *    styles/tools/_repsonsive.scss
+ *    styles/tools/_flex.scss
+ *    styles/components/_section.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+.c-section--style-split {
+  @include t-flexbox();//Because we're winning a fight
+  @include t-flex-wrap(wrap);
+}
+
+.c-section--style-split__split-part {
+  width: 100%;
+}
+
+
+@include t-media-query($s-small-up) {
+  .c-section--style-split {
+    @include t-flex-wrap(nowrap);
+    @include t-justify-content(space-around);
+    @include t-align-items(center);
+  }
+
+  .c-section--style-split__split-part {
+    width: auto;
+  }
+}
diff --git a/public/styles/elements/_dt.scss b/public/styles/elements/_dt.scss
new file mode 100644
index 0000000..5f21978
--- /dev/null
+++ b/public/styles/elements/_dt.scss
@@ -0,0 +1,25 @@
+/*
+ *  DT, DL, DD
+ *    Base Definition List Settings
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+dt {
+  font-weight: bold;
+}
+
+dl {
+
+}
+
+dd {
+  margin-left: 2em;
+}
+
+dt ~ dt,
+dl ~ dt {
+  margin-top: 1em;
+}
diff --git a/public/styles/elements/_p.scss b/public/styles/elements/_p.scss
new file mode 100644
index 0000000..bc2930e
--- /dev/null
+++ b/public/styles/elements/_p.scss
@@ -0,0 +1,11 @@
+/*
+ *  P
+ *    Base P/Paragraph Seettings
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+p {
+}
diff --git a/public/styles/index.scss b/public/styles/index.scss
index 9491e59..98219b6 100644
--- a/public/styles/index.scss
+++ b/public/styles/index.scss
@@ -32,8 +32,10 @@
 @import './elements/_a.scss';
 @import './elements/_body.scss';
 @import './elements/_button.scss';
+@import './elements/_dt.scss';
 @import './elements/_headings.scss';
 @import './elements/_html.scss';
+@import './elements/_p.scss';
 @import './elements/_table.scss';
 
 //Objects
@@ -47,11 +49,14 @@
 @import './components/_menu.scss';
 @import './components/_navbar.scss';
 @import './components/_page.scss';
+@import './components/_page--style-about.scss';
 @import './components/_page--style-contact.scss';
+@import './components/_page--style-index.scss';
 @import './components/_section.scss';
 @import './components/_section--style-blank-promo.scss';
 @import './components/_section--style-body.scss';
 @import './components/_section--style-poly.scss';
+@import './components/_section--style-split.scss';
 @import './components/_section--style-three.scss';
 
 //Utilities