feat: improve waves | fix: set skillset min width
feat: add footer wave feat: add transparency to waves for better overlapping effect fix: set minimum skillset width (else, it shrinks too much)
This commit is contained in:
parent
3a946fa4c3
commit
4cc9dd9a81
|
|
@ -31,14 +31,16 @@ export default class App extends Vue {
|
|||
min-height: 100%;
|
||||
height: auto;
|
||||
|
||||
padding-bottom: 5rem;
|
||||
padding-bottom: 4vw;
|
||||
|
||||
flex-flow: column nowrap;
|
||||
// justify-content: flex-start;
|
||||
// align-items: auto;
|
||||
|
||||
// overflow: hidden;
|
||||
// overflow-y: auto;
|
||||
background: url('./assets/wave.footer.svg') bottom no-repeat;
|
||||
background-size: 100% 4vw;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,118 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="168.3799mm"
|
||||
height="7.6796336mm"
|
||||
viewBox="0 0 168.3799 7.6796336"
|
||||
version="1.1"
|
||||
id="svg3399"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14"
|
||||
sodipodi:docname="wave.footer.svg">
|
||||
<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="3.959798"
|
||||
inkscape:cx="544.00542"
|
||||
inkscape:cy="-26.779914"
|
||||
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="1016"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="34"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:object-paths="true" />
|
||||
<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: 5.9 KiB |
|
|
@ -7,6 +7,7 @@
|
|||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="420.00018mm"
|
||||
|
|
@ -17,7 +18,33 @@
|
|||
sodipodi:docname="wave.invert.1.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<defs
|
||||
id="defs2769" />
|
||||
id="defs2769">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient1485">
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:0.57964599"
|
||||
offset="0"
|
||||
id="stop1481" />
|
||||
<stop
|
||||
id="stop1489"
|
||||
offset="0.74826735"
|
||||
style="stop-color:#ffffff;stop-opacity:1" />
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop1483" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient1485"
|
||||
id="linearGradient1487"
|
||||
x1="793.95959"
|
||||
y1="3.1108716"
|
||||
x2="793.70117"
|
||||
y2="78.695312"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
|
|
@ -25,9 +52,9 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="2.8284271"
|
||||
inkscape:cx="80.013592"
|
||||
inkscape:cy="86.184064"
|
||||
inkscape:zoom="1.4142136"
|
||||
inkscape:cx="706.05076"
|
||||
inkscape:cy="109.92134"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
|
|
@ -62,7 +89,7 @@
|
|||
id="layer1"
|
||||
transform="translate(-0.83328333,-158.9488)">
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.56893516;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
style="fill:url(#linearGradient1487);fill-opacity:1;stroke-width:0.56893516;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
d="M 606.63477,54.501953 C 531.54501,51.711662 457.67965,28.990751 382.54492,30.00586 300.89517,31.108991 222.63799,51.691963 139.83203,63.195312 93.654156,69.610312 70.435508,65.788533 0,66.185547 V 78.695312 H 1587.4023 V 66.185547 c -9.6396,0.392152 -34.0164,-0.414501 -43.6724,-0.287495 -232.5307,3.058482 -454.4886,-66.47193739 -665.74053,-55.085958 -90.45464,5.96328 -180.90134,47.051049 -271.3546,43.689859 z"
|
||||
transform="matrix(0.26458333,0,0,0.26458333,0.83328333,158.94885)"
|
||||
id="rect3945"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 3.5 KiB |
|
|
@ -7,6 +7,7 @@
|
|||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="420.00018mm"
|
||||
|
|
@ -17,7 +18,33 @@
|
|||
sodipodi:docname="wave.invert.2.svg"
|
||||
inkscape:version="0.92.4 5da689c313, 2019-01-14">
|
||||
<defs
|
||||
id="defs2769" />
|
||||
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="0"
|
||||
y1="39.069624"
|
||||
x2="1587.4023"
|
||||
y2="39.069624"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
|
|
@ -25,9 +52,9 @@
|
|||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35355339"
|
||||
inkscape:cx="456.32927"
|
||||
inkscape:cy="-59.523755"
|
||||
inkscape:zoom="0.5"
|
||||
inkscape:cx="532.26558"
|
||||
inkscape:cy="-66.114037"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
|
|
@ -63,7 +90,7 @@
|
|||
id="layer1"
|
||||
transform="translate(-0.83328333,-158.9488)">
|
||||
<path
|
||||
style="fill:#ffffff;fill-opacity:0.41592922;stroke-width:0.56893516;stroke-miterlimit:4;stroke-dasharray:none"
|
||||
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"
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 3.6 KiB |
|
|
@ -48,6 +48,7 @@
|
|||
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.skillset {
|
||||
flex: 30%-(2*3%);
|
||||
|
|
@ -104,6 +105,7 @@
|
|||
display: flex;
|
||||
position: relative;
|
||||
margin: 1rem;
|
||||
min-width: 15rem;
|
||||
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
|
@ -159,6 +161,10 @@
|
|||
.skillset:nth-of-type(3n+1) .stack .level span{
|
||||
@include gradient1;
|
||||
}
|
||||
// .skillset:nth-of-type(3n+1),
|
||||
// .skillset:nth-of-type(3n+3) {
|
||||
// margin-top: 5rem;
|
||||
// }
|
||||
.skillset:nth-of-type(3n+2) .stack .level span{
|
||||
@include gradient2;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue