From ae0a9622c157da63869e51d6300e79267204aea2 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Tue, 18 Oct 2022 11:52:14 +0200
Subject: [PATCH] feat: create a basic page footer

---
 src/App.vue                  |   3 +
 src/assets/wave.1.svg        |  72 ++++++++++++++++++++++
 src/assets/wave.2.svg        |  73 +++++++++++++++++++++++
 src/assets/wave.invert.1.svg |  83 ++++----------------------
 src/assets/wave.invert.2.svg |  84 ++++----------------------
 src/components/Footer.vue    | 112 +++++++++++++++++++++++++++++++++++
 src/components/Home.vue      |   4 +-
 7 files changed, 286 insertions(+), 145 deletions(-)
 create mode 100644 src/assets/wave.1.svg
 create mode 100644 src/assets/wave.2.svg
 create mode 100644 src/components/Footer.vue

diff --git a/src/App.vue b/src/App.vue
index c1d0d88..140358d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
 		<Home/>
 		<SkillPicker ref='picker'   @pick='onPick($event)'/>
 		<Timeline    ref='timeline' @pick='onPicked($event)'/>
+		<Footer/>
 	</div>
 </template>
 
@@ -12,6 +13,7 @@ import { tID } from '@/model/skills';
 import Home from './components/Home.vue';
 import Timeline from './components/Timeline.vue';
 import SkillPicker from './components/SkillPicker.vue';
+import Footer from './components/Footer.vue';
 import { Locales } from './locales';
 
 
@@ -20,6 +22,7 @@ import { Locales } from './locales';
 		Home,
 		Timeline,
 		SkillPicker,
