Moved About Page to homepage. Site is ready?

public/footer/Footer.jsx

@@ -52,7 +52,6 @@ class Footer extends React.Component {
 
             <nav className="c-footer__links">
               <FooterLink title="home" to="/" />
-              <FooterLink title="about" to="/about" />
               <FooterLink title="contact" to="/contact" />
               <FooterLink title="privacy" to="/legal/privacy" />
             </nav>

public/language/en-AU.jsx

@@ -12,22 +12,19 @@ module.exports = {
 
   "navbar": {
     "home": "Home",
-    "about": "About",
     "contact": "Contact"
   },
 
   "footer": {
     "links": {
       "home": "Home",
-      "about": "About Me",
       "contact": "Contact Me",
       "privacy": "Privacy Policy"
     }
   },
 
   "pages": {
-    "about": {
+    "home": {
-      "title": "About Me",
       "banner": {
         "title": "About Dominic Masters",
         "subtitle": "Developer, Nerd, Occasionally Funny."

public/nav/menu/HamburgerMenu.jsx

@@ -29,7 +29,7 @@ import * as MenuActions from './../../actions/MenuActions';
 
 const HamburerMenuItem = function(props) {
   return (
-    <li className="c-hamburger-menu__link">
+    <li className={"c-hamburger-menu__link c-hamburger-menu__link--"+props.link}>
       <NavLink to={ props.to } className="c-hamburger-menu__link-link">
         { Language.get(props.lang) }
       </NavLink>
@@ -62,9 +62,8 @@ class HamburgerMenu extends React.Component {
 
         <div className="c-hamburger-menu__menu">
           <ul className="c-hamburger-menu__links">
-            <HamburerMenuItem to="/" lang="navbar.home" />
+            <HamburerMenuItem to="/" lang="navbar.home" link="home" />
-            <HamburerMenuItem to="/about" lang="navbar.about" />
+            <HamburerMenuItem to="/contact" lang="navbar.contact" link="contact" />
-            <HamburerMenuItem to="/contact" lang="navbar.contact" />
           </ul>
         </div>
       </div>

public/nav/navbar/Navbar.jsx

@@ -60,7 +60,6 @@ class Navbar extends React.Component {
 
             {/* Desktop / Tablet Screen Links */}
             <NavbarLink to="/" title="home" exact />
-            <NavbarLink to="/about" title="about" />
             <NavbarLink to="/contact" title="contact" exact />
 
             {/* Hamburger Menu for smaller screens */}

public/page/PageBoundary.jsx

@@ -27,6 +27,7 @@ export default function(props) {
   let clazzes = "c-page__boundary";
   if(props.full) clazzes += " is-full";
   if(props.small) clazzes += " is-small";
+  if(props.className) clazzes += " " + props.className;
 
   return (
     <div className={ clazzes }>

public/page/Routes.jsx

@@ -32,7 +32,6 @@ import Footer from './../footer/Footer';
 
 //Pages
 import Homepage from './home/Homepage';
-import AboutPage from './about/AboutPage';
 import ContactPage from './contact/ContactPage';
 
 import PrivacyPolicyPage from './legal/privacy/PrivacyPolicyPage';
@@ -73,7 +72,6 @@ class Routes extends React.Component {
           >
             <Switch location={ location }>
               <RouteWrapper exact path="/" page={ Homepage } />
-              <RouteWrapper exact path="/about" page={ AboutPage } />
               <RouteWrapper exact path="/contact" page={ ContactPage } />
 
               <RouteWrapper exact path="/legal/privacy" page={ PrivacyPolicyPage } />

public/page/home/Homepage.jsx

@@ -23,59 +23,43 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import Page from './../Page';
-import Page, { PageBoundary } from './../Page';
+import Language from './../../language/Language'
-import Section, { ImageSection } from './../../section/Section';
-import FloatingContentBox from './../../content/FloatingContentBox';
-import Image from './../../image/Image';
-import { Title, Subtitle } from './../../typography/Typography';
-import { Button } from './../../input/Input';
 
-import { openModal } from './../../actions/ModalActions';
+import BannerSection from './sections/BannerSection';
-import Modal from './../../modal/Modal';
+import PromoVideoSection from './sections/PromoVideoSection';
-
+import ProgrammingSection from './sections/ProgrammingSection';
-class Homepage extends React.Component {
+import PlatformsSection from './sections/PlatformsSection';
-  constructor(props) {
+import ExistingWorkSection from './sections/ExistingWorkSection';
-    super(props)
-  }
-
-  testModal() {
-    console.log("oof");
-    this.props.openModal(
-      <Modal close>
-        Hello Modal
-      </Modal>
-    );
-  }
-
-  render() {
-    let lines = [];
-    for(let i = 0; i < 20; i++) {
-      lines.push(<br key={i} />);
-    }
 
+const HomePage = (props) => {
+  //Return
   return (
-      <Page style="home-page" title={0} className="p-home-page">
+    <Page style="home-page" className="p-home-page" title={0}>
-        Welcome home
+
-        { lines }
+      { /* Banner */ }
-        <Button onClick={this.testModal.bind(this)}>
+      <BannerSection />
-          Test Modal
+
-        </Button>
+      { /* Promo Video
+      <PromoVideoSection />
+      */ }
+
+      {/* Programming */}
+      <ProgrammingSection />
+
+      {/* Platforms */}
+      <PlatformsSection />
+
+      {/* Existing Work */}
+      <ExistingWorkSection />
     </Page>
   );
 }
-}
 
 const mapStateToProps = (state) => {
   return {
-    modal: state.modal
+    code: state.language.code
   };
 }
 
-const mapDispatchToProps = (dispatch) => {
+export default connect(mapStateToProps)(HomePage);
-  return bindActionCreators({
-    openModal: openModal
-  },dispatch);
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Homepage);

public/page/home/sections/BannerSection.jsx

@@ -39,8 +39,8 @@ export default (props) => {
       <PageBoundary full>
         <FloatingContentBox position="middle center" size="large" className="u-text-center">
           <ElementScrollFader from="bottom">
-            <Title>{ Language.get("pages.about.banner.title") }</Title>
+            <Title>{ Language.get("pages.home.banner.title") }</Title>
-            <Subtitle className="u-responsive--small-up">{ Language.get("pages.about.banner.subtitle") }</Subtitle>
+            <Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
           </ElementScrollFader>
         </FloatingContentBox>
       </PageBoundary>

public/page/home/sections/ExistingWorkSection.jsx

@@ -62,11 +62,11 @@ const ExistingWorkFrame = (props) => {
 
         <AddressBar href={fakeURL} />
         <Frame>
-          <a href={ props.href} target="_blank" className="p-about-page__work-link">
+          <a href={ props.href} target="_blank" className="p-home-page__work-link">
             <Image
               src={props.src}
               alt={props.title}
-              className="p-about-page__work-link-image"
+              className="p-home-page__work-link-image"
             />
           </a>
         </Frame>
@@ -109,16 +109,16 @@ const ExistingWorkFrame = (props) => {
 
 export default (props) => {
   return (
-    <Section className="p-about-page__promo p-about-page__promo-work">
+    <Section className="p-home-page__promo p-home-page__promo-work">
       {/* Title */}
       <PageBoundary small>
         <ElementScrollFader from="left">
           <ContentBox box>
             <Heading1 className="u-text-center">
-              { Language.get("pages.about.work.heading") }
+              { Language.get("pages.home.work.heading") }
             </Heading1>
             <Paragraph>
-              { Language.get("pages.about.work.paragraph") }
+              { Language.get("pages.home.work.paragraph") }
             </Paragraph>
           </ContentBox>
         </ElementScrollFader>
@@ -133,8 +133,8 @@ export default (props) => {
           fromLeft="top"
           fromRight="bottom"
           src={ require('./../../../images/work-showcase/kopalife.png') }
-          title={ Language.get("pages.about.work.kopa.heading") }
+          title={ Language.get("pages.home.work.kopa.heading") }
-          description={ Language.get("pages.about.work.kopa.description") }
+          description={ Language.get("pages.home.work.kopa.description") }
         />
 
         {/* SMAI */}
@@ -144,8 +144,8 @@ export default (props) => {
           fromRight="right"
           swap
           src={ require('./../../../images/work-showcase/smai.svg') }
-          title={ Language.get("pages.about.work.smai.heading") }
+          title={ Language.get("pages.home.work.smai.heading") }
-          description={ Language.get("pages.about.work.smai.description") }
+          description={ Language.get("pages.home.work.smai.description") }
         />
 
       {/* Oz Hair and Beauty */}
@@ -155,8 +155,8 @@ export default (props) => {
           fromRight="left"
 
           src={ require('./../../../images/work-showcase/ozhair.png') }
-          title={ Language.get("pages.about.work.ozhair.heading") }
+          title={ Language.get("pages.home.work.ozhair.heading") }
-          description={ Language.get("pages.about.work.ozhair.description") }
+          description={ Language.get("pages.home.work.ozhair.description") }
         />
       </PageBoundary>
 
@@ -165,9 +165,9 @@ export default (props) => {
 
         <ElementScrollFader from="bottom">
           <ContentBox box className="u-text-center">
-            <Subtitle>{ Language.get("pages.about.work.footer") }</Subtitle>
+            <Subtitle>{ Language.get("pages.home.work.footer") }</Subtitle>
             <Button size="large" to="/contact">
-              { Language.get("pages.about.work.footer-button") }
+              { Language.get("pages.home.work.footer-button") }
             </Button>
           </ContentBox>
         </ElementScrollFader>

public/page/home/sections/PlatformsSection.jsx

@@ -34,11 +34,11 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
 
 const Platform = (props) => {
   let children;
-  let image = <Image src={props.src} className="p-about-page__brands-image" />;
+  let image = <Image src={props.src} className="p-home-page__brands-image" />;
 
   if(props.to) {
     children = (
-      <a href={props.to} target="_blank" className="p-about-page__brands-link">
+      <a href={props.to} target="_blank" className="p-home-page__brands-link">
         {image}
       </a>
     );
@@ -47,7 +47,7 @@ const Platform = (props) => {
   }
 
   return (
-    <ElementScrollFader from={props.from} className="p-about-page__brands-brand">
+    <ElementScrollFader from={props.from} className="p-home-page__brands-brand">
       {children}
     </ElementScrollFader>
   );
@@ -55,15 +55,15 @@ const Platform = (props) => {
 
 export default (props) => {
   return (
-    <Section className="p-about-page__promo p-about-page__promo-platforms">
+    <Section className="p-home-page__promo p-home-page__promo-platforms">
       <PageBoundary>
         <ElementScrollFader from="left">
-          <Title className="u-text-center p-about-page__brands-title">
+          <Title className="u-text-center p-home-page__brands-title">
-            { Language.get("pages.about.platforms.heading") }
+            { Language.get("pages.home.platforms.heading") }
           </Title>
         </ElementScrollFader>
 
-        <div className="p-about-page__brands">
+        <div className="p-home-page__brands">
           {/* Shopify */}
           <Platform
             src={require('./../../../images/branding/shopify/shopify_glyph.svg')}
@@ -179,8 +179,8 @@ export default (props) => {
         </div>
 
         <ElementScrollFader from="bottom">
-          <Subtitle className="u-text-center p-about-page__brands-title">
+          <Subtitle className="u-text-center p-home-page__brands-title">
-            { Language.get("pages.about.platforms.footer") }
+            { Language.get("pages.home.platforms.footer") }
           </Subtitle>
         </ElementScrollFader>
       </PageBoundary>

public/page/home/sections/ProgrammingSection.jsx

@@ -32,14 +32,14 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
 
 export default (props) => {
   return (
-    <Section className="p-about-page__promo p-about-page__promo-programming">
+    <Section className="p-home-page__promo p-home-page__promo-programming">
       <PageBoundary small>
         <ElementScrollFader from="bottom">
           <ContentBox box>
             <Heading1 className="u-text-center">
-              { Language.get("pages.about.programming.heading") }
+              { Language.get("pages.home.programming.heading") }
             </Heading1>
-            { Language.get("pages.about.programming.paragraph") }
+            { Language.get("pages.home.programming.paragraph") }
           </ContentBox>
         </ElementScrollFader>
       </PageBoundary>

public/page/home/sections/PromoVideoSection.jsx

@@ -34,7 +34,7 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
 
 export default (props) => {
   return (
-    <Section className="p-about-page__promo p-about-page__promo-video">
+    <Section className="p-home-page__promo p-home-page__promo-video">
       <PageBoundary>
         <SplitSection align="center">
 
@@ -52,10 +52,10 @@ export default (props) => {
             <ElementScrollFader from="bottom">
               <ContentBox box>
                 <Title>
-                  { Language.get("pages.about.video.heading") }
+                  { Language.get("pages.home.video.heading") }
                 </Title>
                 <Paragraph>
-                  { Language.get("pages.about.video.paragraph") }
+                  { Language.get("pages.home.video.paragraph") }
                 </Paragraph>
               </ContentBox>
             </ElementScrollFader>

public/section/Section.jsx

@@ -41,17 +41,19 @@ export default class Section extends React.Component {
   }
 }
 
-import ImageSection from './image/ImageSection';
-import VideoSection from './video/VideoSection';
 import BodySection from './body/BodySection';
 import ClearSection from './layout/ClearSection';
+import FeaturedBlogSection from './blog/FeaturedBlogSection';
+import ImageSection from './image/ImageSection';
 import SplitSection, { Split }  from './layout/SplitSection';
+import VideoSection from './video/VideoSection';
 
 export {
-  ImageSection,
-  VideoSection,
   BodySection,
   ClearSection,
+  FeaturedBlogSection,
+  ImageSection,
   SplitSection,
-  Split
+  Split,
+  VideoSection
 }

public/section/blog/FeaturedBlogSection.jsx

@@ -22,43 +22,45 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
-import { connect } from 'react-redux';
+import Section from './../Section';
-import Page from './../Page';
+import { PageBoundary } from './../../page/Page';
-import Language from './../../language/Language'
 
-import BannerSection from './sections/BannerSection';
+const FeaturedArticle = function(props) {
-import PromoVideoSection from './sections/PromoVideoSection';
+  let clazz = "c-featured-blog-section__article";
-import ProgrammingSection from './sections/ProgrammingSection';
+
-import PlatformsSection from './sections/PlatformsSection';
+  let internals;
-import ExistingWorkSection from './sections/ExistingWorkSection';
+  internals = "test";
+
+  if(props.contain) {
+    internals = <PageBoundary>{internals}</PageBoundary>
+    clazz += " is-contained";
+  }
 
-const AboutPage = (props) => {
-  //Return
   return (
-    <Page style="about-page" className="p-about-page" title={ Language.get("pages.about.title") }>
+    <article className={ clazz }>
-
+      { internals }
-      { /* Banner */ }
+    </article>
-      <BannerSection />
-
-      { /* Promo Video */ }
-      <PromoVideoSection />
-
-      {/* Programming */}
-      <ProgrammingSection />
-
-      {/* Platforms */}
-      <PlatformsSection />
-
-      {/* Existing Work */}
-      <ExistingWorkSection />
-    </Page>
   );
 }
 
-const mapStateToProps = (state) => {
+export default (props) => {
-  return {
+  let firstArticle;
-    code: state.language.code
+  let articles = [];
-  };
+  for(let i = 0; i < props.data.length; i++) {
+    let art = <FeaturedArticle data={props.data[i]} key={i} contain />
+    if(i === 0) {
+      firstArticle = art;
+      continue;
+    }
+    articles.push(art);
   }
 
-export default connect(mapStateToProps)(AboutPage);
+  return (
+    <Section className="c-featured-blog-section">
+      { firstArticle }
+      <PageBoundary className="c-featured-blog-section__articles">
+        { articles }
+      </PageBoundary>
+    </Section>
+  );
+};

public/styles/components/_hamburger-menu.scss

@@ -44,7 +44,7 @@ $c-hamburger-menu--pos-y: 0%;
 
   &__links {
     @extend %t-list-blank;
-    padding: 1em;
+    padding-top: 3em;
   }
 
   &__link {
@@ -53,12 +53,20 @@ $c-hamburger-menu--pos-y: 0%;
     font-size: 1.25em;
     width: 100%;
     position: relative;
-    border: 1px solid red;
+    background-size: 150%;
 
     &-link {
       position: relative;
       display: block;
-      padding: 1.5em 0;
+      padding: 1.5em;
+    }
+
+    &--home {
+      background-image: url('./../images/patterns/game-show.svg');
+    }
+
+    &--contact {
+      background-image: url('./../images/patterns/lemon-triangle.svg');
     }
 
     &:hover:before {

public/styles/index.scss

@@ -59,7 +59,6 @@
 @import './elements/_headings.scss';
 
 //Objects
-
 @import './objects/_background.scss';
 @import './objects/_button.scss';
 @import './objects/_content-box.scss';
@@ -89,7 +88,6 @@
 @import './components/_video-section.scss';
 
 //Pages
-@import './pages/_about-page.scss';
 @import './pages/_contact-page.scss';
 @import './pages/_home-page.scss';
 @import './pages/_privacy-policy-page.scss';

public/styles/pages/_about-page.scss

@@ -1,104 +0,0 @@
-/*
- *  About Page
- *    Styles for the About Page, a simple page outlining some info about me.
- *
- *  Dependencies:
- *    styles/settings/responsive.scss
- *    styles/tools/_flex.scss
- *    styles/tools/_responsive.scss
- *
- *  Version:
- *    1.0.0 - 2018/06/06
- */
-.p-about-page {
-
-  &__promo {
-    padding: 6em 0;
-    background-size: 150% auto;
-
-    &-video {
-      background-image: url('./../images/patterns/florida.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-programming {
-      background-image: url('./../images/patterns/rhythm-heaven.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-platforms {
-      background-image: url('./../images/patterns/game-show.svg');
-      @extend %t-dp--shadow-3d;
-    }
-
-    &-work {
-      background-image: url('./../images/patterns/arcade.svg');
-      @extend %t-dp--shadow-3d;
-    }
-  }
-
-  &__brands {
-    @extend %t-flexbox;
-    @include t-align-items(stretch);
-    @include t-justify-content(space-between);
-    @include t-flex-wrap(wrap);
-
-    &-title {
-    }
-
-    &-brand {
-      width: 50%;
-    }
-
-    &-image {
-      display: block;
-      margin: 0 auto;
-      width: 100%;
-      height: 100%;
-      max-width: 5em;
-      max-height: 5em;
-      object-fit: contain;
-      object-position: center;
-
-      transition: all 0.2s $s-animation--ease-out;
-    }
-
-    &-link {
-      padding: 1em;
-      display: block;
-      height: 100%;
-
-      &:hover .p-about-page__brands-image {
-        @include t-rotate(10deg);
-      }
-    }
-
-    &-title { }
-  }
-
-  &__work-link,&__work-link-image {
-    display: block;
-  }
-
-  /* Media Queries */
-  @include t-media-query($s-xsmall-up) {
-    &__brands {
-      &-brand {
-        width: 25%;
-      }
-    }
-  }
-
-  @include t-media-query($s-small-up) {
-    &__brands {
-      &-link {
-        padding: 2em;
-      }
-
-      &-image {
-        max-width: 7em;
-        max-height: 6em;
-      }
-    }
-  }
-}

public/styles/pages/_home-page.scss

@@ -1,19 +1,104 @@
 /*
  *  Home Page
- *    Styles that are homepage specific.
+ *    Styles for the Home Page, a simple page outlining some info about me.
  *
  *  Dependencies:
- *
+ *    styles/settings/responsive.scss
+ *    styles/tools/_flex.scss
+ *    styles/tools/_responsive.scss
  *
  *  Version:
- *    1.0.0 - 2018/05/11
+ *    1.0.0 - 2018/06/06
  */
-
 .p-home-page {
 
-  &__video-content {
+  &__promo {
-    padding: 1em 4em;
+    padding: 6em 0;
-    background: rgba(0, 0, 0, 0.75);
+    background-size: 150% auto;
-    color: white;
+
+    &-video {
+      background-image: url('./../images/patterns/florida.svg');
+      @extend %t-dp--shadow-3d;
+    }
+
+    &-programming {
+      background-image: url('./../images/patterns/rhythm-heaven.svg');
+      @extend %t-dp--shadow-3d;
+    }
+
+    &-platforms {
+      background-image: url('./../images/patterns/game-show.svg');
+      @extend %t-dp--shadow-3d;
+    }
+
+    &-work {
+      background-image: url('./../images/patterns/arcade.svg');
+      @extend %t-dp--shadow-3d;
+    }
+  }
+
+  &__brands {
+    @extend %t-flexbox;
+    @include t-align-items(stretch);
+    @include t-justify-content(space-between);
+    @include t-flex-wrap(wrap);
+
+    &-title {
+    }
+
+    &-brand {
+      width: 50%;
+    }
+
+    &-image {
+      display: block;
+      margin: 0 auto;
+      width: 100%;
+      height: 100%;
+      max-width: 5em;
+      max-height: 5em;
+      object-fit: contain;
+      object-position: center;
+
+      transition: all 0.2s $s-animation--ease-out;
+    }
+
+    &-link {
+      padding: 1em;
+      display: block;
+      height: 100%;
+
+      &:hover .p-about-page__brands-image {
+        @include t-rotate(10deg);
+      }
+    }
+
+    &-title { }
+  }
+
+  &__work-link,&__work-link-image {
+    display: block;
+  }
+
+  /* Media Queries */
+  @include t-media-query($s-xsmall-up) {
+    &__brands {
+      &-brand {
+        width: 25%;
+      }
+    }
+  }
+
+  @include t-media-query($s-small-up) {
+    &__brands {
+      &-link {
+        padding: 2em;
+      }
+
+      &-image {
+        max-width: 7em;
+        max-height: 6em;
+      }
+    }
   }
 }