From fd78df33e432078a53b94f027af8ef0206849905 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Mon, 10 Oct 2022 15:53:52 +0200
Subject: [PATCH] feat: new home page

---
 src/assets/home/line.svg |   6 ++
 src/assets/home/logo.svg |  17 ++++
 src/components/Home.vue  | 203 ++++++++++++++++++++++++++++++++++++---
 3 files changed, 212 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/home/line.svg
 create mode 100644 src/assets/home/logo.svg

diff --git a/src/assets/home/line.svg b/src/assets/home/line.svg
new file mode 100644
index 0000000..ec570e4
--- /dev/null
+++ b/src/assets/home/line.svg
@@ -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>
diff --git a/src/assets/home/logo.svg b/src/assets/home/logo.svg
new file mode 100644
index 0000000..fa13dc4
--- /dev/null
+++ b/src/assets/home/logo.svg
@@ -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>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index b78a46b..13aad30 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -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;
 		}
 	}