Compare commits
2 Commits
e46fd2f93c
...
4446f88f91
| Author | SHA1 | Date |
|---|---|---|
 Adrien Marquès
|
4446f88f91
|
|
|
Adrien Marquès
|
1259233f27
|
|
|
@ -9,6 +9,7 @@
|
||||||
},
|
},
|
||||||
"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: 4.2 KiB After Width: | Height: | Size: 169 KiB |
|
|
@ -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=Roboto:100,300,400" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
|
||||||
<title>xdrm-brackets</title>
|
<title>xdrm()</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-family: 'Roboto', Arial, sans-serif;
|
font-family: 'Source Sans Pro', Arial, sans-serif;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #444;
|
color: #444;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<Banner/>
|
<Banner/>
|
||||||
<Skills/>
|
<Skills/>
|
||||||
|
<Experiences/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -10,11 +10,13 @@
|
||||||
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 {
|
||||||
|
|
@ -34,11 +36,6 @@ 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;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?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>
|
||||||
|
After Width: | Height: | Size: 378 B |
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 |
|
|
@ -1,104 +1,13 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
<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">
|
||||||
|
<defs>
|
||||||
<svg
|
<linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientUnits="userSpaceOnUse">
|
||||||
width="420.00018mm"
|
<stop stop-color="#1a1a1a" stop-opacity=".97647" offset="0"/>
|
||||||
height="20.821516mm"
|
<stop stop-color="#1a1a1a" stop-opacity=".89804" offset=".59203"/>
|
||||||
viewBox="0 0 420.00018 20.821516"
|
<stop stop-color="#1a1a1a" offset="1"/>
|
||||||
version="1.1"
|
|
||||||
id="svg2775"
|
|
||||||
sodipodi:docname="wave.invert.1.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="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>
|
||||||
<linearGradient
|
|
||||||
inkscape:collect="always"
|
|
||||||
xlink:href="#linearGradient1485"
|
|
||||||
id="linearGradient1487"
|
|
||||||
x1="787.56714"
|
|
||||||
y1="4.8222294"
|
|
||||||
x2="787.56714"
|
|
||||||
y2="78.695312"
|
|
||||||
gradientUnits="userSpaceOnUse" />
|
|
||||||
</defs>
|
</defs>
|
||||||
<sodipodi:namedview
|
<g transform="translate(-.83328 -158.95)">
|
||||||
id="base"
|
<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"/>
|
||||||
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>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 921 B |
|
|
@ -1,105 +1,13 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
<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">
|
||||||
|
<defs>
|
||||||
<svg
|
<linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse">
|
||||||
width="420.00018mm"
|
<stop stop-color="#1a1a1a" stop-opacity=".25098" offset="0"/>
|
||||||
height="20.821516mm"
|
<stop stop-color="#1a1a1a" stop-opacity=".14902" offset=".22879"/>
|
||||||
viewBox="0 0 420.00018 20.821516"
|
<stop stop-color="#1a1a1a" stop-opacity=".05098" offset="1"/>
|
||||||
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.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>
|
||||||
<linearGradient
|
|
||||||
inkscape:collect="always"
|
|
||||||
xlink:href="#linearGradient868"
|
|
||||||
id="linearGradient870"
|
|
||||||
x1="775.00305"
|
|
||||||
y1="78.695312"
|
|
||||||
x2="775.00305"
|
|
||||||
y2="-0.00018897638"
|
|
||||||
gradientUnits="userSpaceOnUse" />
|
|
||||||
</defs>
|
</defs>
|
||||||
<sodipodi:namedview
|
<g transform="translate(-.83328 -158.95)">
|
||||||
id="base"
|
<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"/>
|
||||||
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>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 1.0 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,35 +4,30 @@
|
||||||
<div class='wave'></div>
|
<div class='wave'></div>
|
||||||
<div class='wave w2'></div>
|
<div class='wave w2'></div>
|
||||||
|
|
||||||
<div class='icon-wrapper'>
|
<div class='border-card'></div>
|
||||||
<div class='icon'>
|
|
||||||
<div class='ring'></div>
|
|
||||||
<div class='picture'></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class='content'>
|
<div class='content'>
|
||||||
|
<h3>Hello, I'm</h3>
|
||||||
<div class='contact'>
|
<h1 class='name'>
|
||||||
<span>{{ model.phone }}</span>
|
{{ model.firstname.toUpperCase() }}
|
||||||
<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() }}
|
{{ model.lastname.toUpperCase() }}
|
||||||
</span>
|
</h1>
|
||||||
|
<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='headline'>
|
<form class='themes'>
|
||||||
{{ model.headline.toUpperCase() }}
|
<input type='radio' name='theme' id='bw' checked/>
|
||||||
</div>
|
<label for='bw'></label>
|
||||||
|
|
||||||
</div>
|
<input type='radio' name='theme' id='gooey'/>
|
||||||
|
<label for='gooey'></label>
|
||||||
|
|
||||||
|
<input type='radio' name='theme' id='flat'/>
|
||||||
|
<label for='flat'></label>
|
||||||
|
|
||||||
|
<input type='radio' name='theme' id='glass'/>
|
||||||
|
<label for='glass'></label>
|
||||||
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -40,16 +35,7 @@
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
@ -57,45 +43,57 @@
|
||||||
|
|
||||||
<!-- 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">
|
||||||
$banner-size: 20rem;
|
@import '../global.scss';
|
||||||
$icon-size: 9rem;
|
|
||||||
$wave-height: 6.3rem;
|
|
||||||
|
|
||||||
$mq-noresize: 990px;
|
$banner-size: 100vh;
|
||||||
$mq-topicon: $mq-noresize;
|
$wave-height: 6.3rem;
|
||||||
$mq-resize: 697px;
|
$bg-color: #f8f8f8;
|
||||||
|
$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 + $wave-height*1.5} 0 0;
|
flex: #{$banner-size * 0.999} 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 nowrap;
|
flex-flow: row wrap;
|
||||||
justify-content: stretch;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: center;
|
||||||
|
|
||||||
color: #fff;
|
color: #3d3d3d;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-family: 'Fira Code';
|
font-family: 'Source Sans Pro';
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
background: #07142d;
|
background: $bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes wave {
|
@keyframes wave-x {
|
||||||
from{ background-position-x: 0; }
|
from{ background-position-x: 1px; }
|
||||||
to{ background-position-x: 100vw; }
|
to{ background-position-x: 100vw; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.wave {
|
.wave {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: #{$banner-size + $wave-height*.5 + .1rem};
|
top: calc( #{$banner-size} - #{$wave-height} );
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: $wave-height;
|
height: $wave-height;
|
||||||
|
|
@ -103,133 +101,197 @@
|
||||||
background-image: url('../assets/wave.invert.1.svg');
|
background-image: url('../assets/wave.invert.1.svg');
|
||||||
background-repeat: repeat-x;
|
background-repeat: repeat-x;
|
||||||
background-position-y: 101%;
|
background-position-y: 101%;
|
||||||
background-size: 100% auto;
|
background-size: auto 100%;
|
||||||
|
|
||||||
animation: 100s linear wave infinite;
|
animation: 18s ease-in-out wave-x infinite alternate;
|
||||||
|
|
||||||
&.w2{
|
&.w2{
|
||||||
background-image: url('../assets/wave.invert.2.svg');
|
background-image: url('../assets/wave.invert.2.svg');
|
||||||
animation: 100s linear wave infinite reverse;
|
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-card {
|
||||||
|
|
||||||
.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;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: -20vw;
|
||||||
left: 0;
|
left: 70vw;
|
||||||
width: 100%;
|
width: 60vw;
|
||||||
height: 100%;
|
height: 60vw;
|
||||||
|
|
||||||
border: 2px solid #fff;
|
background: #1a1a1a;
|
||||||
border-radius: 50% / 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.picture {
|
border-radius: 3rem;
|
||||||
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: rotate(30deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
flex: auto 0 1;
|
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: relative;
|
position: relative;
|
||||||
|
|
||||||
font-size: 5em;
|
margin: 0 10rem;
|
||||||
|
margin-bottom: $wave-height;
|
||||||
|
|
||||||
.lastname {
|
h1 {
|
||||||
font-weight: 100;
|
font-size: 4em;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
}
|
h2 {
|
||||||
|
font-size: 2.2em;
|
||||||
.headline {
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
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;
|
||||||
|
position: relative;
|
||||||
|
width: $theme-chip-size;
|
||||||
|
height: $theme-chip-size;
|
||||||
|
|
||||||
|
margin: 0 #{$theme-chip-spacing};
|
||||||
|
|
||||||
|
background: $bg-color;
|
||||||
|
|
||||||
|
border-radius: 50% / 50%;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
transition: transform .2s ease-in;
|
||||||
|
|
||||||
|
// hide the center to make a ring
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: $theme-chip-empty;
|
||||||
|
height: $theme-chip-empty;
|
||||||
|
|
||||||
|
background: $bg-color;
|
||||||
|
|
||||||
|
border-radius: 50% / 50%;
|
||||||
|
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: $theme-chip-inner;
|
||||||
|
height: $theme-chip-inner;
|
||||||
|
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
border-radius: 50% / 50%;
|
||||||
|
|
||||||
|
transform: translateX(-50%) translateY(-50%) scale(1);
|
||||||
|
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// put icon on top instead of left if less than $mq-noresize px wide
|
input#bw + label {
|
||||||
@media screen and (max-width: $mq-topicon){
|
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
|
||||||
|
@media screen and (max-height: 615px){
|
||||||
#banner {
|
#banner {
|
||||||
flex-direction: column;
|
align-items: flex-start;
|
||||||
.icon-wrapper {
|
|
||||||
padding: 2rem 0;
|
|
||||||
flex: auto;
|
|
||||||
order: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// stop resizing: fixed width since $mq-noresize px wide
|
.content {
|
||||||
@media screen and (min-width: $mq-noresize){
|
margin-top: 2rem;
|
||||||
#banner {
|
|
||||||
padding: 0 calc( 50% - #{$mq-noresize/2} );
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// shring text forever
|
// not enough horizontal space
|
||||||
@media screen and (max-width: $mq-resize){
|
@media screen and (max-width: 740px){
|
||||||
#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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
align-items: center;
|
||||||
|
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
font-size: .8rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
|
||||||
span{
|
span{
|
||||||
|
|
|
||||||
|
|
@ -7,3 +7,11 @@
|
||||||
@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;
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
export default {
|
export default {
|
||||||
firstname: 'adrien',
|
firstname: 'adrien',
|
||||||
lastname: 'marques',
|
lastname: 'marquès',
|
||||||
headline: 'full-stack developer',
|
headline: 'freelance 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: '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',
|
title: 'Web',
|
||||||
keywords: [ 'languages', 'technologies' ],
|
keywords: [ 'languages', 'technologies' ],
|
||||||
skills: [
|
skills: [
|
||||||
{ label: 'MariaDB', link: 'https://mariadb.org/', level: 0.7 },
|
{ label: 'MariaDB', link: 'https://mariadb.org/', level: 0.6 },
|
||||||
{ label: 'Postgres', link: 'https://postgresql.org/', level: 0.5 },
|
{ label: 'Postgres', link: 'https://postgresql.org/', level: 0.8 },
|
||||||
{ 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.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: '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 },
|
||||||
|
|
|
||||||
|
|
@ -7500,6 +7500,11 @@ 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"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue