feat: new B&W minified theme
This commit is contained in:
parent
1259233f27
commit
4446f88f91
GPG Key ID:
D75243CA236D825E
|
|
@ -6,7 +6,7 @@
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<link rel='stylesheet' href='styles.css'>
|
<link rel='stylesheet' href='styles.css'>
|
||||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,300,400" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
|
||||||
<title>xdrm()</title>
|
<title>xdrm()</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -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 |
|
|
@ -1,106 +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"
|
</linearGradient>
|
||||||
id="svg2775"
|
</defs>
|
||||||
sodipodi:docname="wave.invert.1.svg"
|
<g transform="translate(-.83328 -158.95)">
|
||||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
<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"/>
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
</g>
|
||||||
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.44307786;"
|
|
||||||
offset="0"
|
|
||||||
id="stop1481" />
|
|
||||||
<stop
|
|
||||||
id="stop1489"
|
|
||||||
offset="0.59203094"
|
|
||||||
style="stop-color:#ffffff;stop-opacity:0.90033185;" />
|
|
||||||
<stop
|
|
||||||
style="stop-color:#ffffff;stop-opacity:1"
|
|
||||||
offset="1"
|
|
||||||
id="stop1483" />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
inkscape:collect="always"
|
|
||||||
xlink:href="#linearGradient1485"
|
|
||||||
id="linearGradient1487"
|
|
||||||
x1="787.56714"
|
|
||||||
y1="4.8222294"
|
|
||||||
x2="787.56714"
|
|
||||||
y2="78.695312"
|
|
||||||
gradientUnits="userSpaceOnUse" />
|
|
||||||
</defs>
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="base"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1.0"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:zoom="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="1006"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="42"
|
|
||||||
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"
|
|
||||||
inkscape:showpageshadow="0"
|
|
||||||
inkscape:deskcolor="#d1d1d1" />
|
|
||||||
<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 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="zzzccccszz" />
|
|
||||||
<g
|
|
||||||
style="display:inline"
|
|
||||||
id="g1450"
|
|
||||||
transform="translate(0.83328333,98.033331)" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 921 B |
|
|
@ -1,107 +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"
|
</linearGradient>
|
||||||
id="svg2775"
|
</defs>
|
||||||
sodipodi:docname="wave.invert.2.svg"
|
<g transform="translate(-.83328 -158.95)">
|
||||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
<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"/>
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
</g>
|
||||||
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.15000001;" />
|
|
||||||
<stop
|
|
||||||
style="stop-color:#ffffff;stop-opacity:0.05;"
|
|
||||||
offset="1"
|
|
||||||
id="stop866" />
|
|
||||||
</linearGradient>
|
|
||||||
<linearGradient
|
|
||||||
inkscape:collect="always"
|
|
||||||
xlink:href="#linearGradient868"
|
|
||||||
id="linearGradient870"
|
|
||||||
x1="775.00305"
|
|
||||||
y1="78.695312"
|
|
||||||
x2="775.00305"
|
|
||||||
y2="-0.00018897638"
|
|
||||||
gradientUnits="userSpaceOnUse" />
|
|
||||||
</defs>
|
|
||||||
<sodipodi:namedview
|
|
||||||
id="base"
|
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1.0"
|
|
||||||
inkscape:pageopacity="0.0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:zoom="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="1006"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="42"
|
|
||||||
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"
|
|
||||||
inkscape:showpageshadow="0"
|
|
||||||
inkscape:deskcolor="#d1d1d1" />
|
|
||||||
<metadata
|
|
||||||
id="metadata2772">
|
|
||||||
<rdf:RDF>
|
|
||||||
<cc:Work
|
|
||||||
rdf:about="">
|
|
||||||
<dc:format>image/svg+xml</dc:format>
|
|
||||||
<dc:type
|
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
|
||||||
<dc:title />
|
|
||||||
</cc:Work>
|
|
||||||
</rdf:RDF>
|
|
||||||
</metadata>
|
|
||||||
<g
|
|
||||||
inkscape:label="Layer 1"
|
|
||||||
inkscape:groupmode="layer"
|
|
||||||
id="layer1"
|
|
||||||
transform="translate(-0.83328333,-158.9488)">
|
|
||||||
<path
|
|
||||||
style="fill:url(#linearGradient870);fill-opacity:1;stroke-width:0.568935;stroke-miterlimit:4;stroke-dasharray:none"
|
|
||||||
d="M 606.63477,28.501953 C 531.50948,30.066521 457.67965,2.9907502 382.54492,4.0058597 300.89517,5.1089905 221.23686,30.780324 139.83203,37.195312 93.354786,40.857883 70.435508,39.788533 0,40.185547 V 78.695312 H 1587.4023 V 40.185547 c -9.6396,0.392152 -29.1258,0.282619 -43.6724,-0.287495 C 1458.682,36.564835 1374.154,20.525554 1289.0475,21.590229 1209.2523,22.58846 1130.5072,47.756803 1050.7634,44.723632 964.13045,41.428423 881.24098,0.96595402 794.55077,-1.8897638e-4 731.19962,-0.70622333 669.97611,27.182799 606.63477,28.501953 Z"
|
|
||||||
id="rect3945"
|
|
||||||
inkscape:connector-curvature="0"
|
|
||||||
sodipodi:nodetypes="aaaccccaaaaa"
|
|
||||||
transform="matrix(0.26458333,0,0,0.26458333,0.83328333,158.94885)" />
|
|
||||||
<g
|
|
||||||
style="display:inline"
|
|
||||||
id="g1450"
|
|
||||||
transform="translate(0.83328333,98.033331)" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 1.0 KiB |
|
|
@ -4,125 +4,40 @@
|
||||||
<div class='wave'></div>
|
<div class='wave'></div>
|
||||||
<div class='wave w2'></div>
|
<div class='wave w2'></div>
|
||||||
|
|
||||||
<div class='card-container'>
|
<div class='border-card'></div>
|
||||||
<div class='bg-gradient-1' data-depth='.2'></div>
|
|
||||||
<div class='bg-gradient-2' data-depth='.5'></div>
|
|
||||||
|
|
||||||
<div class='card'>
|
<div class='content'>
|
||||||
|
<h3>Hello, I'm</h3>
|
||||||
<div class='icon'></div>
|
<h1 class='name'>
|
||||||
|
{{ model.firstname.toUpperCase() }}
|
||||||
<div class='name'>
|
{{ model.lastname.toUpperCase() }}
|
||||||
<span class='firstname'>
|
</h1>
|
||||||
{{ model.firstname | capitalize }}
|
<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
|
||||||
</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>
|
||||||
|
|
||||||
<div class='headline' v-html='model.headline'></div>
|
<form class='themes'>
|
||||||
|
<input type='radio' name='theme' id='bw' checked/>
|
||||||
|
<label for='bw'></label>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from 'vue-property-decorator';
|
import { Component, Vue } from 'vue-property-decorator';
|
||||||
import BannerModel from '../model/banner';
|
import BannerModel from '../model/banner';
|
||||||
import VanillaTilt from 'vanilla-tilt';
|
|
||||||
|
|
||||||
@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;
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -130,13 +45,23 @@
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@import '../global.scss';
|
@import '../global.scss';
|
||||||
|
|
||||||
$banner-size: 100vh;
|
$banner-size: 100vh;
|
||||||
$icon-size: 7rem;
|
$wave-height: 6.3rem;
|
||||||
$wave-height: 6.3rem;
|
$bg-color: #f8f8f8;
|
||||||
|
$themes-spacing: 2rem;
|
||||||
|
|
||||||
$mq-noresize: 990px;
|
// horizontal spacing between theme chips
|
||||||
$mq-topicon: $mq-noresize;
|
$theme-chip-spacing: 1rem;
|
||||||
$mq-resize: 697px;
|
// full size of a theme chip
|
||||||
|
$theme-chip-size: 1.6rem;
|
||||||
|
// empty space inside the chip
|
||||||
|
$theme-chip-empty: 1.1rem;
|
||||||
|
// size of the inner (checked) circle
|
||||||
|
$theme-chip-inner: .5rem;
|
||||||
|
|
||||||
|
// MEDIA QUERIES
|
||||||
|
// optimize vertical space
|
||||||
|
$mq-vert: 590px;
|
||||||
|
|
||||||
#banner {
|
#banner {
|
||||||
flex: #{$banner-size * 0.999} 0 0;
|
flex: #{$banner-size * 0.999} 0 0;
|
||||||
|
|
@ -147,184 +72,226 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
flex-flow: column wrap;
|
flex-flow: row wrap;
|
||||||
justify-content: center;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
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: ;
|
background: $bg-color;
|
||||||
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 {
|
@keyframes wave-x {
|
||||||
from{ background-position-x: 0; }
|
from{ background-position-x: 1px; }
|
||||||
to{ background-position-x: 100vw; }
|
to{ background-position-x: 100vw; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.wave {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: calc( #{$banner-size} - #{$wave-height} );
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: $wave-height;
|
||||||
|
|
||||||
|
background-image: url('../assets/wave.invert.1.svg');
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-position-y: 101%;
|
||||||
|
background-size: auto 100%;
|
||||||
|
|
||||||
|
animation: 18s ease-in-out wave-x infinite alternate;
|
||||||
|
|
||||||
|
&.w2{
|
||||||
|
background-image: url('../assets/wave.invert.2.svg');
|
||||||
|
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-card {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: -20vw;
|
||||||
|
left: 70vw;
|
||||||
|
width: 60vw;
|
||||||
|
height: 60vw;
|
||||||
|
|
||||||
|
background: #1a1a1a;
|
||||||
|
|
||||||
|
border-radius: 3rem;
|
||||||
|
|
||||||
|
transform: rotate(30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: auto 0 1;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
margin: 0 10rem;
|
||||||
|
margin-bottom: $wave-height;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 4em;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 2.2em;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wave {
|
.name {
|
||||||
display: block;
|
display: inline-block;
|
||||||
position: absolute;
|
}
|
||||||
top: calc( #{$banner-size} - #{$wave-height} );
|
}
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: $wave-height;
|
|
||||||
|
|
||||||
background-image: url('../assets/wave.invert.1.svg');
|
.themes {
|
||||||
background-repeat: repeat-x;
|
display: flex;
|
||||||
background-position-y: 101%;
|
position: absolute;
|
||||||
background-size: auto 100%;
|
top: calc( #{$banner-size} - #{$wave-height} - #{$themes-spacing} );
|
||||||
|
left: 50vw;
|
||||||
|
|
||||||
animation: 20s ease-in-out wave infinite alternate;
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
&.w2{
|
transform: translateX(-50%) translateY(-100%);
|
||||||
background-image: url('../assets/wave.invert.2.svg');
|
|
||||||
animation: 20s ease-in-out wave infinite alternate-reverse ;
|
input[type=radio]{
|
||||||
}
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
label {
|
||||||
flex: auto 0 1;
|
|
||||||
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 2rem;
|
width: $theme-chip-size;
|
||||||
|
height: $theme-chip-size;
|
||||||
|
|
||||||
width: $icon-size;
|
margin: 0 #{$theme-chip-spacing};
|
||||||
height: $icon-size;
|
|
||||||
|
|
||||||
background: url("../assets/logo-dark.svg");
|
background: $bg-color;
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-container {
|
border-radius: 50% / 50%;
|
||||||
flex: auto 0 1;
|
|
||||||
|
|
||||||
display: block;
|
cursor: pointer;
|
||||||
position: relative;
|
|
||||||
|
transition: transform .2s ease-in;
|
||||||
|
|
||||||
|
// hide the center to make a ring
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
|
||||||
& > .bg-gradient-1,
|
|
||||||
& > .bg-gradient-2 {
|
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
// opacity: 0;
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: $theme-chip-empty;
|
||||||
|
height: $theme-chip-empty;
|
||||||
|
|
||||||
|
background: $bg-color;
|
||||||
|
|
||||||
width: 20rem;
|
|
||||||
height: 20rem;
|
|
||||||
border-radius: 50% / 50%;
|
border-radius: 50% / 50%;
|
||||||
|
|
||||||
background: linear-gradient(90deg, #2e34c1, #4eb0d1);
|
|
||||||
|
|
||||||
transform: translateX(-50%) translateY(-50%);
|
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
&:after {
|
||||||
|
content: '';
|
||||||
|
|
||||||
.card-container > .card {
|
opacity: 0;
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding: 3rem 2rem;
|
|
||||||
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(255, 255, 255, 0.05);
|
|
||||||
|
|
||||||
|
|
||||||
.name {
|
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: $theme-chip-inner;
|
||||||
|
height: $theme-chip-inner;
|
||||||
|
|
||||||
font-size: 5rem;
|
background: transparent;
|
||||||
|
|
||||||
.lastname {
|
border-radius: 50% / 50%;
|
||||||
font-weight: 100;
|
|
||||||
}
|
transform: translateX(-50%) translateY(-50%) scale(1);
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
transition: opacity .1s ease-in-out;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.contact {
|
label:first-child { margin-left: 0; }
|
||||||
display: flex;
|
label:last-child { margin-right: 0; }
|
||||||
position: relative;
|
|
||||||
|
|
||||||
flex-flow: row nowrap;
|
input:checked + label {
|
||||||
justify-content: space-around;
|
transform: scale(1.1);
|
||||||
align-items: center;
|
&:after {
|
||||||
|
opacity: 1;
|
||||||
span {
|
|
||||||
margin: 0 2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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;
|
|
||||||
|
|
||||||
box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.2);
|
|
||||||
|
|
||||||
backdrop-filter: blur(.5rem);
|
|
||||||
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
transform: perspective(1000px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.headline {
|
input#bw + label {
|
||||||
margin-top: 2rem;
|
background: #3d3d3d;
|
||||||
|
&:after{
|
||||||
font-size: 2rem;
|
background: #3d3d3d;
|
||||||
font-weight: 400;
|
}
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
z-index: 1;
|
|
||||||
}
|
}
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// put icon on top instead of left if less than $mq-noresize px wide
|
// not enough vertical space
|
||||||
@media screen and (max-width: $mq-topicon){
|
@media screen and (max-height: 615px){
|
||||||
#banner {
|
#banner {
|
||||||
flex-direction: column;
|
align-items: flex-start;
|
||||||
.icon-wrapper {
|
|
||||||
flex: auto;
|
.content {
|
||||||
order: 0;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// not enough horizontal space
|
||||||
// stop resizing: fixed width since $mq-noresize px wide
|
@media screen and (max-width: 740px){
|
||||||
@media screen and (min-width: $mq-noresize){
|
|
||||||
#banner {
|
|
||||||
padding: 0 calc( 50% - #{$mq-noresize/2} );
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// shring text forever
|
|
||||||
@media screen and (max-width: $mq-resize){
|
|
||||||
#banner {
|
#banner {
|
||||||
font-size: 2vw;
|
font-size: 2vw;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// border-card overlaps with the text
|
||||||
|
@media screen and (max-width: 1010px){
|
||||||
|
.border-card {
|
||||||
|
left: 80vw;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
export default {
|
export default {
|
||||||
firstname: 'adrien',
|
firstname: 'adrien',
|
||||||
lastname: 'marquès',
|
lastname: 'marquès',
|
||||||
headline: 'go | full-stack | IoT<br><br>Freelance 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: 'Montauban, 82000',
|
// address: 'Montauban, 82000',
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue