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

Added w95 styles, building out about page work section

Browse Source
This commit is contained in:
Dominic Masters
2018-06-27 08:20:23 +10:00
parent 96cea1dc86
commit 7a5b26bb23
25 changed files with 1239 additions and 1291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/2400x1200.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.3 KiB

1483
public/images/banners/about/glasses.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 92 KiB

0
public/images/banners/homepage/palms.svg → public/images/banners/palms.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 174 KiB

After

Width:  |  Height:  |  Size: 174 KiB

119
public/images/banners/vhs-black.svg Normal file
View File

@ -0,0 +1,119 @@
<?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 701 809" style="enable-background:new 0 0 701 809;" xml:space="preserve">
<style type="text/css">
.st0{fill:#13181A;}
.st1{fill:none;stroke:#525354;stroke-width:0.25;stroke-miterlimit:10;}
.st2{fill:#99996D;}
.st3{fill:#EC342E;}
.st4{fill:#67B445;}
.st5{fill:#0094BE;}
.st6{fill:#EDE0D8;}
.st7{fill:none;stroke:#515352;stroke-width:0.25;stroke-miterlimit:10;}
</style>
<g>
<rect x="0.4" y="-314.5" class="st0" width="700.6" height="1266"/>
<g>
<line class="st1" x1="701" y1="-317" x2="701" y2="949"/>
</g>
<g>
<line class="st1" x1="676.8" y1="-317" x2="676.8" y2="949"/>
</g>
<g>
<line class="st1" x1="652.6" y1="-317" x2="652.6" y2="949"/>
</g>
<g>
<line class="st1" x1="628.5" y1="-317" x2="628.5" y2="949"/>
</g>
<g>
<line class="st1" x1="604.3" y1="-317" x2="604.3" y2="949"/>
</g>
<g>
<line class="st1" x1="580.1" y1="-317" x2="580.1" y2="949"/>
</g>
<g>
<line class="st1" x1="555.9" y1="-317" x2="555.9" y2="949"/>
</g>
<g>
<line class="st1" x1="531.8" y1="-317" x2="531.8" y2="949"/>
</g>
<g>
<line class="st1" x1="507.6" y1="-317" x2="507.6" y2="949"/>
</g>
<g>
<line class="st1" x1="483.4" y1="-317" x2="483.4" y2="949"/>
</g>
<g>
<line class="st1" x1="459.3" y1="-317" x2="459.3" y2="949"/>
</g>
<g>
<line class="st1" x1="435.1" y1="-317" x2="435.1" y2="949"/>
</g>
<g>
<line class="st1" x1="410.9" y1="-317" x2="410.9" y2="949"/>
</g>
<g>
<line class="st1" x1="386.7" y1="-317" x2="386.7" y2="949"/>
</g>
<g>
<line class="st1" x1="362.6" y1="-317" x2="362.6" y2="949"/>
</g>
<g>
<line class="st1" x1="338.4" y1="-317" x2="338.4" y2="949"/>
</g>
<g>
<line class="st1" x1="314.2" y1="-317" x2="314.2" y2="949"/>
</g>
<g>
<line class="st1" x1="290.1" y1="-317" x2="290.1" y2="949"/>
</g>
<g>
<line class="st1" x1="265.9" y1="-317" x2="265.9" y2="949"/>
</g>
<g>
<line class="st1" x1="241.7" y1="-317" x2="241.7" y2="949"/>
</g>
<g>
<line class="st1" x1="217.5" y1="-317" x2="217.5" y2="949"/>
</g>
<g>
<line class="st1" x1="193.4" y1="-317" x2="193.4" y2="949"/>
</g>
<g>
<line class="st1" x1="169.2" y1="-317" x2="169.2" y2="949"/>
</g>
<g>
<line class="st1" x1="145" y1="-317" x2="145" y2="949"/>
</g>
<g>
<line class="st1" x1="120.9" y1="-317" x2="120.9" y2="949"/>
</g>
<g>
<line class="st1" x1="96.7" y1="-317" x2="96.7" y2="949"/>
</g>
<g>
<line class="st1" x1="72.5" y1="-317" x2="72.5" y2="949"/>
</g>
<g>
<line class="st1" x1="48.3" y1="-317" x2="48.3" y2="949"/>
</g>
<g>
<line class="st1" x1="24.2" y1="-317" x2="24.2" y2="949"/>
</g>
<g>
<line class="st1" x1="0" y1="-317" x2="0" y2="949"/>
</g>
<g>
<polygon class="st0" points="701,115.1 0,302.4 0,441 701,253.6 "/>
<polygon class="st2" points="0,203.2 0,294.6 0,302.4 701,115.1 701,107.2 701,15.9 "/>
<polygon class="st3" points="0,441 0,469.4 701,282 701,253.6 "/>
<polygon class="st4" points="701,282 0,469.4 0,497.7 701,310.4 "/>
<polygon class="st5" points="0,497.7 0,526.1 701,338.7 701,310.4 "/>
</g>
<g>
<path class="st6" d="M701,797.4L559.9,654.2c0,0-39.5-33.3-5.1-67.3L701,440.8"/>
<path class="st7" d="M701,797.4L559.9,654.2c0,0-39.5-33.3-5.1-67.3L701,440.8"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

24
public/images/banners/vhs.svg Normal file
View File

@ -0,0 +1,24 @@
<?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 2400 1200" style="enable-background:new 0 0 2400 1200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#F7EFE2;}
.st1{fill:#FFBB24;}
.st2{fill:#FD682C;}
.st3{fill:#FC2736;}
.st4{fill:#B71D3C;}
.st5{fill:#671E53;}
.st6{fill:#EDE0D8;}
</style>
<polygon class="st0" points="2400,1200 0,1200 0.1,0.3 2400,0 "/>
<g>
<rect x="-13" y="629" class="st1" width="2640" height="70.7"/>
<rect x="-13" y="699.7" class="st2" width="2640" height="70.7"/>
<rect x="-13" y="770.4" class="st3" width="2640" height="70.7"/>
<polygon class="st4" points="2550.5,911.9 -13,911.9 -13,841.2 2627,841.2 "/>
<rect x="-13" y="911.9" class="st5" width="2625.6" height="70.7"/>
<path class="st6" d="M2402.7,1259.9L2237.3,1092c0,0-46.3-39-5.9-78.8l171.3-171.2"/>
</g>
<rect x="32.6" y="1081.8" width="96.4" height="93.7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

20
public/images/window/button-inverted.svg Normal file
View File

@ -0,0 +1,20 @@
<?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 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#808080;}
.st2{fill:#DFDFDF;}
</style>
<g>
<rect x="200" y="40" class="st0" width="40" height="200"/>
<rect x="40" y="200" class="st0" width="160" height="40"/>
<rect x="0" y="0" width="40" height="240"/>
<rect x="40" y="0" width="200" height="40"/>
<rect x="40" y="40" class="st1" width="40" height="160"/>
<rect x="80" y="40" class="st1" width="120" height="40"/>
<rect x="160" y="80" class="st2" width="40" height="80"/>
<rect x="80" y="160" class="st2" width="120" height="40"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 909 B

20
public/images/window/button.svg Normal file
View File

@ -0,0 +1,20 @@
<?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 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#808080;}
.st2{fill:#DFDFDF;}
</style>
<g>
<rect class="st0" width="40" height="200"/>
<rect x="100" y="-60" transform="matrix(6.123234e-17 -1 1 6.123234e-17 100 140)" class="st0" width="40" height="160"/>
<rect x="200" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 440 240)" width="40" height="240"/>
<rect x="80" y="120" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 320 120)" width="40" height="200"/>
<rect x="160" y="40" class="st1" width="40" height="160"/>
<rect x="80" y="120" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 280 80)" class="st1" width="40" height="120"/>
<rect x="40" y="80" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 120 240)" class="st2" width="40" height="80"/>
<rect x="80" transform="matrix(6.123234e-17 -1 1 6.123234e-17 40 160)" class="st2" width="40" height="120"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

20
public/images/window/frame.svg Normal file
View File

@ -0,0 +1,20 @@
<?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 240 240" style="enable-background:new 0 0 240 240;" width="6" height="6" xml:space="preserve">
<style type="text/css">
.st0{fill:#87888F;}
.st1{fill:#FFFFFF;}
.st2{fill:#C0C7C8;}
</style>
<g>
<rect class="st0" width="40" height="200"/>
<rect x="40" class="st0" width="160" height="40"/>
<rect x="200" class="st1" width="40" height="240"/>
<rect y="200" class="st1" width="200" height="40"/>
<rect x="160" y="40" class="st2" width="40" height="160"/>
<rect x="40" y="160" class="st2" width="120" height="40"/>
<rect x="40" y="80" width="40" height="80"/>
<rect x="40" y="40" width="120" height="40"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 898 B

BIN
public/images/window/icons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 719 B

25
public/images/window/window.svg Normal file
View File

@ -0,0 +1,25 @@
<?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 180 180" style="enable-background:new 0 0 180 180;" xml:space="preserve">
<style type="text/css">
.st0{fill:#DFDFDF;}
.st1{fill:#FFFFFF;}
.st2{fill:#808080;}
.st3{fill:#C0C0C0;}
</style>
<g>
<rect class="st0" width="20" height="160"/>
<rect x="20" class="st0" width="140" height="20"/>
<rect x="160" width="20" height="180"/>
<rect x="70" y="90" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -90 250)" width="20" height="160"/>
<rect x="20" y="20" class="st1" width="20" height="120"/>
<rect x="80" y="-20" transform="matrix(6.123234e-17 -1 1 6.123234e-17 60 120)" class="st1" width="20" height="100"/>
<rect x="140" y="20" class="st2" width="20" height="140"/>
<rect x="70" y="90" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -70 230)" class="st2" width="20" height="120"/>
<rect x="80" transform="matrix(6.123234e-17 -1 1 6.123234e-17 40 140)" class="st3" width="20" height="100"/>
<rect x="80" y="80" transform="matrix(6.123234e-17 -1 1 6.123234e-17 -40 220)" class="st3" width="20" height="100"/>
<rect x="120" y="60" class="st3" width="20" height="60"/>
<rect x="40" y="60" class="st3" width="20" height="60"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/images/work-showcase/kopalife.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 466 KiB

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

@ -50,6 +50,10 @@ module.exports = {
"heading": "Platforms I work with",
"footer": "... And many more!"
},
"work": {
"heading": "Some of my work",
"paragraph": "Interested to see what I can do? Check out some of my personal favourite projects that I have built!"
},
"admin": {
"heading": "Systems Admin",
"paragraph": () => {
@ -83,5 +87,9 @@ module.exports = {
"send": "Send",
"reset": "Reset"
}
},
"window": {
"address": "Address:"
}
}

79
public/page/about/sections/ExistingWorkSection.jsx
View File

@ -24,33 +24,88 @@
import React from 'react';
import Language from './../../../language/Language';
import { PageBoundary } from './../../Page';
import Section, { SplitSection, Split } from './../../../section/Section';
import Section, { SplitSection, Split, ClearSection } from './../../../section/Section';
import ContentBox from './../../../content/ContentBox';
import { Title, Subtitle, Paragraph, Heading1 } from './../../../typography/Typography';
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
import Image from './../../../image/Image';
import Window95, {
TitleBar, Close, Minimize,
MenuBar, MenuOption,
ContextMenu, ContextMenuOption,
Frame,
AddressBar
} from './../../../window/Window95';
const ExistingWorkFrame = (props) => {
let fakeURL = props.href;
if(!fakeURL.startsWith("http")) {
fakeURL = "https:" + fakeURL;
}
return (
<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>
);
};
export default (props) => {
return (
<Section className="p-about-page__promo p-about-page__promo-work">
{/* Title */}
<PageBoundary small>
<ElementScrollFader from="left">
<ContentBox box>
<Title>
{ Language.get("pages.about.work.heading") }
</Title>
<Paragraph>
{ Language.get("pages.about.work.paragraph") }
</Paragraph>
</ContentBox>
</ElementScrollFader>
<ClearSection />{/* Space a bit */}
</PageBoundary>
<PageBoundary>
{/* Title */}
{/* KOPA */}
<SplitSection align="center">
<Split padded>
<ElementScrollFader from="left">
<ContentBox box>
<Title>Some of my work</Title>
<Paragraph>
Interested to see what I can do? Check out some of
my personal favourite projects!
</Paragraph>
</ContentBox>
</ElementScrollFader>
<ExistingWorkFrame
title="KOPA Life"
href="//www.kopalife.com"
src={ require('./../../../images/work-showcase/kopalife.png') }
/>
</Split>
<Split padded>
{/* Empty Space */}
</Split>
</SplitSection>
</PageBoundary>
</Section>
);

4
public/page/about/sections/ProgrammingSection.jsx
View File

@ -39,9 +39,7 @@ export default (props) => {
<Heading1 className="u-text-center">
{ Language.get("pages.about.programming.heading") }
</Heading1>
<Paragraph>
{ Language.get("pages.about.programming.paragraph") }
</Paragraph>
{ Language.get("pages.about.programming.paragraph") }
</ContentBox>
</ElementScrollFader>
</PageBoundary>

8
public/styles/components/_footer.scss
View File

@ -8,13 +8,15 @@
* Version:
* 1.0.0 - 2018/05/16
*/
$c-footer--link-color: red;
$c-footer--shadow: 1.5em;
.c-footer {
padding-top: 4em;
padding-bottom: 6em;
padding-top: 8em;
padding-bottom: 10em;
position: relative;
overflow: hidden;
background-image: url('./../images/patterns/schoolbell.svg');
background-image: url('./../images/banners/palms.svg');
background-size: cover;
@include t-box-shadow(0px, $c-footer--shadow, $c-footer--shadow, 0px, rgba(0, 0, 0, 0.25), true);

12
public/styles/elements/img.scss Normal file
View File

@ -0,0 +1,12 @@
/*
* img
* Sets default styling for image elements
*
* Version:
* 1.0.0 - 2018/06/27
*/
img {
display: inline-block;
max-width: 100%;
border: none;
}

2
public/styles/index.scss
View File

@ -51,6 +51,7 @@
@import './elements/all.scss';
@import './elements/button.scss';
@import './elements/html.scss';
@import './elements/img.scss';
@import './elements/inputs.scss';
@import './elements/_a.scss';
@ -70,6 +71,7 @@
@import './objects/_page-transition.scss';
@import './objects/_title.scss';
@import './objects/_video.scss';
@import './objects/_window95.scss';
//Components
@import './components/_app.scss';

238
public/styles/objects/_window95.scss Normal file
View File

@ -0,0 +1,238 @@
/*
* Window 95
* Windows 95 esque objects
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/06/24
*/
$o-window--color-background: #C0C0C0;
$o-window--color-highlight: #0000BF;
$o-window--color-disabled: #808080;
$o-window--color-title-bar: #000080;
$o-window--font: 'MS PGothic', Verdana, Arial, Helvetica, sans-serif;
$o-window--scale: 1;
$o-window--font-size: 12px * $o-window--scale;
$o-window--one-third: #{"33.333333333%"};//I needed greater accuracy than SCSS provided
@mixin o-window-border($thickness) {
border: (3px * $thickness) solid black;
border-image-source: url('./../images/window/window.svg');
border-image-slice: $o-window--one-third;
}
@mixin o-window-button($thickness) {
border: (2px * $thickness) solid black;
border-image-source: url('./../images/window/button.svg');
border-image-slice: $o-window--one-third;
display: inline-block;
background: $o-window--color-background;
&:not(.is-disabled):active {
border-image-source: url('./../images/window/button-inverted.svg');
}
}
@mixin o-window-frame($thickness) {
border: (2px * $thickness) solid black;
border-image: url('./../images/window/frame.svg') $o-window--one-third repeat;
}
//Classes
.o-window {
@extend %t-dp--shadow;
@include o-window-border($o-window--scale);
background: $o-window--color-background;
font-size: $o-window--font-size;
font-family: $o-window--font;
&__button {
@include o-window-button($o-window--scale);
padding: (1px * $o-window--scale) (5px * $o-window--scale);
border: 1px * $o-window--scale solid transparent;
display: inline-block;
position: relative;
&::first-letter {
text-decoration: underline;
}
}
&__title-bar {
width: 100%;
background: $o-window--color-title-bar;
padding: 2px * $o-window--scale;
&-title {
color: white;
font-weight: bold;
font-family: $o-window--font;
font-size: $o-window--font-size;
cursor: default;
}
&-buttons {
height: 100%;
float: right;
font-size: 0;
}
&-button {
@include o-window-button($o-window--scale);
width: 16px * $o-window--scale;
height: 14px * $o-window--scale;
font-size: $o-window--font-size;
background-image: url('./../images/window/icons.png');
background-position: 0px 0px;
background-size: 48px*$o-window--scale 20px*$o-window--scale;
&.is-disabled {
background-position-y: 10px*$o-window--scale;
}
&--close {
margin-left: 2px * $o-window--scale;
}
&--minimize {
background-position-x: 24px * $o-window--scale;
}
}
}
&__menu-bar {
width: 100%;
overflow: visible;
&-option {
display: inline-block;
position: relative;
}
&-button {
padding: (1px * $o-window--scale) (5px * $o-window--scale);
border: 1px * $o-window--scale solid transparent;
font-family: $o-window--font;
font-size: $o-window--font-size;
cursor: default;
color: black;
&::first-letter {
text-decoration: underline;
}
&:hover {
color: black;
text-decoration: none;
border-bottom-color: #868686;
border-right-color: #868686;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
}
&:active,
&.is-active,
.o-window__menu-bar-option.is-active &
{
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-top-color: #868686;
border-left-color: #868686;
}
.o-window__menu-bar-option.is-disabled & {
color: $o-window--color-disabled;
&:hover,&:active,&.is-active,.o-window__menu-bar.is-active & {
border-right-color: transparent;
border-bottom-color: transparent;
border-top-color: transparent;
border-left-color: transparent;
}
}
}
}
&__context-menu {
@include o-window-border($o-window--scale);
border-top-width: 2px*$o-window--scale;
background: $o-window--color-background;
width: auto;
.o-window__menu-bar-option > & {
position: absolute;
display: none;
}
.o-window__menu-bar-option.is-active > & {
display: block;
}
&-option {
padding-left: 22px*$o-window--scale;
padding-right: 22px*$o-window--scale;
padding-bottom: 3px*$o-window--scale;
padding-top: 1px*$o-window--scale;
white-space: nowrap;
&-title {
font-family: $o-window--font;
font-size: $o-window--font-size;
cursor: default;
&::first-letter {
text-decoration: underline;
}
}
&:hover {
background: $o-window--color-highlight;
color: white;
}
&:first-child > .o-window__context-menu-option-title {
font-weight: bold;
}
&.is-disabled {
color: $o-window--color-disabled;
&:hover {
background: inherit;
color: $o-window--color-disabled;
}
}
}
}
&__frame {
@include o-window-frame($o-window--scale);
}
&__address-bar {
@extend %t-flexbox;
@include t-align-items(center);
&-title {
display: block;
padding-right: 2px;
}
&-frame {
@include t-flex-basis(100%);
}
}
&__input {
display: block;
width: 100%;
background: white;
}
}

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

@ -11,46 +11,12 @@
* 1.0.0 - 2018/06/06
*/
.p-about-page {
background-color: #F7EFE2;
&__promo {
padding: 6em 0;
background-size: 50%;
&-video {
background-size: cover;
background-image: url('./../images/banners/homepage/palms.svg');
}
&-platforms {
background-image: url('./../images/hills-night.svg');
background-size: cover;
background-position: center;
//Image is a bit bright, so we're going to darken it here
position: relative;
&::before {
content:"";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
z-index: 0;
}
> .c-page__boundary {
position: relative;//This is to Z-Index fight the background just a bit.
}
}
&-programming {
background-image: url('./../images/patterns/third-dimension-squiggle.svg');
}
&-work {
background-image: url('./../images/patterns/lemon-triangle.svg');
}
}
@ -83,13 +49,15 @@
height: 100%;
&:hover .p-about-page__brands-image {
@include t-transform(rotate(10deg));
@include t-rotate(10deg);
}
}
&-title {
color: white;
}
&-title { }
}
&__work-link,&__work-link-image {
display: block;
}
/* Media Queries */

65
public/window/AddressBar.jsx Normal file
View File

@ -0,0 +1,65 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { connect } from 'react-redux';
import Frame from './Frame';
import Language from './../language/Language';
class AddressBar extends React.Component {
constructor(props) {
super(props);
}
onChange() {
}
render() {
let clazz = "o-window__address-bar";
return (
<div className={clazz}>
<span className="o-window__address-bar-title">
{ Language.get("window.address") }
</span>
<Frame className="o-window__address-bar-frame">
<input
type="text"
value={this.props.href}
className="o-window__input o-window__address-bar-input"
onChange={ this.onChange.bind(this) }
/>
</Frame>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
code: state.language.code
};
}
export default connect(mapStateToProps)(AddressBar);

53
public/window/ContextMenu.jsx Normal file
View File

@ -0,0 +1,53 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
class ContextMenu extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="o-window__context-menu" ref="menu">
{ this.props.children }
</div>
);
}
}
export default ContextMenu;
const ContextMenuOption = (props) => {
return (
<div className="o-window__context-menu-option">
<div className="o-window__context-menu-option-title">
{ props.title }
</div>
</div>
);
};
export {
ContextMenuOption
}

37
public/window/Frame.jsx Normal file
View File

@ -0,0 +1,37 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
export default (props) => {
let clazz = "o-window__frame";
if(props.className) {
clazz += " " + props.className;
}
return (
<div className={clazz}>
{ props.children }
</div>
);
}

143
public/window/MenuBar.jsx Normal file
View File

@ -0,0 +1,143 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import ContextMenu from './ContextMenu';
import { Link } from 'react-router-dom';
export default (props) => {
return (
<div className="o-window__menu-bar">
{ props.children }
</div>
);
}
class MenuOption extends React.Component {
constructor(props) {
super(props);
//Bound Methods
this.onClickBound = this.onClick.bind(this);
this.onMouseLeaveBound = this.onMouseLeave.bind(this);
this.state = {
open: false,
disabled: props.disabled || false
}
}
hasMenu() {
return this.props.menu;
}
isMenuOpen() { return this.state.open; }
isDisabled() { return this.state.disabled; }
//Event Handlers
onClick() {
if(this.isDisabled()) return;
if(this.hasMenu()) {
this.setState({
open: !this.state.open
});
}
}
onMouseLeave() {
if(!this.hasMenu()) return;
if(!this.isMenuOpen()) return;
this.setState({
open: false
});
}
componentDidMount() {
//Add event listeners
this.refs.button.addEventListener('click', this.onClickBound);
this.refs.option.addEventListener('mouseleave', this.onMouseLeaveBound);
}
componentWillUnmount() {
//Remove event listeners
this.refs.button.removeEventListener('click', this.onClickBound);
this.refs.option.removeEventListener('mouseleave', this.onMouseLeaveBound);
}
//Render method
render() {
let menu;
let button;
if(this.props.menu) {
menu = (
<ContextMenu>
{ this.props.menu }
</ContextMenu>
);
clazz += " has-menu";
}
if(this.props.href) {
button = (
<a href={this.props.href} className="o-window__menu-bar-button" ref="button" target={this.props.target}>
{ this.props.title }
</a>
);
} else if(this.props.to) {
button = (
<Link to={this.props.to} className="o-window__menu-bar-button" ref="button" target={this.props.target}>
{ this.props.title }
</Link>
);
} else {
button = (
<div className="o-window__menu-bar-button" ref="button">
{this.props.title}
</div>
);
}
let clazz = "o-window__menu-bar-option"
if(this.props.disabled) {
clazz += " is-disabled";
}
if(this.state.open) {
clazz += " is-active";
}
return (
<div className={clazz} ref="option">
{ button }
{ menu }
</div>
);
}
};
export {
MenuOption
};

69
public/window/TitleBar.jsx Normal file
View File

@ -0,0 +1,69 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
//Title Bar
export default (props) => {
return (
<div className="o-window__title-bar">
<div className="o-window__title-bar-buttons">
{ props.buttons }
</div>
<div className="o-window__title-bar-title">
{ props.children }
</div>
</div>
);
}
//Buttons
const TitleBarButton = (props) => {
let clz = "o-window__title-bar-button";
if(props.className) clz += " o-window__title-bar-button--"+props.className;
if(props.disabled) clz += " is-disabled";
return (
<div className={clz}>
{ props.children }
</div>
);
}
const Close = (props) => {
return (
<TitleBarButton {...props} className="close" title="Close" />
);
}
const Minimize = (props) => {
return (
<TitleBarButton {...props} className="minimize" title="Minimize" />
);
}
export {
TitleBarButton,
Close,
Minimize
}

53
public/window/Window95.jsx Normal file
View File

@ -0,0 +1,53 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import TitleBar, { Close, Minimize } from './TitleBar';
import MenuBar, { MenuOption } from './MenuBar';
import ContextMenu, { ContextMenuOption } from './ContextMenu';
import Frame from './Frame';
import AddressBar from './AddressBar';
export default (props) => {
return (
<div className="o-window">
{ props.children }
</div>
);
}
export {
TitleBar,
Close,
Minimize,
MenuBar,
MenuOption,
ContextMenu,
ContextMenuOption,
Frame,
AddressBar
}