Added about page
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 466 KiB After Width: | Height: | Size: 443 KiB |
BIN
public/images/work-showcase/ozhair.png
Normal file
BIN
public/images/work-showcase/ozhair.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 935 KiB |
62
public/images/work-showcase/smai.svg
Normal file
62
public/images/work-showcase/smai.svg
Normal file
@ -0,0 +1,62 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 500 225" style="enable-background:new 0 0 500 225;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#221F20;}
|
||||
.st1{fill:#BE1E2C;}
|
||||
.st2{fill:#009FDA;}
|
||||
.st3{fill:#003359;}
|
||||
</style>
|
||||
<g>
|
||||
<g id="logo_smai-Screen-Designs">
|
||||
<g id="logo_smai-Product-List-Desktop" transform="translate(-195.000000, -41.000000)">
|
||||
<g id="logo_smai-Masthead" transform="translate(0.000000, -1.000000)">
|
||||
<g id="logo_smai-SMAI-logo" transform="translate(195.000000, 42.000000)">
|
||||
<path id="logo_smai-Fill-4" class="st0" d="M385.1,42.4l-1.6,4.2l-1.6-4.2H381v5.1h0.7l-0.1-4.2l1.6,4.2h0.5l1.6-4.2l-0.1,4.2
|
||||
h0.7v-5.1H385.1z"/>
|
||||
<path id="logo_smai-Fill-3" class="st0" d="M376.8,42.4V43h1.5v4.5h0.7V43h1.5v-0.6H376.8z"/>
|
||||
<path id="logo_smai-Fill-1" class="st1" d="M305.3,42.4l-27.4,63.1h19.3l17.6-40.3l10,22.9h-11.3l-7.4,17.4l45.6-0.1l-27.4-63
|
||||
H305.3z"/>
|
||||
<path id="logo_smai-Fill-2" class="st0" d="M353.4,105.5h19.3V42.4h-19.3V105.5z"/>
|
||||
<path id="logo_smai-Fill-5" class="st0" d="M247.5,42.4l-17,39.3l-17-39.3h-28.9v63.1h19.5V65.2l17.5,40.3h17.7l17.3-40.3v40.3
|
||||
h19.3V42.4H247.5z"/>
|
||||
<path id="logo_smai-Fill-6" class="st0" d="M181.2,96.8c0,4.8-3.9,8.8-8.8,8.8h-58l7.4-17.5h40v-5.3h-35.2
|
||||
c-4.9,0-8.8-3.9-8.8-8.8l0,0l0,0V51.2c0-4.8,3.9-8.8,8.8-8.8H183L175.6,60h-38.4v5.2h35.2c4.9,0,8.8,3.9,8.8,8.8
|
||||
C181.2,77.4,181.2,90.2,181.2,96.8"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st2" d="M322.5,156.1l-0.2-0.1L322.5,156.1"/>
|
||||
<path class="st2" d="M305.7,180.3l-7.5-16.6c5.4-1.4,9.5-4,12.1-7.3h0.1c3.3,1,6.6,2,9.8,3.1L305.7,180.3z M355.9,128.2h-14.4
|
||||
l-14.5,21c4.5,1,8.7,2.1,12.9,3.2l4.5-6.9l2,16.5c-3.5-1.1-6.9-2-10.6-2.9l-1-0.2l-1.4-0.3l-2.5-0.7l-8.6-1.9H322
|
||||
c-3.5-0.8-6.8-1.4-10.4-2h-0.1c-14.2-2.4-29.5-4.1-45.6-5l-8.6,32.5H272l5.6-20.9l4.8,0.4l8.5,20.5h29.8l12.1-17.1
|
||||
c5.4,2.5,10.4,5.2,14.8,8.1l1.1,8.9H364L355.9,128.2L355.9,128.2z M231.7,148.4l-8.9,33.2h14.7l8.9-33.2
|
||||
c-2.2-0.1-4.3-0.1-6.3-0.1C237.2,148.3,234.4,148.3,231.7,148.4L231.7,148.4z M264.2,141.2l3.3-12.5h-46.3l-3.4,12.4
|
||||
c7.3-0.3,14.7-0.5,22.3-0.5C248.3,140.5,256.3,140.7,264.2,141.2z"/>
|
||||
<path class="st2" d="M314,145c0-4.3-1.3-8.1-4.1-10.8c-3.5-3.6-9.4-5.6-18.2-5.6h-19.9l-3.5,12.8c16.2,1,31.5,2.7,45.7,5.2
|
||||
L314,145L314,145z M401.1,163.9c-3.4,3.5-6.6,5.3-11.3,5.3c-6.1,0-10.6-4.1-10.6-10.9c0-9.3,7.1-17.4,15.8-17.4
|
||||
c5.2,0,8.5,2.5,10.6,6.8l12.8-6.8c-3.2-8.2-10.7-13.4-21.5-13.4c-20.3,0-33,16.2-33,31.9v0.8c0.1,3.1,0.7,5.9,1.7,8.4
|
||||
c3.5,8.7,12.1,14,23.3,14h1.6c2.6-0.2,4.9-0.5,7.1-1.2c5.6-1.6,9.9-4.8,13.4-8.7L401.1,163.9L401.1,163.9z M472.9,128.6H456
|
||||
l-23.2,25.7l6.9-25.7h-14.7l-14.3,53h14.8l7.3-27.1l13.4,27.2h15.9l-13.5-27.2L472.9,128.6"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st3" d="M211.7,134.2c-3.5-3.5-9.4-5.6-18.2-5.6h-19.9l-4.8,17.7c14.5-2.5,30.2-4.1,46.7-5
|
||||
C214.9,138.6,213.7,136.2,211.7,134.2z"/>
|
||||
<path class="st3" d="M215.3,148.9c-14.5,0.8-28.3,2.2-41.3,4.3c-0.3,0-0.7,0.1-1,0.1l-2.7,0.4l-1.5,0.3l-2.3,0.4h-0.4l-1.3,0.3
|
||||
c-1.3,0.2-2.4,0.4-3.6,0.7l-0.7,0.1l-3.5,0.7l-1.3,0.2l-2.3,0.5h-0.1l-1.4,0.3c-0.9,0.2-1.6,0.4-2.5,0.5l-1.2,0.3l-3.5,0.9
|
||||
l-0.8,0.2c-0.9,0.2-1.9,0.4-2.7,0.8l-1.3,0.3l-0.5,0.2c-0.4,0.2-0.9,0.2-1.2,0.4c-0.2,0-0.3,0-0.4,0.1l-1.3,0.3l-2.4,0.7l-1,0.2
|
||||
l-3.2,1l-1,0.3c-0.8,0.2-1.5,0.4-2.3,0.8l-1.2,0.3c-0.2,0-0.3,0.1-0.4,0.2l12.5-19.3l0.9,7.4c4.5-1.3,9.2-2.4,14-3.5l-3.3-21.1
|
||||
h-14.4l-37,53.3h15.9c6.8-5.8,15.6-11,26.2-15.6l2,15.6h15.6l-3.3-20.8c3.7-1.3,7.7-2.4,11.8-3.5l-6.4,24.3h14.5l4.9-18.1l6-0.9
|
||||
l7.7,19h15.4l-8.1-17.8c9.2-2.5,14.3-7.8,15.6-14.8L215.3,148.9z M118.1,141.5l3.5-12.9H75.1l-3.5,12.9h16l-10.8,40.1h14.7
|
||||
l10.8-40.1H118.1 M52.2,140c6-0.8,11.9,0.7,15.2,1.6l3.3-11.9c-2.7-0.9-8-2.2-15.8-2.1c-13,0.2-22.5,7.5-22.5,18
|
||||
c0,7.7,5.4,11.4,13.8,14.6c7.3,2.9,8.8,3.9,8.8,6c0,2.4-2.5,3.9-6,3.9c-0.9,0-1.9,0-2.8-0.2h-0.1l-1.7-0.3
|
||||
c-5.2-1.1-9.9-3.2-13.7-5.9l-3.5,12.5c5.4,3.9,12.4,6,20.6,6c13.2,0,22.6-7.3,22.6-18.3c0-8-5.6-11.7-13.8-14.7
|
||||
c-7.3-2.9-8.8-3.6-8.8-5.8c0-1.9,1.7-3.3,4.5-3.7h0.1L52.2,140z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -71,6 +71,42 @@ module.exports = {
|
||||
</p>
|
||||
</Fragment>
|
||||
); }
|
||||
},
|
||||
"smai": {
|
||||
"heading": "SMAI",
|
||||
"description": () => { return (
|
||||
<Fragment>
|
||||
<p>
|
||||
Sport Master Athletics International (SMAI) are producers and
|
||||
sellers of athletic and martial art goods. They have been
|
||||
operating since 1985 and have grown to now sell over 3000
|
||||
different products.
|
||||
</p>
|
||||
<p>
|
||||
I have worked on both their front-end website and design, as
|
||||
well as creating many custom integrations, and primarily an
|
||||
integration with the StarTrack courier service to offer live
|
||||
rates for their website shipping.
|
||||
</p>
|
||||
</Fragment>
|
||||
); }
|
||||
},
|
||||
"ozhair": {
|
||||
"heading": "Oz Hair & Beauty",
|
||||
"description": () => { return ( <Fragment>
|
||||
<p>
|
||||
Oz Hair and Beauty is an online hair and beauty retail store from
|
||||
Sydney, Australia with a focus on selling the best brands at an
|
||||
affordable price.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
With a large inventory and constantly changing marketing campaigns,
|
||||
the website was built by to be fast, easily filtered and searched,
|
||||
and flexible enough to feature any single group of products at a
|
||||
given time.
|
||||
</p>
|
||||
</Fragment> ); }
|
||||
}
|
||||
},
|
||||
"admin": {
|
||||
|
||||
@ -26,7 +26,7 @@ import Language from './../../../language/Language';
|
||||
import { PageBoundary } from './../../Page';
|
||||
import Section, { SplitSection, Split, ClearSection } from './../../../section/Section';
|
||||
import ContentBox from './../../../content/ContentBox';
|
||||
import { Title, Subtitle, Paragraph, Heading1 } from './../../../typography/Typography';
|
||||
import { Title, Subtitle, Paragraph, Heading1, Heading2 } from './../../../typography/Typography';
|
||||
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
|
||||
import Image from './../../../image/Image';
|
||||
|
||||
@ -43,44 +43,62 @@ const ExistingWorkFrame = (props) => {
|
||||
if(!fakeURL.startsWith("http")) {
|
||||
fakeURL = window.location.protocol + fakeURL;
|
||||
}
|
||||
|
||||
let fakeWindow = (
|
||||
<ElementScrollFader from={props.fromLeft}>
|
||||
<Window95>
|
||||
<TitleBar buttons={[
|
||||
<Minimize key="Minimize" disabled />,
|
||||
<Close key="close" disabled />
|
||||
]}>
|
||||
{ props.title }
|
||||
</TitleBar>
|
||||
|
||||
<MenuBar>
|
||||
<MenuOption title="File" disabled />
|
||||
<MenuOption title="Visit Page" href={ props.href } target="_blank" />
|
||||
</MenuBar>
|
||||
|
||||
<AddressBar href={fakeURL} />
|
||||
<Frame>
|
||||
<a href={ props.href} target="_blank" className="p-about-page__work-link">
|
||||
<Image
|
||||
src={props.src}
|
||||
alt={props.title}
|
||||
className="p-about-page__work-link-image"
|
||||
/>
|
||||
</a>
|
||||
</Frame>
|
||||
</Window95>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
|
||||
let box = (
|
||||
<ElementScrollFader from={ props.fromRight }>
|
||||
<ContentBox box>
|
||||
<Heading2>{ props.title }</Heading2>
|
||||
{ props.description }
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
);
|
||||
|
||||
let left, right;
|
||||
if(props.swap) {
|
||||
left = box;
|
||||
right = fakeWindow;
|
||||
} else {
|
||||
left = fakeWindow;
|
||||
right = box;
|
||||
}
|
||||
|
||||
return (
|
||||
<SplitSection align="center">
|
||||
<Split padded>
|
||||
<ElementScrollFader from={props.fromLeft}>
|
||||
<Window95>
|
||||
<TitleBar buttons={[
|
||||
<Minimize key="Minimize" disabled />,
|
||||
<Close key="close" disabled />
|
||||
]}>
|
||||
{ props.title }
|
||||
</TitleBar>
|
||||
|
||||
<MenuBar>
|
||||
<MenuOption title="File" disabled />
|
||||
<MenuOption title="Visit Page" href={ props.href } target="_blank" />
|
||||
</MenuBar>
|
||||
|
||||
<AddressBar href={fakeURL} />
|
||||
<Frame>
|
||||
<a href={ props.href} target="_blank" className="p-about-page__work-link">
|
||||
<Image
|
||||
src={props.src}
|
||||
alt={props.title}
|
||||
className="p-about-page__work-link-image"
|
||||
/>
|
||||
</a>
|
||||
</Frame>
|
||||
</Window95>
|
||||
</ElementScrollFader>
|
||||
{ left }
|
||||
</Split>
|
||||
|
||||
<Split padded>
|
||||
<ElementScrollFader from={ props.fromRight }>
|
||||
<ContentBox box>
|
||||
<Heading1>{ props.title }</Heading1>
|
||||
{ props.description }
|
||||
</ContentBox>
|
||||
</ElementScrollFader>
|
||||
{ right }
|
||||
</Split>
|
||||
</SplitSection>
|
||||
);
|
||||
@ -95,9 +113,9 @@ export default (props) => {
|
||||
<PageBoundary small>
|
||||
<ElementScrollFader from="left">
|
||||
<ContentBox box>
|
||||
<Title className="u-text-center">
|
||||
<Heading1 className="u-text-center">
|
||||
{ Language.get("pages.about.work.heading") }
|
||||
</Title>
|
||||
</Heading1>
|
||||
<Paragraph>
|
||||
{ Language.get("pages.about.work.paragraph") }
|
||||
</Paragraph>
|
||||
@ -117,6 +135,28 @@ export default (props) => {
|
||||
title={ Language.get("pages.about.work.kopa.heading") }
|
||||
description={ Language.get("pages.about.work.kopa.description") }
|
||||
/>
|
||||
|
||||
{/* SMAI */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.smai.com.au/"
|
||||
fromLeft="right"
|
||||
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") }
|
||||
/>
|
||||
|
||||
{/* Oz Hair and Beauty */}
|
||||
<ExistingWorkFrame
|
||||
href="//www.ozhairandbeauty.com/"
|
||||
fromLeft="left"
|
||||
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") }
|
||||
/>
|
||||
</PageBoundary>
|
||||
</Section>
|
||||
);
|
||||
|
||||
@ -11,3 +11,22 @@
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
font-family: $s-font--stack-headings;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
h6 {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user