From dcfa1d2c5a3e865f1386fad968beff4999ed387a Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Thu, 9 May 2019 18:53:22 +0200
Subject: [PATCH] finish banner

feat: finish banner with animated waves
fix: remove HelloWorld comp
---
 src/App.vue                   | 21 +++++++---
 src/assets/wave.invert.1.svg  | 76 ++++++++++++++++++++++++++++++++++
 src/assets/wave.invert.2.svg  | 77 +++++++++++++++++++++++++++++++++++
 src/components/Banner.vue     | 58 +++++++++++++++++++++-----
 src/components/HelloWorld.vue | 18 --------
 5 files changed, 217 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/wave.invert.1.svg
 create mode 100644 src/assets/wave.invert.2.svg
 delete mode 100644 src/components/HelloWorld.vue

diff --git a/src/App.vue b/src/App.vue
index 1480448..09222d4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,43 @@
 <template>
 	<div id="app">
 		<Banner/>
-		<HelloWorld/>
+		<Skills/>
+
 	</div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import HelloWorld from './components/HelloWorld.vue';
 import Banner from './components/Banner.vue';
+import Skills from './components/Skills.vue';
 
 @Component({
 	components: {
-		HelloWorld,
 		Banner,
+		Skills,
 	},
 })
-export default class App extends Vue {}
+export default class App extends Vue {
+}
 </script>
 
 <style lang="scss">
 	#app {
-		display: block;
+		display: flex;
 		position: absolute;
 			top: 0;
 			left: 0;
 			width: 100%;
 			height: 100%;
 
+			padding-bottom: 10rem;
+
+		flex-flow: column nowrap;
+		// justify-content: flex-start;
+		// align-items: auto;
+
+		overflow: hidden;
+		overflow-y: auto;
+
 	}
 </style>
diff --git a/src/assets/wave.invert.1.svg b/src/assets/wave.invert.1.svg
new file mode 100644
index 0000000..864fdfd
--- /dev/null
+++ b/src/assets/wave.invert.1.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="420.00018mm"
+   height="20.821516mm"
+   viewBox="0 0 420.00018 20.821516"
+   version="1.1"
+   id="svg2775"
+   sodipodi:docname="wave.invert.1.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <defs
+     id="defs2769" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="80.013592"
+     inkscape:cy="86.184064"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="34"
+     inkscape:window-maximized="1"
+     inkscape:object-paths="false"
+     inkscape:snap-intersection-paths="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-midpoints="true"
+     inkscape:object-nodes="true" />
+  <metadata
+     id="metadata2772">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.83328333,-158.9488)">
+    <path
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.56893516;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 606.63477,54.501953 C 531.54501,51.711662 457.67965,28.990751 382.54492,30.00586 300.89517,31.108991 222.63799,51.691963 139.83203,63.195312 93.654156,69.610312 70.435508,65.788533 0,66.185547 V 78.695312 H 1587.4023 V 66.185547 c -9.6396,0.392152 -34.0164,-0.414501 -43.6724,-0.287495 -232.5307,3.058482 -454.4886,-66.47193739 -665.74053,-55.085958 -90.45464,5.96328 -180.90134,47.051049 -271.3546,43.689859 z"
+       transform="matrix(0.26458333,0,0,0.26458333,0.83328333,158.94885)"
+       id="rect3945"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sasccccscs" />
+    <g
+       style="display:inline"
+       id="g1450"
+       transform="translate(0.83328333,98.033331)" />
+  </g>
+</svg>
diff --git a/src/assets/wave.invert.2.svg b/src/assets/wave.invert.2.svg
new file mode 100644
index 0000000..14e25af
--- /dev/null
+++ b/src/assets/wave.invert.2.svg
@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="420.00018mm"
+   height="20.821516mm"
+   viewBox="0 0 420.00018 20.821516"
+   version="1.1"
+   id="svg2775"
+   sodipodi:docname="wave.invert.2.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <defs
+     id="defs2769" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35355339"
+     inkscape:cx="456.32927"
+     inkscape:cy="-59.523755"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="34"
+     inkscape:window-maximized="1"
+     inkscape:object-paths="false"
+     inkscape:snap-intersection-paths="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-midpoints="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-page="true" />
+  <metadata
+     id="metadata2772">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-0.83328333,-158.9488)">
+    <path
+       style="fill:#ffffff;fill-opacity:0.41592922;stroke-width:0.56893516;stroke-miterlimit:4;stroke-dasharray:none"
+       d="M 606.63477,28.501953 C 531.54501,25.711662 457.67965,2.9907502 382.54492,4.0058597 300.89517,5.1089905 222.63799,25.691963 139.83203,37.195312 93.654156,43.610312 70.435508,39.788533 0,40.185547 V 78.695312 H 1587.4023 V 40.185547 c -9.6396,0.392152 -34.0164,-0.414501 -43.6724,-0.287495 C 1463.4329,40.9542 1411.2135,20.788575 1289.0475,21.590229 1232.3864,21.96204 1092.9691,48.489136 1050.7634,44.723632 920.4457,33.096949 899.0196,-5.6308121 794.55077,-1.8897638e-4 704.09613,5.9630907 697.08803,31.863143 606.63477,28.501953 Z"
+       id="rect3945"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="sasccccssscs"
+       transform="matrix(0.26458333,0,0,0.26458333,0.83328333,158.94885)" />
+    <g
+       style="display:inline"
+       id="g1450"
+       transform="translate(0.83328333,98.033331)" />
+  </g>
+</svg>
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
index f1a33d9..35d16e8 100644
--- a/src/components/Banner.vue
+++ b/src/components/Banner.vue
@@ -1,6 +1,9 @@
 <template>
 	<div id='banner'>
 
