Made about page

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 />

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>

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);

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);

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>
     )
   }

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;

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) {

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",

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%;
+  }
+}

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

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
+ */

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));
   }
 }

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;
+  }
+}

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;
+}

public/styles/elements/_p.scss

@@ -0,0 +1,11 @@
+/*
+ *  P
+ *    Base P/Paragraph Seettings
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/03/11
+ */
+p {
+}

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