+		Footer,
 	},
 })
 export default class App extends Vue {
diff --git a/src/assets/wave.1.svg b/src/assets/wave.1.svg
new file mode 100644
index 0000000..015a41c
--- /dev/null
+++ b/src/assets/wave.1.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="420mm"
+   height="20.822mm"
+   version="1.1"
+   viewBox="0 0 420 20.822"
+   id="svg4984"
+   sodipodi:docname="wave.invert.1.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview4986"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.79815972"
+     inkscape:cx="793.70079"
+     inkscape:cy="38.839344"
+     inkscape:window-width="1920"
+     inkscape:window-height="1006"
+     inkscape:window-x="0"
+     inkscape:window-y="42"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4984" />
+  <defs
+     id="defs4978">
+    <linearGradient
+       id="a"
+       x1="787.57"
+       x2="787.57"
+       y1="4.8222"
+       y2="78.695"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#fff"
+         stop-opacity=".97647"
+         offset="0"
+         id="stop4971"
+         style="stop-color:#745cfc;stop-opacity:0.98000002;" />
+      <stop
+         stop-color="#fff"
+         stop-opacity=".89804"
+         offset="0.59202999"
+         id="stop4973"
+         style="stop-color:#745cfc;stop-opacity:0.89999998;" />
+      <stop
+         stop-color="#fff"
+         offset="1"
+         id="stop4975"
+         style="stop-color:#745cfc;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-.83328 -158.95)"
+     id="g4982">
+    <path
+       transform="matrix(.26458 0 0 .26458 .83328 158.95)"
+       d="m606.63 54.502c-83.352 2.1157-145.7-25.555-224.09-24.496s-178.77 28.151-242.71 33.189c-63.941 5.0388-69.397 2.5932-139.83 2.9902v12.51h1587.4v-12.51l-43.672-0.2875c-118.61-0.78082-508.71-61.141-665.74-55.086-157.03 6.0549-188 41.574-271.35 43.69z"
+       fill="url(#a)"
+       stroke-width=".56894"
+       id="path4980" />
+  </g>
+</svg>
diff --git a/src/assets/wave.2.svg b/src/assets/wave.2.svg
new file mode 100644
index 0000000..28791b2
--- /dev/null
+++ b/src/assets/wave.2.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="420mm"
+   height="20.822mm"
+   version="1.1"
+   viewBox="0 0 420 20.822"
+   id="svg7400"
+   sodipodi:docname="wave.invert.2.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7402"
+     pagecolor="#505050"
+     bordercolor="#eeeeee"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#505050"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.86745536"
+     inkscape:cx="659.97633"
+     inkscape:cy="39.195101"
+     inkscape:window-width="1920"
+     inkscape:window-height="1006"
+     inkscape:window-x="0"
+     inkscape:window-y="42"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg7400" />
+  <defs
+     id="defs7394">
+    <linearGradient
+       id="a"
+       x1="775"
+       x2="775"
+       y1="78.695"
+       y2="-.00018898"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#fff"
+         stop-opacity=".25098"
+         offset="0"
+         id="stop7387"
+         style="stop-color:#745cfc;stop-opacity:0.25;" />
+      <stop
+         stop-color="#fff"
+         stop-opacity=".14902"
+         offset="0.22879"
+         id="stop7389"
+         style="stop-color:#745cfc;stop-opacity:0.15000001;" />
+      <stop
+         stop-color="#fff"
+         stop-opacity=".05098"
+         offset="1"
+         id="stop7391"
+         style="stop-color:#745cfc;stop-opacity:0.05;" />
+    </linearGradient>
+  </defs>
+  <g
+     transform="translate(-.83328 -158.95)"
+     id="g7398">
+    <path
+       transform="matrix(.26458 0 0 .26458 .83328 158.95)"
+       d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z"
+       fill="url(#a)"
+       stroke-width=".56894"
+       id="path7396" />
+  </g>
+</svg>
diff --git a/src/assets/wave.invert.1.svg b/src/assets/wave.invert.1.svg
index 015a41c..e0d61b2 100644
--- a/src/assets/wave.invert.1.svg
+++ b/src/assets/wave.invert.1.svg
@@ -1,72 +1,13 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="420mm"
-   height="20.822mm"
-   version="1.1"
-   viewBox="0 0 420 20.822"
-   id="svg4984"
-   sodipodi:docname="wave.invert.1.svg"
-   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview4986"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="0.79815972"
-     inkscape:cx="793.70079"
-     inkscape:cy="38.839344"
-     inkscape:window-width="1920"
-     inkscape:window-height="1006"
-     inkscape:window-x="0"
-     inkscape:window-y="42"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg4984" />
-  <defs
-     id="defs4978">
-    <linearGradient
-       id="a"
-       x1="787.57"
-       x2="787.57"
-       y1="4.8222"
-       y2="78.695"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#fff"
-         stop-opacity=".97647"
-         offset="0"
-         id="stop4971"
-         style="stop-color:#745cfc;stop-opacity:0.98000002;" />
-      <stop
-         stop-color="#fff"
-         stop-opacity=".89804"
-         offset="0.59202999"
-         id="stop4973"
-         style="stop-color:#745cfc;stop-opacity:0.89999998;" />
-      <stop
-         stop-color="#fff"
-         offset="1"
-         id="stop4975"
-         style="stop-color:#745cfc;stop-opacity:1;" />
-    </linearGradient>
-  </defs>
-  <g
-     transform="translate(-.83328 -158.95)"
-     id="g4982">
-    <path
-       transform="matrix(.26458 0 0 .26458 .83328 158.95)"
-       d="m606.63 54.502c-83.352 2.1157-145.7-25.555-224.09-24.496s-178.77 28.151-242.71 33.189c-63.941 5.0388-69.397 2.5932-139.83 2.9902v12.51h1587.4v-12.51l-43.672-0.2875c-118.61-0.78082-508.71-61.141-665.74-55.086-157.03 6.0549-188 41.574-271.35 43.69z"
-       fill="url(#a)"
-       stroke-width=".56894"
-       id="path4980" />
-  </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="420.23mm" height="14.465mm" version="1.1" viewBox="0 0 420.23 14.465" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<linearGradient id="a" x1="787.57" x2="787.57" y1="4.8222" y2="78.695" gradientTransform="matrix(.26458 0 0 .11755 .83328 170.52)" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#202228" stop-opacity=".98039" offset="0"/>
+			<stop stop-color="#202228" stop-opacity=".9" offset=".59203"/>
+			<stop stop-color="#202228" offset="1"/>
+		</linearGradient>
+	</defs>
+	<g transform="matrix(1 0 0 -1 -.83328 179.77)">
+		<path d="m161.34 176.93c-22.053 0.24871-38.549-3.004-59.29-2.8795-20.74 0.12449-47.299 3.3092-64.216 3.9014-16.918 0.59231-18.361 0.30483-36.996 0.3515v1.4706h419.99v-1.4706l-11.555-0.0338c-31.382-0.0918-134.59-7.1872-176.14-6.4754-41.547 0.71177-49.741 4.8871-71.794 5.1358z" fill="url(#a)" stroke-width=".10034"/>
+	</g>
 </svg>
diff --git a/src/assets/wave.invert.2.svg b/src/assets/wave.invert.2.svg
index 28791b2..2a1760a 100644
--- a/src/assets/wave.invert.2.svg
+++ b/src/assets/wave.invert.2.svg
@@ -1,73 +1,13 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="420mm"
-   height="20.822mm"
-   version="1.1"
-   viewBox="0 0 420 20.822"
-   id="svg7400"
-   sodipodi:docname="wave.invert.2.svg"
-   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview7402"
-     pagecolor="#505050"
-     bordercolor="#eeeeee"
-     borderopacity="1"
-     inkscape:showpageshadow="0"
-     inkscape:pageopacity="0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#505050"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="0.86745536"
-     inkscape:cx="659.97633"
-     inkscape:cy="39.195101"
-     inkscape:window-width="1920"
-     inkscape:window-height="1006"
-     inkscape:window-x="0"
-     inkscape:window-y="42"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg7400" />
-  <defs
-     id="defs7394">
-    <linearGradient
-       id="a"
-       x1="775"
-       x2="775"
-       y1="78.695"
-       y2="-.00018898"
-       gradientUnits="userSpaceOnUse">
-      <stop
-         stop-color="#fff"
-         stop-opacity=".25098"
-         offset="0"
-         id="stop7387"
-         style="stop-color:#745cfc;stop-opacity:0.25;" />
-      <stop
-         stop-color="#fff"
-         stop-opacity=".14902"
-         offset="0.22879"
-         id="stop7389"
-         style="stop-color:#745cfc;stop-opacity:0.15000001;" />
-      <stop
-         stop-color="#fff"
-         stop-opacity=".05098"
-         offset="1"
-         id="stop7391"
-         style="stop-color:#745cfc;stop-opacity:0.05;" />
-    </linearGradient>
-  </defs>
-  <g
-     transform="translate(-.83328 -158.95)"
-     id="g7398">
-    <path
-       transform="matrix(.26458 0 0 .26458 .83328 158.95)"
-       d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z"
-       fill="url(#a)"
-       stroke-width=".56894"
-       id="path7396" />
-  </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="420.23mm" height="14.465mm" version="1.1" viewBox="0 0 420.23 14.465" xmlns="http://www.w3.org/2000/svg">
+	<defs>
+		<linearGradient id="a" x1="775" x2="775" y1="78.695" y2="-.00018898" gradientUnits="userSpaceOnUse">
+			<stop stop-color="#202228" stop-opacity=".25098" offset="0"/>
+			<stop stop-color="#202228" stop-opacity=".14902" offset=".22879"/>
+			<stop stop-color="#202228" stop-opacity=".05098" offset="1"/>
+		</linearGradient>
+	</defs>
+	<g transform="matrix(1 0 0 -.41891 -.71728 75.423)">
+		<path transform="matrix(.26458 0 0 .26458 .83328 158.95)" d="m606.63 28.502c-75.125 1.5646-148.96-25.511-224.09-24.496-81.65 1.1031-161.31 26.774-242.71 33.189-46.477 3.6626-69.397 2.5932-139.83 2.9902v38.51h1587.4v-38.51c-9.6396 0.39215-29.126 0.28262-43.672-0.2875-85.048-3.3332-169.58-19.372-254.68-18.308-79.795 0.99823-158.54 26.167-238.28 23.133-86.633-3.2952-169.52-43.758-256.21-44.724-63.351-0.70603-124.57 27.183-187.92 28.502z" fill="url(#a)" stroke-width=".56894"/>
+	</g>
 </svg>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..55b751d
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,112 @@
+<template>
+	<div id='footer'>
+
+		<div class='wave'></div>
+		<div class='wave w2'></div>
+
+		<footer>
+			<div class='copyright'>
+				2022 © xdrm-brackets
+				<span>Adrien Marquès</span>
+			</div>
+
+			<img class='logo' src='../assets/home/logo.svg'/>
+
+			<div class='contact'>
+				<span class='tel'>(+33) 06 69 05 19 10</span>
+				<span class='mail'>xdrm.dev@gmail.com</span>
+				<span class='addr'>Montauban, 82000</span>
+			</div>
+		</footer>
+
+	</div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+@Component({
+	components: {},
+})
+export default class Footer extends Vue {
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+	$width: 100vw;
+	$wave-height: 3rem;
+	$logo-size: 4em;
+
+	#footer {
+		display: block;
+		position: relative;
+		min-height: $wave-height;
+
+		background: lighten(#202228, 15%);
+	}
+
+	footer {
+		display: flex;
+		position: relative;
+			margin-top: $wave-height;
+			min-height: 20vh;
+
+			color: #bcc6ce;
+
+		flex-flow: row wrap;
+		justify-content: space-around;
+		align-items: center;
+
+		font-family: 'Fira Code';
+
+		.copyright, .contact {
+			font-size: 1.3em;
+			text-align: center;
+
+			span {
+				display: block;
+			}
+		}
+
+		.copyright {
+			user-select: none;
+		}
+
+		img {
+			width: $logo-size;
+			height: $logo-size;
+		}
+	}
+
+	@keyframes wave-x {
+		from{ background-position-x: 1px;   }
+		to{   background-position-x: 100vw; }
+	}
+
+	.wave {
+		display: block;
+		position: absolute;
+			top: -1px;
+			left: 0;
+			width: 100vw;
+			height: $wave-height;
+
+		background-image: url('../assets/wave.invert.1.svg');
+		background-repeat: repeat-x;
+		background-position-y: 0;
+		background-size:  auto 100%;
+
+		animation: 23s ease-in-out wave-x infinite alternate;
+
+		&.w2{
+			background-image: url('../assets/wave.invert.2.svg');
+			animation: 25s ease-in-out wave-x infinite alternate-reverse;
+		}
+
+		z-index: 200;
+	}
+
+
+</style>
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 4bc2b33..2e13180 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -291,7 +291,7 @@ export default class Home extends Vue {
 			width: 100vw;
 			height: $wave-height;
 
-		background-image: url('../assets/wave.invert.1.svg');
+		background-image: url('../assets/wave.1.svg');
 		background-repeat: repeat-x;
 		background-position-y: 101%;
 		background-size:  auto 100%;
@@ -299,7 +299,7 @@ export default class Home extends Vue {
 		animation: 18s ease-in-out wave-x infinite alternate;
 
 		&.w2{
-			background-image: url('../assets/wave.invert.2.svg');
+			background-image: url('../assets/wave.2.svg');
 			animation: 20s ease-in-out wave-x infinite alternate-reverse;
 		}