feat: change theme to yellow-green

src/App.vue

@@ -58,6 +58,8 @@ export default class App extends Vue {
 </script>
 
 <style lang="scss">
+	@import '@/vars.scss';
+
 	#app {
 		display: flex;
 		position: absolute;
@@ -95,7 +97,7 @@ export default class App extends Vue {
 				width: 100%;
 				height: .1em;
 
-			background: #5f50bf;
+			background: $primary-color;
 
 			transition: width .2s ease-in-out, margin-left .2s ease-in-out;
 
@@ -106,7 +108,7 @@ export default class App extends Vue {
 			color: #fff;
 
 			&:after {
-				width: 90%;
+				width: 104%;
 			}
 		}
 	}

src/assets/home/logo.svg

@@ -3,12 +3,17 @@
 	<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="#a8e52c" offset="0"/>
-			<stop stop-color="#564ba4" offset="1"/>
+			<stop stop-color="#8fc427" offset="1"/>
+		</linearGradient>
+		<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%" gradientTransform="rotate(65)">
+			<stop stop-color="#eeeeee" offset="0"/>
+			<stop stop-color="#ffffff" offset=".7"/>
+			<stop stop-color="#ffffff" 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"/>
+		<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" style="paint-order:fill markers stroke" fill="url(#bg)"/>
 		<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"/>

src/assets/timeline/logo.svg

@@ -2,8 +2,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">
-			<stop stop-color="#745cfc" offset="0"/>
+			<stop stop-color="#a8e52c" offset="0"/>
-			<stop stop-color="#564ba4" offset="1"/>
+			<stop stop-color="#8fc427" offset="1"/>
 		</linearGradient>
 	</defs>
 	<g transform="matrix(.10155 0 0 .10155 -90.232 -10.197)">

src/assets/timeline/project.svg

@@ -44,7 +44,7 @@
          cy="865.03"
          r="4.9253"
          fill="#2c55cf"
-         style="paint-order:stroke fill markers;fill:#5f50bf;fill-opacity:1"
+         style="paint-order:stroke fill markers;fill:#a8e52c;fill-opacity:.5"
          id="circle26094" />
       <path
          d="m209.6 862.95c0-0.0945-0.0733-0.29631-0.29592-0.29631-0.12969 0-0.24927 0.0842-0.28656 0.21504l-1.1874 4.156c-8e-3 0.0272-0.0115 0.0547-0.0115 0.0816-8e-3 0.0957 0.0745 0.29704 0.29715 0.29704 0.12913 0 0.24797-0.0849 0.28526-0.21541l1.1874-4.156c8e-3 -0.0276 0.0116-0.055 0.0116-0.082zm-2.2264 1.0312c0-0.16958-0.13869-0.29686-0.29686-0.29686-0.076 0-0.15195 0.029-0.20984 0.087l-1.039 1.039c-0.058 0.0661-0.087 0.14216-0.087 0.20987 0 0.0677 0.029 0.16049 0.087 0.21801l1.039 1.039c0.0577 0.0584 0.13382 0.0789 0.20988 0.0789 0.15817 0 0.29686-0.12737 0.29686-0.29686 0-0.076-0.029-0.15195-0.087-0.20993l-0.82911-0.82907 0.82916-0.82915c0.0582-0.0503 0.0869-0.12542 0.0869-0.20984zm4.3044 1.039c0-0.076-0.029-0.15195-0.087-0.20993l-1.039-1.039c-0.0577-0.0498-0.13382-0.0869-0.20989-0.0869-0.15816 0-0.29685 0.12737-0.29685 0.29686 0 0.076 0.029 0.15195 0.087 0.20993l0.82915 0.82916-0.82915 0.82916c-0.0582 0.066-0.087 0.14202-0.087 0.20974 0 0.16958 0.13869 0.29686 0.29685 0.29686 0.076 0 0.15196-0.029 0.20985-0.087l1.039-1.039c0.0583-0.0494 0.087-0.12546 0.087-0.20988z"

src/assets/wave.1.svg

@@ -45,18 +45,18 @@
          stop-opacity=".97647"
          offset="0"
          id="stop4971"
-         style="stop-color:#745cfc;stop-opacity:0.98000002;" />
+         style="stop-color:#a8e52c;stop-opacity:0.98000002;" />
       <stop
          stop-color="#fff"
          stop-opacity=".89804"
          offset="0.59202999"
          id="stop4973"
-         style="stop-color:#745cfc;stop-opacity:0.89999998;" />
+         style="stop-color:#a8e52c;stop-opacity:0.89999998;" />
       <stop
          stop-color="#fff"
          offset="1"
          id="stop4975"
-         style="stop-color:#745cfc;stop-opacity:1;" />
+         style="stop-color:#a8e52c;stop-opacity:1;" />
     </linearGradient>
   </defs>
   <g

src/assets/wave.2.svg

@@ -45,19 +45,19 @@
          stop-opacity=".25098"
          offset="0"
          id="stop7387"
-         style="stop-color:#745cfc;stop-opacity:0.25;" />
+         style="stop-color:#a8e52c;stop-opacity:0.25;" />
       <stop
          stop-color="#fff"
          stop-opacity=".14902"
          offset="0.22879"
          id="stop7389"
-         style="stop-color:#745cfc;stop-opacity:0.15000001;" />
+         style="stop-color:#a8e52c;stop-opacity:0.15000001;" />
       <stop
          stop-color="#fff"
          stop-opacity=".05098"
          offset="1"
          id="stop7391"
-         style="stop-color:#745cfc;stop-opacity:0.05;" />
+         style="stop-color:#a8e52c;stop-opacity:0.05;" />
     </linearGradient>
   </defs>
   <g

src/components/Home.vue

@@ -111,6 +111,7 @@ export default class Home extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+	@import '@/vars.scss';
 	$width: 100vw;
 	$height: 100vh;
 
@@ -257,7 +258,7 @@ export default class Home extends Vue {
 						width: calc( 100% + 2*.2em );
 						height: 30%;
 
-					background: #6553d0;
+					background: darken($primary-color, 30%);
 
 					z-index: -1;
 				}
@@ -268,7 +269,7 @@ export default class Home extends Vue {
 			&:before {
 				content: '> ';
 
-				color: #6553d0;
+				color: $primary-color;
 				font-weight: 700;
 			}
 		}
@@ -282,8 +283,8 @@ export default class Home extends Vue {
 	}
 
 	@keyframes fadeLoop {
-		from { opacity: 1.0; transform: translateY(-2%);  }
+		from { transform: translateY(-5%);  }
-		to   { opacity: 0.8; transform: translateY(2%); }
+		to   { transform: translateY(0); }
 	}
 
 	.wave {
@@ -340,7 +341,7 @@ export default class Home extends Vue {
 		img {
 			width: #{.8*$scroll-btn-size};
 			height: #{.8*$scroll-btn-size};
-			animation: 1s ease-in-out fadeLoop infinite alternate-reverse;
+			animation: .8s cubic-bezier(0.215, 0.610, 0.355, 1) fadeLoop infinite alternate-reverse;
 		}
 
 		&:hover {

src/components/LevelDisplay.vue

@@ -16,7 +16,7 @@ export default class LevelDisplay extends Vue {
 	// id of the skill to display (number representation)
 	@Prop(Number) private level: number|undefined;
 
-	protected mounted(){
+	protected mounted() {
 		this.update(this.level);
 	}
 
@@ -26,24 +26,24 @@ export default class LevelDisplay extends Vue {
 	}
 
 	private update(level: number|undefined) {
-		if( level == undefined ){
+		if ( level == undefined ) {
 			return;
 		}
 
-		const els : HTMLElement[] = [
+		const els: HTMLElement[] = [
 			this.$refs.l1 as HTMLElement,
 			this.$refs.l2 as HTMLElement,
 			this.$refs.l3 as HTMLElement,
 			this.$refs.l4 as HTMLElement,
 			this.$refs.l5 as HTMLElement,
 		];
-		for( let i = 0 ; i < els.length ; i++ ){
+		for ( let i = 0 ; i < els.length ; i++ ) {
-			if( els[i] == undefined ){
+			if ( els[i] == undefined ) {
 				continue;
 			}
-			els[i].classList.remove("active");
+			els[i].classList.remove('active');
-			if( i < level ){
+			if ( i < level ) {
-				els[i].classList.add("active");
+				els[i].classList.add('active');
 			}
 		}
 	}
@@ -52,6 +52,8 @@ export default class LevelDisplay extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+	@import '@/vars.scss';
+
 	.level {
 		display: flex;
 
@@ -71,11 +73,11 @@ export default class LevelDisplay extends Vue {
 
 		}
 
-		.l1.active { background: darken(#6252c6, 8%); }
+		.l1.active { background: darken($primary-color, 8%); }
-		.l2.active { background: darken(#6252c6, 6%); }
+		.l2.active { background: darken($primary-color, 6%); }
-		.l3.active { background: darken(#6252c6, 4%); }
+		.l3.active { background: darken($primary-color, 4%); }
-		.l4.active { background: darken(#6252c6, 2%); }
+		.l4.active { background: darken($primary-color, 2%); }
-		.l5.active { background: darken(#6252c6, 0%); }
+		.l5.active { background: darken($primary-color, 0%); }
 
 		.l1 { margin-left: 0; }
 		.l5 { margin-right: 0; }

src/components/SkillCard.vue

@@ -70,6 +70,7 @@ export default class SkillCard extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+	@import '@/vars.scss';
 
 	$height: 2em;
 	$active-border: .2em;
@@ -144,7 +145,7 @@ export default class SkillCard extends Vue {
 			}
 
 			.name {
-				border-color: #41b883;
+				border-color: $primary-color;
 			}
 		}
 	}

src/components/SkillPicker.vue

@@ -73,8 +73,8 @@ interface Details {
 	title: string;
 	projects: Project[];
 	text: { [key in Locales]: string };
-	interest: Level,
+	interest: Level;
-	mastery: Level,
+	mastery: Level;
 }
 
 const DEFAULT_TAG = tTag.All;
@@ -205,6 +205,7 @@ export default class SkillPicker extends Vue {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+	@import '@/vars.scss';
 
 	$page-margin: 3rem;
 	$bottom-spacer: 15vh;
@@ -229,7 +230,7 @@ export default class SkillPicker extends Vue {
 				width: 100vw;
 				height: 100vh;
 
-			background: linear-gradient(0, #564ba4, #745cfc);
+			background: linear-gradient(0, darken($primary-color, 10%), $primary-color);
 
 			padding: $page-margin;
 
@@ -254,7 +255,7 @@ export default class SkillPicker extends Vue {
 				width: 100vw;
 				height: $bottom-margin;
 
-			background: linear-gradient(to bottom left, #564ba4 0%, #564ba4 49.5%, transparent 50%, transparent 100%);
+			background: linear-gradient(to bottom left, darken($primary-color, 10%) 0%, darken($primary-color, 10%) 49.5%, transparent 50%, transparent 100%);
 		}
 	}
 

src/components/Timeline.vue

@@ -191,6 +191,10 @@ export default class Timeline extends Vue {
 		scroller.go('skill-picker', 0);
 	}
 
+	protected sanitize(raw: string): string {
+		return url.sanitize(raw);
+	}
+
 	private sort_projects(a: Project, b: Project): number {
 		if ( b.stopped_at == null && a.stopped_at == null ) {
 			return b.started_at.getTime() - a.started_at.getTime();
@@ -229,15 +233,12 @@ export default class Timeline extends Vue {
 		}
 	}
 
-	protected sanitize(raw: string): string {
-		return url.sanitize(raw);
-	}
-
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
+	@import '@/vars.scss';
 
 	$icon-size: 2.7rem;
 	$space-width: 1rem;
@@ -329,7 +330,7 @@ export default class Timeline extends Vue {
 			color: #fff;
 			font-size: 1.4rem;
 
-			background: linear-gradient(to top right, #564ba4, #745cfc);
+			background: linear-gradient(to top right, darken($primary-color, 10%), $primary-color);
 			border: none;
 			border-radius: .5rem / .5rem;
 
@@ -467,7 +468,7 @@ export default class Timeline extends Vue {
 			justify-self: end;
 
 			font-size: .8em;
-			color: #434d5d;
+			color: $soft-color;
 
 			margin-right: 1rem;
 		}
@@ -476,7 +477,7 @@ export default class Timeline extends Vue {
 
 			margin-left: 1rem;
 
-			color: #89919f;
+			color: #97a3b9;
 		}
 
 		// line 3
@@ -583,7 +584,7 @@ export default class Timeline extends Vue {
 		}
 
 		.name b {
-			color: #745cfc;
+			color: $primary-color;
 			font-weight: 500;
 		}
 
@@ -593,7 +594,7 @@ export default class Timeline extends Vue {
 			position: relative;
 
 			font-size: .8em;
-			color: #434d5d;
+			color: $soft-color;
 
 			margin-left: .5em;
 

src/vars.scss

@@ -0,0 +1,3 @@
+$primary-color: #6553d0;
+$primary-color: #a8e52c;
+$soft-color: #7b7f86;