feat: new home page
This commit is contained in:
parent
8f156dd4d1
commit
fd78df33e4
GPG Key ID:
D75243CA236D825E
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="41.72mm" height="1e3mm" version="1.1" viewBox="0 0 41.72 1e3" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(-97.866 -2.5065)">
|
||||
<path d="m118.71 2.5069 0.0164 20.649c0.0165 9.7177-20.331 9.1678-20.331 20.348v48.444c0 11.18 20.348 10.63 20.331 20.015l-0.0165 890.54" fill="none" stroke="#fff" stroke-width="1.0583"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 396 B |
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="4.2333mm" height="4.2333mm" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<linearGradient id="a" x1="122.52" x2="130.49" y1="39.199" y2="31.302" gradientTransform="translate(.09658)" gradientUnits="userSpaceOnUse" xlink:href="#b"/>
|
||||
<linearGradient id="b">
|
||||
<stop stop-color="#745cfc" offset="0"/>
|
||||
<stop stop-color="#564ba4" offset="1"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)">
|
||||
<path d="m930.25 121.26a20.844 20.844 0 0 1-20.844 20.844 20.844 20.844 0 0 1-20.844-20.844 20.844 20.844 0 0 1 20.844-20.844 20.844 20.844 0 0 1 20.844 20.844z" fill="#fff" style="paint-order:fill markers stroke"/>
|
||||
<g transform="matrix(0 2.2967 -2.2967 0 990.37 -169.5)" fill="url(#a)">
|
||||
<path d="m122.72 31.302 2.3682 3.7201a0.21308 0.21308 89.753 0 1 9.8e-4 0.2273l-2.4668 3.9498h1.5785a0.73492 0.73492 149.45 0 0 0.64338-0.37973l1.4732-2.6685a0.27716 0.27716 104.45 0 0 0.0345-0.13395v-1.7817a0.28946 0.28946 76.14 0 0-0.0332-0.13465l-1.2688-2.4147a0.71792 0.71792 31.14 0 0-0.63551-0.38397z"/>
|
||||
<path d="m130.48 39.199-2.4404-3.8335 2.538-4.0637h-2.0122l-1.7173 3.1108v1.9246l1.5038 2.8618z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,13 +1,38 @@
|
|||
<template>
|
||||
<div id='home'>
|
||||
|
||||
<div class='wave'></div>
|
||||
<div class='wave w2'></div>
|
||||
<div class='contact'>
|
||||
<span class='tel'>(+33) 06 69 05 19 10</span>
|
||||
<span class='mail'>xdrm.dev@gmail.com</span>
|
||||
<span class='addr'>Montauban, 82000</span>
|
||||
</div>
|
||||
|
||||
|
||||
<img class='logo' src='../assets/home/logo.svg'/>
|
||||
|
||||
<section class='name'>
|
||||
<h1>Adrien<br>Marquès</h1>
|
||||
<br>
|
||||
<br>
|
||||
<h2>FREELANCE DEVELOPER</h2>
|
||||
</section>
|
||||
|
||||
<div class='separator'></div>
|
||||
|
||||
<section class='readme'>
|
||||
<div class='header'>README.md</div>
|
||||
<p>Hi, I am another freelance developer !</p>
|
||||
<p>I made this website so you can <u>browse</u> some of my skills and projects.</p>
|
||||
<p>After 50+ projects since I started IT back in 2010, I still work hard for making projects maintainable so they last and can evolve..</p>
|
||||
<p>For now, my technologies of choice are : <u>Go</u> and <u>IoT</u> (Arduino, Raspberry) projects.</p>
|
||||
</section>
|
||||
|
||||
<div class='scroll-arrow' @click='scrollNext()'>
|
||||
<img src='@/assets/scroll_arrow.svg' />
|
||||
</div>
|
||||
|
||||
<div class='wave'></div>
|
||||
<div class='wave w2'></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -31,18 +56,165 @@
|
|||
$width: 100vw;
|
||||
$height: 100vh;
|
||||
|
||||
$logo-size: 8rem;
|
||||
|
||||
$scroll-btn-top: 10rem;
|
||||
$scroll-btn-size: 5rem;
|
||||
|
||||
$wave-height: 6.3rem;
|
||||
|
||||
#home {
|
||||
display: grid;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $width;
|
||||
height: $height;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $width;
|
||||
min-height: $height;
|
||||
|
||||
background: #202228;
|
||||
|
||||
grid-template-columns: 1fr #{$logo-size} 1fr;
|
||||
grid-template-rows: min-content $logo-size auto $scroll-btn-top;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contact {
|
||||
grid-column: 1 / 4;
|
||||
grid-row: 1;
|
||||
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
margin: 1em 0;
|
||||
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-around;
|
||||
|
||||
color: #9ea6b3;
|
||||
font-size: 1.2em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
.logo {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
|
||||
height: $logo-size;
|
||||
}
|
||||
|
||||
.name {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
margin-top: 3em;
|
||||
margin-right: 5em;
|
||||
margin-left: auto;
|
||||
margin-bottom: auto;
|
||||
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
|
||||
h1 { font-size: 7em; font-weight: 800; line-height: 1em; }
|
||||
h2 { font-size: 2.5em; font-weight: 400; white-space: nowrap; }
|
||||
}
|
||||
|
||||
.separator {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
|
||||
width: $logo-size;
|
||||
height: 100%;
|
||||
|
||||
background: url('../assets/home/line.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.readme {
|
||||
grid-column: 3;
|
||||
grid-row: 3;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: auto;
|
||||
max-width: 80rem;
|
||||
height: auto;
|
||||
|
||||
margin: 0 5em;
|
||||
margin-left: calc( 5em - #{$logo-size}/2 );
|
||||
margin-top: 3em;
|
||||
margin-bottom: auto;
|
||||
|
||||
font-size: 1.5em;
|
||||
font-family: 'Fira Code';
|
||||
font-weight: 400;
|
||||
|
||||
background: #202228;
|
||||
border: .15rem solid #323841;
|
||||
border-radius: .4rem / .4rem;
|
||||
|
||||
.header {
|
||||
font-size: 1em;
|
||||
text-align: center;
|
||||
|
||||
padding: .3em;
|
||||
|
||||
color: #b5bac4ff;
|
||||
background: #2a2e36;
|
||||
|
||||
border-bottom: .15rem solid #323841;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #fff;
|
||||
margin: 1em;
|
||||
line-height: 1.5em;
|
||||
|
||||
// offset to the right and inverse indent the first line for the
|
||||
// ::before (> arrow) to always be on the left
|
||||
margin-left: calc( 1em + 1.2em );
|
||||
text-indent: -1.2em;
|
||||
|
||||
u {
|
||||
display: inline;
|
||||
position: relative;
|
||||
|
||||
text-decoration: none;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: -.2em;
|
||||
width: calc( 100% + 2*.2em );
|
||||
height: 30%;
|
||||
|
||||
background: #6553d0;
|
||||
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '> ';
|
||||
|
||||
color: #6553d0;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@keyframes wave-x {
|
||||
from{ background-position-x: 1px; }
|
||||
to{ background-position-x: 100vw; }
|
||||
|
|
@ -56,7 +228,7 @@
|
|||
.wave {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc( #{$height*1.001} - #{$wave-height} );
|
||||
top: calc( 100% * 1.005 - #{$wave-height} );
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: $wave-height;
|
||||
|
|
@ -73,20 +245,23 @@
|
|||
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
||||
}
|
||||
|
||||
z-index: 900;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
$scroll-btn-size: 5rem;
|
||||
|
||||
.scroll-arrow {
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
align-self: start;
|
||||
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: calc( 100% - #{1.5*$wave-height} );
|
||||
left: calc( 50% - #{$scroll-btn-size/2} );
|
||||
position: relative;
|
||||
width: $scroll-btn-size;
|
||||
height: $scroll-btn-size;
|
||||
|
||||
opacity: .7;
|
||||
margin: 0 auto;
|
||||
|
||||
opacity: .9;
|
||||
background: #fff;
|
||||
|
||||
border-radius: 50% / 50%;
|
||||
|
|
@ -108,7 +283,7 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue