Compare commits

..

No commits in common. "4446f88f91b7a88021629f76c27954712a6f1e74" and "e46fd2f93c16c6fe8251494f9405fdb1b209fed6" have entirely different histories.

21 changed files with 618 additions and 386 deletions

View File

@ -9,7 +9,6 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^2.6.5", "core-js": "^2.6.5",
"vanilla-tilt": "^1.7.2",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-class-component": "^7.0.2", "vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.1.0" "vue-property-decorator": "^8.1.0"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 169 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel='stylesheet' href='styles.css'> <link rel='stylesheet' href='styles.css'>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
<title>xdrm()</title> <title>xdrm-brackets</title>
</head> </head>
<body> <body>
<noscript> <noscript>

View File

@ -24,7 +24,7 @@ body {
height: 100%; height: 100%;
font-size: 16px; font-size: 16px;
font-family: 'Source Sans Pro', Arial, sans-serif; font-family: 'Roboto', Arial, sans-serif;
font-weight: 300; font-weight: 300;
color: #444; color: #444;

View File

@ -2,7 +2,7 @@
<div id="app"> <div id="app">
<Banner/> <Banner/>
<Skills/> <Skills/>
<Experiences/>
</div> </div>
</template> </template>
@ -10,13 +10,11 @@
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import Banner from './components/Banner.vue'; import Banner from './components/Banner.vue';
import Skills from './components/Skills.vue'; import Skills from './components/Skills.vue';
import Experiences from './components/Experiences.vue';
@Component({ @Component({
components: { components: {
Banner, Banner,
Skills, Skills,
Experiences,
}, },
}) })
export default class App extends Vue { export default class App extends Vue {
@ -36,6 +34,11 @@ export default class App extends Vue {
padding-bottom: 4vw; padding-bottom: 4vw;
flex-flow: column nowrap; flex-flow: column nowrap;
// justify-content: flex-start;
// align-items: auto;
// background: url('./assets/wave.footer.svg') bottom no-repeat;
// background-size: 100vw auto;
overflow: hidden; overflow: hidden;
} }

View File

@ -1,6 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="432.8mm" height="432.8mm" version="1.1" viewBox="0 0 432.8 432.8" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(137.37 108.9)">
<rect transform="rotate(115.61)" x="-102.76" y="-283.27" width="331.09" height="331.09" rx="13.298" ry="13.298" fill="#1a1a1a" style="paint-order:stroke fill markers"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 378 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

BIN
src/assets/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

119
src/assets/wave.footer.svg Normal file
View File

@ -0,0 +1,119 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="168.3799mm"
height="7.6796336mm"
viewBox="0 0 168.3799 7.6796336"
version="1.1"
id="svg3399"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
sodipodi:docname="wave.footer.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs3393">
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1800"
id="linearGradient1343"
gradientUnits="userSpaceOnUse"
x1="793.12"
y1="313.21735"
x2="158.52965"
y2="253.81436"
gradientTransform="matrix(0.26458334,0,0,0.26458334,-1.0495889e-5,-10.583342)" />
<linearGradient
id="linearGradient1800"
inkscape:collect="always">
<stop
id="stop1796"
offset="0"
style="stop-color:#518dfc;stop-opacity:0.59734511" />
<stop
style="stop-color:#5170fc;stop-opacity:1;"
offset="0.50264144"
id="stop2738" />
<stop
id="stop2740"
offset="0.88114482"
style="stop-color:#5154fc;stop-opacity:1;" />
<stop
id="stop1798"
offset="1"
style="stop-color:#5154fc;stop-opacity:0.64159292" />
</linearGradient>
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4010417"
inkscape:cx="353.30854"
inkscape:cy="-71.375462"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:object-paths="true"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata3396">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-0.58865118,-151.62905)">
<g
id="g2701">
<g
transform="rotate(177.20323,104.20246,109.49035)"
id="g1341"
style="display:inline">
<path
inkscape:connector-curvature="0"
id="path1335"
d="m 41.569601,64.24168 c 9.429212,0.181116 18.966318,-3.050636 28.45679,-2.65472 10.562149,0.440614 20.772468,4.888029 31.343669,4.835182 12.62522,-0.06307 24.59471,-2.767623 37.21836,-2.977422 7.92037,-0.131616 15.65521,2.634686 23.56434,3.076848 10.49351,0.586665 21.05258,-1.458472 31.52506,-0.572413 5.26398,0.445417 11.99463,0.997281 16.25035,2.839579 l 0.19546,-4.001186 -168.179338,-8.21584 z"
style="fill:url(#linearGradient1343);fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path1337"
transform="matrix(-0.26426819,-0.01290994,0.01290994,-0.26426819,209.42998,78.986802)"
d="m 627.78516,25.189453 c -36.1973,2.8101 -65.13963,14.55081 -98.32422,14.787109 -18.57511,0.1323 -37.02198,-3.026502 -55.45508,-6.220703 20.67066,5.456001 41.09357,13.454656 62.28516,13.347657 31.30638,-0.1581 60.64736,-16.561663 91.49414,-21.914063 z M 417.7207,27.292969 c -2.48966,0.01 -4.98105,0.07694 -7.47461,0.210937 -47.6489,2.5664 -92.33529,14.983516 -139.95117,18.103516 -29.87536,1.9575 -59.58472,-7.058931 -89.52344,-7.269531 -8.27029,-0.058 -16.52945,0.328959 -24.7832,0.943359 0.83535,3e-4 1.67022,-2.81e-4 2.50586,0.01172 31.33204,0.602 61.73411,14.009971 93.06445,13.326172 64.53728,-1.4085 125.77305,-23.949001 190.32032,-23.8125 -8.04026,-0.9372 -16.08934,-1.542572 -24.15821,-1.513673 z M 0,38.589844 v 0.189453 c 7.7502837,3.7901 24.701486,11.597706 37.386719,13.128906 27.820149,3.3579 55.610456,-4.300828 83.505861,-9.111328 C 101.23374,44.984575 81.57806,47.0143 61.869141,46.3125 41.915356,45.6018 16.405187,44.759744 0,38.589844 Z"
style="fill:#ffffff;fill-opacity:0.35775865;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
inkscape:connector-curvature="0"
id="path1339"
d="m 99.392063,66.380873 c 0.658057,0.02979 1.317327,0.04406 1.978027,0.04075 11.24058,-0.05616 21.92965,-1.545553 33.08205,-2.715914 -7.83839,0.54679 -24.10779,-1.382211 -25.15417,-1.362825 -7.96182,0.147489 -15.892346,1.098286 -23.851928,1.337881 -0.602822,0.01815 -1.205818,0.03424 -1.808709,0.05185 5.231824,1.166174 10.453486,2.408361 15.75473,2.648253 z m 62.761237,0.140204 c 10.49334,0.586569 21.05224,-1.458483 31.52455,-0.572438 0.56821,0.04808 1.16,0.09848 1.75743,0.150526 -2.23562,-0.858359 -4.43227,-1.882838 -6.74057,-2.358972 l -5.77829,-0.282279 c -6.92127,0.368147 -13.79941,2.713762 -20.76312,3.063163 z m 47.77489,2.267141 0.0577,-1.181465 c -1.32697,-0.489116 -3.13726,-0.40405 -5.04723,-0.282264 1.84226,0.372803 3.55753,0.843823 4.98951,1.463729 z m -61.86685,-4.436817 c -1.44845,-0.434667 -3.59837,-0.783225 -7.43424,-0.879004 2.48967,0.103495 4.96404,0.451955 7.43424,0.879004 z"
style="opacity:0.23800001;fill:#ffffff;fill-opacity:0.35686275;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.0 KiB

View File

@ -1,13 +1,104 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<defs>
<linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientUnits="userSpaceOnUse"> <svg
<stop stop-color="#1a1a1a" stop-opacity=".97647" offset="0"/> width="420.00018mm"
<stop stop-color="#1a1a1a" stop-opacity=".89804" offset=".59203"/> height="20.821516mm"
<stop stop-color="#1a1a1a" offset="1"/> viewBox="0 0 420.00018 20.821516"
</linearGradient> version="1.1"
</defs> id="svg2775"
<g transform="translate(-.83328 -158.95)"> sodipodi:docname="wave.invert.1.svg"
<path transform="matrix(.26458 0 0 .26458 .83328 158.95)" d="m606.63 54.502c-83.352 2.1157-145.7-25.555-224.09-24.496s-178.77 28.151-242.71 33.189c-63.941 5.0388-69.397 2.5932-139.83 2.9902v12.51h1587.4v-12.51l-43.672-0.2875c-118.61-0.78082-508.71-61.141-665.74-55.086-157.03 6.0549-188 41.574-271.35 43.69z" fill="url(#a)" stroke-width=".56894"/> inkscape:version="1.1 (c68e22c387, 2021-05-23)"
</g> xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2769">
<linearGradient
inkscape:collect="always"
id="linearGradient1485">
<stop
style="stop-color:#ffffff;stop-opacity:0.6274935"
offset="0"
id="stop1481" />
<stop
id="stop1489"
offset="0.74826735"
style="stop-color:#ffffff;stop-opacity:0.94999999" />
<stop
style="stop-color:#ffffff;stop-opacity:1"
offset="1"
id="stop1483" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient1485"
id="linearGradient1487"
x1="787.56714"
y1="4.8222294"
x2="787.56714"
y2="78.695312"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.66967706"
inkscape:cx="855.6363"
inkscape:cy="73.169596"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:object-paths="false"
inkscape:snap-intersection-paths="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-midpoints="true"
inkscape:object-nodes="true"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata2772">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-0.83328333,-158.9488)">
<path
style="fill:url(#linearGradient1487);fill-opacity:1;stroke-width:0.568935;stroke-miterlimit:4;stroke-dasharray:none"
d="M 606.63477,54.501953 C 531.51738,56.408658 457.67965,28.990751 382.54492,30.00586 300.89517,31.108991 221.23686,56.780324 139.83203,63.195312 93.354786,66.857883 70.435508,65.788533 0,66.185547 V 78.695312 H 1587.4023 V 66.185547 c -9.6396,0.392152 -29.1291,0.361121 -43.6724,-0.287495 C 1321.2791,55.976994 1100.4959,2.2323681 877.98937,10.812094 786.44098,14.342148 698.22169,52.177202 606.63477,54.501953 Z"
transform="matrix(0.26458333,0,0,0.26458333,0.83328333,158.94885)"
id="rect3945"
inkscape:connector-curvature="0"
sodipodi:nodetypes="aaaccccaaa" />
<g
style="display:inline"
id="g1450"
transform="translate(0.83328333,98.033331)" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 921 B

After

Width:  |  Height:  |  Size: 3.5 KiB

View File

@ -1,13 +1,105 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="420mm" height="20.822mm" version="1.1" viewBox="0 0 420 20.822" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Created with Inkscape (http://www.inkscape.org/) -->
<defs>
<linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse"> <svg
<stop stop-color="#1a1a1a" stop-opacity=".25098" offset="0"/> width="420.00018mm"
<stop stop-color="#1a1a1a" stop-opacity=".14902" offset=".22879"/> height="20.821516mm"
<stop stop-color="#1a1a1a" stop-opacity=".05098" offset="1"/> viewBox="0 0 420.00018 20.821516"
</linearGradient> version="1.1"
</defs> id="svg2775"
<g transform="translate(-.83328 -158.95)"> sodipodi:docname="wave.invert.2.svg"
<path transform="matrix(.26458 0 0 .26458 .83328 158.95)" d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z" fill="url(#a)" stroke-width=".56894"/> inkscape:version="1.1 (c68e22c387, 2021-05-23)"
</g> xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2769">
<linearGradient
inkscape:collect="always"
id="linearGradient868">
<stop
style="stop-color:#ffffff;stop-opacity:0.25490198"
offset="0"
id="stop864" />
<stop
id="stop872"
offset="0.2287928"
style="stop-color:#ffffff;stop-opacity:0.22018261" />
<stop
style="stop-color:#ffffff;stop-opacity:0.1238938"
offset="1"
id="stop866" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient868"
id="linearGradient870"
x1="775.00305"
y1="78.695312"
x2="775.00305"
y2="-0.00018897638"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.60440736"
inkscape:cx="833.87469"
inkscape:cy="-26.472212"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:object-paths="false"
inkscape:snap-intersection-paths="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-midpoints="true"
inkscape:object-nodes="true"
inkscape:snap-page="true"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata2772">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-0.83328333,-158.9488)">
<path
style="fill:url(#linearGradient870);fill-opacity:1;stroke-width:0.568935;stroke-miterlimit:4;stroke-dasharray:none"
d="M 606.63477,28.501953 C 531.50948,30.066521 457.67965,2.9907502 382.54492,4.0058597 300.89517,5.1089905 221.23686,30.780324 139.83203,37.195312 93.354786,40.857883 70.435508,39.788533 0,40.185547 V 78.695312 H 1587.4023 V 40.185547 c -9.6396,0.392152 -29.1258,0.282619 -43.6724,-0.287495 C 1458.682,36.564835 1374.154,20.525554 1289.0475,21.590229 1209.2523,22.58846 1130.5072,47.756803 1050.7634,44.723632 964.13045,41.428423 881.24098,0.96595402 794.55077,-1.8897638e-4 731.19962,-0.70622333 669.97611,27.182799 606.63477,28.501953 Z"
id="rect3945"
inkscape:connector-curvature="0"
sodipodi:nodetypes="aaaccccaaaaa"
transform="matrix(0.26458333,0,0,0.26458333,0.83328333,158.94885)" />
<g
style="display:inline"
id="g1450"
transform="translate(0.83328333,98.033331)" />
</g>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

View File

@ -0,0 +1,112 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="420.00018mm"
height="20.821516mm"
viewBox="0 0 420.00018 20.821516"
version="1.1"
id="svg2775"
sodipodi:docname="wave.invert.2.svg"
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs2769">
<linearGradient
inkscape:collect="always"
id="linearGradient868">
<stop
style="stop-color:#ffffff;stop-opacity:0.1254902"
offset="0"
id="stop864" />
<stop
id="stop872"
offset="0.51782715"
style="stop-color:#ffffff;stop-opacity:0.25663716" />
<stop
style="stop-color:#ffffff;stop-opacity:0.1238938"
offset="1"
id="stop866" />
</linearGradient>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient868"
id="linearGradient870"
x1="832.3631"
y1="78.695305"
x2="874.53784"
y2="5.6464605"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.0230171"
inkscape:cx="867.04315"
inkscape:cy="141.73761"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1920"
inkscape:window-height="1011"
inkscape:window-x="0"
inkscape:window-y="37"
inkscape:window-maximized="1"
inkscape:object-paths="false"
inkscape:snap-intersection-paths="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:snap-midpoints="true"
inkscape:object-nodes="true"
inkscape:snap-page="true"
inkscape:pagecheckerboard="0" />
<metadata
id="metadata2772">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-0.83328333,-158.9488)">
<rect
style="fill:#000000;fill-opacity:0.95;stroke-width:0.424;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:13.731;paint-order:fill markers stroke"
id="rect1306"
width="561.72003"
height="181.31514"
x="-74.340935"
y="73.456749" />
<path
style="fill:url(#linearGradient870);fill-opacity:1;stroke-width:0.56893516;stroke-miterlimit:4;stroke-dasharray:none"
d="M 606.63477,28.501953 C 531.54501,25.711662 457.67965,2.9907502 382.54492,4.0058597 300.89517,5.1089905 222.63799,25.691963 139.83203,37.195312 93.654156,43.610312 70.435508,39.788533 0,40.185547 V 78.695312 H 1587.4023 V 40.185547 c -9.6396,0.392152 -34.0164,-0.414501 -43.6724,-0.287495 C 1463.4329,40.9542 1411.2135,20.788575 1289.0475,21.590229 1232.3864,21.96204 1092.9691,48.489136 1050.7634,44.723632 920.4457,33.096949 899.0196,-5.6308121 794.55077,-1.8897638e-4 704.09613,5.9630907 697.08803,31.863143 606.63477,28.501953 Z"
id="rect3945"
inkscape:connector-curvature="0"
sodipodi:nodetypes="sasccccssscs"
transform="matrix(0.26458333,0,0,0.26458333,0.83328333,158.94885)" />
<g
style="display:inline"
id="g1450"
transform="translate(0.83328333,98.033331)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -4,30 +4,35 @@
<div class='wave'></div> <div class='wave'></div>
<div class='wave w2'></div> <div class='wave w2'></div>
<div class='border-card'></div> <div class='icon-wrapper'>
<div class='icon'>
<div class='content'> <div class='ring'></div>
<h3>Hello, I'm</h3> <div class='picture'></div>
<h1 class='name'> </div>
{{ model.firstname.toUpperCase() }}
{{ model.lastname.toUpperCase() }}
</h1>
<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
</div> </div>
<form class='themes'> <div class='content'>
<input type='radio' name='theme' id='bw' checked/>
<label for='bw'></label>
<input type='radio' name='theme' id='gooey'/> <div class='contact'>
<label for='gooey'></label> <span>{{ model.phone }}</span>
<span>{{ model.email }}</span>
<span>{{ model.address }}</span>
</div>
<input type='radio' name='theme' id='flat'/> <div class='name'>
<label for='flat'></label> <span class='firstname'>
{{ model.firstname | capitalize }}
</span>
<span class='lastname'>
{{ model.lastname.toUpperCase() }}
</span>
</div>
<input type='radio' name='theme' id='glass'/> <div class='headline'>
<label for='glass'></label> {{ model.headline.toUpperCase() }}
</form> </div>
</div>
</div> </div>
</template> </template>
@ -35,7 +40,16 @@
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import BannerModel from '../model/banner'; import BannerModel from '../model/banner';
@Component({}) @Component({
filters: {
capitalize(raw: string): string {
if ( raw.length < 2 ) {
return raw.toUpperCase();
}
return raw[0].toUpperCase() + raw.substr(1).toLowerCase();
},
},
})
export default class Banner extends Vue { export default class Banner extends Vue {
private model: any = BannerModel; private model: any = BannerModel;
} }
@ -43,255 +57,179 @@
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import '../global.scss'; $banner-size: 20rem;
$icon-size: 9rem;
$wave-height: 6.3rem;
$banner-size: 100vh; $mq-noresize: 990px;
$wave-height: 6.3rem; $mq-topicon: $mq-noresize;
$bg-color: #f8f8f8; $mq-resize: 697px;
$themes-spacing: 2rem;
// horizontal spacing between theme chips
$theme-chip-spacing: 1rem;
// full size of a theme chip
$theme-chip-size: 1.6rem;
// empty space inside the chip
$theme-chip-empty: 1.1rem;
// size of the inner (checked) circle
$theme-chip-inner: .5rem;
// MEDIA QUERIES
// optimize vertical space
$mq-vert: 590px;
#banner { #banner {
flex: #{$banner-size * 0.999} 0 0; flex: #{$banner-size + $wave-height*1.5} 0 0;
display: flex; display: flex;
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
padding-bottom: #{$wave-height*1};
flex-flow: row wrap; flex-flow: row nowrap;
justify-content: flex-start; justify-content: stretch;
align-items: center; align-items: stretch;
color: #3d3d3d; color: #fff;
font-size: 1rem; font-size: 1rem;
font-family: 'Source Sans Pro'; font-family: 'Fira Code';
font-weight: 400; font-weight: 300;
white-space: nowrap; white-space: nowrap;
background: $bg-color; background: #07142d;
}
@keyframes wave-x { @keyframes wave {
from{ background-position-x: 1px; } from{ background-position-x: 0; }
to{ background-position-x: 100vw; } to{ background-position-x: 100vw; }
}
.wave {
display: block;
position: absolute;
top: calc( #{$banner-size} - #{$wave-height} );
left: 0;
width: 100vw;
height: $wave-height;
background-image: url('../assets/wave.invert.1.svg');
background-repeat: repeat-x;
background-position-y: 101%;
background-size: auto 100%;
animation: 18s ease-in-out wave-x infinite alternate;
&.w2{
background-image: url('../assets/wave.invert.2.svg');
animation: 20s ease-in-out wave-x infinite alternate-reverse;
}
}
.border-card {
display: block;
position: absolute;
top: -20vw;
left: 70vw;
width: 60vw;
height: 60vw;
background: #1a1a1a;
border-radius: 3rem;
transform: rotate(30deg);
}
.content {
flex: auto 0 1;
display: block;
position: relative;
margin: 0 10rem;
margin-bottom: $wave-height;
h1 {
font-size: 4em;
font-weight: 700;
}
h2 {
font-size: 2.2em;
font-weight: 400;
}
h3 {
font-size: 2em;
font-weight: 400;
} }
.name { .wave {
display: inline-block;
}
}
.themes {
display: flex;
position: absolute;
top: calc( #{$banner-size} - #{$wave-height} - #{$themes-spacing} );
left: 50vw;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
transform: translateX(-50%) translateY(-100%);
input[type=radio]{
display: none;
}
label {
display: block; display: block;
position: absolute;
top: #{$banner-size + $wave-height*.5 + .1rem};
left: 0;
width: 100vw;
height: $wave-height;
background-image: url('../assets/wave.invert.1.svg');
background-repeat: repeat-x;
background-position-y: 101%;
background-size: 100% auto;
animation: 100s linear wave infinite;
&.w2{
background-image: url('../assets/wave.invert.2.svg');
animation: 100s linear wave infinite reverse;
}
}
.icon-wrapper {
flex: $banner-size 0 0;
display: flex;
position: relative; position: relative;
width: $theme-chip-size; margin-right: 1rem;
height: $theme-chip-size;
margin: 0 #{$theme-chip-spacing}; flex-flow: row nowrap;
justify-content: center;
align-items: center;
background: $bg-color;
border-radius: 50% / 50%; .icon {
flex: $icon-size 0 0;
cursor: pointer;
transition: transform .2s ease-in;
// hide the center to make a ring
&:before {
content: '';
display: block; display: block;
position: absolute; position: relative;
top: 50%; height: $icon-size;
left: 50%;
width: $theme-chip-empty;
height: $theme-chip-empty;
background: $bg-color; .ring {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50% / 50%; border: 2px solid #fff;
border-radius: 50% / 50%;
}
.picture {
display: block;
position: absolute;
top: 15%;
left: 15%;
width: 70%;
height: 70%;
background: url("../assets/logo-light.svg");
background-size: cover;
// border-radius: 50% / 50%;
}
transform: translateX(-50%) translateY(-50%);
} }
&:after { }
content: '';
opacity: 0; .content{
flex: auto 0 1;
display: flex;
position: relative;
margin: auto;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
.contact {
display: flex;
position: relative;
flex-flow: row nowrap;
justify-content: space-around;
align-items: center;
color: rgba(#fff, .7);
span {
margin: 0 2em;
}
}
.name {
display: block; display: block;
position: absolute; position: relative;
top: 50%;
left: 50%;
width: $theme-chip-inner;
height: $theme-chip-inner;
background: transparent; font-size: 5em;
border-radius: 50% / 50%; .lastname {
font-weight: 100;
}
}
transform: translateX(-50%) translateY(-50%) scale(1); .headline {
font-weight: 400;
transition: opacity .1s ease-in-out;
} }
} }
label:first-child { margin-left: 0; }
label:last-child { margin-right: 0; }
input:checked + label {
transform: scale(1.1);
&:after {
opacity: 1;
}
}
input#bw + label {
background: #3d3d3d;
&:after{
background: #3d3d3d;
}
}
input#gooey + label {
background: linear-gradient(#7936dc, #bd8eff);
&:after{
background: linear-gradient(#7936dc, #bd8eff);
}
}
input#flat + label {
background: #3d3d3d;
&:after{
background: #3d3d3d;
}
}
input#glass + label {
background: #3d3d3d;
&:after{
background: #3d3d3d;
}
}
} }
// not enough vertical space // put icon on top instead of left if less than $mq-noresize px wide
@media screen and (max-height: 615px){ @media screen and (max-width: $mq-topicon){
#banner { #banner {
align-items: flex-start; flex-direction: column;
.icon-wrapper {
.content { padding: 2rem 0;
margin-top: 2rem; flex: auto;
order: 0;
} }
} }
} }
// not enough horizontal space
@media screen and (max-width: 740px){ // stop resizing: fixed width since $mq-noresize px wide
@media screen and (min-width: $mq-noresize){
#banner {
padding: 0 calc( 50% - #{$mq-noresize/2} );
}
}
// shring text forever
@media screen and (max-width: $mq-resize){
#banner { #banner {
font-size: 2vw; font-size: 2vw;
align-items: center;
justify-content: center;
.content {
margin: 0 2rem;
}
} }
} }
// border-card overlaps with the text
@media screen and (max-width: 1010px){
.border-card {
left: 80vw;
}
}
</style> </style>

