From f2eccc9f557b96d663dd628ef7065cf7c95e69f8 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Thu, 6 Oct 2022 17:19:00 +0200
Subject: [PATCH] feat: add diagonal transition after the skill picker

---
 src/components/SkillPicker.vue | 114 ++++++++++++++++++++-------------
 src/components/Timeline.vue    |  10 +--
 2 files changed, 75 insertions(+), 49 deletions(-)

diff --git a/src/components/SkillPicker.vue b/src/components/SkillPicker.vue
index 6974d65..b536c9b 100644
--- a/src/components/SkillPicker.vue
+++ b/src/components/SkillPicker.vue
@@ -1,43 +1,47 @@
 <template>
 	<div id='skill-picker'>
 
-		<div class='container'>
+		<div class='wrapper'>
+			<div class='container'>
 
-			<section class='categories'>
-				<SkillCard v-for='(t) of tags'
-					:key='t'
-					:active='t == tag'
-					:folder='t'
-					@pick='onTag(t, $event)'/>
-			</section>
+				<section class='categories'>
+					<SkillCard v-for='(t) of tags'
+						:key='t'
+						:active='t == tag'
+						:folder='t'
+						@pick='onTag(t, $event)'/>
+				</section>
 
-			<section class='skills'>
-				<SkillCard v-for='(id) of ids'
-					:key='id'
-					v-show='filtered.indexOf(id) >= 0'
-					:id='id'
-					:active='id == sel'
-					@pick='onPick(id, $event)'/>
-			</section>
+				<section class='skills'>
+					<SkillCard v-for='(id) of ids'
+						:key='id'
+						v-show='filtered.indexOf(id) >= 0'
+						:id='id'
+						:active='id == sel'
+						@pick='onPick(id, $event)'/>
+				</section>
 
-			<section class='details' v-if='details != null'>
-				<img :src='details.icon'/>
-				<h1 v-html='details.title'></h1>
-				<h2>Featured in <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? 'projects' : 'project' }}</h2>
-				<h3>
-					<template v-for='(proj) of details.projects'>
-						<a :key='"pick-" + proj.name' href @click='$event.preventDefault(); scroll(proj.name.replaceAll(" ", "_"));'>
-							{{ proj.name }}
-						</a>
-						<span :key='proj.name'>, </span>
-					</template>
-				</h3>
-				<p v-html='details.text'></p>
-			</section>
+				<section class='details' v-if='details != null'>
+					<img :src='details.icon'/>
+					<h1 v-html='details.title'></h1>
+					<h2>Featured in <b>{{ details.projects.length }}</b> {{ details.projects.length > 1 ? 'projects' : 'project' }}</h2>
+					<h3>
+						<template v-for='(proj) of details.projects'>
+							<a :key='"pick-" + proj.name' href @click='$event.preventDefault(); scroll(proj.name.replaceAll(" ", "_"));'>
+								{{ proj.name }}
+							</a>
+							<span :key='proj.name'>, </span>
+						</template>
+					</h3>
+					<p v-html='details.text'></p>
+				</section>
 
+			</div>
+
+			<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
 		</div>
 
-		<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
+		<div class='spacer'></div>
 
 	</div>
 </template>
@@ -182,7 +186,8 @@
 <style scoped lang="scss">
 
 	$page-margin: 3rem;
-	$bottom-space: 10vh;
+	$bottom-spacer: 15vh;
+	$bottom-margin: 10vh;
 
 	#skill-picker {
 		display: block;
@@ -190,26 +195,45 @@
 			top: 0;
 			left: 0;
 			width: 100vw;
-			height: #{100vh + $bottom-space};
-
-		background: linear-gradient(0, #564ba4, #745cfc);
+			height: #{100vh + $bottom-spacer};
 
 		font-size: 1rem;
+		background: #202228;
 
-		.container {
-			display: flex;
+		.wrapper {
+			display: block;
 			position: relative;
-				width:  calc( 100vw - #{2*$page-margin} );
-				height: calc( 100vh - #{2*$page-margin} );
-				margin: $page-margin;
+				top: 0;
+				left: 0;
+				width: 100vw;
+				height: 100vh;
 
-			background: #202228;
+			background: linear-gradient(0, #564ba4, #745cfc);
 
-			border-radius: 1em / 1em;
+			padding: $page-margin;
 
-			padding: 2em;
+			.container {
+				display: flex;
+				position: relative;
+					width:  calc( 100vw - #{2*$page-margin} );
+					height: calc( 100vh - #{2*$page-margin} );
 
-			flex-flow: row nowrap;
+				background: #202228;
+
+				border-radius: 1em / 1em;
+
+				padding: 2em;
+
+				flex-flow: row nowrap;
+			}
+		}
+		.spacer {
+			display: block;
+			position: relative;
+				width: 100vw;
+				height: $bottom-margin;
+
+			background: linear-gradient(to bottom left, #564ba4 0%, #564ba4 49.5%, transparent 50%, transparent 100%);
 		}
 	}
 
@@ -328,7 +352,7 @@
 	input {
 		display: block;
 		position: absolute;
-			top: calc( 100% - #{$bottom-space} - #{$page-margin} );
+			top: calc( 100% - #{$page-margin} );
 			left: 50%;
 
 		padding: .6em 2em;
diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index e791615..5965ae2 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -175,7 +175,8 @@
 			width: 100%;
 			height: $header-height;
 
-		background: #564ba4;
+		background: #202228;
+		box-shadow: 0 0 1em transparent;
 
 		z-index: 500;
 
@@ -184,7 +185,7 @@
 					left .2s ease-in-out,
 					width .2s ease-in-out,
 					border-radius .2s ease-in-out,
-					box-shadow .2s ease-in-out;
+					box-shadow .1s ease-in-out;
 
 		&.fixed {
 			position: fixed;
@@ -192,10 +193,11 @@
 				width: calc( 100% - #{1*2rem} );
 			margin-top: 1rem;
 
-			background: #fff;
+			background: #564ba4;
+			// background: linear-gradient(to top right, #564ba4, #745cfc);
 			border-radius: 1rem / 1rem;
 
-			box-shadow: 0 .5em .5em darken(#202228, 5%);
+			box-shadow: 0 0 1em darken(#202228, 5%);
 		}
 	}