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