diff --git a/public/images/work-showcase/kopalife.png b/public/images/work-showcase/kopalife.png index 669f657..f863ec7 100644 Binary files a/public/images/work-showcase/kopalife.png and b/public/images/work-showcase/kopalife.png differ diff --git a/public/images/work-showcase/ozhair.png b/public/images/work-showcase/ozhair.png new file mode 100644 index 0000000..33f527d Binary files /dev/null and b/public/images/work-showcase/ozhair.png differ diff --git a/public/images/work-showcase/smai.svg b/public/images/work-showcase/smai.svg new file mode 100644 index 0000000..d0ff1a9 --- /dev/null +++ b/public/images/work-showcase/smai.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/language/en-AU.jsx b/public/language/en-AU.jsx index 0d43b6c..dea4787 100644 --- a/public/language/en-AU.jsx +++ b/public/language/en-AU.jsx @@ -71,6 +71,42 @@ module.exports = {

); } + }, + "smai": { + "heading": "SMAI", + "description": () => { return ( + +

+ 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. +

+

+ 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. +

+ + ); } + }, + "ozhair": { + "heading": "Oz Hair & Beauty", + "description": () => { return ( +

+ 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. +

+ +

+ 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. +

+ ); } } }, "admin": { diff --git a/public/page/about/sections/ExistingWorkSection.jsx b/public/page/about/sections/ExistingWorkSection.jsx index 0181406..f97a72c 100644 --- a/public/page/about/sections/ExistingWorkSection.jsx +++ b/public/page/about/sections/ExistingWorkSection.jsx @@ -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 = ( + + + , + + ]}> + { props.title } + + + + + + + + + + + {props.title} + + + + + ); + + let box = ( + + + { props.title } + { props.description } + + + ); + + let left, right; + if(props.swap) { + left = box; + right = fakeWindow; + } else { + left = fakeWindow; + right = box; + } + return ( - - - , - - ]}> - { props.title } - - - - - - - - - - - {props.title} - - - - + { left } - - - { props.title } - { props.description } - - + { right } ); @@ -95,9 +113,9 @@ export default (props) => { - + <Heading1 className="u-text-center"> { Language.get("pages.about.work.heading") } - + { Language.get("pages.about.work.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 */} + + + {/* Oz Hair and Beauty */} + ); diff --git a/public/styles/elements/_headings.scss b/public/styles/elements/_headings.scss index 30ca61a..c5c58e7 100644 --- a/public/styles/elements/_headings.scss +++ b/public/styles/elements/_headings.scss @@ -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; +}