Compare commits
No commits in common. "74a0771f01a0a94bd4cccb3613524a187b11ea0c" and "f2eccc9f557b96d663dd628ef7065cf7c95e69f8" have entirely different histories.
74a0771f01
...
f2eccc9f55
|
|
@ -3,14 +3,10 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=.4">
|
<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: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>
|
<title>xdrm()</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
<?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>
|
|
||||||
|
Before Width: | Height: | Size: 396 B |
|
|
@ -1,17 +0,0 @@
|
||||||
<?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>
|
|
||||||
|
Before Width: | Height: | Size: 1.3 KiB |
|
|
@ -1,45 +1,19 @@
|
||||||
<template>
|
<template>
|
||||||
<div id='home'>
|
<div id='home'>
|
||||||
|
|
||||||
<div class='contact'>
|
<div class='wave'></div>
|
||||||
<span class='tel'>(+33) 06 69 05 19 10</span>
|
<div class='wave w2'></div>
|
||||||
<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()'>
|
<div class='scroll-arrow' @click='scrollNext()'>
|
||||||
<img src='@/assets/scroll_arrow.svg' />
|
<img src='@/assets/scroll_arrow.svg' />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class='wave'></div>
|
|
||||||
<div class='wave w2'></div>
|
|
||||||
</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 { go } from '@/service/scroller';
|
import { go } from '@/service/scroller';
|
||||||
import { TypeWriter } from '@/service/typewriter';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {},
|
components: {},
|
||||||
|
|
@ -48,27 +22,6 @@
|
||||||
protected scrollNext() {
|
protected scrollNext() {
|
||||||
go('skill-picker', 0);
|
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>
|
</script>
|
||||||
|
|
@ -78,165 +31,18 @@
|
||||||
$width: 100vw;
|
$width: 100vw;
|
||||||
$height: 100vh;
|
$height: 100vh;
|
||||||
|
|
||||||
$logo-size: 8rem;
|
|
||||||
|
|
||||||
$scroll-btn-top: 10rem;
|
|
||||||
$scroll-btn-size: 5rem;
|
|
||||||
|
|
||||||
$wave-height: 6.3rem;
|
$wave-height: 6.3rem;
|
||||||
|
|
||||||
#home {
|
#home {
|
||||||
display: grid;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: $width;
|
width: $width;
|
||||||
min-height: $height;
|
height: $height;
|
||||||
|
|
||||||
background: #202228;
|
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 {
|
@keyframes wave-x {
|
||||||
from{ background-position-x: 1px; }
|
from{ background-position-x: 1px; }
|
||||||
to{ background-position-x: 100vw; }
|
to{ background-position-x: 100vw; }
|
||||||
|
|
@ -250,7 +56,7 @@
|
||||||
.wave {
|
.wave {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc( 100% * 1.005 - #{$wave-height} );
|
top: calc( #{$height*1.001} - #{$wave-height} );
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: $wave-height;
|
height: $wave-height;
|
||||||
|
|
@ -267,23 +73,20 @@
|
||||||
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
animation: 20s ease-in-out wave-x infinite alternate-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
z-index: 200;
|
z-index: 900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$scroll-btn-size: 5rem;
|
||||||
|
|
||||||
.scroll-arrow {
|
.scroll-arrow {
|
||||||
grid-column: 2;
|
|
||||||
grid-row: 4;
|
|
||||||
align-self: start;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
position: relative;
|
position: absolute;
|
||||||
|
top: calc( 100% - #{1.5*$wave-height} );
|
||||||
|
left: calc( 50% - #{$scroll-btn-size/2} );
|
||||||
width: $scroll-btn-size;
|
width: $scroll-btn-size;
|
||||||
height: $scroll-btn-size;
|
height: $scroll-btn-size;
|
||||||
|
|
||||||
margin: 0 auto;
|
opacity: .7;
|
||||||
|
|
||||||
opacity: .9;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
border-radius: 50% / 50%;
|
border-radius: 50% / 50%;
|
||||||
|
|
@ -305,23 +108,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
opacity: 1;
|
opacity: .9;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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} );
|
width: calc( 100% - #{1*2rem} );
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
|
||||||
background: #eee;
|
background: #564ba4;
|
||||||
// background: linear-gradient(to top right, #564ba4, #745cfc);
|
// background: linear-gradient(to top right, #564ba4, #745cfc);
|
||||||
border-radius: 1rem / 1rem;
|
border-radius: 1rem / 1rem;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
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