Compare commits
6 Commits
f2eccc9f55
...
74a0771f01
| Author | SHA1 | Date |
|---|---|---|
 Adrien Marquès
|
74a0771f01
|
|
|
Adrien Marquès
|
de0034ed5b
|
|
|
Adrien Marquès
|
67e136b500
|
|
|
Adrien Marquès
|
fd78df33e4
|
|
|
Adrien Marquès
|
8f156dd4d1
|
|
|
Adrien Marquès
|
408f6ebe87
|
|
|
@ -3,10 +3,14 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=.4">
|
||||
<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:300,400,600,700" rel="stylesheet">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Source+Sans+Pro&display=swap" rel="stylesheet">
|
||||
|
||||
<title>xdrm()</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -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,19 +1,45 @@
|
|||
<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 ref='text1'>Hi, I am another freelance developer !</p>
|
||||
<p ref='text2'>I made this website so you can <u>browse</u> some of my skills and projects.</p>
|
||||
<p ref='text3'>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 ref='text4'>For now, my technologies of choice are : <u>Go</u> and <u>IoT</u> (Arduino, Raspberry).</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>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue } from 'vue-property-decorator';
|
||||
import { go } from '@/service/scroller';
|
||||
import { TypeWriter } from '@/service/typewriter';
|
||||
|
||||
@Component({
|
||||
components: {},
|
||||
|
|
@ -22,6 +48,27 @@
|
|||
protected scrollNext() {
|
||||
go('skill-picker', 0);
|
||||
}
|
||||
|
||||
protected mounted() {
|
||||
const t1 = new TypeWriter( this.$refs['text1'] as HTMLElement )
|
||||
const t2 = new TypeWriter( this.$refs['text2'] as HTMLElement )
|
||||
const t3 = new TypeWriter( this.$refs['text3'] as HTMLElement )
|
||||
const t4 = new TypeWriter( this.$refs['text4'] as HTMLElement )
|
||||
|
||||
t1.init(false);
|
||||
t2.init();
|
||||
t3.init();
|
||||
t4.init();
|
||||
|
||||
// wait 1s, anim 1.5s
|
||||
setTimeout( () => t1.animate(1500), 1000 );
|
||||
// wait 3s, anim 2s
|
||||
setTimeout( () => t2.animate(2000), 3000 );
|
||||
// wait 6s, anim 4s
|
||||
setTimeout( () => t3.animate(4000), 6000 );
|
||||
// wait 10s, anim 3s
|
||||
setTimeout( () => t4.animate(3000), 10000 );
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -31,18 +78,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;
|
||||
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 +250,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 +267,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 +305,23 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1600px) {
|
||||
.readme {
|
||||
align-self: center;
|
||||
margin-bottom: 0;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1200px) {
|
||||
.name {
|
||||
font-size: 1.2vw;
|
||||
|
||||
align-self: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@
|
|||
width: calc( 100% - #{1*2rem} );
|
||||
margin-top: 1rem;
|
||||
|
||||
background: #564ba4;
|
||||
background: #eee;
|
||||
// background: linear-gradient(to top right, #564ba4, #745cfc);
|
||||
border-radius: 1rem / 1rem;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
export class TypeWriter {
|
||||
private target: HTMLElement;
|
||||
private display: string|null;
|
||||
private html: string|null;
|
||||
|
||||
constructor(target: HTMLElement){
|
||||
this.target = target;
|
||||
}
|
||||
|
||||
/* initialize with copying and clearing the original text */
|
||||
public init(hide: boolean = true) {
|
||||
this.html = this.target.innerHTML;
|
||||
this.display = this.target.style.display;
|
||||
this.target.innerHTML = '';
|
||||
if( hide ){
|
||||
this.target.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
public animate(duration_ms: number) {
|
||||
if( this.html == null || this.display == null ){
|
||||
console.warn("[typewriter] init must be called first ; doing it anyway");
|
||||
this.init();
|
||||
}
|
||||
|
||||
const size = this.html!.length;
|
||||
const letter_ms = duration_ms / size;
|
||||
|
||||
this.target.style.display = this.display!;
|
||||
for( let i = 0, l = this.html!.length ; i < l ; i++ ){
|
||||
setTimeout(
|
||||
() => {
|
||||
((i: number) => {
|
||||
this.target.innerHTML = this.html!.substring(0, i+1);
|
||||
})(i);
|
||||
},
|
||||
i*letter_ms);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue