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

Gatsby sorta converted

Browse Source
This commit is contained in:
Dominic Masters
2020-02-04 21:23:46 +11:00
parent 39ba9cf3ad
commit 3557256d76
80 changed files with 13294 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -62,4 +62,6 @@ dist/
/package-lock.json /package-lock.json
/dist /dist
src/private/data src/private/data
/nbproject/private/ /nbproject/private/
public/
.cache

1
gatsby-browser.js Normal file
View File

@ -0,0 +1 @@
import 'normalize.css';

42
gatsby-config.js Normal file
View File

@ -0,0 +1,42 @@
const path = require('path');
const TSConfig = require('./tsconfig.json');
module.exports = {
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
path: path.join(__dirname, 'src', 'assets', 'images'),
name: 'images'
}
},
'gatsby-plugin-typescript',
'gatsby-plugin-react-helmet',
'gatsby-plugin-styled-components',
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-plugin-alias-imports',
options: {
alias: Object.entries(TSConfig.compilerOptions.paths).reduce((x, [key, value]) => {
let k = key.split('/').filter(f => f && f != '*').join('/');
let v = value.find(v => v).split('/').filter(f => f && f != '*');
return { ...x, [k]: path.resolve(__dirname, TSConfig.compilerOptions.baseUrl, ...v) };
}, {})
}
},
{
resolve: 'gatsby-plugin-google-fonts',
options: {
fonts: [
'Bitter',
'Nanum Gothic'
],
display: 'swap'
}
}
]
}

37
package.json
View File

@ -3,6 +3,11 @@
"version": "7.0.0", "version": "7.0.0",
"description": "Personal website for Dominic \"YourWishes\" Masters.", "description": "Personal website for Dominic \"YourWishes\" Masters.",
"scripts": { "scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -21,7 +26,37 @@
}, },
"homepage": "https://domsplace.com", "homepage": "https://domsplace.com",
"dependencies": { "dependencies": {
"@types/react-helmet": "^5.0.15",
"babel-plugin-styled-components": "^1.10.7",
"gatsby": "^2.18.12",
"gatsby-image": "^2.2.39",
"gatsby-plugin-alias-imports": "^1.0.5",
"gatsby-plugin-google-fonts": "^1.0.1",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-sharp": "^2.4.3",
"gatsby-plugin-styled-components": "^3.1.18",
"gatsby-plugin-typescript": "^2.1.26",
"gatsby-source-filesystem": "^2.1.46",
"gatsby-transformer-sharp": "^2.3.13",
"normalize.css": "^8.0.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"react-hook-form": "^4.8.0",
"styled-components": "^5.0.0",
"yup": "^0.28.1"
}, },
"devDependencies": { "devDependencies": {
} "@types/node": "^13.5.0",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"@types/styled-components": "^4.4.2",
"@types/yup": "^0.26.29"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
} }

25
src/assets/images/branding/cpp/cpp-logo.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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"
width="306px" height="344.35px" viewBox="0 0 306 344.35" enable-background="new 0 0 306 344.35" xml:space="preserve">
<path fill="#00599C" d="M302.107,258.262c2.401-4.159,3.893-8.845,3.893-13.053V99.14c0-4.208-1.49-8.893-3.892-13.052L153,172.175
L302.107,258.262z"/>
<path fill="#004482" d="M166.25,341.193l126.5-73.034c3.644-2.104,6.956-5.737,9.357-9.897L153,172.175L3.893,258.263
c2.401,4.159,5.714,7.793,9.357,9.896l126.5,73.034C147.037,345.401,158.963,345.401,166.25,341.193z"/>
<path fill="#659AD2" d="M302.108,86.087c-2.402-4.16-5.715-7.793-9.358-9.897L166.25,3.156c-7.287-4.208-19.213-4.208-26.5,0
L13.25,76.19C5.962,80.397,0,90.725,0,99.14v146.069c0,4.208,1.491,8.894,3.893,13.053L153,172.175L302.108,86.087z"/>
<g>
<path fill="#FFFFFF" d="M153,274.175c-56.243,0-102-45.757-102-102s45.757-102,102-102c36.292,0,70.139,19.53,88.331,50.968
l-44.143,25.544c-9.105-15.736-26.038-25.512-44.188-25.512c-28.122,0-51,22.878-51,51c0,28.121,22.878,51,51,51
c18.152,0,35.085-9.776,44.191-25.515l44.143,25.543C223.142,254.644,189.294,274.175,153,274.175z"/>
</g>
<g>
<polygon fill="#FFFFFF" points="255,166.508 243.666,166.508 243.666,155.175 232.334,155.175 232.334,166.508 221,166.508
221,177.841 232.334,177.841 232.334,189.175 243.666,189.175 243.666,177.841 255,177.841 "/>
</g>
<g>
<polygon fill="#FFFFFF" points="297.5,166.508 286.166,166.508 286.166,155.175 274.834,155.175 274.834,166.508 263.5,166.508
263.5,177.841 274.834,177.841 274.834,189.175 286.166,189.175 286.166,177.841 297.5,177.841 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

32
src/assets/images/branding/csharp/csharp-logo.svg Normal file
View File

