public/styles.css

@@ -31,20 +31,4 @@ body {
 	overflow: hidden;
 	overflow-y: auto;
 
-}
-
-::-webkit-scrollbar {
-	display: block;
-	width: .3rem;
-	background-color: #202228;
-	overflow: hidden;
-}
-::-webkit-scrollbar-thumb {
-	border-radius: .3rem / .3rem;
-	background-color: #6d7076;
-
-	transition: background-color .1s ease-in-out;
-}
-::-webkit-scrollbar-thumb:hover {
-	background-color: #a9acb2;
 }

src/App.vue

@@ -73,22 +73,24 @@ export default class App extends Vue {
 		background: #fff;
 	}
 
-	a, a:visited {
+	a {
 		display: inline-block;
 		position: relative;
-		color: #cbcbcb;
+		color: #fff;
 
 		cursor: pointer;
 
-		transition: color .2s ease-in-out;
+		&:visited {
+			color: #fefefa;
+		}
 
 		&:after {
 			content: '';
 
 			display: block;
 			position: absolute;
-				margin-left: 0%;
+				margin-left: 5%;
-				width: 100%;
+				width: 90%;
 				height: .15rem;
 
 			background: #3333be;
@@ -98,13 +100,9 @@ export default class App extends Vue {
 			transform-style: preserve-3d;
 		}
 
-		&:hover{
+		&:hover:after {
-			color: #fff;
+			margin-left: 0;
-
+			width: 100%;
-			&:after {
-				margin-left: 5%;
-				width: 90%;
-			}
 		}
 	}
 </style>

src/components/SkillPicker.vue

@@ -171,7 +171,10 @@
 		}
 
 		protected browse(){
-			go(`search-header`, 0);
+			const el = document.querySelector('#timeline');
+			if( el != null ){
+				el.scrollIntoView();
+			}
 		}
 
 	}
@@ -223,14 +226,12 @@
 		align-items: flex-start;
 		justify-content: flex-start;
 
-		margin-right: 1em;
-
 		overflow: hidden;
 		overflow-y: visible;
 
 		.skill-card {
 			margin: .3em 0;
-			width: 13.4em;
+			width: 12em;
 		}
 	}
 
@@ -249,7 +250,7 @@
 
 		.skill-card {
 			margin: .3em 0;
-			width: 13.4em;
+			width: 12em;
 		}
 	}
 
@@ -364,7 +365,7 @@
 	// width > 1800px : center the container
 	@media screen and (min-width: 1800px) {
 		.container {
-			left: calc( 100vw/2 - 1800px/2 - #{$page-margin} );
+			left: calc( 100vw/2 - 1800px/2 );
 			max-width: 1800px;
 		}
 	}

src/components/Timeline.vue

@@ -176,26 +176,12 @@
 			height: $header-height;
 
 		background: #564ba4;
+		background: #fff;
 
 		z-index: 500;
 
-		transition: background .5s ease-in-out,
-					margin .2s ease-in-out,
-					left .2s ease-in-out,
-					width .2s ease-in-out,
-					border-radius .2s ease-in-out,
-					box-shadow .2s ease-in-out;
-
 		&.fixed {
 			position: fixed;
-				left: 1rem;
-				width: calc( 100% - #{1*2rem} );
-			margin-top: 1rem;
-
-			background: #fff;
-			border-radius: 1rem / 1rem;
-
-			box-shadow: 0 .5em .5em darken(#202228, 5%);
 		}
 	}