diff --git a/public/footer/Footer.jsx b/public/footer/Footer.jsx index 12907b2..1b56a97 100644 --- a/public/footer/Footer.jsx +++ b/public/footer/Footer.jsx @@ -52,7 +52,6 @@ class Footer extends React.Component { diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx index 22d95e9..796ad20 100644 --- a/public/language/en-AU.jsx +++ b/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": { - "title": "About Me", + "home": { "banner": { "title": "About Dominic Masters", "subtitle": "Developer, Nerd, Occasionally Funny." diff --git a/public/nav/menu/HamburgerMenu.jsx b/public/nav/menu/HamburgerMenu.jsx index c564e1c..5e5b9cd 100644 --- a/public/nav/menu/HamburgerMenu.jsx +++ b/public/nav/menu/HamburgerMenu.jsx @@ -29,7 +29,7 @@ import * as MenuActions from './../../actions/MenuActions'; const HamburerMenuItem = function(props) { return ( -
  • +
  • { Language.get(props.lang) } @@ -62,9 +62,8 @@ class HamburgerMenu extends React.Component {
    diff --git a/public/nav/navbar/Navbar.jsx b/public/nav/navbar/Navbar.jsx index 16bc3db..4f0b22b 100644 --- a/public/nav/navbar/Navbar.jsx +++ b/public/nav/navbar/Navbar.jsx @@ -60,7 +60,6 @@ class Navbar extends React.Component { {/* Desktop / Tablet Screen Links */} - {/* Hamburger Menu for smaller screens */} diff --git a/public/page/PageBoundary.jsx b/public/page/PageBoundary.jsx index 9a4b05c..3b80586 100644 --- a/public/page/PageBoundary.jsx +++ b/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 (
    diff --git a/public/page/Routes.jsx b/public/page/Routes.jsx index ae1a116..c4f9f43 100644 --- a/public/page/Routes.jsx +++ b/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 { > - diff --git a/public/page/home/Homepage.jsx b/public/page/home/Homepage.jsx index c84e049..9a21768 100644 --- a/public/page/home/Homepage.jsx +++ b/public/page/home/Homepage.jsx @@ -23,59 +23,43 @@ import React from 'react'; import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import Page, { PageBoundary } from './../Page'; -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 Page from './../Page'; +import Language from './../../language/Language' -import { openModal } from './../../actions/ModalActions'; -import Modal from './../../modal/Modal'; +import BannerSection from './sections/BannerSection'; +import PromoVideoSection from './sections/PromoVideoSection'; +import ProgrammingSection from './sections/ProgrammingSection'; +import PlatformsSection from './sections/PlatformsSection'; +import ExistingWorkSection from './sections/ExistingWorkSection'; -class Homepage extends React.Component { - constructor(props) { - super(props) - } +const HomePage = (props) => { + //Return + return ( + - testModal() { - console.log("oof"); - this.props.openModal( - - Hello Modal - - ); - } + { /* Banner */ } + - render() { - let lines = []; - for(let i = 0; i < 20; i++) { - lines.push(
    ); - } + { /* Promo Video + + */ } - return ( - - Welcome home - { lines } - - - ); - } + {/* Programming */} + + + {/* Platforms */} + + + {/* Existing Work */} + +     + ); } const mapStateToProps = (state) => { return { - modal: state.modal + code: state.language.code }; } -const mapDispatchToProps = (dispatch) => { - return bindActionCreators({ - openModal: openModal - },dispatch); -} - -export default connect(mapStateToProps, mapDispatchToProps)(Homepage); +export default connect(mapStateToProps)(HomePage); diff --git a/public/page/about/sections/BannerSection.jsx b/public/page/home/sections/BannerSection.jsx similarity index 94% rename from public/page/about/sections/BannerSection.jsx rename to public/page/home/sections/BannerSection.jsx index e4b8618..09a071e 100644 --- a/public/page/about/sections/BannerSection.jsx +++ b/public/page/home/sections/BannerSection.jsx @@ -39,8 +39,8 @@ export default (props) => { - { Language.get("pages.about.banner.title") } - { Language.get("pages.about.banner.subtitle") } + { Language.get("pages.home.banner.title") } + { Language.get("pages.home.banner.subtitle") } diff --git a/public/page/about/sections/ExistingWorkSection.jsx b/public/page/home/sections/ExistingWorkSection.jsx similarity index 84% rename from public/page/about/sections/ExistingWorkSection.jsx rename to public/page/home/sections/ExistingWorkSection.jsx index 291ec9a..e15402c 100644 --- a/public/page/about/sections/ExistingWorkSection.jsx +++ b/public/page/home/sections/ExistingWorkSection.jsx @@ -62,11 +62,11 @@ const ExistingWorkFrame = (props) => { - + {props.title} @@ -109,16 +109,16 @@ const ExistingWorkFrame = (props) => { export default (props) => { return ( -
    +
    {/* Title */} - { Language.get("pages.about.work.heading") } + { Language.get("pages.home.work.heading") } - { Language.get("pages.about.work.paragraph") } + { Language.get("pages.home.work.paragraph") } @@ -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") } - description={ Language.get("pages.about.work.kopa.description") } + title={ Language.get("pages.home.work.kopa.heading") } + 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") } - description={ Language.get("pages.about.work.smai.description") } + title={ Language.get("pages.home.work.smai.heading") } + 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") } - description={ Language.get("pages.about.work.ozhair.description") } + title={ Language.get("pages.home.work.ozhair.heading") } + description={ Language.get("pages.home.work.ozhair.description") } /> @@ -165,9 +165,9 @@ export default (props) => { - { Language.get("pages.about.work.footer") } + { Language.get("pages.home.work.footer") } diff --git a/public/page/about/sections/PlatformsSection.jsx b/public/page/home/sections/PlatformsSection.jsx similarity index 89% rename from public/page/about/sections/PlatformsSection.jsx rename to public/page/home/sections/PlatformsSection.jsx index f8b13c0..efdfa16 100644 --- a/public/page/about/sections/PlatformsSection.jsx +++ b/public/page/home/sections/PlatformsSection.jsx @@ -34,11 +34,11 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader'; const Platform = (props) => { let children; - let image = ; + let image = ; if(props.to) { children = ( - + {image} ); @@ -47,7 +47,7 @@ const Platform = (props) => { } return ( - + {children} ); @@ -55,15 +55,15 @@ const Platform = (props) => { export default (props) => { return ( -
    +
    - - { Language.get("pages.about.platforms.heading") } + <Title className="u-text-center p-home-page__brands-title"> + { Language.get("pages.home.platforms.heading") } -
    +
    {/* Shopify */} {
    - - { Language.get("pages.about.platforms.footer") } + + { Language.get("pages.home.platforms.footer") } diff --git a/public/page/about/sections/ProgrammingSection.jsx b/public/page/home/sections/ProgrammingSection.jsx similarity index 89% rename from public/page/about/sections/ProgrammingSection.jsx rename to public/page/home/sections/ProgrammingSection.jsx index 377d57c..2eef24c 100644 --- a/public/page/about/sections/ProgrammingSection.jsx +++ b/public/page/home/sections/ProgrammingSection.jsx @@ -32,14 +32,14 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader'; export default (props) => { return ( -
    +
    - { Language.get("pages.about.programming.heading") } + { Language.get("pages.home.programming.heading") } - { Language.get("pages.about.programming.paragraph") } + { Language.get("pages.home.programming.paragraph") } diff --git a/public/page/about/sections/PromoVideoSection.jsx b/public/page/home/sections/PromoVideoSection.jsx similarity index 92% rename from public/page/about/sections/PromoVideoSection.jsx rename to public/page/home/sections/PromoVideoSection.jsx index b383291..943f802 100644 --- a/public/page/about/sections/PromoVideoSection.jsx +++ b/public/page/home/sections/PromoVideoSection.jsx @@ -34,7 +34,7 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader'; export default (props) => { return ( -
    +
    @@ -52,10 +52,10 @@ export default (props) => { - { Language.get("pages.about.video.heading") } + { Language.get("pages.home.video.heading") } - { Language.get("pages.about.video.paragraph") } + { Language.get("pages.home.video.paragraph") } diff --git a/public/section/Section.jsx b/public/section/Section.jsx index 06e197d..2e62a99 100644 --- a/public/section/Section.jsx +++ b/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 } diff --git a/public/page/about/AboutPage.jsx b/public/section/blog/FeaturedBlogSection.jsx similarity index 54% rename from public/page/about/AboutPage.jsx rename to public/section/blog/FeaturedBlogSection.jsx index 122a9fb..e2d837e 100644 --- a/public/page/about/AboutPage.jsx +++ b/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 Page from './../Page'; -import Language from './../../language/Language' +import Section from './../Section'; +import { PageBoundary } from './../../page/Page'; -import BannerSection from './sections/BannerSection'; -import PromoVideoSection from './sections/PromoVideoSection'; -import ProgrammingSection from './sections/ProgrammingSection'; -import PlatformsSection from './sections/PlatformsSection'; -import ExistingWorkSection from './sections/ExistingWorkSection'; +const FeaturedArticle = function(props) { + let clazz = "c-featured-blog-section__article"; + + let internals; + internals = "test"; + + if(props.contain) { + internals = {internals} + clazz += " is-contained"; + } -const AboutPage = (props) => { - //Return return ( - - - { /* Banner */ } - - - { /* Promo Video */ } - - - {/* Programming */} - - - {/* Platforms */} - - - {/* Existing Work */} - - +
    + { internals } +
    ); } -const mapStateToProps = (state) => { - return { - code: state.language.code - }; -} +export default (props) => { + let firstArticle; + let articles = []; + for(let i = 0; i < props.data.length; i++) { + let art = + if(i === 0) { + firstArticle = art; + continue; + } + articles.push(art); + } -export default connect(mapStateToProps)(AboutPage); + return ( +
    + { firstArticle } + + { articles } + +
    + ); +}; diff --git a/public/styles/components/_hamburger-menu.scss b/public/styles/components/_hamburger-menu.scss index 0c73a71..6404a24 100644 --- a/public/styles/components/_hamburger-menu.scss +++ b/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 { diff --git a/public/styles/index.scss b/public/styles/index.scss index bec3b6d..d2f286c 100644 --- a/public/styles/index.scss +++ b/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'; diff --git a/public/styles/pages/_about-page.scss b/public/styles/pages/_about-page.scss deleted file mode 100644 index 0571fb9..0000000 --- a/public/styles/pages/_about-page.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/public/styles/pages/_home-page.scss b/public/styles/pages/_home-page.scss index 47459aa..8610fb4 100644 --- a/public/styles/pages/_home-page.scss +++ b/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 { - padding: 1em 4em; - background: rgba(0, 0, 0, 0.75); - color: white; + &__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; + } + } } }