feat: create the barebone following header

src/components/SkillPicker.vue

@@ -25,7 +25,7 @@
 
 		</div>
 
-		<button v-show='this.sel != null'>Browse projects</button>
+		<input type='button' v-show='this.sel != null' value='Browse projects' @click='browse()'/>
 
 	</div>
 </template>
@@ -135,6 +135,10 @@
 				this.sel = null;
 			}
 		}
+
+		protected browse(){
+			document.querySelector("#timeline")!.scrollIntoView();
+		}
 	}
 
 </script>
@@ -143,6 +147,7 @@
 <style scoped lang="scss">
 
 	$page-margin: 3rem;
+	$bottom-space: 10vh;
 
 	#skill-picker {
 		display: block;
@@ -150,7 +155,7 @@
 			top: 0;
 			left: 0;
 			width: 100vw;
-			height: 100vh;
+			height: #{100vh + $bottom-space};
 
 		background: linear-gradient(0, #564ba4, #745cfc);
 
@@ -205,10 +210,10 @@
 		}
 	}
 
-	button {
+	input {
 		display: block;
 		position: absolute;
-			top: calc( 100% - #{$page-margin} );
+			top: calc( 100% - #{$bottom-space} - #{$page-margin} );
 			left: 50%;
 
 		padding: .6em 2em;

src/components/Timeline.vue

@@ -1,6 +1,9 @@
 <template>
 	<div id='timeline'>
 
+		<div id='search-header' ref='header'>
+		</div>
+
 		<template class='project' v-for='(proj) of projects'>
 			<div :key="'start-'+proj.name" class='start'>
 				{{ proj.started_at | short_date }}
@@ -112,6 +115,32 @@
 	export default class Timeline extends Vue {
 		private projects: Project[] = Projects;
 		private skills:   tSkills   = Skills;
+
+		private mounted() {
+
+			document.body.addEventListener('scroll', this.onScroll, { passive: true });
+		}
+
+		private onScroll(e: Event) {
+			const target = e.target as HTMLElement;
+			const header = this.$refs.header as HTMLElement;
+			if( target == undefined || header == undefined ){
+				return;
+			}
+
+			const el = this.$el as HTMLElement;
+			if( el == null ){
+				return;
+			}
+				// when scrolling after this limit, make the header fixed
+			const limit = el.offsetTop;
+
+			if( target.scrollTop >= limit ){
+				header.classList.add('fixed');
+			} else {
+				header.classList.remove('fixed');
+			}
+		}
 	}
 </script>
 
@@ -122,6 +151,25 @@
 	$icon-width: 2.3rem;
 	$space-width: 1rem;
 	$bg-color: #202228;
+	$header-height: 6rem;
+
+	#search-header {
+		display: block;
+		position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: $header-height;
+
+		background: #564ba4;
+		background: #fff;
+
+		z-index: 500;
+
+		&.fixed {
+			position: fixed;
+		}
+	}
 
 	#timeline {
 		display: grid;
@@ -139,7 +187,7 @@
 
 		padding: 0 5rem;
 
-		padding-top: 2em;
+		padding-top: #{$header-height + 2rem};
 
 		.start { grid-column: 1 / 2; }
 		.name { grid-column: 3 / 6; }