+		<div class='wave'></div>
+		<div class='wave w2'></div>
+
 		<div class='icon-wrapper'>
 			<div class='icon'>
 				<div class='ring'></div>
@@ -21,12 +24,12 @@
 					{{ model.firstname | capitalize }}
 				</span>
 				<span class='lastname'>
-					{{ model.lastname | uppercase }}
+					{{ model.lastname.toUpperCase() }}
 				</span>
 			</div>
 
 			<div class='headline'>
-				{{ model.headline | uppercase }}
+				{{ model.headline.toUpperCase() }}
 			</div>
 
 		</div>
@@ -39,9 +42,6 @@
 
 	@Component({
 		filters: {
-			uppercase(raw: string): string {
-				return raw.toUpperCase();
-			},
 			capitalize(raw: string): string {
 				if ( raw.length < 2 ) {
 					return raw.toUpperCase();
@@ -59,21 +59,24 @@
 <style scoped lang="scss">
 	$banner-size: 14rem;
 	$icon-size: 9rem;
-	$wave-height: 1rem;
+	$wave-height: 5rem;
 
 	$mq-noresize: 1250px;
 	$mq-noicon: 940px;
 
 	#banner {
+		flex: #{$banner-size + $wave-height*1.5} 0 0;
+
 		display: flex;
-		position: absolute;
+		position: relative;
 			top: 0;
 			left: 0;
 			width: 100%;
-			height: $banner-size;
+			// height: #{$banner-size + $wave-height*1.5};
+			padding-bottom: #{$wave-height*1.5};
 
 		flex-flow: row nowrap;
-		justify-contnet: stretch;
+		justify-content: stretch;
 		align-items: stretch;
 
 		color: #fff;
@@ -81,7 +84,42 @@
 		font-weight: 300;
 		white-space: nowrap;
 
-		background:linear-gradient(to bottom right, #5154fc, #518dfc);
+		background: linear-gradient(to bottom right, #5154fc, #518dfc);
+
+		@keyframes wave {
+			from{ background-position-x: 0; }
+			to{ background-position-x: 1000%; }
+		}
+
+		@keyframes sink {
+			from{ background-position-y: 0; }
+			to{ background-position-y: #{$wave-height/2}; }
+		}
+
+		.wave {
+			display: block;
+			position: absolute;
+				top: calc( 100% - #{$wave-height} );
+				left: 0;
+				width: 100%;
+				height: calc( #{$wave-height} + 1px );
+
+			/* OPTI ? */// will-change: background-position;
+
+			background: url('../assets/wave.invert.1.svg') repeat-x;
+			background-position: 0 0;
+			background-size: 200% 100%;
+
+			animation: 200s linear wave infinite;
+
+
+			&.w2{
+				background-image: url('../assets/wave.invert.2.svg');
+				background-size: 150% 100%;
+				animation: 100s linear wave infinite reverse;//, 2s ease sink infinite alternate;
+			}
+		}
+
 
 
 		.icon-wrapper {
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 9284921..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-	<div>
-		Component
-	</div>
-</template>
-
-<script lang="ts">
-
-	import { Component, Vue } from 'vue-property-decorator';
-
-	@Component
-	export default class HelloWorld extends Vue { }
-
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-</style>