View File

@ -1,87 +0,0 @@
<template>
<div id='experiences'>
<div class='experience' v-for='(experience, si) of experiences' :key='si'>
<h2>{{ experience.title.toUpperCase() }}</h2>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ExperiencesModel from '../model/experiences';
@Component
export default class Experiences extends Vue {
private experiences = ExperiencesModel;
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '../global';
$timeline-width: .25rem;
$timeline-dot-size: 1rem;
$timeline-spacing: 1rem;
#experiences {
flex: auto 0 1;
display: flex;
position: relative;
margin: 0 5%;
margin-top: 3em;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
// timeline
&:before {
content: '';
position: absolute;
display: block;
width: $timeline-width;
height: 100%;
border-radius: #{$timeline-width} / #{$timeline-width};
background: #07142d;
}
.experience {
display: inline-block;
position: relative;
width: 100%;
margin-left: $timeline-spacing;
border: 1px solid red;
h2 {
font-size: 1.3em;
font-weight: normal;
&:before {
content: '';
position: absolute;
display: block;
top: calc( 1em - #{$timeline-dot-size});
left: calc( #{-$timeline-spacing} - #{$timeline-dot-size/2} + #{$timeline-width/5} );
width: $timeline-dot-size;
height: $timeline-dot-size;
border-radius: 50% / 50%;
border: 2px solid white;
background: #07142d;
}
}
}
}
</style>

View File

@ -88,7 +88,7 @@
align-items: center; align-items: center;
color: #ccc; color: #ccc;
font-size: 1rem; font-size: .8rem;
font-weight: normal; font-weight: normal;
span{ span{

View File

@ -6,12 +6,4 @@
} }
@mixin gradient3{ @mixin gradient3{
background-image: linear-gradient(to right, #8f93ff, #ec7fef); background-image: linear-gradient(to right, #8f93ff, #ec7fef);
} }
@mixin radial-gradient($innerColor: #555, $outerColor: #333) {
background-color: $outerColor;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
background-image: -o-radial-gradient(circle, $innerColor, $outerColor);
background-repeat: no-repeat;
}

View File

@ -1,8 +1,8 @@
export default { export default {
firstname: 'adrien', firstname: 'adrien',
lastname: 'marquès', lastname: 'marques',
headline: 'freelance developer', headline: 'full-stack developer',
// phone: '(+33) 06 69 05 19 10', phone: '(+33) 06 69 05 19 10',
// email: 'xdrm.brackets.dev@gmail.com', email: 'xdrm.brackets.dev@gmail.com',
// address: 'Montauban, 82000', address: 'Escalquens, 31750',
}; };

View File

@ -1,16 +0,0 @@
export default [
{
title: 'LogAuth',
link: `https://git.xdrm.io/logauth`,
when: [ '2014', '2018' ],
description: `Système de régulation évolutif pour système embarqués avec plateforme de gestion`,
tags: [ `php`, `js`, `python`, `raspberry`, `rest`, `electronics`, `systemd`, `linux` ],
},
{
title: 'LogAuth 2',
link: `https://git.xdrm.io/logauth`,
when: [ '2015', '2018' ],
description: `Système de régulation évolutif pour système embarqués avec plateforme de gestion`,
tags: [ `php`, `js`, `python`, `raspberry`, `rest`, `electronics`, `systemd`, `linux` ],
},
];

View File

@ -3,11 +3,11 @@ export default [
title: 'Web', title: 'Web',
keywords: [ 'languages', 'technologies' ], keywords: [ 'languages', 'technologies' ],
skills: [ skills: [
{ label: 'MariaDB', link: 'https://mariadb.org/', level: 0.6 }, { label: 'MariaDB', link: 'https://mariadb.org/', level: 0.7 },
{ label: 'Postgres', link: 'https://postgresql.org/', level: 0.8 }, { label: 'Postgres', link: 'https://postgresql.org/', level: 0.5 },
{ label: 'MongoDB', link: 'https://mongodb.com/', level: 0.5 }, { label: 'MongoDB', link: 'https://mongodb.com/', level: 0.5 },
{ label: 'Vue <i>(.js)</i>', link: 'https://vuejs.org/', level: 0.8 }, { label: 'Vue <i>(.js)</i>', link: 'https://vuejs.org/', level: 0.8 },
{ label: 'Angular <i>(7+)</i>', link: 'https://angular.io/', level: 0.3 }, { label: 'Angular <i>(7+)</i>', link: 'https://angular.io/', level: 0.5 },
{ label: 'WebGL', link: 'https://www.khronos.org/webgl/', level: 0.3 }, { label: 'WebGL', link: 'https://www.khronos.org/webgl/', level: 0.3 },
{ label: 'Audio API', link: 'https://webaudio.github.io/web-audio-api/', level: 0.5 }, { label: 'Audio API', link: 'https://webaudio.github.io/web-audio-api/', level: 0.5 },
{ label: 'Websocket', link: 'https://tools.ietf.org/html/rfc6455', level: 1 }, { label: 'Websocket', link: 'https://tools.ietf.org/html/rfc6455', level: 1 },

View File

@ -7500,11 +7500,6 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0" spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0" spdx-expression-parse "^3.0.0"
vanilla-tilt@^1.7.2:
version "1.7.2"
resolved "https://registry.yarnpkg.com/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz#59a5565d9f1f6d392a36969f223fb600dd101a81"
integrity sha512-arf2wY2Y65rP6Zxve9PnUUnRl9nQ1KenPNae6QRaVq/PEvaIto2bC4jYirNJ19U7nLkzI1H9O+nYtcQlX7BTsA==
vary@~1.1.2: vary@~1.1.2:
version "1.1.2" version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"