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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<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>
|
||||
</head>
|
||||
<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"?>
|
||||
<!-- 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.1.svg"
|
||||
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"
|
||||
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>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<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>
|
||||
<linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".97647" offset="0"/>
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".89804" offset=".59203"/>
|
||||
<stop stop-color="#1a1a1a" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-.83328 -158.95)">
|
||||
<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"/>
|
||||
</g>
|
||||
</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"?>
|
||||
<!-- 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.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"
|
||||
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>
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<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>
|
||||
<linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".25098" offset="0"/>
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".14902" offset=".22879"/>
|
||||
<stop stop-color="#1a1a1a" stop-opacity=".05098" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(-.83328 -158.95)">
|
||||
<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"/>
|
||||
</g>
|
||||
</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 w2'></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='border-card'></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 class='content'>
|
||||
<h3>Hello, I'm</h3>
|
||||
<h1 class='name'>
|
||||
{{ model.firstname.toUpperCase() }}
|
||||
{{ model.lastname.toUpperCase() }}
|
||||
</h1>
|
||||
<h2 class='headline'>{{ model.headline.toUpperCase() }}</h2>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import BannerModel from '../model/banner';
|
||||
import VanillaTilt from 'vanilla-tilt';
|
||||
|
||||
@Component({
|
||||
filters: {
|
||||
capitalize(raw: string): string {
|
||||
if ( raw.length < 2 ) {
|
||||
return raw.toUpperCase();
|
||||
}
|
||||
return raw[0].toUpperCase() + raw.substr(1).toLowerCase();
|
||||
},
|
||||
},
|
||||
})
|
||||
@Component({})
|
||||
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>
|
||||
|
||||
|
|
@ -130,13 +45,23 @@
|
|||
<style scoped lang="scss">
|
||||
@import '../global.scss';
|
||||
|
||||
$banner-size: 100vh;
|
||||
$icon-size: 7rem;
|
||||
$wave-height: 6.3rem;
|
||||
$banner-size: 100vh;
|
||||
$wave-height: 6.3rem;
|
||||
$bg-color: #f8f8f8;
|
||||
$themes-spacing: 2rem;
|
||||
|
||||
$mq-noresize: 990px;
|
||||
$mq-topicon: $mq-noresize;
|
||||
$mq-resize: 697px;
|
||||
// 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 {
|
||||
flex: #{$banner-size * 0.999} 0 0;
|
||||
|
|
@ -147,184 +72,226 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
flex-flow: column wrap;
|
||||
justify-content: center;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
color: #fff;
|
||||
color: #3d3d3d;
|
||||
font-size: 1rem;
|
||||
font-family: 'Fira Code';
|
||||
font-weight: 300;
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 400;
|
||||
white-space: nowrap;
|
||||
|
||||
// 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;
|
||||
background: $bg-color;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
from{ background-position-x: 0; }
|
||||
to{ background-position-x: 100vw; }
|
||||
@keyframes wave-x {
|
||||
from{ background-position-x: 1px; }
|
||||
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 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc( #{$banner-size} - #{$wave-height} );
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: $wave-height;
|
||||
.name {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
background-image: url('../assets/wave.invert.1.svg');
|
||||
background-repeat: repeat-x;
|
||||
background-position-y: 101%;
|
||||
background-size: auto 100%;
|
||||
.themes {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
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{
|
||||
background-image: url('../assets/wave.invert.2.svg');
|
||||
animation: 20s ease-in-out wave infinite alternate-reverse ;
|
||||
}
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
|
||||
input[type=radio]{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex: auto 0 1;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-bottom: 2rem;
|
||||
width: $theme-chip-size;
|
||||
height: $theme-chip-size;
|
||||
|
||||
width: $icon-size;
|
||||
height: $icon-size;
|
||||
margin: 0 #{$theme-chip-spacing};
|
||||
|
||||
background: url("../assets/logo-dark.svg");
|
||||
background-size: cover;
|
||||
}
|
||||
background: $bg-color;
|
||||
|
||||
.card-container {
|
||||
flex: auto 0 1;
|
||||
border-radius: 50% / 50%;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
transition: transform .2s ease-in;
|
||||
|
||||
// hide the center to make a ring
|
||||
&:before {
|
||||
content: '';
|
||||
|
||||
& > .bg-gradient-1,
|
||||
& > .bg-gradient-2 {
|
||||
display: block;
|
||||
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%;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
&:after {
|
||||
content: '';
|
||||
|
||||
.card-container > .card {
|
||||
display: flex;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
|
||||
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;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: $theme-chip-inner;
|
||||
height: $theme-chip-inner;
|
||||
|
||||
font-size: 5rem;
|
||||
background: transparent;
|
||||
|
||||
.lastname {
|
||||
font-weight: 100;
|
||||
}
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 50% / 50%;
|
||||
|
||||
transform: translateX(-50%) translateY(-50%) scale(1);
|
||||
|
||||
transition: opacity .1s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: flex;
|
||||
position: relative;
|
||||
label:first-child { margin-left: 0; }
|
||||
label:last-child { margin-right: 0; }
|
||||
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
input:checked + label {
|
||||
transform: scale(1.1);
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// 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 {
|
||||
margin-top: 2rem;
|
||||
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
z-index: 1;
|
||||
input#bw + label {
|
||||
background: #3d3d3d;
|
||||
&:after{
|
||||
background: #3d3d3d;
|
||||
}
|
||||
}
|
||||
input#gooey + label {
|
||||
background: linear-gradient(#7936dc, #bd8eff);
|
||||
&:after{
|
||||
background: linear-gradient(#7936dc, #bd8eff);
|
||||
}
|
||||
}
|
||||
input#flat + label {
|
||||
background: #3d3d3d;
|
||||
&:after{
|
||||
background: #3d3d3d;
|
||||
}
|
||||
}
|
||||
input#glass + label {
|
||||
background: #3d3d3d;
|
||||
&:after{
|
||||
background: #3d3d3d;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// put icon on top instead of left if less than $mq-noresize px wide
|
||||
@media screen and (max-width: $mq-topicon){
|
||||
// not enough vertical space
|
||||
@media screen and (max-height: 615px){
|
||||
#banner {
|
||||
flex-direction: column;
|
||||
.icon-wrapper {
|
||||
flex: auto;
|
||||
order: 0;
|
||||
align-items: flex-start;
|
||||
|
||||
.content {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// stop resizing: fixed width since $mq-noresize px wide
|
||||
@media screen and (min-width: $mq-noresize){
|
||||
#banner {
|
||||
padding: 0 calc( 50% - #{$mq-noresize/2} );
|
||||
}
|
||||
}
|
||||
|
||||
// shring text forever
|
||||
@media screen and (max-width: $mq-resize){
|
||||
// not enough horizontal space
|
||||
@media screen and (max-width: 740px){
|
||||
#banner {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
export default {
|
||||
firstname: 'adrien',
|
||||
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: 'Montauban, 82000',
|
||||
headline: 'freelance developer',
|
||||
// phone: '(+33) 06 69 05 19 10',
|
||||
// email: 'xdrm.brackets.dev@gmail.com',
|
||||
// address: 'Montauban, 82000',
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue