YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved About Page to homepage. Site is ready?

Browse Source
This commit is contained in:
Dominic Masters
2018-07-09 21:24:15 +10:00
parent 3275a4ebd3
commit 2d651160bd
18 changed files with 209 additions and 241 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/footer/Footer.jsx
View File

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

5
public/language/en-AU.jsx
View File

@ -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."

7
public/nav/menu/HamburgerMenu.jsx
View File

@ -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="/about" lang="navbar.about" />
<HamburerMenuItem to="/contact" lang="navbar.contact" />
<HamburerMenuItem to="/" lang="navbar.home" link="home" />
<HamburerMenuItem to="/contact" lang="navbar.contact" link="contact" />
</ul>
</div>
</div>

1
public/nav/navbar/Navbar.jsx
View File

@ -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 */}

1
public/page/PageBoundary.jsx
View File

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

2
public/page/Routes.jsx
View File

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

72
public/page/home/Homepage.jsx
View File

@ -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 (
<Page style="home-page" className="p-home-page" title={0}>
testModal() {
console.log("oof");
this.props.openModal(
<Modal close>
Hello Modal
</Modal>
);
}
{ /* Banner */ }
<BannerSection />
render() {
let lines = [];
for(let i = 0; i < 20; i++) {
lines.push(<br key={i} />);
}
{ /* Promo Video
<PromoVideoSection />
*/ }
return (
<Page style="home-page" title={0} className="p-home-page">
Welcome home
{ lines }
<Button onClick={this.testModal.bind(this)}>
Test Modal
</Button>
</Page>
);
}
{/* Programming */}
<ProgrammingSection />
{/* Platforms */}
<PlatformsSection />
{/* Existing Work */}
<ExistingWorkSection />
</Page>
);
}
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);

4
public/page/about/sections/BannerSection.jsx → public/page/home/sections/BannerSection.jsx
View File

@ -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>
<Subtitle className="u-responsive--small-up">{ Language.get("pages.about.banner.subtitle") }</Subtitle>
<Title>{ Language.get("pages.home.banner.title") }</Title>
<Subtitle className="u-responsive--small-up">{ Language.get("pages.home.banner.subtitle") }</Subtitle>
</ElementScrollFader>
</FloatingContentBox>
</PageBoundary>

26
public/page/about/sections/ExistingWorkSection.jsx → public/page/home/sections/ExistingWorkSection.jsx
View File

@ -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") }
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") }
/>
</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>

18
public/page/about/sections/PlatformsSection.jsx → public/page/home/sections/PlatformsSection.jsx
View File

@ -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">
{ Language.get("pages.about.platforms.heading") }
<Title className="u-text-center p-home-page__brands-title">
{ 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">
{ Language.get("pages.about.platforms.footer") }
<Subtitle className="u-text-center p-home-page__brands-title">
{ Language.get("pages.home.platforms.footer") }
</Subtitle>
</ElementScrollFader>
</PageBoundary>

6
public/page/about/sections/ProgrammingSection.jsx → public/page/home/sections/ProgrammingSection.jsx
View File

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

6
public/page/about/sections/PromoVideoSection.jsx → public/page/home/sections/PromoVideoSection.jsx
View File

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

12
public/section/Section.jsx
View File

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

68
public/page/about/AboutPage.jsx → public/section/blog/FeaturedBlogSection.jsx
View File

@ -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 = <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") }>
{ /* Banner */ }
<BannerSection />
{ /* Promo Video */ }
<PromoVideoSection />
{/* Programming */}
<ProgrammingSection />
{/* Platforms */}
<PlatformsSection />
{/* Existing Work */}
<ExistingWorkSection />
</Page>
<article className={ clazz }>
{ internals }
</article>
);
}
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 = <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>
);
};

14
public/styles/components/_hamburger-menu.scss
View File

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

2
public/styles/index.scss
View File

@ -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';

104
public/styles/pages/_about-page.scss
View File

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

101
public/styles/pages/_home-page.scss
View File

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