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

Generally trying to improve performance.

Browse Source
This commit is contained in:
Dominic Masters
2018-10-30 21:10:03 +11:00
parent 45866c37fc
commit 6ace1f03fd
41 changed files with 219 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/pages/home/HomePage.jsx
View File

@ -22,8 +22,10 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Page from '@components/page/Page';
import Styles from './HomePage.scss';
import Page from '@components/page/Page';
import BannerSection from './sections/BannerSection';
import PromoVideoSection from './sections/PromoVideoSection';
import ProgrammingSection from './sections/ProgrammingSection';
@ -38,10 +40,6 @@ export default props => {
{ /* Banner */ }
<BannerSection />
{ /* Promo Video
<PromoVideoSection />
*/ }
{/* Programming */}
<ProgrammingSection />

102
public/pages/home/HomePage.scss Normal file
View File

@ -0,0 +1,102 @@
/*
* Home Page
* Styles for the Home Page, a simple page outlining some info about me.
*
* Dependencies:
* styles/settings/responsive.scss
* styles/tools/_responsive.scss
*
* Version:
* 1.1.0 - 2018/08/14
*/
@import '~@styles/global';
.p-home-page {
&__banner {
&-image {
object-fit: cover;
height: 80vh;
}
}
&__banner,
&__promo {
position: relative;
}
&__promo {
padding: 6em 0;
background-size: 150% auto;
&-video {
background-image: url('~@assets/images/patterns/florida.svg');
}
}
&__brands {
display: flex;
align-items: stretch;
justify-content: space-between;
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;
width: 100%;
}
/* 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;
}
}
}
}

8
public/pages/home/sections/BannerSection.jsx
View File

@ -27,7 +27,6 @@ import { PageBoundary } from '@components/page/Page';
import { ImageSection } from '@components/section/Section';
import FloatingContentBox from '@objects/content/box/FloatingContentBox';
import { Title, Subtitle } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
export default withLanguage(props => {
@ -36,6 +35,7 @@ export default withLanguage(props => {
return (
<ImageSection
className="p-home-page__banner"
imageClassName="p-home-page__banner-image"
src={ require('@assets/images/banners/about/glasses.svg') }
alt="domsPlace"
width="2400"
@ -44,10 +44,8 @@ export default withLanguage(props => {
>
<PageBoundary full>
<FloatingContentBox position="middle center" size="large" className="u-text-center">
<ElementScrollFader from="bottom" >
<Title>{ lang.pages.home.banner.title }</Title>
<Subtitle className="u-responsive--small-up">{ lang.pages.home.banner.subtitle }</Subtitle>
</ElementScrollFader>
<Title>{ lang.pages.home.banner.title }</Title>
<Subtitle>{ lang.pages.home.banner.subtitle }</Subtitle>
</FloatingContentBox>
</PageBoundary>
</ImageSection>

72
public/pages/home/sections/PlatformsSection.jsx
View File

@ -32,13 +32,14 @@ import Video from '@objects/video/Video';
import { Title, Subtitle, Paragraph, Heading1 } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
const Platform = (props) => {
const Platform = props => {
let { src, to, title } = props;
let children;
let image = <Image src={props.src} loadable className="p-home-page__brands-image" width="96" height="96" />;
let image = <Image src={ src } loadable className="p-home-page__brands-image" width="96" height="96" maxWidth="250" />;
if(props.to) {
children = (
<a href={props.to} target="_blank" className="p-home-page__brands-link" title={props.title}>
<a href={ to } target="_blank" className="p-home-page__brands-link" title={ title }>
{ image }
</a>
);
@ -47,13 +48,7 @@ const Platform = (props) => {
}
//Wrap in a div and a fader. Div is to help with random transitions on resizing.
return (
<div className="p-home-page__brands-brand">
<ElementScrollFader from={props.from}>
{children}
</ElementScrollFader>
</div>
);
return <div className="p-home-page__brands-brand" children={children} />;
};
export default withLanguage(props => {
@ -66,142 +61,127 @@ export default withLanguage(props => {
background
>
<PageBoundary>
<ElementScrollFader from="left">
<ElementScrollFader >
<Title className="u-text-center p-home-page__brands-title">
{ lang.pages.home.platforms.heading }
</Title>
</ElementScrollFader>
<div className="p-home-page__brands">
<ElementScrollFader from="bottom" className="p-home-page__brands">
{/* Shopify */}
<Platform
src={require('@assets/images/branding/shopify/shopify_glyph.svg')}
from="left"
src={require('@assets/images/branding/shopify/logo.png')}
to="//www.shopify.com"
title={ lang.pages.home.platforms.shopify }
/>
{/* React */}
<Platform
src={require('@assets/images/branding/react/react-logo.svg')}
from="top"
src={require('@assets/images/branding/react/logo.png')}
to="//reactjs.org"
title={ lang.pages.home.platforms.react }
/>
{/* MonoGame */}
<Platform
src={require('@assets/images/branding/monogame/monogame-logo.svg')}
from="bottom"
src={require('@assets/images/branding/monogame/logo.png')}
to="http://www.monogame.net"
title={ lang.pages.home.platforms.monogame }
/>
{/* PGSQL */}
<Platform
src={require('@assets/images/branding/pgsql/pgsql-logo.svg')}
from="right"
src={require('@assets/images/branding/pgsql/logo.png')}
to="//www.postgresql.org"
title={ lang.pages.home.platforms.pgsql }
/>
{/* NodeJS */}
<Platform
src={require('@assets/images/branding/nodejs/nodejs-logo.svg')}
from="top"
src={require('@assets/images/branding/nodejs/logo.png')}
to="//nodejs.org"
title={ lang.pages.home.platforms.nodejs }
/>
{/* C# */}
<Platform
src={require('@assets/images/branding/csharp/csharp-logo.svg')}
from="top"
src={require('@assets/images/branding/csharp/logo.png')}
to="//docs.microsoft.com/en-us/dotnet/csharp/"
title={ lang.pages.home.platforms.csharp }
/>
{/* PHP */}
<Platform
src={require('@assets/images/branding/php/php-logo.svg')}
from="top"
src={require('@assets/images/branding/php/logo.png')}
to="//php.net"
title={ lang.pages.home.platforms.php }
/>
{/* Java */}
<Platform
src={require('@assets/images/branding/java/java-logo.svg')}
from="top"
src={require('@assets/images/branding/java/logo.png')}
to="//java.com"
title={ lang.pages.home.platforms.java }
/>
{/* neto */}
<Platform
src={require('@assets/images/branding/neto/neto-logo.svg')}
from="bottom"
src={require('@assets/images/branding/neto/logo.png')}
to="//www.neto.com.au"
title={ lang.pages.home.platforms.neto }
/>
{/* MySQL */}
<Platform
src={require('@assets/images/branding/mysql/mysql-logo.svg')}
from="bottom"
src={require('@assets/images/branding/mysql/logo.png')}
to="//www.mysql.com"
title={ lang.pages.home.platforms.mysql }
/>
{/* Heroku */}
<Platform
src={require('@assets/images/branding/heroku/heroku-logo.svg')}
from="bottom"
src={require('@assets/images/branding/heroku/logo.png')}
to="//heroku.com"
title={ lang.pages.home.platforms.heroku }
/>
{/* OpenGL */}
<Platform
src={require('@assets/images/branding/opengl/opengl-logo.svg')}
from="bottom"
src={require('@assets/images/branding/opengl/logo.png')}
to="//www.opengl.org"
title={ lang.pages.home.platforms.opengl }
/>
{/* Discord */}
<Platform
src={ require('@assets/images/branding/discord/discord-logo.svg') }
from="right"
src={ require('@assets/images/branding/discord/logo.png') }
to="//discordapp.com"
title={ lang.pages.home.platforms.discord }
/>
{/* Twitch */}
<Platform
src={ require('@assets/images/branding/twitch/twitch-logo.svg') }
from="right"
src={ require('@assets/images/branding/twitch/logo.png') }
to="//twitch.tv"
title={ lang.pages.home.platforms.twitch }
/>
{/* Twitter */}
<Platform
src={require('@assets/images/branding/twitter/twitter-logo.svg')}
from="left"
src={require('@assets/images/branding/twitter/logo.png')}
to="//twitter.com"
title={ lang.pages.home.platforms.twitter }
/>
{/* Google Cloud */}
<Platform
src={ require('@assets/images/branding/google-cloud/google-cloud-logo.svg') }
from="left"
src={ require('@assets/images/branding/google-cloud/logo.png') }
to="//console.cloud.google.com"
title={ lang.pages.home.platforms.googlecloud }
/>
</div>
</ElementScrollFader>
<ElementScrollFader from="bottom">
<ElementScrollFader from="top">
<Subtitle className="u-text-center p-home-page__brands-title">
{ lang.pages.home.platforms.footer }
</Subtitle>