@ -0,0 +1,32 @@
<?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 324.8 365" style="enable-background:new 0 0 324.8 365;" xml:space="preserve">
<style type="text/css">
.st0{fill:#9A4993;}
.st1{fill:#6A1577;}
.st2{fill:#813084;}
.st3{fill:#FFFFFF;}
</style>
<path id="XMLID_3_" class="st0" d="M324.7,107.3c0-6.1-1.3-11.6-4-16.2c-2.6-4.6-6.5-8.4-11.7-11.4c-43.2-24.9-86.5-49.8-129.7-74.7
c-11.7-6.7-22.9-6.5-34.5,0.3c-17.2,10.1-103.4,59.5-129,74.4C5.2,85.8,0,95.1,0,107.3c0,50.1,0,100.3,0,150.4
c0,6,1.3,11.3,3.8,15.9c2.6,4.7,6.6,8.7,11.9,11.8c25.7,14.9,111.8,64.2,129,74.4c11.6,6.8,22.9,7.1,34.5,0.3
c43.2-25,86.5-49.8,129.7-74.7c5.4-3.1,9.3-7,11.9-11.8c2.5-4.6,3.8-9.9,3.8-15.9C324.8,257.7,324.8,157.4,324.7,107.3"/>
<path id="XMLID_4_" class="st1" d="M162.9,182L3.8,273.6c2.6,4.7,6.6,8.7,11.9,11.8c25.7,14.9,111.8,64.2,129,74.4
c11.6,6.8,22.9,7.1,34.5,0.3c43.2-25,86.5-49.8,129.7-74.7c5.4-3.1,9.3-7,11.9-11.8L162.9,182"/>
<path id="XMLID_5_" class="st1" d="M115.8,209.1c9.3,16.2,26.7,27.1,46.6,27.1c20.1,0,37.6-11,46.8-27.4L162.9,182L115.8,209.1"/>
<path id="XMLID_6_" class="st2" d="M324.7,107.3c0-6.1-1.3-11.6-4-16.2L162.9,182L321,273.6c2.5-4.6,3.8-9.9,3.8-15.9
C324.8,257.7,324.8,157.4,324.7,107.3"/>
<path id="XMLID_9_" class="st3" d="M209.2,208.8c-9.2,16.3-26.7,27.4-46.8,27.4c-20,0-37.4-10.9-46.6-27.1
c-4.5-7.9-7.1-16.9-7.1-26.6c0-29.7,24-53.7,53.7-53.7c19.8,0,37.1,10.8,46.4,26.8l46.9-27c-18.7-32.2-53.5-53.9-93.4-53.9
c-59.6,0-107.8,48.3-107.8,107.8c0,19.5,5.2,37.9,14.3,53.7c18.6,32.4,53.5,54.2,93.6,54.2c40.1,0,75.1-21.9,93.7-54.4L209.2,208.8"
/>
<g id="XMLID_32_">
<rect id="XMLID_1_" x="257.8" y="157" class="st3" width="10.7" height="51.7"/>
<rect id="XMLID_30_" x="281.5" y="157" class="st3" width="10.7" height="51.7"/>
<rect id="XMLID_31_" x="269.7" y="145.2" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 445.9865 -103.987)" class="st3" width="10.7" height="51.7"/>
<rect id="XMLID_23_" x="269.7" y="168.8" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 469.6531 -80.3204)" class="st3" width="10.7" height="51.7"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

40
src/assets/images/branding/digitalocean/digitalocean-logo.svg Normal file
View File

@ -0,0 +1,40 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 19.0.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 354 354" style="enable-background:new 0 0 354 354;" xml:space="preserve">
<style type="text/css">
.st0{fill:#0080FF;}
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0080FF;}
</style>
<g id="XMLID_229_">
<g id="XMLID_690_">
<g id="XMLID_691_">
<g>
<g id="XMLID_44_">
<g id="XMLID_48_">
<path id="XMLID_49_" class="st0" d="M177,221.5l0-34.2c36.2,0,64.3-35.9,50.4-74C222.3,99.3,211,88,196.9,82.9 c-38.1-13.8-74,14.2-74,50.4c0,0,0,0,0,0l-34.1,0c0-57.7,55.8-102.7,116.3-83.8c26.4,8.3,47.5,29.3,55.7,55.7 C279.7,165.7,234.7,221.5,177,221.5z"/>
</g>
<polygon id="XMLID_47_" class="st1" points="177.1,187.5 143,187.5 143,153.4 143,153.4 177.1,153.4 177.1,153.4 "/>
<polygon id="XMLID_46_" class="st1" points="143,213.6 116.9,213.6 116.9,213.6 116.9,187.5 143,187.5 143,213.6 "/>
<path id="XMLID_45_" class="st1" d="M116.9,187.5H95c0,0,0,0,0,0v-21.9c0,0,0,0,0,0h21.9c0,0,0,0,0,0V187.5z"/>
</g>
</g>
</g>
</g>
<g id="XMLID_234_">
<path id="XMLID_677_" class="st0" d="M31.2,256.1c-4.4-3.1-10-4.6-16.4-4.6H0.8V296h14.1c6.4,0,12-1.6,16.4-4.9 c2.4-1.7,4.3-4.1,5.7-7.1c1.3-3,2-6.6,2-10.5c0-3.9-0.7-7.4-2-10.4C35.6,260.1,33.7,257.7,31.2,256.1z M9,259h4.4 c4.9,0,8.9,1,12,2.9c3.4,2.1,5.1,6,5.1,11.6c0,5.8-1.7,9.9-5.1,12.1h0c-2.9,1.9-6.9,2.9-11.9,2.9H9V259z"/>
<path id="XMLID_676_" class="st0" d="M48.7,250.9c-1.4,0-2.5,0.5-3.5,1.4c-0.9,0.9-1.4,2-1.4,3.4c0,1.4,0.5,2.5,1.4,3.5 c0.9,0.9,2.1,1.4,3.5,1.4c1.3,0,2.5-0.5,3.5-1.4c0.9-0.9,1.4-2.1,1.4-3.5c0-1.4-0.5-2.5-1.4-3.4C51.2,251.4,50,250.9,48.7,250.9z"/>
<rect id="XMLID_675_" x="44.7" y="264.6" class="st0" width="7.9" height="31.4"/>
<path id="XMLID_670_" class="st0" d="M81.3,267.2c-2.4-2.1-5-3.4-7.9-3.4c-4.4,0-8,1.5-10.8,4.5c-2.8,2.9-4.3,6.7-4.3,11.3 c0,4.4,1.4,8.2,4.2,11.2c2.8,2.9,6.5,4.4,10.8,4.4c3,0,5.7-0.8,7.8-2.5v0.7c0,2.6-0.7,4.6-2.1,6c-1.4,1.4-3.3,2.1-5.7,2.1 c-3.6,0-5.9-1.4-8.7-5.2l-5.4,5.2l0.1,0.2c1.2,1.6,2.9,3.2,5.3,4.7c2.3,1.5,5.3,2.3,8.8,2.3c4.7,0,8.5-1.4,11.3-4.3 c2.8-2.9,4.2-6.7,4.2-11.4v-28.5h-7.8V267.2z M79.2,285.8c-1.4,1.6-3.2,2.3-5.4,2.3c-2.3,0-4-0.8-5.4-2.3c-1.4-1.6-2-3.6-2-6.1 c0-2.6,0.7-4.6,2-6.2c1.3-1.6,3.2-2.3,5.4-2.3c2.3,0,4,0.8,5.4,2.3c1.4,1.6,2.1,3.7,2.1,6.2C81.3,282.2,80.6,284.2,79.2,285.8z"/>
<rect id="XMLID_668_" x="95.8" y="264.6" class="st0" width="7.9" height="31.4"/>
<path id="XMLID_660_" class="st0" d="M99.8,250.9c-1.4,0-2.5,0.5-3.5,1.4c-0.9,0.9-1.4,2-1.4,3.4c0,1.4,0.5,2.5,1.4,3.5 c0.9,0.9,2.1,1.4,3.5,1.4c1.3,0,2.5-0.5,3.5-1.4c0.9-0.9,1.4-2.1,1.4-3.5c0-1.4-0.5-2.5-1.4-3.4 C102.3,251.4,101.2,250.9,99.8,250.9z"/>
<path id="XMLID_652_" class="st0" d="M121,256.1h-7.8v8.5h-4.5v7.2h4.5v13c0,4.1,0.8,7,2.4,8.7c1.6,1.7,4.5,2.5,8.5,2.5 c1.3,0,2.6,0,3.8-0.1l0.4,0v-7.2l-2.7,0.1c-1.9,0-3.1-0.3-3.7-1c-0.6-0.7-0.9-2.1-0.9-4.2v-11.9h7.4v-7.2H121V256.1z"/>
<rect id="XMLID_642_" x="165.4" y="251.4" class="st0" width="7.9" height="44.6"/>
<path id="XMLID_448_" class="st0" d="M253.1,284.8c-1.4,1.6-2.9,3-4,3.7v0c-1.1,0.7-2.5,1.1-4.1,1.1c-2.3,0-4.2-0.8-5.7-2.6 c-1.5-1.7-2.3-4-2.3-6.6c0-2.7,0.8-4.9,2.3-6.6c1.5-1.7,3.4-2.6,5.7-2.6c2.5,0,5.2,1.6,7.5,4.3l5.2-5l0,0 c-3.4-4.4-7.7-6.5-12.9-6.5c-4.3,0-8.1,1.6-11.2,4.7c-3.1,3.1-4.6,7-4.6,11.7s1.6,8.6,4.6,11.7c3.1,3.1,6.8,4.7,11.2,4.7 c5.7,0,10.3-2.5,13.5-7L253.1,284.8z"/>
<path id="XMLID_445_" class="st0" d="M285.6,269c-1.1-1.6-2.6-2.8-4.5-3.7c-1.9-0.9-4.1-1.4-6.5-1.4c-4.4,0-8,1.6-10.7,4.8 c-2.6,3.2-4,7.1-4,11.8c0,4.8,1.5,8.7,4.3,11.7c2.9,3,6.7,4.5,11.4,4.5c5.3,0,9.7-2.2,13-6.4l0.2-0.2l-5.2-5l0,0 c-0.5,0.6-1.2,1.2-1.8,1.8c-0.8,0.7-1.5,1.3-2.3,1.7c-1.2,0.6-2.5,0.9-4,0.9c-2.2,0-4-0.6-5.4-1.9c-1.3-1.2-2.1-2.8-2.3-4.8h20.9 l0.1-2.9c0-2-0.3-4-0.8-5.8C287.5,272.3,286.7,270.6,285.6,269z M268.3,276.4c0.4-1.5,1.1-2.8,2.1-3.7c1.1-1.1,2.5-1.6,4.1-1.6 c1.9,0,3.4,0.5,4.4,1.6c0.9,1,1.5,2.2,1.6,3.7H268.3z"/>
<path id="XMLID_442_" class="st0" d="M315.9,267L315.9,267c-2.4-2-5.7-3.1-9.8-3.1c-2.6,0-5.1,0.6-7.3,1.7c-2.1,1-4.1,2.8-5.4,5 l0.1,0.1l5.1,4.8c2.1-3.3,4.4-4.5,7.5-4.5c1.7,0,3,0.4,4.1,1.3c1,0.9,1.6,2,1.6,3.4v1.5c-2-0.6-3.9-0.9-5.8-0.9 c-3.9,0-7.1,0.9-9.5,2.7c-2.4,1.8-3.6,4.5-3.6,7.9c0,3,1,5.3,3.1,7.1c2.1,1.7,4.6,2.6,7.6,2.6c3,0,5.8-1.2,8.4-3.3v2.6h7.8v-20.2 C319.5,272,318.3,269,315.9,267z M301.9,284c0.9-0.6,2.2-0.9,3.8-0.9c1.9,0,3.9,0.4,6,1.1v3.1c-1.7,1.6-4,2.4-6.8,2.4 c-1.4,0-2.4-0.3-3.2-0.9c-0.7-0.6-1.1-1.3-1.1-2.3C300.6,285.4,301,284.6,301.9,284z"/>
<path id="XMLID_393_" class="st0" d="M349.9,267.6c-2.2-2.5-5.3-3.7-9.2-3.7c-3.1,0-5.7,0.9-7.6,2.7v-1.9h-7.7V296h7.9v-17.3 c0-2.4,0.6-4.3,1.7-5.6c1.1-1.3,2.6-2,4.7-2c1.8,0,3.1,0.6,4.1,1.8c1,1.2,1.5,2.9,1.5,4.9V296h7.9v-18.2 C353.2,273.5,352.1,270,349.9,267.6z"/>
<path id="XMLID_320_" class="st0" d="M155.5,267L155.5,267c-2.4-2-5.7-3.1-9.8-3.1c-2.6,0-5.1,0.6-7.3,1.7c-2.1,1-4.1,2.8-5.4,5 l0.1,0.1l5.1,4.8c2.1-3.3,4.4-4.5,7.5-4.5c1.7,0,3,0.4,4.1,1.3c1,0.9,1.6,2,1.6,3.4v1.5c-2-0.6-3.9-0.9-5.8-0.9 c-3.9,0-7.1,0.9-9.5,2.7c-2.4,1.8-3.6,4.5-3.6,7.9c0,3,1,5.3,3.1,7.1c2.1,1.7,4.6,2.6,7.6,2.6c3,0,5.8-1.2,8.4-3.3v2.6h7.8v-20.2 C159.1,272,157.9,269,155.5,267z M141.5,284c0.9-0.6,2.2-0.9,3.8-0.9c1.9,0,3.9,0.4,6,1.1v3.1c-1.7,1.6-4,2.4-6.8,2.4 c-1.4,0-2.4-0.3-3.2-0.9c-0.7-0.6-1.1-1.3-1.1-2.3C140.2,285.4,140.6,284.6,141.5,284z"/>
<path id="XMLID_235_" class="st0" d="M202,296.7c-12.7,0-23-10.3-23-23s10.3-23,23-23s23,10.3,23,23S214.7,296.7,202,296.7z M202,258.8c-8.2,0-14.9,6.7-14.9,14.9s6.7,14.9,14.9,14.9s14.9-6.7,14.9-14.9S210.2,258.8,202,258.8z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

1
src/assets/images/branding/discord/discord-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240"><style>.st0{fill:#7289DA;}</style><path class="st0" d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path class="st0" d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

12
src/assets/images/branding/google-cloud/google-cloud-logo.svg Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" version="1.1" width="48px" height="48px">
<g id="surface1">
<path style=" fill:#CFD8DC;" d="M 30 13 L 18 13 L 11 24 L 18 35 L 30 35 L 37 24 Z M 24 29 C 21.199219 29 19 26.800781 19 24 C 19 21.199219 21.199219 19 24 19 C 26.800781 19 29 21.199219 29 24 C 29 26.800781 26.800781 29 24 29 Z "/>
<path style=" fill:#2196F3;" d="M 34.800781 7.199219 C 34.300781 6.5 33.5 6 32.601563 6 L 15.398438 6 C 14.5 6 13.699219 6.5 13.199219 7.199219 L 7.398438 16.699219 L 12 24 L 18.300781 14 L 38.898438 14 Z M 16 11 C 15.398438 11 15 10.601563 15 10 C 15 9.398438 15.398438 9 16 9 C 16.601563 9 17 9.398438 17 10 C 17 10.601563 16.601563 11 16 11 Z M 32 11 C 31.398438 11 31 10.601563 31 10 C 31 9.398438 31.398438 9 32 9 C 32.601563 9 33 9.398438 33 10 C 33 10.601563 32.601563 11 32 11 Z "/>
<path style=" fill:#FFC107;" d="M 18.300781 34 L 7.398438 16.800781 L 3.800781 22.699219 C 3.300781 23.5 3.300781 24.601563 3.800781 25.398438 L 13.199219 40.800781 C 13.699219 41.601563 14.5 42 15.398438 42 L 24.5 42 L 29.601563 34 Z M 8 25 C 7.398438 25 7 24.601563 7 24 C 7 23.398438 7.398438 23 8 23 C 8.601563 23 9 23.398438 9 24 C 9 24.601563 8.601563 25 8 25 Z M 16 39 C 15.398438 39 15 38.601563 15 38 C 15 37.398438 15.398438 37 16 37 C 16.601563 37 17 37.398438 17 38 C 17 38.601563 16.601563 39 16 39 Z "/>
<path style=" fill:#1976D2;" d="M 7.398438 16.800781 L 12 24 L 14.398438 20.300781 L 8.5 15 Z "/>
<path style=" fill:#F9A825;" d="M 24.601563 42 L 29.699219 34 L 24.898438 34 L 22.601563 42 Z "/>
<path style=" fill:#DD2C00;" d="M 44.199219 22.699219 L 38.898438 14 L 29.699219 14 L 36 24 L 24.601563 42 L 32.601563 42 C 33.5 42 34.300781 41.5 34.800781 40.800781 L 44.300781 25.398438 C 44.800781 24.5 44.800781 23.5 44.199219 22.699219 Z M 32 39 C 31.398438 39 31 38.601563 31 38 C 31 37.398438 31.398438 37 32 37 C 32.601563 37 33 37.398438 33 38 C 33 38.601563 32.601563 39 32 39 Z M 40 25 C 39.398438 25 39 24.601563 39 24 C 39 23.398438 39.398438 23 40 23 C 40.601563 23 41 23.398438 41 24 C 41 24.601563 40.601563 25 40 25 Z "/>
<path style=" fill:#BF360C;" d="M 38.898438 14 L 29.699219 14 L 32.199219 17.898438 L 40.101563 16 Z "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

64
src/assets/images/branding/graphql/graphql-logo.svg Normal file
View File

@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="GraphQL_Logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<g>
<g>
<g>
<rect x="122" y="-0.4" transform="matrix(-0.866 -0.5 0.5 -0.866 163.3196 363.3136)" fill="#E535AB" width="16.6" height="320.3"/>
</g>
</g>
<g>
<g>
<rect x="39.8" y="272.2" fill="#E535AB" width="320.3" height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="37.9" y="312.2" transform="matrix(-0.866 -0.5 0.5 -0.866 83.0693 663.3409)" fill="#E535AB" width="185" height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="177.1" y="71.1" transform="matrix(-0.866 -0.5 0.5 -0.866 463.3409 283.0693)" fill="#E535AB" width="185" height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="122.1" y="-13" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7903 232.1221)" fill="#E535AB" width="16.6" height="185"/>
</g>
</g>
<g>
<g>
<rect x="109.6" y="151.6" transform="matrix(-0.5 -0.866 0.866 -0.5 266.0828 473.3766)" fill="#E535AB" width="320.3" height="16.6"/>
</g>
</g>
<g>
<g>
<rect x="52.5" y="107.5" fill="#E535AB" width="16.6" height="185"/>
</g>
</g>
<g>
<g>
<rect x="330.9" y="107.5" fill="#E535AB" width="16.6" height="185"/>
</g>
</g>
<g>
<g>
<rect x="262.4" y="240.1" transform="matrix(-0.5 -0.866 0.866 -0.5 126.7953 714.2875)" fill="#E535AB" width="14.5" height="160.9"/>
</g>
</g>
<path fill="#E535AB" d="M369.5,297.9c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C373.5,259.9,379.2,281.2,369.5,297.9"/>
<path fill="#E535AB" d="M90.9,137c-9.6,16.7-31,22.4-47.7,12.8c-16.7-9.6-22.4-31-12.8-47.7c9.6-16.7,31-22.4,47.7-12.8 C94.8,99,100.5,120.3,90.9,137"/>
<path fill="#E535AB" d="M30.5,297.9c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C61.4,320.3,40.1,314.6,30.5,297.9"/>
<path fill="#E535AB" d="M309.1,137c-9.6-16.7-3.9-38,12.8-47.7c16.7-9.6,38-3.9,47.7,12.8c9.6,16.7,3.9,38-12.8,47.7 C340.1,159.4,318.7,153.7,309.1,137"/>
<path fill="#E535AB" d="M200,395.8c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,380.1,219.3,395.8,200,395.8"/>
<path fill="#E535AB" d="M200,74c-19.3,0-34.9-15.6-34.9-34.9c0-19.3,15.6-34.9,34.9-34.9c19.3,0,34.9,15.6,34.9,34.9 C234.9,58.4,219.3,74,200,74"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

18
src/assets/images/branding/heroku/heroku-logo.svg Normal file
View File

@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 5.12 5" preserveAspectRatio="xMinYMin meet" id="svg5418" version="1.1" inkscape:version="0.91 r13725" sodipodi:docname="heroku-icon.svg">
<metadata id="metadata5428">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<defs id="defs5426"/>
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1855" inkscape:window-height="1056" id="namedview5424" showgrid="false" inkscape:zoom="17.088225" inkscape:cx="26.630369" inkscape:cy="16.915906" inkscape:window-x="65" inkscape:window-y="24" inkscape:window-maximized="1" inkscape:current-layer="svg5418"/>
<g id="g5449" transform="matrix(0.01613854,0,0,0.01613854,0.48,6.3727864)">
<path sodipodi:nodetypes="cssssssscc" style="fill:#6762a6" inkscape:connector-curvature="0" id="path5420" d="m 225.628,-77.627 -195.37,0 C 13.545,-77.627 0,-91.172 0,-107.882 l 0,-256.742 c 0,-16.71 13.546,-30.256 30.257,-30.256 l 195.37,0 c 16.71,0 30.26,13.546 30.26,30.256 l 0,256.742 c 0,16.71 -13.55,30.255 -30.26,30.255 z"/>
<path style="fill:#ffffff" inkscape:connector-curvature="0" id="path5422" d="m 160.36,-121.28 0,-125.99 c 0,0 8.195,-30.15 -100.943,12.334 -0.2,0.539 -0.2,-116.504 -0.2,-116.504 l 35.66,-0.22 0,74.991 c 0,0 99.846,-39.325 99.846,29.824 l 0,125.565 -34.362,0 z m 20.32,-184.994 -37.824,0 c 13.615,-16.646 25.94,-45.167 25.94,-45.167 l 39.11,0 c 0,0 -6.696,18.587 -27.225,45.167 z m -120.815,184.776 0,-71.748 35.878,35.877 -35.878,35.871 z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

10
src/assets/images/branding/java/java-logo.svg Normal file
View File

@ -0,0 +1,10 @@
<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" width="300px" height="400px" viewBox="0 0 300 400" style="enable-background:new 0 0 300 550;" xml:space="preserve">
<path style="fill:#5382A1;" d="M102.681,291.324c0,0-14.178,8.245,10.09,11.035c29.4,3.354,44.426,2.873,76.825-3.259 c0,0,8.518,5.341,20.414,9.967C137.38,340.195,45.634,307.264,102.681,291.324"/>
<path style="fill:#5382A1;" d="M93.806,250.704c0,0-15.902,11.771,8.384,14.283c31.406,3.24,56.208,3.505,99.125-4.759 c0,0,5.936,6.018,15.27,9.309C128.771,295.215,30.962,271.562,93.806,250.704"/>
<path style="fill:#E76F00;" d="M168.625,181.799c17.896,20.604-4.702,39.145-4.702,39.145s45.441-23.458,24.572-52.833 c-19.491-27.394-34.438-41.005,46.479-87.934C234.974,80.177,107.961,111.899,168.625,181.799"/>
<path style="fill:#5382A1;" d="M264.684,321.369c0,0,10.492,8.645-11.555,15.333c-41.923,12.7-174.488,16.535-211.314,0.506 c-13.238-5.759,11.587-13.751,19.396-15.428c8.144-1.766,12.798-1.437,12.798-1.437c-14.722-10.371-95.157,20.364-40.857,29.166 C181.236,373.524,303.095,338.695,264.684,321.369"/>
<path style="fill:#5382A1;" d="M109.499,208.617c0,0-67.431,16.016-23.879,21.832c18.389,2.462,55.047,1.905,89.193-0.956 c27.906-2.354,55.927-7.359,55.927-7.359s-9.84,4.214-16.959,9.075c-68.475,18.009-200.756,9.631-162.674-8.79 C83.313,206.851,109.499,208.617,109.499,208.617"/>
<path style="fill:#5382A1;" d="M230.462,276.231c69.608-36.171,37.424-70.931,14.96-66.248c-5.506,1.146-7.961,2.139-7.961,2.139 s2.044-3.202,5.948-4.588c44.441-15.624,78.619,46.081-14.346,70.52C229.063,278.055,230.14,277.092,230.462,276.231"/>
<path style="fill:#E76F00;" d="M188.495,4.399c0,0,38.55,38.563-36.563,97.862c-60.233,47.568-13.735,74.69-0.025,105.678 c-35.159-31.722-60.961-59.647-43.651-85.637C133.663,84.151,204.049,65.654,188.495,4.399"/>
<path style="fill:#5382A1;" d="M116.339,374.246c66.815,4.277,169.417-2.373,171.847-33.988c0,0-4.671,11.985-55.219,21.503 c-57.028,10.732-127.364,9.479-169.081,2.601C63.887,364.361,72.426,371.43,116.339,374.246"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

1
src/assets/images/branding/jquery/jquery-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#0868AC" d="M9.625 32.181c-11.029 15.851-9.656 36.476-1.231 53.32.2.404.41.801.617 1.198l.394.759.246.437.439.786c.262.461.53.92.804 1.379l.459.756c.304.491.615.976.933 1.46l.398.614c.439.655.888 1.309 1.352 1.951l.039.05.228.308c.401.553.814 1.099 1.232 1.639l.464.59c.373.469.752.935 1.138 1.399l.435.52c.518.61 1.047 1.217 1.586 1.812l.033.033.061.068c.527.575 1.066 1.137 1.612 1.699l.517.521c.423.426.853.845 1.287 1.262l.527.5c.58.547 1.166 1.083 1.764 1.607l.028.022.307.262c.527.456 1.063.909 1.603 1.353l.664.529c.441.354.887.702 1.336 1.044l.714.543c.496.365.995.724 1.499 1.075l.546.387.15.107c.478.329.967.646 1.456.963l.63.42c.75.474 1.51.943 2.279 1.396l.63.355c.565.326 1.134.646 1.71.959.312.168.632.327.946.488.407.213.811.429 1.225.636l.283.137.501.242c.641.306 1.287.607 1.94.897l.41.184c.748.327 1.502.641 2.263.941l.551.217c.704.271 1.418.539 2.135.791l.268.093c.787.275 1.581.53 2.381.779l.575.172c.814.245 1.619.538 2.458.693 53.339 9.727 68.833-32.053 68.833-32.053-13.013 16.953-36.111 21.425-57.996 16.446-.829-.187-1.633-.446-2.442-.685l-.609-.185c-.79-.242-1.573-.497-2.352-.765l-.323-.117c-.698-.245-1.387-.504-2.074-.769l-.582-.229c-.752-.297-1.5-.607-2.239-.931l-.447-.198c-.635-.288-1.263-.578-1.889-.879l-.546-.262c-.491-.239-.977-.493-1.461-.743-.324-.171-.654-.332-.975-.51-.592-.317-1.172-.646-1.751-.982l-.591-.33c-.769-.452-1.528-.921-2.28-1.397l-.615-.41c-.545-.351-1.088-.709-1.623-1.079l-.522-.367c-.516-.365-1.027-.734-1.534-1.109l-.679-.514c-.465-.355-.927-.713-1.384-1.082l-.617-.495c-.582-.479-1.156-.959-1.724-1.453l-.189-.159c-.614-.539-1.216-1.092-1.812-1.647l-.511-.491c-.441-.42-.875-.843-1.302-1.277l-.51-.509c-.543-.556-1.076-1.119-1.598-1.69l-.079-.084c-.552-.604-1.092-1.221-1.621-1.844l-.424-.504c-.394-.475-.785-.956-1.167-1.442l-.427-.532c-.459-.596-.908-1.189-1.347-1.794-12.15-16.574-16.516-39.432-6.805-58.204M43.862 18.825c-7.977 11.478-7.543 26.844-1.321 38.983 1.043 2.035 2.216 4.01 3.528 5.889 1.195 1.713 2.52 3.751 4.106 5.127.575.633 1.176 1.251 1.79 1.858l.472.465c.596.578 1.201 1.146 1.828 1.698l.074.064.018.018c.693.608 1.408 1.191 2.135 1.767l.485.378c.729.559 1.472 1.107 2.233 1.631l.065.049c.336.232.678.448 1.019.672l.483.319c.544.349 1.095.689 1.655 1.015l.235.136c.483.278.972.552 1.463.818l.521.271c.339.177.678.358 1.023.53l.155.07c.703.346 1.412.68 2.136.995l.472.194c.579.246 1.164.486 1.75.71l.75.275c.533.198 1.068.378 1.607.559l.727.233c.767.238 1.525.539 2.324.672 41.183 6.823 50.691-24.886 50.691-24.886-8.57 12.343-25.168 18.233-42.879 13.635-.787-.207-1.562-.431-2.333-.674l-.701-.227c-.548-.177-1.092-.365-1.631-.562l-.736-.274c-.592-.228-1.176-.462-1.756-.708l-.473-.2c-.727-.316-1.443-.65-2.148-.999-.363-.177-.72-.364-1.078-.548l-.622-.32c-.458-.248-.914-.506-1.363-.77l-.326-.185c-.558-.325-1.107-.661-1.651-1.008l-.498-.332c-.359-.232-.717-.469-1.069-.707-.759-.524-1.498-1.072-2.226-1.628l-.501-.395c-7.752-6.12-13.898-14.486-16.819-23.971-3.062-9.836-2.402-20.878 2.903-29.84M72.657 8.847c-4.702 6.92-5.164 15.514-1.901 23.156 3.441 8.113 10.491 14.476 18.72 17.495.339.125.679.237 1.022.354l.451.143c.485.152.966.329 1.467.424 22.74 4.394 28.908-11.669 30.549-14.034-5.402 7.779-14.482 9.646-25.623 6.942-.88-.213-1.847-.531-2.695-.832-1.088-.388-2.16-.83-3.201-1.329-1.978-.951-3.864-2.104-5.612-3.424-9.969-7.565-16.162-21.994-9.657-33.745"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

32
src/assets/images/branding/lwjgl/lwjgl-logo.svg Normal file
View File

@ -0,0 +1,32 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 177.8 191.8" style="enable-background:new 0 0 177.8 191.8;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#0A90CB;}
</style>
<g id="Layer_6">
</g>
<g>
<path class="st0" d="M152.6,109c-16.1,47.9-55.9,77.7-88.9,66.6S16.9,116.8,32.9,68.9C49,21,88.8-8.8,121.8,2.3
C154.9,13.4,168.7,61.2,152.6,109z"/>
<path class="st1" d="M149.3,107.3C134.2,152.1,97,180.1,66,169.7c-30.9-10.4-43.8-55.2-28.8-100C52.3,24.8,89.6-3.1,120.5,7.2
C151.5,17.6,164.3,62.4,149.3,107.3z"/>
<path class="st0" d="M171.8,94.5l-48-11.5c-2-0.5-5.2,0.3-7,1.2L127,46.4c0.9-3.5,0.1-7.8-1.8-10.8s-7.5-10.7-9.7-13.6
s-3.9-3.6-6.5-3.7l-36.7-2.1c-4.9-0.3-10,3.6-11.3,8.8L50.8,65.6L19.2,58c-3.8-1-7.7,1.4-8.7,5.5L0.3,104.1c-1,4,1,8.1,4.6,9.8
l142.5,76.6c4.8,2.5,9.2,1.5,10.7-4.5l19.3-77.5C178.9,102.5,176.6,95.8,171.8,94.5z"/>
<g>
<path d="M94.8,133.7c-1,4-4.4,6.1-7.6,4.7l-32-13.9c-3.2-1.4-5.1-5.4-4.2-8.9l8.9-35.2c0.9-3.5,4.3-5.6,7.6-4.7l33.3,8.8
c3.3,0.9,5.2,4.9,4.2,8.9L94.8,133.7z"/>
<g>
<path d="M154.7,159.1c-1.2,4.6-5,7.1-8.7,5.6l-35.6-16.1c-3.6-1.5-5.7-6-4.7-10.2l10.6-42.1c1-4.1,4.9-6.6,8.7-5.7l37.5,9.9
c3.8,1,5.9,5.5,4.7,10.1L154.7,159.1z"/>
<path d="M42.2,111.8c-0.9,3.4-3.6,5.2-6.1,4l-25-11.5c-2.5-1.2-3.9-4.5-3.2-7.4l7.5-29.6c0.7-2.9,3.4-4.7,6.1-4l26.1,7
c2.6,0.7,4,4,3.2,7.4L42.2,111.8z"/>
<path d="M99.5,68.9c-1,3.8-4.3,6.4-7.4,5.6l-31-7.3c-3.1-0.7-5-4-4.1-7.4l8.5-33.7c0.8-3.3,4.2-5.9,7.4-5.6l32.3,2.3
c3.2,0.2,5.1,3.5,4.1,7.4L99.5,68.9z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

30
src/assets/images/branding/monogame/monogame-logo.svg Normal file
View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg version="1.1" baseProfile="basic" id="Í_xBC__xB2_ã_x5F_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 592.2 583.9" xml:space="preserve">
<g>
<g>
<path fill="#393939" d="M71.5,573.4v-56.9L48,573.4h-3.5l-23.4-56.9v56.9h-8.6v-69.1h12.3l21.4,52l21.5-52h12.3v69.1H71.5z"/>
<path fill="#393939" d="M122,574.7c-5.1,0-9.8-0.9-14-2.7c-4.2-1.8-7.8-4.3-10.8-7.5c-3-3.2-5.3-7-7-11.4 c-1.7-4.3-2.5-9.1-2.5-14.2c0-5.1,0.8-9.8,2.5-14.2c1.7-4.4,4-8.1,7-11.4c3-3.2,6.6-5.7,10.8-7.5c4.2-1.8,8.9-2.7,14-2.7 c5.1,0,9.8,0.9,14,2.7c4.2,1.8,7.8,4.3,10.8,7.5c3,3.2,5.3,7,7,11.4c1.7,4.3,2.5,9.1,2.5,14.2c0,5.1-0.8,9.8-2.5,14.2 c-1.7,4.4-4,8.1-7,11.4c-3,3.2-6.6,5.7-10.8,7.5C131.7,573.8,127.1,574.7,122,574.7z M122,567c3.9,0,7.3-0.7,10.5-2.1 c3.1-1.4,5.8-3.4,8-5.9c2.2-2.5,3.9-5.5,5.1-8.9c1.2-3.4,1.8-7.1,1.8-11.1c0-4-0.6-7.7-1.8-11.2c-1.2-3.4-2.9-6.4-5.1-8.9 c-2.2-2.5-4.9-4.4-8-5.8c-3.1-1.4-6.6-2.1-10.5-2.1c-3.9,0-7.4,0.7-10.5,2.1c-3.1,1.4-5.8,3.4-8,5.8c-2.2,2.5-3.9,5.5-5.1,8.9 c-1.2,3.5-1.8,7.2-1.8,11.2c0,4,0.6,7.7,1.8,11.1c1.2,3.4,2.9,6.4,5.1,8.9c2.2,2.5,4.9,4.5,8,5.9C114.6,566.3,118.1,567,122,567z"/>
<path fill="#393939" d="M212.8,573.4l-40.3-55.1v55.1h-8.6v-69.1h8.8l39.8,54v-54h8.6v69.1H212.8z"/>
<path fill="#393939" d="M263.3,574.7c-5.1,0-9.8-0.9-14-2.7c-4.2-1.8-7.8-4.3-10.8-7.5c-3-3.2-5.3-7-7-11.4 c-1.7-4.3-2.5-9.1-2.5-14.2c0-5.1,0.8-9.8,2.5-14.2c1.7-4.4,4-8.1,7-11.4c3-3.2,6.6-5.7,10.8-7.5c4.2-1.8,8.9-2.7,14-2.7 c5.1,0,9.8,0.9,14,2.7c4.2,1.8,7.8,4.3,10.8,7.5c3,3.2,5.3,7,7,11.4c1.7,4.3,2.5,9.1,2.5,14.2c0,5.1-0.8,9.8-2.5,14.2 c-1.7,4.4-4,8.1-7,11.4c-3,3.2-6.6,5.7-10.8,7.5C273.1,573.8,268.4,574.7,263.3,574.7z M263.3,567c3.9,0,7.3-0.7,10.5-2.1 c3.1-1.4,5.8-3.4,8-5.9c2.2-2.5,3.9-5.5,5.1-8.9c1.2-3.4,1.8-7.1,1.8-11.1c0-4-0.6-7.7-1.8-11.2c-1.2-3.4-2.9-6.4-5.1-8.9 c-2.2-2.5-4.9-4.4-8-5.8c-3.1-1.4-6.6-2.1-10.5-2.1c-3.9,0-7.4,0.7-10.5,2.1c-3.1,1.4-5.8,3.4-8,5.8c-2.2,2.5-3.9,5.5-5.1,8.9 c-1.2,3.5-1.8,7.2-1.8,11.2c0,4,0.6,7.7,1.8,11.1c1.2,3.4,2.9,6.4,5.1,8.9c2.2,2.5,4.9,4.5,8,5.9C255.9,566.3,259.4,567,263.3,567 z"/>
<path fill="#E73C00" d="M340.6,574.8c-5,0-9.8-0.8-14.2-2.5c-4.4-1.7-8.4-4.1-11.7-7.2c-3.3-3.1-6-6.9-7.9-11.3 c-1.9-4.4-2.9-9.4-2.9-14.8c0-5.4,1-10.4,2.9-14.8c1.9-4.4,4.6-8.2,7.9-11.3c3.4-3.1,7.3-5.5,11.7-7.1c4.4-1.7,9.2-2.5,14.2-2.5 c3.6,0,6.9,0.4,9.8,1.2c2.9,0.8,5.6,2,7.9,3.4c2.4,1.4,4.4,3.1,6.2,4.9c1.8,1.9,3.4,3.8,4.7,5.9l-12.2,6.6 c-1.6-2.4-3.8-4.5-6.6-6.3c-2.8-1.8-6.1-2.7-9.8-2.7c-3.1,0-6,0.6-8.7,1.7c-2.7,1.1-4.9,2.7-6.9,4.8c-1.9,2-3.4,4.4-4.5,7.2 c-1.1,2.8-1.6,5.8-1.6,9c0,3.3,0.5,6.3,1.6,9.1c1.1,2.8,2.6,5.2,4.5,7.2c1.9,2,4.2,3.6,6.9,4.7c2.7,1.1,5.6,1.7,8.7,1.7 c3.1,0,6-0.6,8.7-1.7c2.6-1.1,4.7-2.3,6.1-3.7v-8.4h-18.2v-12.9h32.9v26.6c-3.5,4-7.7,7.1-12.6,9.5 C352.5,573.6,346.9,574.8,340.6,574.8z"/>
<path fill="#E73C00" d="M426.1,573.4l-4.2-11.7h-29.6l-4.3,11.7h-16.8l26.7-69.1h18.4l26.6,69.1H426.1z M407,519.1l-10.8,29.7 h21.5L407,519.1z"/>
<path fill="#E73C00" d="M506.8,573.4v-48.4l-19.5,48.4h-6.4l-19.5-48.4v48.4h-14.7v-69.1h20.6l16.8,41.7l16.8-41.7h20.7v69.1 H506.8z"/>
<path fill="#E73C00" d="M532.7,573.4v-69.1h48.9v12.9h-34.2v14.6h33.5v12.9h-33.5v15.6h34.2v12.9H532.7z"/>
</g>
<path fill="#E73C00" d="M521.8,212.8v-61.4c0-73.2-59.5-132.7-132.7-132.7c-35.7,0-68.2,14.2-92.1,37.3 c-23.9-23-56.4-37.3-92.1-37.3c-73.2,0-132.7,59.6-132.7,132.7v184.2c0,73.2,59.5,132.7,132.7,132.7h184.2 c73.2,0,132.7-59.5,132.7-132.7v-89.2H256.4v81.2h184.2v8c0,28.4-23.1,51.5-51.5,51.5H204.9c-28.4,0-51.5-23.1-51.5-51.5V151.4 c0-28.4,23.1-51.5,51.5-51.5c28.4,0,51.5,23.1,51.5,51.5v61.4h81.2v-61.4c0-28.4,23.1-51.5,51.5-51.5c28.4,0,51.5,23.1,51.5,51.5 v61.4H521.8z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

47
src/assets/images/branding/mysql/mysql-logo.svg Normal file
View File

@ -0,0 +1,47 @@
<?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 1754.1 1191.2" style="enable-background:new 0 0 1754.1 1191.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#5D87A1;}
.st1{fill:#F8981D;}
</style>
<path class="st0" d="M421.7,1085.2H354c-2.4-114.2-9-221.6-19.8-322.3h-0.6l-103,322.3h-51.5L76.7,762.9h-0.6
c-7.6,96.6-12.4,204.1-14.4,322.3H0c4-143.8,14-278.6,29.9-404.4h83.9L211.5,978h0.6l98.2-297.1h80.3
C408.1,828.2,418.5,963,421.7,1085.2 M715.2,786.9c-27.6,149.5-63.9,258.2-109,326c-35.2,52.2-73.7,78.3-115.6,78.3
c-11.2,0-25-3.4-41.3-10.1v-36.1c8,1.2,17.4,1.8,28.1,1.8c19.6,0,35.3-5.4,47.3-16.2c14.4-13.2,21.5-27.9,21.5-44.3
c0-11.2-5.6-34.2-16.8-68.9l-74.3-230.7h66.5L575,959.4c12,39.2,17,66.5,15,82.1c29.2-77.9,49.5-162.8,61.1-254.6L715.2,786.9
L715.2,786.9L715.2,786.9z"/>
<path class="st1" d="M1616.2,1085.2h-192.3V680.8h64.7v354.6h127.6V1085.2z M1373.6,1095l-74.3-36.7c6.6-5.4,12.9-11.3,18.6-18.1
c31.6-37.1,47.4-92,47.4-164.7c0-133.8-52.5-200.7-157.5-200.7c-51.5,0-91.7,17-120.4,50.9c-31.6,37.1-47.3,91.8-47.3,164.2
c0,71.1,14,123.2,41.9,156.3c25.6,30,64.1,45,115.7,45c19.2,0,36.9-2.4,52.9-7.1l96.8,56.3L1373.6,1095z M1132.8,1004.3
c-16.4-26.3-24.6-68.6-24.6-127c0-101.8,30.9-152.8,92.9-152.8c32.4,0,56.1,12.2,71.3,36.5c16.3,26.4,24.6,68.3,24.6,125.8
c0,102.7-31,154-92.8,154C1171.7,1040.9,1147.9,1028.7,1132.8,1004.3 M1011.7,973.1c0,34.3-12.6,62.4-37.7,84.5
c-25.2,21.9-58.9,32.9-101.2,32.9c-39.5,0-77.9-12.6-115-37.8l17.4-34.7c31.9,16,60.9,23.9,86.8,23.9c24.4,0,43.4-5.4,57.2-16.1
c13.8-10.8,22-25.8,22-44.9c0-24-16.8-44.6-47.5-61.8c-28.3-15.6-85-48.1-85-48.1c-30.7-22.4-46.1-46.4-46.1-86
c0-32.8,11.5-59.2,34.4-79.4c23-20.2,52.6-30.3,89-30.3c37.5,0,71.7,10.1,102.4,30l-15.6,34.7c-26.3-11.2-52.2-16.8-77.8-16.8
c-20.7,0-36.7,5-47.9,15c-11.2,10-18.1,22.7-18.1,38.4c0,23.9,17.1,44.7,48.7,62.2c28.7,15.6,86.8,48.7,86.8,48.7
C996,910,1011.7,933.9,1011.7,973.1"/>
<path class="st0" d="M1697.3,545.4c-39.1-1-69.4,2.9-94.8,13.7c-7.3,2.9-19,2.9-20,12.2c4,3.9,4.4,10.3,7.9,15.7
c5.9,9.8,16.1,22.9,25.4,29.8c10.2,7.8,20.5,15.6,31.3,22.5c19,11.8,40.5,18.6,59.1,30.3c10.8,6.8,21.5,15.6,32.3,23
c5.3,3.9,8.7,10.3,15.6,12.7v-1.5c-3.5-4.4-4.4-10.8-7.8-15.6l-14.7-14.2c-14.2-19-31.8-35.7-50.8-49.3
c-15.6-10.8-49.9-25.4-56.2-43.4l-1-1c10.8-1,23.5-4.9,33.7-7.9c16.6-4.4,31.8-3.4,48.8-7.8c7.8-2,15.6-4.4,23.5-6.8v-4.4
c-8.8-8.8-15.1-20.5-24.4-28.8c-24.9-21.5-52.3-42.5-80.6-60.1c-15.2-9.8-34.7-16.1-50.8-24.4c-5.8-2.9-15.6-4.4-19.1-9.3
c-8.8-10.8-13.7-24.9-20-37.6c-14.1-26.9-27.8-56.6-40-85c-8.8-19-14.2-38.1-24.9-55.7c-50.4-83-105-133.4-189.1-182.7
c-18.1-10.3-39.5-14.7-62.5-20l-36.7-1.9c-7.8-3.4-15.7-12.7-22.5-17.1c-27.9-17.6-99.7-55.7-120.2-5.4
c-13.2,31.8,19.5,63.1,30.8,79.2c8.3,11.2,19.1,23.9,24.9,36.6c3.4,8.3,4.4,17.1,7.8,25.9c7.8,21.5,15.1,45.4,25.4,65.5
c5.4,10.2,11.2,21,18.1,30.2c3.9,5.4,10.8,7.8,12.2,16.6c-6.8,9.7-7.4,24.4-11.3,36.6c-17.6,55.2-10.7,123.6,14.2,164.2
c7.8,12.2,26.4,39.1,51.3,28.8c22-8.8,17.1-36.6,23.5-61.1c1.5-5.9,0.5-9.8,3.4-13.6v1c6.8,13.7,13.7,26.8,20,40.5
c15.2,23.9,41.6,48.8,63.5,65.4c11.7,8.8,21,24,35.6,29.4v-1.5h-1c-3-4.4-7.3-6.3-11.2-9.7c-8.8-8.8-18.6-19.6-25.4-29.3
c-20.5-27.4-38.6-57.7-54.7-88.9c-7.9-15.2-14.7-31.8-21-46.9c-3-5.8-3-14.7-7.9-17.6c-7.4,10.7-18.1,20-23.4,33.2
c-9.3,21-10.3,46.9-13.7,73.8l-1.9,0.9c-15.6-3.9-21-20-26.9-33.7c-14.6-34.7-17.1-90.4-4.4-130.5c3.4-10.2,18.1-42.5,12.2-52.2
c-2.9-9.4-12.7-14.7-18.1-22c-6.3-9.3-13.2-21-17.6-31.3c-11.7-27.3-17.6-57.7-30.2-85c-5.9-12.7-16.1-25.9-24.4-37.7
c-9.3-13.2-19.6-22.5-26.9-38.1c-2.4-5.4-5.8-14.2-1.9-20c1-3.9,2.9-5.4,6.8-6.4c6.3-5.3,24.4,1.5,30.8,4.4
c18.1,7.3,33.3,14.2,48.4,24.4c6.8,4.9,14.2,14.2,23,16.6h10.3c15.6,3.4,33.2,0.9,47.9,5.4c25.9,8.3,49.3,20.5,70.4,33.7
c64,40.6,116.8,98.2,152.4,167.1c5.8,11.2,8.3,21.5,13.7,33.2c10.3,24,23,48.4,33.2,71.8c10.3,23,20,46.4,34.7,65.5
c7.3,10.3,36.7,15.6,49.9,21c9.7,4.4,24.9,8.3,33.7,13.7c16.6,10.2,33.2,22,48.8,33.3C1671.4,523.4,1695.9,535.6,1697.3,545.4
M1199,120.8c-6.7-0.1-13.5,0.8-20,2.5v1h0.9c3.9,7.8,10.8,13.2,15.7,20c3.9,7.8,7.4,15.6,11.2,23.4l0.9-1
c6.9-4.9,10.3-12.7,10.3-24.4c-3-3.5-3.4-6.8-5.9-10.3C1209.3,127.2,1202.9,124.7,1199,120.8"/>
<path class="st1" d="M1743.9,1085.2h10.1v-49.5h-15.2l-12.4,33.8l-13.5-33.8h-14.6v49.5h9.6v-37.7h0.5l14.1,37.7h7.3l14-37.7
L1743.9,1085.2L1743.9,1085.2z M1662.3,1085.2h10.7V1044h14v-8.4h-39.3v8.4h14.6L1662.3,1085.2L1662.3,1085.2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

13
src/assets/images/branding/neto/neto-logo.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 19.2.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 505 194" style="enable-background:new 0 0 505 194;" xml:space="preserve">
<style type="text/css">
.st0{fill:#45C0EF;}
</style>
<g id="Vector_Smart_Object">
<path class="st0" d="M71,46.4c-7.8,0-15.5,1.4-22.6,4.6c-4.1,1.9-7.9,4.4-11.3,7.3v-4.5c0-8.3-6-6.7-15.9-6.7 c-9.8,0-15.4-1.4-15.4,6.8v129.3c0,7.9,5.6,6.5,15.1,6.5S38,191,38,183.3v-56.8c0-11.5,1-28.5,7.6-38.3c5.4-7.9,13.7-10.5,23-10.5 c8.3,0,16.4,2,21.7,8.9c6,7.8,7.2,20.1,7.2,29.6V183c0,7.6,6,6.6,15.7,6.6c10.2,0,16.7,1.2,16.7-6.9v-71.9c0-17-3.5-34.5-15.2-47.5 C103.3,50.8,87.6,46.4,71,46.4"/>
<path class="st0" d="M349.7,46.7h-15.3V12.8c0-6.9-4.1-8.6-16.1-8.6c-11.9,0-16.1,1.9-16.1,8.6v33.9h-18.8c-5.4,0-5.2,5.9-5.2,13.8 c0,8.3-0.7,16.6,5.4,16.6h18.6l0,0v106.7c0,7,7.7,5.9,16.6,5.9c9.6,0,15.6,1.5,15.6-6.1V77.1h16c6.9,0,7.1-4.8,7.1-14.9 C357.5,51.2,357.6,46.7,349.7,46.7"/>
<path class="st0" d="M268.4,122c-3.5-1.1-7.1-0.7-10.4,1.1c-3.3,1.8-5.5,4.5-6.6,8c-1.3,4.2-3.2,8.1-5.7,11.7l0,0 c0,0-1.5,2.2-2.3,3.2c-3.7,4.6-8.3,8.2-13.4,11c-4.7,2.5-9.7,4.2-15,4.9c-5.1,0.7-10.3,0.5-15.4-0.6c-5-1.1-9.8-3-14.2-5.7 c-12.2-7.5-21.1-25.1-20.7-39.3c0.6-21,17.1-39.7,38-42.3c2-0.2,4-0.4,5.9-0.3h-0.1c-0.3,0-0.5-0.1-0.8-0.1c0.1,0,0.1,0,0.2,0 c0.2,0,0.4,0.1,0.6,0.1h0.1l0,0c10.7,0.1,21.4,3.8,29.6,10.8l1.2,1l-1.3,0.7c-16.6,9.1-33.2,18.2-49.8,27.4c-3.6,2-6.6,5.1-7.8,9.1 c-0.7,2.4-0.7,5,0,7.4l0,0c0.3,1,0.7,1.9,1.2,2.8c1.8,3.1,4.7,5.4,8.2,6.3c4.2,1.1,8.6,0,12.4-2.1l64.2-35.2 c3.2-1.7,5.3-4.5,6.6-7.8c4.4-11.5-14-28-20.3-32.8c-7-5.3-14.8-9.2-22.9-11.6l0,0c-27.3-8.2-58.3,0.1-76.8,23.8 c-11.4,14.7-17.1,32.8-15.3,51.4c0.9,9.5,3.8,18.6,8.3,27c4.7,8.6,10.8,16.3,18.5,22.4c7.3,5.7,15.4,10,24.3,12.5 c8.8,2.5,17.9,3.2,27,2.3c9.5-1,18.5-3.9,26.9-8.5c8.4-4.5,16.3-10.2,22.5-17.4c6.2-7,10.1-15.5,12.3-24.5c1-3.5,0.6-7.1-1.1-10.2 C274.8,125.4,272,123.1,268.4,122"/>
<path class="st0" d="M494.4,90.3c-3.8-8.5-9-16.2-15.5-22.8c-6.5-6.5-14.2-11.7-22.6-15.5c-5.9-2.6-12.1-4.4-18.5-5.2 c0.8,0.3-0.1,0,0,0c-0.1,0-0.2-0.1-0.2-0.1c-2.9-0.4-5.7-0.6-8.7-0.6h-0.1h-0.1c-9.8,0.4-19.4,2.4-28.5,6.4 c-8.5,3.7-16.3,8.8-22.8,15.4c-6.5,6.5-11.5,14.1-15.1,22.6c-3.8,8.8-5.5,18.2-5.5,27.8c0,9.8,1.7,19.5,5.7,28.5 c3.6,8.5,8.8,16.2,15.5,22.6c6.6,6.4,14.2,11.4,22.7,14.8c7.7,3.2,15.8,4.9,24.1,5.3c0.1,0,2.6,0,3.7,0c9.7,0,19.3-1.8,28.2-5.7 c8.5-3.7,16.2-8.8,22.7-15.4c6.4-6.6,11.5-14.2,15.2-22.6c3.8-8.7,5.7-18,5.7-27.5C500.2,108.6,498.3,99.1,494.4,90.3 M464.5,144.1 c-1.4,1.9-2.9,3.7-4.6,5.4c-4.1,4.1-8.9,7.3-14.3,9.5c-5.5,2.3-11.3,3.5-17.3,3.5c-5.9,0-11.7-1.1-17.2-3.4 c-5.3-2.3-10.1-5.5-14.2-9.5c-4.1-4.1-7.3-8.9-9.5-14.1c-2.4-5.4-3.5-11.2-3.5-17.2s1.2-11.8,3.5-17.3c2.3-5.3,5.4-10.2,9.5-14.3 c4.1-4.1,8.9-7.3,14.2-9.5c4.4-1.9,9.1-3,13.8-3.3c-1.3-0.1-1.3-0.1,0.1,0h-0.1c0,0,2.3-0.1,3.3-0.1c6,0,11.8,1.1,17.3,3.5 c5.3,2.3,10.1,5.4,14.3,9.5c4.1,4.1,7.3,8.9,9.5,14.3c2.3,5.5,3.4,11.3,3.4,17.3c0,5.9-1.1,11.7-3.4,17.2 C468.1,138.5,466.5,141.4,464.5,144.1C464.6,144.1,464.6,144.1,464.5,144.1C464.6,144.1,464.6,144.1,464.5,144.1L464.5,144.1z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

1
src/assets/images/branding/nodejs/nodejs-logo.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 5.8 KiB

18
src/assets/images/branding/opengl/opengl-logo.svg Normal file
View File

@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1" width="1357" height="563">
<g
>
<path
d="M184 315c4 11 8 22 15 31a75 75 0 0 0 64 30c14 0 27-2 37-8 11-6 20-13 26-22 7-9 12-20 15-31a131 131 0 0 0 0-70c-3-11-8-21-15-31a75 75 0 0 0-63-30c-15 0-27 3-38 8-10 6-19 13-26 22-7 10-11 20-15 31a131 131 0 0 0 0 70zm-29-81c5-15 12-28 22-39 9-11 21-20 36-27 14-7 31-10 50-10s35 3 50 10a105 105 0 0 1 57 66 147 147 0 0 1 0 92 104 104 0 0 1-58 66c-14 7-30 10-49 10s-36-3-50-10c-15-7-27-16-36-27-10-11-17-24-22-39a147 147 0 0 1 0-92M515 301c-2-7-5-12-9-18a45 45 0 0 0-36-17c-8 0-15 2-21 5-6 4-11 8-14 13-4 5-7 11-9 18a85 85 0 0 0 1 42c1 6 4 12 8 18 4 5 9 9 15 12s13 5 22 5a40 40 0 0 0 36-18l7-18c2-7 2-14 2-22l-2-20zm-90-53v20c5-8 11-14 20-18 9-3 18-5 29-5a62 62 0 0 1 53 23c5 7 10 16 13 25a100 100 0 0 1 0 60c-3 9-7 17-13 24s-13 13-22 17a72 72 0 0 1-43 5l-14-4-12-7-11-11v77h-25V248h25M667 292a42 42 0 0 0-23-22c-5-3-11-4-17-4-7 0-12 1-18 4a41 41 0 0 0-22 22l-4 16h88l-4-16zm6 95c-11 9-26 13-43 13-12 0-23-2-32-6a62 62 0 0 1-36-41c-3-9-5-20-5-31s1-22 5-31 8-18 15-24a68 68 0 0 1 51-22c14 0 25 2 34 8 9 5 16 12 22 21 5 8 9 17 11 27l3 29H583c0 7 1 13 3 19a42 42 0 0 0 23 26c6 3 14 4 22 4 10 0 19-3 26-7 7-5 11-12 13-22h25c-3 16-11 29-22 37M738 248v24c11-18 28-27 50-27 10 0 19 1 25 4 7 2 13 6 17 11s7 10 8 17c2 7 3 14 3 22v98h-25V296c0-9-3-16-9-22-5-5-13-8-22-8-8 0-15 2-20 4-6 2-11 5-14 10-4 4-7 9-9 14-2 6-2 12-2 19v84h-26V248h24M1016 395c-12 5-23 8-35 8-18 0-35-4-49-10a106 106 0 0 1-61-64 144 144 0 0 1 0-97c6-15 13-28 23-39s23-20 37-26a123 123 0 0 1 117 12 88 88 0 0 1 34 61h-50c-4-13-10-23-19-29-9-7-19-10-32-10-12 0-22 2-30 6-9 5-15 11-20 19-6 7-9 16-12 25a125 125 0 0 0 0 59c3 9 6 18 12 25a57 57 0 0 0 50 25c17 0 31-5 40-13 10-9 15-21 17-38h-53v-38h101v126h-34l-5-26c-10 12-20 20-31 24M1171 163v191h117v43h-170V163h53"
fill="white"
/>
<path
d="M923 426c-81 48-201 75-335 75-242 0-439-98-439-220 0-121 197-220 439-220 134 0 255 28 335 76A646 646 0 0 0 499 0C223 0 0 126 0 281s223 281 499 282c179 0 336-57 424-137"
fill="white"
/>
<path
fill="white"
d="M1331 374h3l3-1 1-2-1-2-3-1h-3v6zm-6-10h11c3 0 5 0 6 2 2 1 2 2 2 4l-1 5-5 2 2 1 2 2 4 7h-7l-5-8-2-1h-1v9h-6v-23zm28 12c0-5-2-10-5-13-4-3-8-5-13-5-4 0-9 2-12 5-4 3-5 8-5 13 0 4 1 9 5 12 3 4 8 5 12 5 5 0 9-1 13-5 3-3 5-8 5-12zm4 0l-3 11a22 22 0 0 1-19 10 22 22 0 0 1-19-10 22 22 0 0 1 0-22 22 22 0 0 1 19-11 22 22 0 0 1 19 11c2 3 3 7 3 11"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

20
src/assets/images/branding/pgsql/pgsql-logo.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="432.071pt" height="445.383pt" viewBox="0 0 432.071 445.383" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g id="orginal" style="fill-rule:nonzero;clip-rule:nonzero;stroke:#000000;stroke-miterlimit:4;">
</g>
<g id="Layer_x0020_3" style="fill-rule:nonzero;clip-rule:nonzero;fill:none;stroke:#FFFFFF;stroke-width:12.4651;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;">
<path style="fill:#000000;stroke:#000000;stroke-width:37.3953;stroke-linecap:butt;stroke-linejoin:miter;" d="M323.205,324.227c2.833-23.601,1.984-27.062,19.563-23.239l4.463,0.392c13.517,0.615,31.199-2.174,41.587-7c22.362-10.376,35.622-27.7,13.572-23.148c-50.297,10.376-53.755-6.655-53.755-6.655c53.111-78.803,75.313-178.836,56.149-203.322 C352.514-5.534,262.036,26.049,260.522,26.869l-0.482,0.089c-9.938-2.062-21.06-3.294-33.554-3.496c-22.761-0.374-40.032,5.967-53.133,15.904c0,0-161.408-66.498-153.899,83.628c1.597,31.936,45.777,241.655,98.47,178.31 c19.259-23.163,37.871-42.748,37.871-42.748c9.242,6.14,20.307,9.272,31.912,8.147l0.897-0.765c-0.281,2.876-0.157,5.689,0.359,9.019c-13.572,15.167-9.584,17.83-36.723,23.416c-27.457,5.659-11.326,15.734-0.797,18.367c12.768,3.193,42.305,7.716,62.268-20.224 l-0.795,3.188c5.325,4.26,4.965,30.619,5.72,49.452c0.756,18.834,2.017,36.409,5.856,46.771c3.839,10.36,8.369,37.05,44.036,29.406c29.809-6.388,52.6-15.582,54.677-101.107"/>
<path style="fill:#336791;stroke:none;" d="M402.395,271.23c-50.302,10.376-53.76-6.655-53.76-6.655c53.111-78.808,75.313-178.843,56.153-203.326c-52.27-66.785-142.752-35.2-144.262-34.38l-0.486,0.087c-9.938-2.063-21.06-3.292-33.56-3.496c-22.761-0.373-40.026,5.967-53.127,15.902 c0,0-161.411-66.495-153.904,83.63c1.597,31.938,45.776,241.657,98.471,178.312c19.26-23.163,37.869-42.748,37.869-42.748c9.243,6.14,20.308,9.272,31.908,8.147l0.901-0.765c-0.28,2.876-0.152,5.689,0.361,9.019c-13.575,15.167-9.586,17.83-36.723,23.416 c-27.459,5.659-11.328,15.734-0.796,18.367c12.768,3.193,42.307,7.716,62.266-20.224l-0.796,3.188c5.319,4.26,9.054,27.711,8.428,48.969c-0.626,21.259-1.044,35.854,3.147,47.254c4.191,11.4,8.368,37.05,44.042,29.406c29.809-6.388,45.256-22.942,47.405-50.555 c1.525-19.631,4.976-16.729,5.194-34.28l2.768-8.309c3.192-26.611,0.507-35.196,18.872-31.203l4.463,0.392c13.517,0.615,31.208-2.174,41.591-7c22.358-10.376,35.618-27.7,13.573-23.148z"/>
<path d="M215.866,286.484c-1.385,49.516,0.348,99.377,5.193,111.495c4.848,12.118,15.223,35.688,50.9,28.045c29.806-6.39,40.651-18.756,45.357-46.051c3.466-20.082,10.148-75.854,11.005-87.281"/>
<path d="M173.104,38.256c0,0-161.521-66.016-154.012,84.109c1.597,31.938,45.779,241.664,98.473,178.316c19.256-23.166,36.671-41.335,36.671-41.335"/>
<path d="M260.349,26.207c-5.591,1.753,89.848-34.889,144.087,34.417c19.159,24.484-3.043,124.519-56.153,203.329"/>
<path style="stroke-linejoin:bevel;" d="M348.282,263.953c0,0,3.461,17.036,53.764,6.653c22.04-4.552,8.776,12.774-13.577,23.155c-18.345,8.514-59.474,10.696-60.146-1.069c-1.729-30.355,21.647-21.133,19.96-28.739c-1.525-6.85-11.979-13.573-18.894-30.338 c-6.037-14.633-82.796-126.849,21.287-110.183c3.813-0.789-27.146-99.002-124.553-100.599c-97.385-1.597-94.19,119.762-94.19,119.762"/>
<path d="M188.604,274.334c-13.577,15.166-9.584,17.829-36.723,23.417c-27.459,5.66-11.326,15.733-0.797,18.365c12.768,3.195,42.307,7.718,62.266-20.229c6.078-8.509-0.036-22.086-8.385-25.547c-4.034-1.671-9.428-3.765-16.361,3.994z"/>
<path d="M187.715,274.069c-1.368-8.917,2.93-19.528,7.536-31.942c6.922-18.626,22.893-37.255,10.117-96.339c-9.523-44.029-73.396-9.163-73.436-3.193c-0.039,5.968,2.889,30.26-1.067,58.548c-5.162,36.913,23.488,68.132,56.479,64.938"/>
<path style="fill:#FFFFFF;stroke-width:4.155;stroke-linecap:butt;stroke-linejoin:miter;" d="M172.517,141.7c-0.288,2.039,3.733,7.48,8.976,8.207c5.234,0.73,9.714-3.522,9.998-5.559c0.284-2.039-3.732-4.285-8.977-5.015c-5.237-0.731-9.719,0.333-9.996,2.367z"/>
<path style="fill:#FFFFFF;stroke-width:2.0775;stroke-linecap:butt;stroke-linejoin:miter;" d="M331.941,137.543c0.284,2.039-3.732,7.48-8.976,8.207c-5.238,0.73-9.718-3.522-10.005-5.559c-0.277-2.039,3.74-4.285,8.979-5.015c5.239-0.73,9.718,0.333,10.002,2.368z"/>
<path d="M350.676,123.432c0.863,15.994-3.445,26.888-3.988,43.914c-0.804,24.748,11.799,53.074-7.191,81.435"/>
<path style="stroke-width:3;" d="M0,60.232"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

96
src/assets/images/branding/php/php-logo.svg Normal file
View File

@ -0,0 +1,96 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg height="383.5975" id="svg3430" version="1.1" viewBox="0 0 711.20123 383.5975" width="711.20123" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg">
<title id="title3510">Official PHP Logo</title>
<metadata id="metadata3436">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title>Official PHP Logo</dc:title>
<dc:creator>
<cc:Agent>
<dc:title>Colin Viebrock</dc:title>
</cc:Agent>
</dc:creator>
<dc:description/>
<dc:contributor>
<cc:Agent>
<dc:title/>
</cc:Agent>
</dc:contributor>
<cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/"/>
<dc:rights>
<cc:Agent>
<dc:title>Copyright Colin Viebrock 1997 - All rights reserved.</dc:title>
</cc:Agent>
</dc:rights>
<dc:date>1997</dc:date>
</cc:Work>
<cc:License rdf:about="http://creativecommons.org/licenses/by-sa/3.0/">
<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
<cc:requires rdf:resource="http://creativecommons.org/ns#Notice"/>
<cc:requires rdf:resource="http://creativecommons.org/ns#Attribution"/>
<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
<cc:requires rdf:resource="http://creativecommons.org/ns#ShareAlike"/>
</cc:License>
</rdf:RDF>
</metadata>
<defs id="defs3434">
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath3444">
<path d="M 11.52,162 C 11.52,81.677 135.307,16.561 288,16.561 l 0,0 c 152.693,0 276.481,65.116 276.481,145.439 l 0,0 c 0,80.322 -123.788,145.439 -276.481,145.439 l 0,0 C 135.307,307.439 11.52,242.322 11.52,162" id="path3446"/>
</clipPath>
<radialGradient cx="0" cy="0" fx="0" fy="0" gradientTransform="matrix(363.05789,0,0,-363.05789,177.52002,256.30713)" gradientUnits="userSpaceOnUse" id="radialGradient3452" r="1" spreadMethod="pad">
<stop id="stop3454" offset="0" style="stop-opacity:1;stop-color:#aeb2d5"/>
<stop id="stop3456" offset="0.3" style="stop-opacity:1;stop-color:#aeb2d5"/>
<stop id="stop3458" offset="0.75" style="stop-opacity:1;stop-color:#484c89"/>
<stop id="stop3460" offset="1" style="stop-opacity:1;stop-color:#484c89"/>
</radialGradient>
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath3468">
<path d="M 0,324 576,324 576,0 0,0 0,324 Z" id="path3470"/>
</clipPath>
<clipPath clipPathUnits="userSpaceOnUse" id="clipPath3480">
<path d="M 0,324 576,324 576,0 0,0 0,324 Z" id="path3482"/>
</clipPath>
</defs>
<g id="g3438" transform="matrix(1.25,0,0,-1.25,-4.4,394.29875)">
<g id="g3440">
<g clip-path="url(#clipPath3444)" id="g3442">
<g id="g3448">
<g id="g3450">
<path d="M 11.52,162 C 11.52,81.677 135.307,16.561 288,16.561 l 0,0 c 152.693,0 276.481,65.116 276.481,145.439 l 0,0 c 0,80.322 -123.788,145.439 -276.481,145.439 l 0,0 C 135.307,307.439 11.52,242.322 11.52,162" id="path3462" style="fill:url(#radialGradient3452);stroke:none"/>
</g>
</g>
</g>
</g>
<g id="g3464">
<g clip-path="url(#clipPath3468)" id="g3466">
<g id="g3472" transform="translate(288,27.3594)">
<path d="M 0,0 C 146.729,0 265.68,60.281 265.68,134.641 265.68,209 146.729,269.282 0,269.282 -146.729,269.282 -265.68,209 -265.68,134.641 -265.68,60.281 -146.729,0 0,0" id="path3474" style="fill:#777bb3;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
</g>
</g>
<g id="g3476">
<g clip-path="url(#clipPath3480)" id="g3478">
<g id="g3484" transform="translate(161.7344,145.3066)">
<path d="m 0,0 c 12.065,0 21.072,2.225 26.771,6.611 5.638,4.341 9.532,11.862 11.573,22.353 1.903,9.806 1.178,16.653 -2.154,20.348 C 32.783,53.086 25.417,55 14.297,55 L -4.984,55 -15.673,0 0,0 Z m -63.063,-67.75 c -0.895,0 -1.745,0.4 -2.314,1.092 -0.57,0.691 -0.801,1.601 -0.63,2.48 L -37.679,81.573 C -37.405,82.982 -36.17,84 -34.734,84 L 26.32,84 C 45.508,84 59.79,78.79 68.767,68.513 77.792,58.182 80.579,43.741 77.05,25.592 75.614,18.198 73.144,11.331 69.709,5.183 66.27,-0.972 61.725,-6.667 56.198,-11.747 49.582,-17.939 42.094,-22.429 33.962,-25.071 25.959,-27.678 15.681,-29 3.414,-29 l -24.722,0 -7.06,-36.322 c -0.274,-1.41 -1.508,-2.428 -2.944,-2.428 l -31.751,0 z" id="path3486" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g3488" transform="translate(159.2236,197.3071)">
<path d="m 0,0 16.808,0 c 13.421,0 18.083,-2.945 19.667,-4.7 2.628,-2.914 3.124,-9.058 1.435,-17.767 C 36.012,-32.217 32.494,-39.13 27.452,-43.012 22.29,-46.986 13.898,-49 2.511,-49 L -9.523,-49 0,0 Z m 28.831,35 -61.055,0 c -2.872,0 -5.341,-2.036 -5.889,-4.855 l -28.328,-145.751 c -0.342,-1.759 0.12,-3.578 1.259,-4.961 1.14,-1.383 2.838,-2.183 4.63,-2.183 l 31.75,0 c 2.873,0 5.342,2.036 5.89,4.855 l 6.588,33.895 22.249,0 c 12.582,0 23.174,1.372 31.479,4.077 8.541,2.775 16.399,7.48 23.354,13.984 5.752,5.292 10.49,11.232 14.08,17.657 3.591,6.427 6.171,13.594 7.668,21.302 3.715,19.104 0.697,34.402 -8.969,45.466 C 63.965,29.444 48.923,35 28.831,35 m -45.633,-90 19.313,0 c 12.801,0 22.336,2.411 28.601,7.234 6.266,4.824 10.492,12.875 12.688,24.157 2.101,10.832 1.144,18.476 -2.871,22.929 C 36.909,3.773 28.87,6 16.808,6 L -4.946,6 -16.802,-55 M 28.831,29 C 47.198,29 60.597,24.18 69.019,14.539 77.44,4.898 79.976,-8.559 76.616,-25.836 75.233,-32.953 72.894,-39.46 69.601,-45.355 66.304,-51.254 61.999,-56.648 56.679,-61.539 50.339,-67.472 43.296,-71.7 35.546,-74.218 27.796,-76.743 17.925,-78 5.925,-78 l -27.196,0 -7.531,-38.75 -31.75,0 28.328,145.75 61.055,0" id="path3490" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g3492" transform="translate(311.583,116.3066)">
<path d="m 0,0 c -0.896,0 -1.745,0.4 -2.314,1.092 -0.571,0.691 -0.802,1.6 -0.631,2.48 L 9.586,68.061 C 10.778,74.194 10.484,78.596 8.759,80.456 7.703,81.593 4.531,83.5 -4.848,83.5 L -27.55,83.5 -43.305,2.428 C -43.579,1.018 -44.814,0 -46.25,0 l -31.5,0 c -0.896,0 -1.745,0.4 -2.315,1.092 -0.57,0.691 -0.801,1.601 -0.63,2.48 l 28.328,145.751 c 0.274,1.409 1.509,2.427 2.945,2.427 l 31.5,0 c 0.896,0 1.745,-0.4 2.315,-1.091 0.57,-0.692 0.801,-1.601 0.63,-2.481 L -21.813,113 2.609,113 c 18.605,0 31.221,-3.28 38.569,-10.028 7.49,-6.884 9.827,-17.891 6.947,-32.719 L 34.945,2.428 C 34.671,1.018 33.437,0 32,0 L 0,0 Z" id="path3494" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g3496" transform="translate(293.6611,271.0571)">
<path d="m 0,0 -31.5,0 c -2.873,0 -5.342,-2.036 -5.89,-4.855 l -28.328,-145.751 c -0.342,-1.759 0.12,-3.578 1.26,-4.961 1.14,-1.383 2.838,-2.183 4.63,-2.183 l 31.5,0 c 2.872,0 5.342,2.036 5.89,4.855 l 15.283,78.645 20.229,0 c 9.363,0 11.328,-2 11.407,-2.086 0.568,-0.611 1.315,-3.441 0.082,-9.781 l -12.531,-64.489 c -0.342,-1.759 0.12,-3.578 1.26,-4.961 1.14,-1.383 2.838,-2.183 4.63,-2.183 l 32,0 c 2.872,0 5.342,2.036 5.89,4.855 l 13.179,67.825 c 3.093,15.921 0.447,27.864 -7.861,35.5 -7.928,7.281 -21.208,10.82 -40.599,10.82 l -20.784,0 6.143,31.605 C 6.231,-5.386 5.77,-3.566 4.63,-2.184 3.49,-0.801 1.792,0 0,0 m 0,-6 -7.531,-38.75 28.062,0 c 17.657,0 29.836,-3.082 36.539,-9.238 6.703,-6.16 8.711,-16.141 6.032,-29.938 l -13.18,-67.824 -32,0 12.531,64.488 c 1.426,7.336 0.902,12.34 -1.574,15.008 -2.477,2.668 -7.746,4.004 -15.805,4.004 l -25.176,0 -16.226,-83.5 -31.5,0 L -31.5,-6 0,-6" id="path3498" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g3500" transform="translate(409.5498,145.3066)">
<path d="m 0,0 c 12.065,0 21.072,2.225 26.771,6.611 5.638,4.34 9.532,11.861 11.574,22.353 1.903,9.806 1.178,16.653 -2.155,20.348 C 32.783,53.086 25.417,55 14.297,55 L -4.984,55 -15.673,0 0,0 Z m -63.062,-67.75 c -0.895,0 -1.745,0.4 -2.314,1.092 -0.57,0.691 -0.802,1.601 -0.631,2.48 L -37.679,81.573 C -37.404,82.982 -36.17,84 -34.733,84 L 26.32,84 C 45.509,84 59.79,78.79 68.768,68.513 77.793,58.183 80.579,43.742 77.051,25.592 75.613,18.198 73.144,11.331 69.709,5.183 66.27,-0.972 61.725,-6.667 56.198,-11.747 49.582,-17.939 42.094,-22.429 33.962,-25.071 25.959,-27.678 15.681,-29 3.414,-29 l -24.723,0 -7.057,-36.322 c -0.275,-1.41 -1.509,-2.428 -2.946,-2.428 l -31.75,0 z" id="path3502" style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
<g id="g3504" transform="translate(407.0391,197.3071)">
<path d="M 0,0 16.808,0 C 30.229,0 34.891,-2.945 36.475,-4.7 39.104,-7.614 39.6,-13.758 37.91,-22.466 36.012,-32.217 32.493,-39.13 27.452,-43.012 22.29,-46.986 13.898,-49 2.511,-49 L -9.522,-49 0,0 Z m 28.831,35 -61.054,0 c -2.872,0 -5.341,-2.036 -5.889,-4.855 L -66.44,-115.606 c -0.342,-1.759 0.12,-3.578 1.259,-4.961 1.14,-1.383 2.838,-2.183 4.63,-2.183 l 31.75,0 c 2.872,0 5.342,2.036 5.89,4.855 l 6.587,33.895 22.249,0 c 12.582,0 23.174,1.372 31.479,4.077 8.541,2.775 16.401,7.481 23.356,13.986 5.752,5.291 10.488,11.23 14.078,17.655 3.591,6.427 6.171,13.594 7.668,21.302 3.715,19.105 0.697,34.403 -8.969,45.467 C 63.965,29.444 48.924,35 28.831,35 m -45.632,-90 19.312,0 c 12.801,0 22.336,2.411 28.601,7.234 6.267,4.824 10.492,12.875 12.688,24.157 2.102,10.832 1.145,18.476 -2.871,22.929 C 36.909,3.773 28.87,6 16.808,6 L -4.946,6 -16.801,-55 M 28.831,29 C 47.198,29 60.597,24.18 69.019,14.539 77.441,4.898 79.976,-8.559 76.616,-25.836 75.233,-32.953 72.894,-39.46 69.601,-45.355 66.304,-51.254 61.999,-56.648 56.679,-61.539 50.339,-67.472 43.296,-71.7 35.546,-74.218 27.796,-76.743 17.925,-78 5.925,-78 l -27.196,0 -7.53,-38.75 -31.75,0 28.328,145.75 61.054,0" id="path3506" style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

37
src/assets/images/branding/react/react-logo.svg Normal file
View File

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 490.6 436.9" style="enable-background:new 0 0 490.6 436.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:#61DAFB;}
</style>
<g>
<path class="st0" d="M490.6,218.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9V0l0,0c-27.5,0-63.5,19.6-99.9,53.6c-36.4-33.8-72.4-53.2-99.9-53.2
v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11c-2.3-10-4-19.7-5.2-29
c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6V0.5l0,0c-8.4,0-16,1.8-22.6,5.6c-28.1,16.2-34.4,66.7-19.9,130.1
C40.5,155.4,0,186.1,0,218.5c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4c6.5,3.8,14.1,5.6,22.5,5.6
c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6c28.1-16.2,34.4-66.7,19.9-130.1
C450.1,281.7,490.6,250.9,490.6,218.5z M360.4,151.8c-3.7,12.9-8.3,26.2-13.5,39.5c-4.1-8-8.4-16-13.1-24
c-4.6-8-9.5-15.8-14.4-23.4C333.6,146,347.3,148.6,360.4,151.8z M314.6,258.3c-7.8,13.5-15.8,26.3-24.1,38.2c-14.9,1.3-30,2-45.2,2
c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8c6.2-13.4,13.2-26.8,20.7-39.9
c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9c8.3,11.9,16.4,24.6,24.2,38
c7.6,13.1,14.5,26.4,20.8,39.8C329,231.8,322.1,245.2,314.6,258.3z M346.9,245.3c5.4,13.4,10,26.8,13.8,39.8
c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C338.5,261.4,342.8,253.3,346.9,245.3z M245.5,352
c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C264,331.7,254.7,342.4,245.5,352z M171.1,293.1
c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24S166.2,285.5,171.1,293.1z M245,85
c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C226.5,105.3,235.8,94.6,245,85z M171,143.9
c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C142.9,148.7,156.7,146,171,143.9z M80.5,269.1
c-35.4-15.1-58.3-34.9-58.3-50.6s22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9
c-9.2,20.8-16.6,41.1-22.2,60.6C98.6,276.2,89.2,272.8,80.5,269.1z M134.3,412c-13.6-7.8-19.5-37.5-14.9-75.7
c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9
C141.1,414.6,137.3,413.7,134.3,412z M371.5,335.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6
c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C368.6,316.8,370.4,326.5,371.5,335.8z M410,269.1c-8.6,3.7-18,7-27.7,10.1
c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
C468.3,234.2,445.4,254.1,410,269.1z"/>
<path class="st0" d="M145.1,0.4L145.1,0.4L145.1,0.4z"/>
<circle class="st0" cx="245.2" cy="218.5" r="45.7"/>
<path class="st0" d="M344.8,0.1L344.8,0.1L344.8,0.1z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

22
src/assets/images/branding/redux/redux-logo.svg Normal file
View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 78.6 74.6" style="enable-background:new 0 0 78.6 74.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#764ABC;}
</style>
<g>
<path class="st0" d="M54.4,52.1c2.9-0.3,5.1-2.8,5-5.8s-2.6-5.4-5.6-5.4h-0.2c-3.1,0.1-5.5,2.7-5.4,5.8c0.1,1.5,0.7,2.8,1.6,3.7
c-3.4,6.7-8.6,11.6-16.4,15.7c-5.3,2.8-10.8,3.8-16.3,3.1c-4.5-0.6-8-2.6-10.2-5.9c-3.2-4.9-3.5-10.2-0.8-15.5
c1.9-3.8,4.9-6.6,6.8-8c-0.4-1.3-1-3.5-1.3-5.1C-2.9,45.2-1.4,59.4,3,66.1c3.3,5,10,8.1,17.4,8.1c2,0,4-0.2,6-0.7
C39.2,71,48.9,63.4,54.4,52.1z"/>
<path class="st0" d="M72,39.7c-7.6-8.9-18.8-13.8-31.6-13.8h-1.6c-0.9-1.8-2.8-3-4.9-3h-0.2c-3.1,0.1-5.5,2.7-5.4,5.8
c0.1,3,2.6,5.4,5.6,5.4h0.2c2.2-0.1,4.1-1.5,4.9-3.4h1.8c7.6,0,14.8,2.2,21.3,6.5c5,3.3,8.6,7.6,10.6,12.8
c1.7,4.2,1.6,8.3-0.2,11.8C69.7,67.1,65,70,58.8,70c-4,0-7.8-1.2-9.8-2.1c-1.1,1-3.1,2.6-4.5,3.6c4.3,2,8.7,3.1,12.9,3.1
c9.6,0,16.7-5.3,19.4-10.6C79.7,58.2,79.5,48.2,72,39.7z"/>
<path class="st0" d="M21.2,53.8c0.1,3,2.6,5.4,5.6,5.4H27c3.1-0.1,5.5-2.7,5.4-5.8c-0.1-3-2.6-5.4-5.6-5.4h-0.2
c-0.2,0-0.5,0-0.7,0.1c-4.1-6.8-5.8-14.2-5.2-22.2c0.4-6,2.4-11.2,5.9-15.5c2.9-3.7,8.5-5.5,12.3-5.6c10.6-0.2,15.1,13,15.4,18.3
c1.3,0.3,3.5,1,5,1.5C58.1,8.4,48.1,0,38.5,0c-9,0-17.3,6.5-20.6,16.1c-4.6,12.8-1.6,25.1,4,34.8C21.4,51.6,21.1,52.7,21.2,53.8z"
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

23
src/assets/images/branding/shopify/shopify-logo.svg Normal file
View File

@ -0,0 +1,23 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, 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 109.5 124.5" style="enable-background:new 0 0 109.5 124.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:#95BF47;}
.st1{fill:#5E8E3E;}
.st2{fill:#FFFFFF;}
</style>
<g>
<path class="st0" d="M95.9,24.2c-0.1-0.6-0.6-1-1.1-1c-0.5,0-10-0.7-10-0.7s-6.6-6.6-7.4-7.3c-0.7-0.7-2.2-0.5-2.7-0.3
c-0.1,0-1.5,0.4-3.7,1.1c-2.2-6.4-6.1-12.3-13-12.3c-0.2,0-0.4,0-0.6,0C55.4,1.1,53,0,50.9,0C34.8,0,27.1,20.1,24.7,30.3
c-6.2,1.9-10.7,3.3-11.2,3.5c-3.5,1.1-3.6,1.2-4,4.5C9.1,40.7,0,111.2,0,111.2l71,13.3l38.5-8.3C109.5,116.2,96,24.9,95.9,24.2z
M67,17.2c-1.8,0.6-3.8,1.2-6,1.9c0-0.4,0-0.8,0-1.3c0-4-0.6-7.2-1.4-9.7C63.2,8.5,65.5,12.5,67,17.2z M55.2,8.8
c1,2.5,1.6,6,1.6,10.8c0,0.2,0,0.5,0,0.7c-3.9,1.2-8.2,2.5-12.4,3.8C46.8,15,51.3,10.5,55.2,8.8z M50.4,4.3c0.7,0,1.4,0.2,2.1,0.7
c-5.1,2.4-10.7,8.5-13,20.7c-3.4,1.1-6.7,2.1-9.8,3C32.4,19.4,38.9,4.3,50.4,4.3z"/>
<path class="st1" d="M94.8,23.2c-0.5,0-10-0.7-10-0.7s-6.6-6.6-7.4-7.3c-0.3-0.3-0.6-0.4-1-0.5L71,124.5l38.5-8.3
c0,0-13.5-91.3-13.6-91.9C95.8,23.6,95.2,23.3,94.8,23.2z"/>
<path class="st2" d="M57.9,44.5l-4.7,14.1c0,0-4.2-2.2-9.2-2.2c-7.5,0-7.8,4.7-7.8,5.9c0,6.4,16.8,8.9,16.8,24
c0,11.9-7.5,19.5-17.7,19.5c-12.2,0-18.4-7.6-18.4-7.6l3.3-10.8c0,0,6.4,5.5,11.8,5.5c3.5,0,5-2.8,5-4.8c0-8.4-13.8-8.8-13.8-22.6
c0-11.6,8.3-22.9,25.2-22.9C54.7,42.6,57.9,44.5,57.9,44.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/assets/images/branding/twitch/twitch-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 134"><defs><style>.cls-1{fill:#6441a4;fill-rule:evenodd;}</style></defs><title>Glitch</title><path class="cls-1" d="M89,77l-9,23v94h32v17h18l17-17h26l35-35V77H89Zm107,76-20,20H144l-17,17V173H100V89h96v64Zm-20-41v35H164V112h12Zm-32,0v35H132V112h12Z" transform="translate(-80 -77)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 377 B

1
src/assets/images/branding/twitter/twitter-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><defs><style>.cls-1{fill:none;}.cls-2{fill:#1da1f2;}</style></defs><title>Twitter_Logo_Blue</title><rect class="cls-1" width="400" height="400"/><path class="cls-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 790 B

40
src/assets/images/branding/typescript/typescript-logo.svg Normal file
View File

@ -0,0 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 630 630">
<!--
The MIT License (MIT)
Copyright (c) 2015 Remo H. Jansen <remo.jansen@wolksoftware.com>
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.
-->
<g transform="translate(0.000000,630.000000) scale(0.100000,-0.100000)"
fill="#007ACC" stroke="none">
<path d="M0 3150 l0 -3150 3150 0 3150 0 0 3150 0 3150 -3150 0 -3150 0 0
-3150z m5077 251 c160 -40 282 -111 394 -227 58 -62 144 -175 151 -202 2 -8
-272 -192 -438 -295 -6 -4 -30 22 -57 62 -81 118 -166 169 -296 178 -191 13
-314 -87 -313 -254 0 -49 7 -78 27 -118 42 -87 120 -139 365 -245 451 -194
644 -322 764 -504 134 -203 164 -527 73 -768 -100 -262 -348 -440 -697 -499
-108 -19 -364 -16 -480 5 -253 45 -493 170 -641 334 -58 64 -171 231 -164 243
3 4 29 20 58 37 28 16 134 77 234 135 l181 105 38 -56 c53 -81 169 -192 239
-229 201 -106 477 -91 613 31 58 53 82 108 82 189 0 73 -9 105 -47 160 -49 70
-149 129 -433 252 -325 140 -465 227 -593 365 -74 80 -144 208 -173 315 -24
89 -30 312 -11 402 67 314 304 533 646 598 111 21 369 13 478 -14z m-1479
-263 l2 -258 -410 0 -410 0 0 -1165 0 -1165 -290 0 -290 0 0 1165 0 1165 -410
0 -410 0 0 253 c0 140 3 257 7 260 3 4 502 6 1107 5 l1101 -3 3 -257z" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

11
src/assets/images/branding/unity/unity-logo.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 256 263" style="enable-background:new 0 0 256 263;" xml:space="preserve">
<style type="text/css">
.st0{fill:#222C37;}
</style>
<path class="st0" d="M142.2,124.2l39.1-67.5l18.9,67.5l-18.9,67.6L142.2,124.2L142.2,124.2z M123.1,135.3l39.2,67.5l-68.2-17.5
l-49.3-50.2H123L123.1,135.3z M162.2,45.7l-39.1,67.6H44.9l49.2-50.1C94.1,63.2,162.2,45.7,162.2,45.7z M218,101.2l-23.8-88.8
l-89.1,23.9L91.9,59.5l-26.8-0.2L0,124.2l65.2,65l26.8-0.2l13.2,23.2l89.1,23.8l23.9-88.8l-13.5-23l13.6-23H218z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 770 B

1
src/assets/images/branding/webpack/webpack-logo.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 774 875.7"><title>icon</title><path fill="#FFF" d="M387 0l387 218.9v437.9L387 875.7 0 656.8V218.9z"/><path fill="#8ed6fb" d="M704.9 641.7L399.8 814.3V679.9l190.1-104.6 115 66.4zm20.9-18.9V261.9l-111.6 64.5v232l111.6 64.4zM67.9 641.7L373 814.3V679.9L182.8 575.3 67.9 641.7zM47 622.8V261.9l111.6 64.5v232L47 622.8zm13.1-384.3L373 61.5v129.9L172.5 301.7l-1.6.9-110.8-64.1zm652.6 0l-312.9-177v129.9l200.5 110.2 1.6.9 110.8-64z"/><path fill="#1c78c0" d="M373 649.3L185.4 546.1V341.8L373 450.1v199.2zm26.8 0l187.6-103.1V341.8L399.8 450.1v199.2zm-13.4-207zM198.1 318.2l188.3-103.5 188.3 103.5-188.3 108.7-188.3-108.7z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 672 B

BIN
src/assets/images/people/dominic/head.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
src/assets/images/websites/bundlfresh.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 335 KiB

BIN
src/assets/images/websites/cocksox.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 502 KiB

BIN
src/assets/images/websites/domsPlace.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
src/assets/images/websites/earjobs.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

BIN
src/assets/images/websites/kopalife.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/images/websites/solinvictus.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
src/assets/images/websites/stateofescape.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 223 KiB

31
src/components/Layout.tsx Normal file
View File

@ -0,0 +1,31 @@
import * as React from 'react';
import { Header } from '@components/navigation/Header';
import { Background } from './layout/Background';
import { Footer } from './navigation/Footer';
import styled, { createGlobalStyle } from 'styled-components';
import { Colors, Fonts, FontWeights, FontSizes, Gutters } from '@settings/all';
import { graphql } from 'gatsby';
import { BodyStyles, AllElementStyles } from '@styles';
import { AnchorStyles } from '@styles/anchor';
const GlobalStyles = createGlobalStyle`
${AllElementStyles}
${BodyStyles}
${AnchorStyles}
`;
const LayoutMain = styled.main`
margin-top: ${Gutters.extraExtraLarge};
`;
export const Layout = (props:{children:React.ReactNode}) => (
<div {...props}>
<GlobalStyles />
<Background />
<Header />
<LayoutMain>
{ props.children }
</LayoutMain>
<Footer />
</div>
);

29
src/components/effects/Observe.tsx Normal file
View File

@ -0,0 +1,29 @@
//Intersection Observer
export type ObserveCallback = (e:IntersectionObserverEntry)=>void;
export type Observation = {element:HTMLElement,callback:ObserveCallback};
export const observations:Observation[] = [];
export const observer = typeof IntersectionObserver === "function" ? (
new IntersectionObserver((entries, observer) => {
[...observations].forEach(ob => {
entries.forEach(e => {
if(ob.element != e.target) return;
ob.callback(e);
});
});
},{})
) : null;
export const addObserve = (ob:Observation) => {
if(!observer) return;
observations.push(ob);
observer.observe(ob.element);//TODO: "Is observing"
}
export const removeObserve = (ob:Observation) => {
if(!observer) return;
let i = observations.indexOf(ob);
if(i !== -1) observations.splice(i, 1);
observer.unobserve(ob.element);
}

74
src/components/effects/ScrollFade.tsx Normal file
View File

@ -0,0 +1,74 @@
import * as React from 'react';
import styled from 'styled-components';
import { Durations, Easings } from '@settings/all';
import { Observation, addObserve, observer, removeObserve } from './Observe';
export type ScrollFadeDirection = 'bottom' | 'top' | 'left' | 'right';
export type ScrollFadeDelay = 'short' | 'medium' | 'long';
export interface ScrollFadeProps {
from?:ScrollFadeDirection;
delay?:ScrollFadeDelay;
amount?:number;
visible?:boolean;
children?:React.ReactNode;
}
export interface ScrollFadeState {
visible:boolean; canFade:boolean;
}
const ScrollFadeWrapper = styled.div<ScrollFadeProps>(({ visible, ...props }) => {
const { delay, from, amount } = { from: 'bottom', delay: 'long', amount: 4, ...props };
const time = delay == 'long' ? Durations.timeLong : delay == 'medium' ? Durations.timeMedium : Durations.timeShort;
return `
display: inline-block;
opacity: 0;
transition:
opacity ${time}s ${Easings.easeOut},
transform ${time}s ${Easings.easeOut},
-webkit-transform ${time}s ${Easings.easeOut}
;
transform: translate(
${from == 'left' ? -amount : from == 'right' ? amount : 0}rem,
${from == 'top' ? -amount : from == 'bottom' ? amount : 0}rem
);
${visible?`
opacity: 1;
transform: translate(0,0);
`:''}
`
});
export class ScrollFade extends React.Component<ScrollFadeProps, ScrollFadeState> {
element:HTMLDivElement | null = null;
observation:Observation | null = null;
constructor(props:ScrollFadeProps) {
super(props);
this.state = { visible: false, canFade: !!observer };
}
componentDidMount() {
if(!this.element) return;
addObserve(this.observation = { element: this.element, callback: e => {
this.setState({ visible: e.isIntersecting });
if(this.state.visible && this.observation) removeObserve(this.observation);
}});
}
componentWillUnmount() {
if(this.observation) removeObserve(this.observation);
}
render() {
return <ScrollFadeWrapper visible={this.state.visible} {...this.props} ref={e => this.element = e}>
<span>
{ this.props.children }
</span>
</ScrollFadeWrapper>
}
}

78
src/components/forms/ContactForm.tsx Normal file
View File

@ -0,0 +1,78 @@
import * as React from 'react';
import { useForm } from 'react-hook-form';
import { Input, TextArea } from '@objects/interactive/Input';
import { Button, ButtonGroup } from '@objects/interactive/Button';
import * as yup from 'yup';
import { Panel } from '@objects/feedback/Panel';
import { Heading2 } from '@objects/typography/Heading';
export interface ContactFormProps {
}
const FormValidator = yup.object().shape({
name: yup.string().max(128).required(),
email: yup.string().email().required(),
message: yup.string().required()
})
export const ContactForm = (props:ContactFormProps) => {
const { register, handleSubmit, errors, formState } = useForm({
validationSchema: FormValidator, mode: 'onChange'
});
const [ pending, setPending ] = React.useState(false);
const [ success, setSuccess ] = React.useState(false);
const onSubmit = async (data:any) => {
setPending(true);
await new Promise(resolve => setTimeout(resolve, 3000));
setPending(false);
setSuccess(true);
console.log('Send', pending);
};
return success ? <>
<Panel theme="success">
<Heading2>Thanks for contacting</Heading2>
</Panel>
<p>
Thank you for your message, I will be in touch shortly to follow up
(generally within a couple of days).
</p>
<p>
In the meantime why not check out my social channels?
</p>
</> : (
<form onSubmit={handleSubmit(onSubmit)}>
<Input
register={register} error={errors.name}
disabled={pending} label="Your name" name="name" placeholder="Who am I talking to?"
/>
<Input
register={register} error={errors.email}
disabled={pending} name="email" label="Your email" placeholder="How can I reach you?"
/>
<TextArea
register={register} error={errors.message}
disabled={pending}
label="Message" name="message" placeholder="What's on your mind?"
rows={5}
/>
<ButtonGroup>
<Button
disabled={pending || !formState.dirty || (formState.dirty && !formState.isValid)}
pending={pending}
theme="primary" type="submit"
>
Submit
</Button>
</ButtonGroup>
</form>
)
}

68
src/components/layout/Background.tsx Normal file
View File

@ -0,0 +1,68 @@
import * as React from 'react';
import styled, { keyframes, css } from 'styled-components';
import { Easings, Durations } from '@settings/all';
const BackgroundWrapper = styled.div`
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: -1;
`;
const BackgroundImage = styled.svg`
display: block;
object-fit: cover;
min-width: 100%;
min-height: 100%;
`;
const BackgroundGradient = styled.stop<{color:string}>(props => `
stop-color:${props.color};
stop-opacity:1;
`);
const BackgroundFadeIn = keyframes`
from {
opacity: 0;
transform: translateY(12%);
}
to {
opacity: 0.4;
transform: translateY(0%);
}
`;
const BackgroundCircle = styled( (props:{
layer:number, fill:string, className?:string
}) => <circle {...props}
cx="960" cy={5540 + (props.layer * 60)}
r={4700 + (150 * props.layer)}
/>)(props => css`
opacity: 0;
animation: ${BackgroundFadeIn} ${Durations.timeVeryLong}s forwards ${Easings.easeOut};
animation-delay: ${Durations.timeShort + (props.layer * Durations.timeShort)}s;
`);
export const Background = () => (
<BackgroundWrapper>
<BackgroundImage viewBox="0 0 1920 1080">
<linearGradient id="sky" x2="0%" y2="100%">
<BackgroundGradient color="#200044" offset="0%" />
<BackgroundGradient color="#260036" offset="40%" />
<BackgroundGradient color="#770033" offset="100%" />
</linearGradient>
<path d="M0 0h1920v1080H0z" fill="url(#sky)"/>
<g>
<BackgroundCircle layer={2} fill="#00001e" />
<BackgroundCircle layer={1} fill="#000329" />
<BackgroundCircle layer={0} fill="#000730" />
</g>
</BackgroundImage>
</BackgroundWrapper>
)

20
src/components/layout/Boundary.tsx Normal file
View File

@ -0,0 +1,20 @@
import * as React from 'react';
import styled from 'styled-components';
import { Sizes } from '@settings/all';
export type BoundarySize = 'small' | 'medium' | 'large';
export interface BoundaryProps {
size?:BoundarySize;
}
export const Boundary = styled.div<BoundaryProps>(props => `
margin-left: auto;
margin-right: auto;
max-width: ${
props.size === 'large' ? Sizes.laptopLarge :
props.size === 'small' ? Sizes.mobileLarge :
Sizes.tabletLarge
}px;
`);

31
src/components/layout/Frame.tsx Normal file
View File

@ -0,0 +1,31 @@
import * as React from 'react';
import styled from 'styled-components';
import { Gutters, MediaQueries } from '@settings/all';
export const Frame = styled((p:{
padded?:boolean;
children:React.ReactNode;
className?:string;
}) => {
let { padded, ...props } = p;
if(padded) return <div {...props} />
return <>{props.children}</>
})(props => `
${props.padded ? `padding: ${Gutters.extraSmall};`:''}
${MediaQueries.mobileUp} {
${props.padded ? `padding: ${Gutters.small};`:''}
}
${MediaQueries.tabletUp} {
${props.padded ? `padding: ${Gutters.small} ${Gutters.medium};`:''}
}
${MediaQueries.laptopUp} {
${props.padded ? `padding: ${Gutters.small} ${Gutters.large};`:''}
}
${MediaQueries.desktopUp} {
${props.padded ? `padding: ${Gutters.medium} ${Gutters.extraLarge};`:''}
}
`);

15
src/components/layout/Section.tsx Normal file
View File

@ -0,0 +1,15 @@
import * as React from 'react';
import styled from 'styled-components';
import { Gutters, MediaQueries } from '@settings/all';
export const Section = styled.section(props => `
+ ${() => Section} {
margin-top: ${Gutters.extraExtraLarge};
}
${MediaQueries.laptopUp} {
+ ${() => Section} {
margin-top: ${Gutters.extremeLarge};
}
}
`);

101
src/components/navigation/Footer.tsx Normal file
View File

@ -0,0 +1,101 @@
import * as React from 'react';
import styled from 'styled-components';
import { Boundary } from '../layout/Boundary';
import { Logo } from '../../objects/branding/Logo';
import { Frame } from '../layout/Frame';
import { Gutters, Colors, MediaQueries, Borders } from '@settings/all';
import { Link } from 'gatsby';
const FooterInner = styled(Boundary)`
display: flex;
align-items: center;
flex-flow: column;
padding: ${Gutters.large};
margin-top: ${Gutters.extremeLarge};
${MediaQueries.tabletUp} {
flex-flow: row;
flex-wrap: wrap;
justify-content: space-between;
}
`;
const FooterLogo = styled(Logo)`
max-width: 200px;
margin: ${Gutters.medium} 0;
`
const FooterUpper = styled(Frame)`
min-height: 5rem;
margin-top: ${Gutters.large};
`;
const FooterCopyright = styled.div`
margin: 0;
width: 100%;
background: ${Colors.primary};
text-align: center;
font-size: 0.9em;
padding: ${Gutters.medium};
${MediaQueries.tabletUp} {
text-align: right;
}
`
const FooterNav = styled.nav`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: ${Gutters.medium};
width: 100%;
${MediaQueries.mobileUp} {
justify-content: flex-start;
}
${MediaQueries.tabletUp} {
max-width: 75%;
}
`;
const FooterLink = styled(Link)`
color: inherit;
text-align: center;
padding: ${Gutters.small} ${Gutters.extraSmall};
width: calc(50% - ${Gutters.extraSmall});
&:hover { text-decoration: underline; }
${MediaQueries.mobileUp} {
width: 25%;
text-align: left;
}
`;
const FooterLine = styled.div`
width: 100%;
`;
export const Footer = () => (
<footer>
<FooterUpper padded>
<FooterInner size="large">
<FooterLogo />
<FooterLine />
<FooterNav>
<FooterLink to="/contact">Contact</FooterLink>
<FooterLink to="/legal/privacy">Privacy Policy</FooterLink>
</FooterNav>
</FooterInner>
</FooterUpper>
<FooterCopyright>
<Boundary size="large">
&copy; 2012 ~ {new Date().getFullYear()} - Dominic Masters
</Boundary>
</FooterCopyright>
</footer>
);

33
src/components/navigation/Header.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as React from 'react';
import styled from 'styled-components';
import { ZIndex, Gutters } from '@settings/all';
import { Boundary } from '../layout/Boundary';
import { Logo } from '../../objects/branding/Logo';
const HeaderWrapper = styled.header`
position: fixed;
z-index: ${ZIndex.header};
width: 100%;
top: 0;
pointer-events: none;
`;
const HeaderInner = styled(Boundary)`
display: flex;
justify-content: space-between;
align-items: center;
padding: ${Gutters.medium};
`;
const HeaderLogo = styled(Logo)`
max-width: 150px;
pointer-events: initial;
`
export const Header = () => (
<HeaderWrapper>
<HeaderInner>
<HeaderLogo />
</HeaderInner>
</HeaderWrapper>
)

87
src/components/sections/BannerImage.tsx Normal file
View File

@ -0,0 +1,87 @@
import * as React from 'react';
import styled from 'styled-components';
import { Section } from '@components/layout/Section';
import { Frame } from '@components/layout/Frame';
import { ScrollFade } from '@components/effects/ScrollFade';
import { Boundary, BoundaryProps } from '@components/layout/Boundary';
import { MediaQueries } from '@settings/all';
const BannerImageWrapper = styled(Section)`
position: relative;
overflow: hidden;
${MediaQueries.mobileUp} {
min-height: 25em;
}
${MediaQueries.tabletUp} {
display: flex;
align-items: center;
justify-content: flex-end;
}
${MediaQueries.laptopUp} {
min-height: 35em;
}
`;
const BannerImageMedia = styled(ScrollFade)`
position: relative;
width: 100%;
${MediaQueries.tabletUp} {
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
}
`;
const BannerImageContent = styled(ScrollFade)`
position: relative;
text-align: center;
${MediaQueries.tabletUp} {
width: 80%;
text-align: left;
}
${MediaQueries.laptopUp} {
width: 70%;
}
`;
const BannerImageText = styled.div`
${MediaQueries.tabletUp} {
width: ${90}%;
transform: translateX(10%);
}
`;
export type BannerImageSectionProps = BoundaryProps & {
className?:string;
title?:React.ComponentFactory<any, any>;
subtitle?:React.ComponentFactory<any, any>;
body?:React.ComponentFactory<any, any>;
};
export const BannerImageSection = (p:BannerImageSectionProps) => {
const { title, subtitle, body, ...props } = p;
return <Boundary as={BannerImageWrapper} {...props}>
<BannerImageMedia from="bottom">
</BannerImageMedia>
<BannerImageContent from="left">
<Frame padded>
{ title ? title() : null }
{ subtitle ? subtitle() : null }
<BannerImageText>
{ body ? body() : null }
</BannerImageText>
</Frame>
</BannerImageContent>
</Boundary>
};

34
src/components/sections/ButtonTitle.tsx Normal file
View File

@ -0,0 +1,34 @@
import * as React from 'react';
import { Boundary, BoundaryProps } from '@components/layout/Boundary';
import { Section } from '@components/layout/Section';
import styled from 'styled-components';
import { ScrollFade } from '@components/effects/ScrollFade';
import { Frame } from '@components/layout/Frame';
import { Gutters } from '@settings/all';
const ButtonTitleInner = styled(ScrollFade)`
width: 100%;
`;
const ButtonTitleContent = styled(Frame)`
text-align: center;
`;
export type ButtonTitleProps = BoundaryProps & {
title?:React.ComponentFactory<any,any>;
body?:React.ComponentFactory<any,any>;
buttons?:React.ComponentFactory<any,any>;
}
export const ButtonTitle = ({ title, body, buttons, ...props }:ButtonTitleProps) => (
<Boundary as={Section} {...props}>
<ButtonTitleInner from="bottom" delay="short">
<ButtonTitleContent padded>
{ title ? title() : null }
{ body ? body() : null }
{ buttons ? buttons() : buttons }
</ButtonTitleContent>
</ButtonTitleInner>
</Boundary>
);

118
src/components/sections/IconGrid.tsx Normal file
View File

@ -0,0 +1,118 @@
import * as React from 'react';
import styled, { css } from 'styled-components';
import { Boundary, BoundaryProps } from '@components/layout/Boundary';
import { Section } from '@components/layout/Section';
import { Frame } from '@components/layout/Frame';
import { Gutters, MediaQueries } from '@settings/all';
import { ScrollFade } from '@components/effects/ScrollFade';
const IconGridIconSplit = (index:number, spacing:number, rows:number, columns:number) => {
let rowsWidth = spacing * (rows - 1);
let halfRowsWidth = (rowsWidth / 2) - rowsWidth;
let x = halfRowsWidth + (spacing * (index/columns));
return `
width: ${100 / columns}%;
transform: translateX(${x}%);
`;
}
const IconGridIconWrapper = styled.div((props:{index:number}) => `
width: 20%;
padding: ${Gutters.extraSmall};
${MediaQueries.mobileUp} {
padding: ${Gutters.small};
}
${MediaQueries.tabletUp} {
${IconGridIconSplit(props.index ? props.index : 0, 30, 5, 5)}
}
${MediaQueries.laptopUp} {
${IconGridIconSplit(props.index ? props.index : 0, 50, 5, 5)}
}
`);
const IconGridIconInner = styled.div`
position: relative;
padding-bottom: 100%;
`;
const IconGridIconImage = styled.img`
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: contain;
object-position: center;
`;
export type IconGridIconProps = {
index?:number;
title:string;
image:any;
}
const IconGridIcon = (props:IconGridIconProps) => (
<IconGridIconWrapper index={props.index ? props.index : 0}>
<IconGridIconInner>
<IconGridIconImage {...props} src={props.image} />
</IconGridIconInner>
</IconGridIconWrapper>
);
const IconGridWrapper = styled((p:BoundaryProps) => <Boundary as={Section} {...p} />)`
display: flex;
flex-direction: column;
align-items: center;
`;
const IconGridContent = styled(Frame)`
width: 100%;
display: inline-block;
text-align: center;
margin-bottom: ${Gutters.extraSmall};
${MediaQueries.mobileUp} {
width: auto;
margin-bottom: ${Gutters.small};
}
`;
const IconGridGrid = styled(ScrollFade)`
width: 100%;
`;
const IconGridInner = styled.div`
display: flex;
flex-wrap: wrap;
margin: 0 auto;
${MediaQueries.tabletUp} {
max-width: 700px;
}
`;
export type IconGridProps = BoundaryProps & {
title?:React.ComponentFactory<any,any>;
icons?:IconGridIconProps[];
}
export const IconGrid = ({ icons, title, ...props }:IconGridProps) => (
<IconGridWrapper {...props}>
<IconGridContent padded>
{ title ? title() : null }
</IconGridContent>
<IconGridGrid delay="long" from="bottom">
<IconGridInner>
{ icons ? icons.map((icon,i) => <IconGridIcon index={i} {...icon} />) : null }
</IconGridInner>
</IconGridGrid>
</IconGridWrapper>
);

117
src/components/sections/Mosaic.tsx Normal file
View File

@ -0,0 +1,117 @@
import * as React from 'react';
import { ScrollFade, ScrollFadeProps } from '@components/effects/ScrollFade';
import { Section } from '@components/layout/Section';
import { Frame } from '@components/layout/Frame';
import styled from 'styled-components';
import { Boundary, BoundaryProps } from '@components/layout/Boundary';
import { MediaQueries, Durations, Easings } from '@settings/all';
import Img, { GatsbyImageProps, FluidObject } from 'gatsby-image';
const MosaicWrapper = styled(Section)`
${MediaQueries.tabletUp} {
display: flex;
align-items: center;
}
`;
const MosaicGrid = styled.div`
position: relative;
width: 100%;
${MediaQueries.tabletUp} {
width: 50%;
order: 2;
}
`;
const MosaicPad = styled.div`
width: 100%;
padding-bottom: 80%;
`;
const MosaicContent = styled(ScrollFade)`
text-align: center;
${MediaQueries.tabletUp} {
width: 50%;
text-align: left;
}
`;
const MosaicBody = styled.div`
${MediaQueries.tabletUp} {
width: 90%;
transform: translateX(10%);
}
`;
export type MosaicTileProps = ScrollFadeProps & {
index?:number;
image:GatsbyImageProps;
to:string;
className?:string;
}
const MosaicTileImage = styled((props:GatsbyImageProps) => <Img {...props} />)`
width: 100%;
display: block;
`
const MosaicTile = styled( ({ image, to, ...props }:MosaicTileProps) => {
return <ScrollFade {...props}>
<Frame>
<a href={to}><MosaicTileImage {...image } /></a>
</Frame>
</ScrollFade>;
})(props => `
position: absolute;
transition: all ${Durations.timeShort}s ${Easings.easeOut};
${props.index == 0 ? `
bottom: 10%;
left: 15%;
width: 50%;
z-index: 3;
&:hover { transform: translateY(-0.5em); }
` : props.index == 1 ? `
bottom: 20%;
left: 25%;
width: 45%;
&:hover { transform: translateX(-0.5em); }
` : props.index == 2 ? `
width: 50%;
right: 5%;
top: 25%;
&:hover { transform: translate(0.5em, -0.5em); }
` : ''}
`);
export type MosaicProps = BoundaryProps & {
title:React.ComponentFactory<any, any>;
body?:React.ComponentFactory<any, any>;
images?:MosaicTileProps[];
}
export const Mosaic = styled((p:MosaicProps) => {
let { title, body, images, ...props } = p;
return <Boundary as={MosaicWrapper} {...props}>
<MosaicGrid>
{ images ? images.map((c,i) => <MosaicTile index={i} key={i} {...c} />) : null }
<MosaicPad />
</MosaicGrid>
<MosaicContent from="left">
<Frame padded>
<div>{title ? title() : null}</div>
<MosaicBody>{body ? body() : null}</MosaicBody>
</Frame>
</MosaicContent>
</Boundary>;
})`
${MediaQueries.tabletUp} {
display: flex;
align-items: center;
}
`;

98
src/components/sections/SplitFrames.tsx Normal file
View File

@ -0,0 +1,98 @@
import * as React from 'react';
import styled from 'styled-components';
import { Section } from '@components/layout/Section';
import { MediaQueries, Gutters } from '@settings/all';
import { BoundaryProps, Boundary } from '@components/layout/Boundary';
import { ScrollFade, ScrollFadeProps } from '@components/effects/ScrollFade';
import { Frame } from '@components/layout/Frame';
const SplitFramesContainer = styled(Section)`
${MediaQueries.tabletUp} {
display: flex;
align-items: center;
flex-wrap: wrap;
}
${MediaQueries.laptopUp} {
justify-content: space-between;
}
`;
const SplitFramesHeader = styled(ScrollFade)`
width: 100%;
text-align: center;
${MediaQueries.tabletUp} {
margin-bottom: ${Gutters.large};
}
`;
type SplitProps = ScrollFadeProps & { padded?:boolean };
const Split = styled((props:SplitProps) => (
<ScrollFade {...props}>
<Frame padded={props.padded}>
{ props.children }
</Frame>
</ScrollFade>
))`
width: 100%;
text-align: center;
${MediaQueries.tabletUp} {
width: 50%;
margin: 0;
text-align: left;
}
${MediaQueries.laptopUp} {
width: calc(50% - (${Gutters.medium}/2));
}
${MediaQueries.desktopUp} {
width: calc(50% - (${Gutters.large}/2));
}
`;
const RightSplit = Split;
const LeftSplit = styled(Split)`
width: 100%;
margin-bototm: ${Gutters.extraLarge};
`;
export type SplitFramesProps = BoundaryProps & {
title?:React.ComponentFactory<any, any>;
subtitle?:React.ComponentFactory<any,any>;
leftOptions?:SplitProps;
rightOptions?:SplitProps;
left:React.ComponentFactory<any,any>;
right:React.ComponentFactory<any,any>;
};
export const SplitFrames = (props:SplitFramesProps) => {
let header;
if(props.title || props.subtitle) {
header = <SplitFramesHeader from="top">
<Frame padded>
{ props.title ? props.title() : null }
{ props.subtitle ? props.subtitle() : null }
</Frame>
</SplitFramesHeader>
}
return (
<Boundary as={SplitFramesContainer}>
{ header }
<LeftSplit {...(props.leftOptions||{})}>
{props.left()}
</LeftSplit>
<RightSplit {...(props.rightOptions||{})}>
{props.right()}
</RightSplit>
</Boundary>
);
};

99
src/components/sections/StackedMosaic.tsx Normal file
View File

@ -0,0 +1,99 @@
import * as React from 'react';
import styled from 'styled-components';
import { Boundary, BoundaryProps } from '@components/layout/Boundary';
import { Section } from '@components/layout/Section';
import { MediaQueries, Easings, Durations } from '@settings/all';
import { ScrollFade, ScrollFadeProps } from '@components/effects/ScrollFade';
import { Frame } from '@components/layout/Frame';
import Img, { GatsbyImageProps } from 'gatsby-image';
const StackedMosaicWrapper = styled((props:BoundaryProps) => <Boundary as={Section} {...props} />)`
${MediaQueries.tabletUp} {
display: flex;
align-items: center;
}
`;
const StackedMosaicGrid = styled.div`
position: relative;
overflow: hidden;
padding-bottom: 72%;
${MediaQueries.tabletUp} {
width: 50%;
padding-bottom: 33%;
}
`;
const StackedMosaicContent = styled(ScrollFade)`
text-align: center;
${MediaQueries.tabletUp} {
width: 50%;
text-align: left;
}
`;
const StackedMosaicHeader = styled(Frame)`
${MediaQueries.desktopUp} {
position: relative;
transform: translateX(-2em);
}
`
const StackedMosaicBody = styled(Frame)`
${MediaQueries.desktopUp} {
position: relative;
transform: translateX(3em);
}
`;
type StackedMosaicTileProps = ScrollFadeProps & {
index?:number;
to:string;
image:GatsbyImageProps;
}
const StackedMosaicTile = styled( ({ to, image, ...props}:StackedMosaicTileProps) => (
<ScrollFade {...props}>
<a href={to}><Img {...image} /></a>
</ScrollFade>
))(props => `
position: absolute;
width: 50%;
margin: 0;
transition: all ${Durations.timeShort}s ${Easings.easeOut};
transform: translateY(0em) rotate(-25deg);
${props.index ? `
left: ${(10 * props.index) + 2.5}%;
top: ${14 + (props.index * 2)}%;
` : ``}
&:hover {
transform: translateY(-0.5em) rotate(-25deg);
}
`);
export type StackedMosaicProps = BoundaryProps & {
images:StackedMosaicTileProps[];
title:React.ComponentFactory<any,any>;
body:React.ComponentFactory<any,any>;
}
export const StackedMosaic = ({ title, body, images, ...p }:StackedMosaicProps) => (
<StackedMosaicWrapper {...p}>
<StackedMosaicGrid>
{images.map((e,i) => <StackedMosaicTile {...e} index={i+1} />)}
</StackedMosaicGrid>
<StackedMosaicContent from="left">
<StackedMosaicHeader padded>
{ title ? title() : null }
</StackedMosaicHeader>
<StackedMosaicBody padded>
{ body ? body() : null }
</StackedMosaicBody>
</StackedMosaicContent>
</StackedMosaicWrapper>
);

26
src/objects/branding/Logo.tsx Normal file
View File

File diff suppressed because one or more lines are too long

54
src/objects/feedback/Loader.tsx Normal file
View File

@ -0,0 +1,54 @@
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
import { Durations, Easings, Colors } from '@settings/all';
const LoaderSpin = keyframes`
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
`;
export const LoaderSpinner = styled(props => (
<svg {...props} width="38" height="38" viewBox="0 0 38 38">
<g fill="none" fillRule="evenodd">
<g transform="translate(1 1)" strokeWidth="2">
<circle strokeOpacity=".75" cx="18" cy="18" r="18" />
<path d="M36 18c0-9.94-8.06-18-18-18">
</path>
</g>
</g>
</svg>
))`
display: block;
width: 1.5em;
height: 1.5em;
max-width: 100%;
max-height: 100%;
animation: ${LoaderSpin} ${Durations.timeLong}s infinite ${Easings.easeInOut};
* {
stroke: ${Colors.text};
}
`
const LoaderInner = styled.div`
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
`
export const Loader = styled(props => (
<div {...props}>
<LoaderInner>
<LoaderSpinner />
</LoaderInner>
</div>
))`
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0,0,0,0.5);
`;

18
src/objects/feedback/Panel.tsx Normal file
View File

@ -0,0 +1,18 @@
import * as React from 'react';
import styled from 'styled-components';
import { WidgetProps, WidgetStyles } from '@settings/all';
export type PanelProps = WidgetProps & {
}
export const Panel = styled.div<PanelProps>`
${WidgetStyles};
display: block;
`;
export const ErrorPanel = (props:{error:{message:string}}) => {
let s = props.error.message;
s = s.charAt(0).toUpperCase() + s.slice(1)
return <Panel theme="danger">{s}</Panel>
}

43
src/objects/interactive/Button.tsx Normal file
View File

@ -0,0 +1,43 @@
import * as React from 'react';
import styled from 'styled-components';
import { Link } from 'gatsby';
import { Colors, Gutters, Borders, WidgetStyles, WidgetProps } from '@settings/all';
import { Loader } from '@objects/feedback/Loader';
export type ButtonType = 'button' | 'reset' | 'submit';
export type ButtonProps = WidgetProps & {
type?:ButtonType;
to?:string;
href?:string;
children?:React.ReactChild;
value?:string;
pending?:boolean;
}
const StyledButton = styled.button<ButtonProps>(props => `
${WidgetStyles(props, { hover: true })};
cursor: pointer;
`);
export const Button = ({ pending, children, ...props }:ButtonProps) => {
let type = undefined;
if(props.to) {
type = Link;
} else if(props.href) {
type = 'a';
} else if(props.type) {
}
return <StyledButton as={type as any} {...props}>
{ children }
{ pending ? <Loader /> : null }
</StyledButton>
}
export const ButtonGroup = styled.div`
${StyledButton} + ${StyledButton} {
margin-left: ${Gutters.small};
}
`;

87
src/objects/interactive/Input.tsx Normal file
View File

@ -0,0 +1,87 @@
import * as React from 'react';
import styled, { css } from 'styled-components';
import { StylePlaceholder } from '@tools/styles';
import { Durations, Easings, Gutters, WidgetStyles, Colors, WidgetProps } from '@settings/all';
import { Button, ButtonGroup } from './Button';
import { Panel, ErrorPanel } from '@objects/feedback/Panel';
const InputStyles = (props:InputProps) => css`
${WidgetStyles(props)};
width: 100%;
display: block;
background: none;
${StylePlaceholder(`
color: inherit;
font-family: inherit;
font-weight: inherit;
opacity: 0.2;
transition: all ${Durations.timeShort}s ${Easings.easeOut};
`)}
`;
const InputError = (props:{ children?:React.Children }) => (
<Panel {...props} theme="danger" />
);
const InputInput = styled.input(InputStyles);
const TextareaInput = styled(styled.textarea(InputStyles))`
min-width: 100%;
max-width: 100%;
min-height: 3.5em;
resize: vertical;
`;
const InputLabel = styled.label`
position: absolute;
display: block;
font-size: 0.9em;
top: 0;
left: ${Gutters.small};
line-height: 1;
transform: translateY(-50%);
padding: ${Gutters.extraSmall} ${Gutters.small};
z-index: 2;
background: ${Colors.background};
color: ${Colors.text};
`;
const InputWrapper = styled.div(props => `
display: block;
width: 100%;
position: relative;
`);
export type InputType = (
//HTML5:
"color" | "date" | "datetime-local" | "email" | "month" | "number" | "range" |
"search" | "tel" | "time" | "url" | "week" |
//HTML4~
"text" | "hidden" | "password" | "radio" | "checkbox" | "textarea" | "file" |
"image"
);
export type InputProps = WidgetProps & {
label?:string;
type?:InputType;
register?:any;
error?:any;
}
export const Input = ({ error, label, ...props }:JSX.IntrinsicElements['input'] & InputProps) => {
return <InputWrapper>
{ label ? <InputLabel>{ label }</InputLabel> : null }
<InputInput ref={props.register} {...props as any} />
{ error ? <ErrorPanel error={error} /> : null }
</InputWrapper>
};
export const TextArea = ({ error, label, ...props }:JSX.IntrinsicElements['textarea'] & InputProps) => {
return <InputWrapper>
{ label ? <InputLabel>{ label }</InputLabel> : null }
<TextareaInput ref={props.register} {...props as any} />
{ error ? <ErrorPanel error={error} /> : null }
</InputWrapper>
};

16
src/objects/media/Image.tsx Normal file
View File

@ -0,0 +1,16 @@
import { graphql } from "gatsby";
import { FluidObject } from 'gatsby-image';
export const fluidImage = graphql`
fragment fluidImage on File {
childImageSharp {
fluid(maxWidth: 1000) {
...GatsbyImageSharpFluid
}
}
}
`;
export interface FluidImage {
childImageSharp:FluidObject;
}

40
src/objects/typography/Heading.tsx Normal file
View File

@ -0,0 +1,40 @@
import styled, { css } from "styled-components";
import { Fonts, FontWeights, FontSizes } from "@settings/all";
const Heading = css`
font-family: ${Fonts.heading};
display: block;
font-weight: ${FontWeights.heading};
margin: 0.4em 0 0.5em;
`;
export const Heading1 = styled.h1`
${Heading}
font-size: ${FontSizes.heading1};
`;
export const Heading2 = styled.h2`
${Heading}
font-size: ${FontSizes.heading2}
`;
export const Heading3 = styled.h3`
${Heading}
font-size: ${FontSizes.heading3};
`;
export const Heading4 = styled.h4`
${Heading}
font-size: ${FontSizes.heading4};
`;
export const Heading5 = styled.h5`
${Heading}
font-size: ${FontSizes.heading5};
`;
export const Heading6 = styled.h6`
${Heading}
font-size: ${FontSizes.heading6};
`;

23
src/objects/typography/Title.tsx Normal file
View File

@ -0,0 +1,23 @@
import * as React from 'react';
import styled, { css } from 'styled-components';
import { FontSizes, Fonts, FontWeights, MediaQueries } from '@settings/all';
import { Heading2, Heading1 } from './Heading';
export const Subtitle = styled(Heading2)`
`;
export const Title = styled(Heading1)((props:{large?:boolean}) => `
font-size: ${FontSizes.title};
margin: 0.4em 0 0.5em;
+ ${Subtitle} {
margin-top: -1em;
margin-bottom: 1em;
}
${props.large ? `
${MediaQueries.tabletUp} {
font-size: ${FontSizes.titleLarge};
}
`:''}
`);

37
src/pages/contact.tsx Normal file
View File

@ -0,0 +1,37 @@
import * as React from 'react';
import { Layout } from '@components/Layout';
import { Title } from '@objects/typography/Title';
import { SplitFrames } from '@components/sections/SplitFrames';
import { Heading2 } from '@objects/typography/Heading';
import { ContactForm } from '@components/forms/ContactForm';
export default () => (
<Layout>
<SplitFrames size="large"
title={() => <Title large>Contact Me</Title>}
leftOptions={{ padded: true }}
left={() => <div>
<Heading2>Send a message down the wire</Heading2>
<p>
Feel free to reach out, I usually respond within a few days.
</p>
<p>
If you prefer to call, then leave your phone number and what times
you're available and I'll get in touch!
</p>
<p>
Looking for something a bit more instant? Get in touch with me via
social media.
</p>
{/*<SocialIconGroup socials={Socials} />*/}
</div>}
rightOptions={{padded: true}}
right={() => <ContactForm />}
/>
</Layout>
);

174
src/pages/index.tsx Normal file
View File

@ -0,0 +1,174 @@
import * as React from 'react';
import { Layout } from '@components/Layout';
import { BannerImageSection } from '@components/sections/BannerImage';
import { Title, Subtitle } from '@objects/typography/Title';
import { SplitFrames } from '@components/sections/SplitFrames';
import { Heading1, Heading2 } from '@objects/typography/Heading';
import { Mosaic } from '@components/sections/Mosaic';
import { graphql, Link } from 'gatsby';
import { FluidImage, fluidImage } from '@objects/media/Image';
import { StackedMosaic } from '@components/sections/StackedMosaic';
import { IconGrid } from '@components/sections/IconGrid';
import { ButtonTitle } from '@components/sections/ButtonTitle';
import { Button } from '@objects/interactive/Button';
export const pageQuery = graphql`
query {
bundleImage: file(relativePath: { eq: "websites/bundlfresh.jpg" }) { ...fluidImage }
cocksoxImage: file(relativePath: { eq: "websites/cocksox.jpg" }) { ...fluidImage }
soeImage: file(relativePath: { eq: "websites/stateofescape.jpg" }) { ...fluidImage }
kopaImage: file(relativePath: { eq: "websites/kopalife.jpg" }) { ...fluidImage }
earjobsImage: file(relativePath: { eq: "websites/earjobs.jpg" }) { ...fluidImage }
solImage: file(relativePath: { eq: "websites/solinvictus.jpg" }) { ...fluidImage }
}
`;
export interface IndexPageProps {
data: {
bundleImage: FluidImage;
cocksoxImage: FluidImage;
soeImage: FluidImage;
kopaImage: FluidImage;
earjobsImage: FluidImage;
solImage: FluidImage;
};
}
export default ({ data }:IndexPageProps) => {
return <Layout>
<BannerImageSection
title={() => <Title large="true">Dominic Masters</Title>}
subtitle={() => <Subtitle>Developer, nerd, occasionally funny.</Subtitle>}
body={() => <p>
I'm just a nerd with a passion for coding, coffee, and video games.
Programming since before the internet was cool.
</p>}
/>
<SplitFrames
left={() => <>
<Heading1 is="h2">Programmer</Heading1>
<Subtitle is="h3">I know what I'm doing, sometimes.</Subtitle>
</>}
right={() => <>
<p>
I am a programmer, born and bred. I have been programming since I
was around 12 years old and continue to advance my skills more and
more everyday.
</p>
<p>
Programming is my work and my passion. With over { new Date().getFullYear() - 2007 } years of experience,
and countless lines of code written, there isn't much I can't develop.
</p>
</>}
/>
<Mosaic
title={() => <Heading2>Shopify Plus</Heading2>}
body={() => <>
<p>
I'm currently working full-time as a Senior Full-Stack Developer for
Shopify Plus at <a href="//processcreative.com.au">Process Creative</a>.
I have been working with the platform every day for
over { new Date().getFullYear() - 2017} years, and enjoy working with
it immensely.
</p>
<p>
Working with Liquid, REST and GraphQL App Development and general
Shopify tools development, I have had the privilage of working with
over 40 different Shopify Plus clients, and over 50 Shopify core
clients.
</p>
<p>
Despite Shopify's seemingly limited development environment, I have
been able to make it do tricks thought impossible. I love finding
unique solution's to Shopify's limitations, and will continuously
find ways to surprise everyone, including myself.
</p>
</>}
images={[
{ to: '//bundlfresh.com.au', image: data.bundleImage.childImageSharp, delay: 'short' },
{ to: '//cocksox.com', image: data.cocksoxImage.childImageSharp, delay: 'medium' },
{ to: '//www.stateofescape.com', image: data.soeImage.childImageSharp, delay: 'long' },
]}
/>
<StackedMosaic
size="large"
images={[
{ to: "//www.kopalife.com/products/kube-customise", image: data.kopaImage.childImageSharp, delay: 'short' },
{ to: "//earjobs.com.au", image: data.earjobsImage.childImageSharp, delay: 'medium' },
{ to: "//sol-invictus.com", image: data.solImage.childImageSharp, delay: 'long' }
]}
title={() => <Heading2>Full-Stack Web Dev</Heading2>}
body={() => <>
<p>
I have spent over { new Date().getFullYear() - 2010 } years working
with both modern and traditional web tech stacks, including NodeJS,
TypeScript, React, ES6, Webpack, Babel, SCSS, PHP, ASP, SQL and more.
</p>
<p>
My specialty is making beautiful and interactive online web experiences.
Why must web suck? I am to prove that it doesn't always have to.
</p>
</>
} />
<IconGrid
title={p => <Heading2 {...p}>Platforms I work with</Heading2>}
icons={[
/* First Row */
{ title: "C#", image: require('@assets/images/branding/csharp/csharp-logo.svg') },
{ title: "NodeJS", image: require('@assets/images/branding/nodejs/nodejs-logo.svg') },
{ title: "Java", image: require('@assets/images/branding/java/java-logo.svg') },
{ title: "PHP", image: require('@assets/images/branding/php/php-logo.svg') },
{ title: 'C++', image: require('@assets/images/branding/cpp/cpp-logo.svg') },
/* Second Row */
{ title: 'TypeScript', image: require('@assets/images/branding/typescript/typescript-logo.svg') },
{ title: 'React', image: require('@assets/images/branding/react/react-logo.svg') },
{ title: 'Redux', image: require('@assets/images/branding/redux/redux-logo.svg') },
{ title: 'webpack', image: require('@assets/images/branding/webpack/webpack-logo.svg') },
{ title: 'jQuery', image: require('@assets/images/branding/jquery/jquery-logo.svg') },
/* Third Row */
{ title: 'Shopify', image: require('@assets/images/branding/shopify/shopify-logo.svg') },
{ title: 'Heroku', image: require('@assets/images/branding/heroku/heroku-logo.svg' ) },
{ title: 'Google Cloud Platform', image: require('@assets/images/branding/google-cloud/google-cloud-logo.svg') },
{ title: 'Digital Ocean', image: require('@assets/images/branding/digitalocean/digitalocean-logo.svg') },
{ title: 'neto', image: require('@assets/images/branding/neto/neto-logo.svg') },
/* Fourth Row */
{ title: 'MonoGame', image: require('@assets/images/branding/monogame/monogame-logo.svg') },
{ title: 'OpenGL', image: require('@assets/images/branding/opengl/opengl-logo.svg') },
{ title: 'Unity', image: require('@assets/images/branding/unity/unity-logo.svg') },
{ title: 'LWJGL', image: require('@assets/images/branding/lwjgl/lwjgl-logo.svg') },
/* Fifth Row */
{ title: 'GraphQL', image: require('@assets/images/branding/graphql/graphql-logo.svg') },
{ title: 'MySQL', image: require('@assets/images/branding/mysql/mysql-logo.svg') },
{ title: 'PostgreSQL', image: require('@assets/images/branding/pgsql/pgsql-logo.svg') },
/* Sixth Row */
{ title: 'Discord', image: require('@assets/images/branding/discord/discord-logo.svg') },
{ title: 'Twitch', image: require('@assets/images/branding/twitch/twitch-logo.svg') },
{ title: 'Twitter', image: require('@assets/images/branding/twitter/twitter-logo.svg') }
]}
/>
<ButtonTitle
title={() => <Heading2>Get in touch</Heading2>}
body={() => <p>
Want to get in touch, pick my brain or just have a chat?<br />
Head over to my contact page and feel free to reach out.
</p>}
buttons={() => <Button to="/contact" theme="primary">Contact Me</Button> }
/>
</Layout>
}

164
src/pages/legal/privacy.tsx Normal file
View File

@ -0,0 +1,164 @@
import * as React from 'react';
import { Layout } from '@components/Layout';
import { Boundary } from '@components/layout/Boundary';
import { Title } from '@objects/typography/Title';
import { Heading4, Heading3, Heading2 } from '@objects/typography/Heading';
export default () => (
<Layout>
<Boundary size="medium">
<Title>Privacy Policy</Title>
<p>Effective date: June 27, 2018</p>
<p>
domsPlace ("us", "we", or "our") operates
the <a href="//domsplace.com">https://domsplace.com</a> website (the
"Service").
</p>
<p>
This page informs you of our policies regarding the collection, use, and
disclosure of personal data when you use our Service and the choices you
have associated with that data.
</p>
<p>
We use your data to provide and improve the Service. By using the
Service, you agree to the collection and use of information in
accordance with this policy. Unless otherwise defined in this Privacy
Policy, terms used in this Privacy Policy have the same meanings as in
our Terms and Conditions, accessible from <a href="//domsplace.com">
https://domsplace.com
</a>
</p>
<Heading2>Information Collection And Use</Heading2>
<p>
We collect several different types of information for various purposes
to provide and improve our Service to you.
</p>
<Heading3>Types of Data Collected</Heading3>
<Heading4>Personal Data</Heading4>
<p>
While using our Service, we may ask you to provide us with certain
personally identifiable information that can be used to contact or
identify you ("Personal Data"). Personally identifiable information may
include, but is not limited to:
</p>
<ul>
<li>Email address</li>
<li>First name and last name</li>
<li>Phone number</li>
<li>Cookies and Usage Data</li>
</ul>
<Heading4>Usage Data</Heading4>
<p>
We may also collect information how the Service is accessed and used =
("Usage Data"). This Usage Data may include information such as your
computer's Internet Protocol address (e.g. IP address), browser type,
browser version, the pages of our Service that you visit, the time and
date of your visit, the time spent on those pages, unique device
identifiers and other diagnostic data.
</p>
<Heading4>Tracking & Cookies Data</Heading4>
<p>
We use cookies and similar tracking technologies to track the activity
on our Service and hold certain information.
</p>
<p>
Cookies are files with small amount of data which may include an
anonymous unique identifier. Cookies are sent to your browser from a
website and stored on your device. Tracking technologies also used are
beacons, tags, and scripts to collect and track information and to
improve and analyze our Service.
</p>
<p>
You can instruct your browser to refuse all cookies or to indicate when
a cookie is being sent. However, if you do not accept cookies, you may
not be able to use some portions of our Service.
</p>
<p>Examples of Cookies we use:</p>
<ul>
<li><strong>Session Cookies.</strong> We use Session Cookies to operate our Service.</li>
<li><strong>Preference Cookies.</strong> We use Preference Cookies to remember your preferences and various settings.</li>
<li><strong>Security Cookies.</strong> We use Security Cookies for security purposes.</li>
</ul>
<Heading2>Use of Data</Heading2>
<p>domsPlace uses the collected data for various purposes:</p>
<ul>
<li>To provide and maintain the Service</li>
<li>To notify you about changes to our Service</li>
<li>To allow you to participate in interactive features of our Service when you choose to do so</li>
<li>To provide customer care and support</li>
<li>To provide analysis or valuable information so that we can improve the Service</li>
<li>To monitor the usage of the Service</li>
<li>To detect, prevent and address technical issues</li>
</ul>
<Heading2>Transfer Of Data</Heading2>
<p>Your information, including Personal Data, may be transferred to — and maintained on — computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from your jurisdiction.</p>
<p>If you are located outside Australia and choose to provide information to us, please note that we transfer the data, including Personal Data, to Australia and process it there.</p>
<p>Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer.</p>
<p>domsPlace will take all steps reasonably necessary to ensure that your data is treated securely and in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of your data and other personal information.</p>
<Heading2>Disclosure Of Data</Heading2>
<Heading3>Legal Requirements</Heading3>
<p>domsPlace may disclose your Personal Data in the good faith belief that such action is necessary to:</p>
<ul>
<li>To comply with a legal obligation</li>
<li>To protect and defend the rights or property of domsPlace</li>
<li>To prevent or investigate possible wrongdoing in connection with the Service</li>
<li>To protect the personal safety of users of the Service or the public</li>
<li>To protect against legal liability</li>
</ul>
<Heading2>Security Of Data</Heading2>
<p>The security of your data is important to us, but remember that no method of transmission over the Internet, or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute security.</p>
<Heading2>Service Providers</Heading2>
<p>We may employ third party companies and individuals to facilitate our Service ("Service Providers"), to provide the Service on our behalf, to perform Service-related services or to assist us in analyzing how our Service is used.</p>
<p>These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.</p>
<Heading3>Analytics</Heading3>
<p>We may use third-party Service Providers to monitor and analyze the use of our Service.</p>
<ul>
<li>
<p><strong>Google Analytics</strong></p>
<p>Google Analytics is a web analytics service offered by Google that tracks and reports website traffic. Google uses the data collected to track and monitor the use of our Service. This data is shared with other Google services. Google may use the collected data to contextualize and personalize the ads of its own advertising network.</p>
<p>You can opt-out of having made your activity on the Service available to Google Analytics by installing the Google Analytics opt-out browser add-on. The add-on prevents the Google Analytics JavaScript (ga.js, analytics.js, and dc.js) from sharing information with Google Analytics about visits activity.</p>
<p>For more information on the privacy practices of Google, please visit the Google Privacy & Terms web page: <a href="https://policies.google.com/privacy?hl=en" target="_blank">https://policies.google.com/privacy?hl=en</a>
</p>
</li>
</ul>
<Heading2>Links To Other Sites</Heading2>
<p>Our Service may contain links to other sites that are not operated by us. If you click on a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.</p>
<p>We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.</p>
<Heading2>Children's Privacy</Heading2>
<p>Our Service does not address anyone under the age of 18 ("Children").</p>
<p>We do not knowingly collect personally identifiable information from anyone under the age of 18. If you are a parent or guardian and you are aware that your Children has provided us with Personal Data, please contact us. If we become aware that we have collected Personal Data from children without verification of parental consent, we take steps to remove that information from our servers.</p>
<Heading2>Changes To This Privacy Policy</Heading2>
<p>We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.</p>
<p>We will let you know via email and/or a prominent notice on our Service, prior to the change becoming effective and update the "effective date" at the top of this Privacy Policy.</p>
<p>You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.</p>
<Heading2>Contact Us</Heading2>
<p>
If you have any questions about this Privacy Policy, please contact us
by visiting this page on our
website: <a href="/contact">https://domsplace.com/contact</a>
</p>
</Boundary>
</Layout>
)

8
src/settings/all.ts Normal file
View File

@ -0,0 +1,8 @@
export * from './styles/Animation';
export * from './styles/Border';
export * from './styles/Color';
export * from './styles/Font';
export * from './styles/Gutter';
export * from './styles/Responsive';
export * from './styles/Widget';
export * from './styles/ZIndex';

11
src/settings/styles/Animation.ts Normal file
View File

@ -0,0 +1,11 @@
export const Easings = {
easeOut: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
easeInOut: 'cubic-bezier(0.77, 0, 0.175, 1)'
}
export const Durations = {
timeShort: 0.2,
timeMedium: 0.5,
timeLong: 1,
timeVeryLong: 3
}

5
src/settings/styles/Border.ts Normal file
View File

@ -0,0 +1,5 @@
import { Colors } from "./Color";
export const Borders = {
default: `0.2em solid ${Colors.default}`
};

22
src/settings/styles/Color.ts Normal file
View File

@ -0,0 +1,22 @@
export const Colors = {
primary: '#B52756',
primaryDark: '#370c1a',
primaryLight: '#d53a6d',
disabled: '#777',
disabledDark: '#555',
danger: '#e85a5a',
dangerLight: '#ee8787',
dangerDark: '#d71e1e',
success: '#69d34a',
successLight: '#ade79c',
successDark: '#346925',
default: '#000',
defaultLight: '#333',
background: '#000',
text: '#FFF'
}

23
src/settings/styles/Font.ts Normal file
View File

@ -0,0 +1,23 @@
export const Fonts = {
body: "'Nanum Gothic', sans-serif",
heading: "'Bitter', serif"
};
export const FontWeights = {
body: 400,
heading: 600
};
export const FontSizes = {
default: '16px',
title: '2.5rem',
titleLarge: '3.5rem',
heading1: '2.25rem',
heading2: '1.75rem',
heading3: '1.5rem',
heading4: '1.25rem',
heading5: '1.1rem',
heading6: '0.9rem'
}

9
src/settings/styles/Gutter.ts Normal file
View File

@ -0,0 +1,9 @@
export const Gutters = {
extraSmall: '.25rem',
small: '.5rem',
medium: '1rem',
large: '2rem',
extraLarge: '3rem',
extraExtraLarge: '4rem',
extremeLarge: '12rem'
};

27
src/settings/styles/Responsive.ts Normal file
View File

@ -0,0 +1,27 @@
export const Sizes = {
'mobileSmall': 320,
'mobile': 375,
'mobileLarge': 414,
'tabletsmall': 600,
'tablet': 768,
'tabletLarge': 1024,
'laptopSmall': 1280,
'laptop': 1366,
'laptopLarge': 1600,
'desktopSmall': 1920,
'desktop': 2300,
'desktopLarge': 2560,
/* Special */
'ultrawide': 3840
}
export const MediaQueries = {
mobileUp: `@media screen and (min-width: ${Sizes.mobile}px)`,
tabletUp: `@media screen and (min-width: ${Sizes.tablet}px)`,
laptopUp: `@media screen and (min-width: ${Sizes.laptop}px)`,
desktopUp: `@media screen and (min-width: ${Sizes.desktop}px)`,
}

65
src/settings/styles/Widget.ts Normal file
View File

@ -0,0 +1,65 @@
import { Gutters } from "./Gutter";
import { Borders } from "./Border";
import { Colors } from "./Color";
export type WidgetTheme = (
'default' | 'primary' | 'danger' | 'success'
)
export interface WidgetProps {
disabled?:boolean;
theme?:WidgetTheme;
}
export interface WidgetSettings {
hover?:boolean;
}
export const WidgetStyles = ({
disabled, theme
}:WidgetProps, {
hover
}:WidgetSettings={}) => `
display: inline-block;
position: relative;
font-weight: inherit;
font-family: inherit;
font-size: inherit;
border: none;
box-shadow: none;
outline: none;
appearance: none;
padding: ${Gutters.medium} ${Gutters.large};
border: ${Borders.default};
color: ${Colors.text};
margin-top: ${Gutters.small};
${disabled ? `
background: ${Colors.disabled};
border-color: ${Colors.disabled};
color: ${Colors.disabledDark};
cursor: not-allowed;
` : theme == 'primary' ? `
background: ${Colors.primary};
border-color: ${Colors.primaryDark};
${hover ? `&:hover { background: ${Colors.primaryLight}; }` : ''}
` : theme == 'danger' ? `
background: ${Colors.danger};
border-color: ${Colors.dangerDark};
${hover ? `&:hover { background: ${Colors.dangerLight}; }` : ''}
` : theme == 'success' ? `
background: ${Colors.success};
border-color: ${Colors.successDark};
${hover ? `&:hover { background: ${Colors.successLight}; }` : ''}
` : `
${hover ? `&:hover { border-color: ${Colors.defaultLight} }` : ''}
background: transparent;
`}
`

3
src/settings/styles/ZIndex.ts Normal file
View File

@ -0,0 +1,3 @@
export const ZIndex = {
header: 10
}

7
src/styles/all.tsx Normal file
View File

@ -0,0 +1,7 @@
import { css } from "styled-components";
export const AllElementStyles = css`
* {
box-sizing: border-box;
}
`;

10
src/styles/anchor.tsx Normal file
View File

@ -0,0 +1,10 @@
import { Colors } from "@settings/all";
import { css } from "styled-components";
export const AnchorStyles = css`
a {
text-decoration: inherit;
color: ${Colors.primary};
&:hover { text-decoration: underline; }
}
`;

18
src/styles/body.tsx Normal file
View File

@ -0,0 +1,18 @@
import { Colors, Fonts, FontWeights, FontSizes } from "@settings/all";
import { css } from "styled-components";
export const BodyStyles = css`
body,html {
margin: 0;
padding: 0;
}
body {
color: ${Colors.text};
background: ${Colors.background};
font-family: ${Fonts.body};
font-weight: ${FontWeights.body};
font-size: ${FontSizes.default};
}
`;

2
src/styles/index.tsx Normal file
View File

@ -0,0 +1,2 @@
export * from './all';
export * from './body';

9
src/tools/styles.ts Normal file
View File

@ -0,0 +1,9 @@
import { css } from "styled-components";
export const StylePlaceholder = (content:string) => css`
&::placeholder,
&::-webkit-input-placeholder,
&:-ms-input-placeholder {
${content}
}
`;

35
tsconfig.json Normal file
View File

@ -0,0 +1,35 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"moduleResolution": "node",
"baseUrl": "src",
"paths": {
"@components/*": [ "components/*" ],
"@objects/*": [ "objects/*" ],
"@settings/*": [ "settings/*" ],
"@styles/*": [ "styles/*" ],
"@pages/*": [ "pages/*" ],
"@tools/*": [ "tools/*" ],
"@assets/*": [ "assets/*" ]
}
},
"include": [
"src"
]
}

10647
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff