feat: new banner design
This commit is contained in:
parent
e46fd2f93c
commit
1259233f27
GPG Key ID:
D75243CA236D825E
|
|
@ -9,6 +9,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"core-js": "^2.6.5",
|
||||
"vanilla-tilt": "^1.7.2",
|
||||
"vue": "^2.6.10",
|
||||
"vue-class-component": "^7.0.2",
|
||||
"vue-property-decorator": "^8.1.0"
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 169 KiB |
|
|
@ -6,8 +6,8 @@
|
|||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel='stylesheet' href='styles.css'>
|
||||
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet">
|
||||
<title>xdrm-brackets</title>
|
||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,300,400" rel="stylesheet">
|
||||
<title>xdrm()</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ body {
|
|||
height: 100%;
|
||||
|
||||
font-size: 16px;
|
||||
font-family: 'Roboto', Arial, sans-serif;
|
||||
font-family: 'Source Sans Pro', Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
color: #444;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div id="app">
|
||||
<Banner/>
|
||||
<Skills/>
|
||||
|
||||
<Experiences/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -10,11 +10,13 @@
|
|||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import Banner from './components/Banner.vue';
|
||||
import Skills from './components/Skills.vue';
|
||||
import Experiences from './components/Experiences.vue';
|
||||
|
||||
@Component({
|
||||
components: {
|
||||
Banner,
|
||||
Skills,
|
||||
Experiences,
|
||||
},
|
||||
})
|
||||
export default class App extends Vue {
|
||||
|
|
@ -34,11 +36,6 @@ export default class App extends Vue {
|
|||
padding-bottom: 4vw;
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
|
|
@ -1,119 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 6.0 KiB |
|
|
@ -8,7 +8,7 @@
|
|||
version="1.1"
|
||||
id="svg2775"
|
||||
sodipodi:docname="wave.invert.1.svg"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||
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"
|
||||
|
|
@ -23,13 +23,13 @@
|
|||
inkscape:collect="always"
|
||||
id="linearGradient1485">
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:0.6274935"
|
||||
style="stop-color:#ffffff;stop-opacity:0.44307786;"
|
||||
offset="0"
|
||||
id="stop1481" />
|
||||
<stop
|
||||
id="stop1489"
|
||||
offset="0.74826735"
|
||||
style="stop-color:#ffffff;stop-opacity:0.94999999" />
|
||||
offset="0.59203094"
|
||||
style="stop-color:#ffffff;stop-opacity:0.90033185;" />
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:1"
|
||||
offset="1"
|
||||
|
|
@ -52,16 +52,16 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.66967706"
|
||||
inkscape:cx="855.6363"
|
||||
inkscape:cy="73.169596"
|
||||
inkscape:zoom="2.6787082"
|
||||
inkscape:cx="760.06786"
|
||||
inkscape:cy="32.851656"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-height="1006"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="37"
|
||||
inkscape:window-y="42"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:object-paths="false"
|
||||
inkscape:snap-intersection-paths="true"
|
||||
|
|
@ -71,7 +71,9 @@
|
|||
fit-margin-bottom="0"
|
||||
inkscape:snap-midpoints="true"
|
||||
inkscape:object-nodes="true"
|
||||
inkscape:pagecheckerboard="0" />
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:deskcolor="#d1d1d1" />
|
||||
<metadata
|
||||
id="metadata2772">
|
||||
<rdf:RDF>
|
||||
|
|
@ -91,11 +93,11 @@
|
|||
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"
|
||||
d="M 606.63477,54.501953 C 523.28261,56.617681 460.93716,28.94674 382.54492,30.00586 304.15268,31.06498 203.77307,58.156533 139.83203,63.195312 75.890993,68.234092 70.435508,65.788533 0,66.185547 V 78.695312 H 1587.4023 V 66.185547 l -43.6724,-0.287495 C 1425.1177,65.117229 1035.0168,4.757204 877.98937,10.812094 720.96192,16.866984 689.98693,52.386225 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" />
|
||||
sodipodi:nodetypes="zzzccccszz" />
|
||||
<g
|
||||
style="display:inline"
|
||||
id="g1450"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
|
@ -8,7 +8,7 @@
|
|||
version="1.1"
|
||||
id="svg2775"
|
||||
sodipodi:docname="wave.invert.2.svg"
|
||||
inkscape:version="1.1 (c68e22c387, 2021-05-23)"
|
||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||
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"
|
||||
|
|
@ -29,9 +29,9 @@
|
|||
<stop
|
||||
id="stop872"
|
||||
offset="0.2287928"
|
||||
style="stop-color:#ffffff;stop-opacity:0.22018261" />
|
||||
style="stop-color:#ffffff;stop-opacity:0.15000001;" />
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:0.1238938"
|
||||
style="stop-color:#ffffff;stop-opacity:0.05;"
|
||||
offset="1"
|
||||
id="stop866" />
|
||||
</linearGradient>
|
||||
|
|
@ -52,16 +52,16 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.60440736"
|
||||
inkscape:cx="833.87469"
|
||||
inkscape:cy="-26.472212"
|
||||
inkscape:zoom="1.2088147"
|
||||
inkscape:cx="752.80355"
|
||||
inkscape:cy="13.236106"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-height="1006"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="37"
|
||||
inkscape:window-y="42"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:object-paths="false"
|
||||
inkscape:snap-intersection-paths="true"
|
||||
|
|
@ -72,7 +72,9 @@
|
|||
inkscape:snap-midpoints="true"
|
||||
inkscape:object-nodes="true"
|
||||
inkscape:snap-page="true"
|
||||
inkscape:pagecheckerboard="0" />
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:deskcolor="#d1d1d1" />
|
||||
<metadata
|
||||
id="metadata2772">
|
||||
<rdf:RDF>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
|
@ -1,112 +0,0 @@
|
|||
<?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>
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
|
|
@ -4,41 +4,40 @@
|
|||
<div class='wave'></div>
|
||||
<div class='wave w2'></div>
|
||||
|
||||
<div class='icon-wrapper'>
|
||||
<div class='icon'>
|
||||
<div class='ring'></div>
|
||||
<div class='picture'></div>
|
||||
<div class='card-container'>
|
||||
<div class='bg-gradient-1' data-depth='.2'></div>
|
||||
<div class='bg-gradient-2' data-depth='.5'></div>
|
||||
|
||||
<div class='card'>
|
||||
|
||||
<div class='icon'></div>
|
||||
|
||||
<div class='name'>
|
||||
<span class='firstname'>
|
||||
{{ model.firstname | capitalize }}
|
||||
</span>
|
||||
<span class='lastname'>
|
||||
{{ model.lastname.toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class='contact'>
|
||||
<span>{{ model.phone }}</span>
|
||||
<span>{{ model.email }}</span>
|
||||
<span>{{ model.address }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='content'>
|
||||
|
||||
<div class='contact'>
|
||||
<span>{{ model.phone }}</span>
|
||||
<span>{{ model.email }}</span>
|
||||
<span>{{ model.address }}</span>
|
||||
</div>
|
||||
|
||||
<div class='name'>
|
||||
<span class='firstname'>
|
||||
{{ model.firstname | capitalize }}
|
||||
</span>
|
||||
<span class='lastname'>
|
||||
{{ model.lastname.toUpperCase() }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class='headline'>
|
||||
{{ model.headline.toUpperCase() }}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class='headline' v-html='model.headline'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import BannerModel from '../model/banner';
|
||||
import VanillaTilt from 'vanilla-tilt';
|
||||
|
||||
@Component({
|
||||
filters: {
|
||||
|
|
@ -52,13 +51,87 @@
|
|||
})
|
||||
export default class Banner extends Vue {
|
||||
private model: any = BannerModel;
|
||||
|
||||
private mounted() {
|
||||
const card = document.querySelector('.card') as HTMLElement|null;
|
||||
if ( card == null ) {
|
||||
return;
|
||||
}
|
||||
VanillaTilt.init(card, {
|
||||
// 'max': 8,
|
||||
'max': 0,
|
||||
'speed': 400,
|
||||
'glare': true,
|
||||
'max-glare': 0.1,
|
||||
'reverse': true,
|
||||
'full-page-listening': true,
|
||||
});
|
||||
|
||||
const self = this;
|
||||
document.addEventListener('mousemove', function(e: MouseEvent) {
|
||||
self.onMove(e.clientX, e.clientY);
|
||||
}, false);
|
||||
// document.addEventListener('touchmove', function(e: TouchEvent) {
|
||||
// if ( e.touches.length > 0 ){
|
||||
// self.onMove(e.touches[0].clientX, e.touches[0].clientY);
|
||||
// }
|
||||
// }, false);
|
||||
// window.addEventListener('deviceorientation', function(e: DeviceOrientationEvent){
|
||||
// if ( e.gamma === null || e.beta === null ) {
|
||||
// return;
|
||||
// }
|
||||
// self.onMove(Math.abs(e.gamma), Math.abs(e.beta));
|
||||
// }, false);
|
||||
}
|
||||
|
||||
// when the mouse moves, slightly move gradient circles to give a 3d
|
||||
// look
|
||||
private onMove(x: number, y: number) {
|
||||
const size = {
|
||||
w: document.body.offsetWidth,
|
||||
h: document.body.offsetHeight,
|
||||
};
|
||||
|
||||
const thr = {
|
||||
x: 2 * Math.min(1, x / size.w) - 1,
|
||||
y: 2 * Math.min(1, y / size.h) - 1,
|
||||
};
|
||||
|
||||
const els = document.querySelectorAll('[data-depth]') as NodeListOf<HTMLElement>;
|
||||
if ( els.length < 1 ){
|
||||
return;
|
||||
}
|
||||
for( const el of els ){
|
||||
if ( el.dataset.depth == undefined ){
|
||||
continue
|
||||
}
|
||||
const val = parseFloat(el.dataset.depth);
|
||||
if ( val == NaN ){
|
||||
continue
|
||||
}
|
||||
|
||||
el.style.marginLeft = `${-val*thr.x}rem`;
|
||||
el.style.marginTop = `${-val*thr.y}rem`;
|
||||
}
|
||||
|
||||
const banner = document.querySelector('#banner') as HTMLElement|null;
|
||||
if ( banner == null ) {
|
||||
return;
|
||||
}
|
||||
|
||||
banner.style.backgroundPositionX = `${-20 - 5*thr.x}px`;
|
||||
banner.style.backgroundPositionY = `${-20 - 5*thr.y}px`;
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
$banner-size: 20rem;
|
||||
$icon-size: 9rem;
|
||||
@import '../global.scss';
|
||||
|
||||
$banner-size: 100vh;
|
||||
$icon-size: 7rem;
|
||||
$wave-height: 6.3rem;
|
||||
|
||||
$mq-noresize: 990px;
|
||||
|
|
@ -66,18 +139,17 @@
|
|||
$mq-resize: 697px;
|
||||
|
||||
#banner {
|
||||
flex: #{$banner-size + $wave-height*1.5} 0 0;
|
||||
flex: #{$banner-size * 0.999} 0 0;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-bottom: #{$wave-height*1};
|
||||
|
||||
flex-flow: row nowrap;
|
||||
justify-content: stretch;
|
||||
align-items: stretch;
|
||||
flex-flow: column wrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
|
|
@ -85,7 +157,11 @@
|
|||
font-weight: 300;
|
||||
white-space: nowrap;
|
||||
|
||||
background: #07142d;
|
||||
// background: ;
|
||||
background: url('../assets/code-letters-screen-blur2.jpg'), linear-gradient(45deg, #07142d, #151842);
|
||||
background-repeat: repeat;
|
||||
background-size: auto 150%;
|
||||
background-position: -20px -20px;
|
||||
|
||||
@keyframes wave {
|
||||
from{ background-position-x: 0; }
|
||||
|
|
@ -95,7 +171,7 @@
|
|||
.wave {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: #{$banner-size + $wave-height*.5 + .1rem};
|
||||
top: calc( #{$banner-size} - #{$wave-height} );
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: $wave-height;
|
||||
|
|
@ -103,77 +179,91 @@
|
|||
background-image: url('../assets/wave.invert.1.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-position-y: 101%;
|
||||
background-size: 100% auto;
|
||||
background-size: auto 100%;
|
||||
|
||||
animation: 100s linear wave infinite;
|
||||
animation: 20s ease-in-out wave infinite alternate;
|
||||
|
||||
&.w2{
|
||||
background-image: url('../assets/wave.invert.2.svg');
|
||||
animation: 100s linear wave infinite reverse;
|
||||
animation: 20s ease-in-out wave infinite alternate-reverse ;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon-wrapper {
|
||||
flex: $banner-size 0 0;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-right: 1rem;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.icon {
|
||||
flex: $icon-size 0 0;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
height: $icon-size;
|
||||
|
||||
.ring {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content{
|
||||
.icon {
|
||||
flex: auto 0 1;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
|
||||
background: url("../assets/logo-dark.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.card-container {
|
||||
flex: auto 0 1;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
& > .bg-gradient-1,
|
||||
& > .bg-gradient-2 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
// opacity: 0;
|
||||
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
border-radius: 50% / 50%;
|
||||
|
||||
background: linear-gradient(90deg, #2e34c1, #4eb0d1);
|
||||
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
box-shadow: inset .2rem .2rem 1rem #ffffff55;
|
||||
}
|
||||
& > .bg-gradient-2 {
|
||||
top: 100%;
|
||||
left: 100%;
|
||||
|
||||
background: linear-gradient(-30deg, #a21ee9, #07ffa4);
|
||||
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
box-shadow: inset -.2rem -.2rem 1rem #ffffff55;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-container > .card {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 3rem 2rem;
|
||||
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
font-size: 5rem;
|
||||
|
||||
.lastname {
|
||||
font-weight: 100;
|
||||
}
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
|
@ -182,27 +272,33 @@
|
|||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
color: rgba(#fff, .7);
|
||||
|
||||
span {
|
||||
margin: 0 2em;
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
display: block;
|
||||
position: relative;
|
||||
// 3d look
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 1rem / 1rem;
|
||||
|
||||
font-size: 5em;
|
||||
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
|
||||
|
||||
.lastname {
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
backdrop-filter: blur(.5rem);
|
||||
|
||||
.headline {
|
||||
font-weight: 400;
|
||||
}
|
||||
transform-style: preserve-3d;
|
||||
transform: perspective(1000px);
|
||||
}
|
||||
|
||||
|
||||
.headline {
|
||||
margin-top: 2rem;
|
||||
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -212,7 +308,6 @@
|
|||
#banner {
|
||||
flex-direction: column;
|
||||
.icon-wrapper {
|
||||
padding: 2rem 0;
|
||||
flex: auto;
|
||||
order: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
<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>
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
align-items: center;
|
||||
|
||||
color: #ccc;
|
||||
font-size: .8rem;
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
|
||||
span{
|
||||
|
|
|
|||
|
|
@ -6,4 +6,12 @@
|
|||
}
|
||||
@mixin gradient3{
|
||||
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;
|
||||
}
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
export default {
|
||||
firstname: 'adrien',
|
||||
lastname: 'marques',
|
||||
headline: 'full-stack developer',
|
||||
lastname: 'marquès',
|
||||
headline: 'go | full-stack | IoT<br><br>Freelance developer',
|
||||
phone: '(+33) 06 69 05 19 10',
|
||||
email: 'xdrm.brackets.dev@gmail.com',
|
||||
address: 'Escalquens, 31750',
|
||||
address: 'Montauban, 82000',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
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` ],
|
||||
},
|
||||
];
|
||||
|
|
@ -3,11 +3,11 @@ export default [
|
|||
title: 'Web',
|
||||
keywords: [ 'languages', 'technologies' ],
|
||||
skills: [
|
||||
{ label: 'MariaDB', link: 'https://mariadb.org/', level: 0.7 },
|
||||
{ label: 'Postgres', link: 'https://postgresql.org/', level: 0.5 },
|
||||
{ label: 'MariaDB', link: 'https://mariadb.org/', level: 0.6 },
|
||||
{ label: 'Postgres', link: 'https://postgresql.org/', level: 0.8 },
|
||||
{ label: 'MongoDB', link: 'https://mongodb.com/', level: 0.5 },
|
||||
{ label: 'Vue <i>(.js)</i>', link: 'https://vuejs.org/', level: 0.8 },
|
||||
{ label: 'Angular <i>(7+)</i>', link: 'https://angular.io/', level: 0.5 },
|
||||
{ label: 'Angular <i>(7+)</i>', link: 'https://angular.io/', 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: 'Websocket', link: 'https://tools.ietf.org/html/rfc6455', level: 1 },
|
||||
|
|
|
|||
|
|
@ -7500,6 +7500,11 @@ validate-npm-package-license@^3.0.1:
|
|||
spdx-correct "^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:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
|
||||
|
|
|
|||
Loading…
Reference in New Issue