From d268f431d3dbfca5f40266410028d634d3d3c301 Mon Sep 17 00:00:00 2001
From: raffiskender <raffiskender@gmail.com>
Date: Tue, 19 Sep 2023 11:05:29 +0200
Subject: [PATCH] playing with footer

---
 src/assets/CV-favicon.svg      | 105 ++++++++++++
 src/assets/raffi.svg           |  62 +++++++
 src/components/Footer copy.vue | 302 +++++++++++++++++++++++++++++++++
 src/components/Footer.vue      | 113 ++++++------
 4 files changed, 517 insertions(+), 65 deletions(-)
 create mode 100644 src/assets/CV-favicon.svg
 create mode 100644 src/assets/raffi.svg
 create mode 100644 src/components/Footer copy.vue

diff --git a/src/assets/CV-favicon.svg b/src/assets/CV-favicon.svg
new file mode 100644
index 0000000..af69166
--- /dev/null
+++ b/src/assets/CV-favicon.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg8"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
+   sodipodi:docname="CV-favicon.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="400"
+     inkscape:cy="557.14286"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1559"
+     inkscape:window-height="908"
+     inkscape:window-x="361"
+     inkscape:window-y="97"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata5">
+    <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></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+   style="
+   stroke-linejoin:round;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
+   id="path862"
+   sodipodi:nodetypes="cscc" />
+<path
+   style="
+   stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 312.83425,25.675399 0.42594,12.212728"
+   id="path3943" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 311.63779,8.7395766 0.2454,2.4946354"
+   id="path3945" />
+<path
+   style="stroke-linejoin:round;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
+   id="path4209"
+   sodipodi:nodetypes="cssc" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
+   id="path5599"
+   sodipodi:nodetypes="ssss" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
+   id="path6508"
+   sodipodi:nodetypes="csssc" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
+/> 
+</svg>
diff --git a/src/assets/raffi.svg b/src/assets/raffi.svg
new file mode 100644
index 0000000..863d742
--- /dev/null
+++ b/src/assets/raffi.svg
@@ -0,0 +1,62 @@
+<svg class="raffi"
+viewBox="75 -50 300 150"
+style="fill:none;
+stroke-width:5;
+stroke-linecap:round;"
+>
+<path
+   style="
+   stroke-linejoin:round;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
+   id="path862"
+   sodipodi:nodetypes="cscc" />
+<path
+   style="
+   stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 312.83425,25.675399 0.42594,12.212728"
+   id="path3943" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 311.63779,8.7395766 0.2454,2.4946354"
+   id="path3945" />
+<path
+   style="stroke-linejoin:round;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
+   id="path4209"
+   sodipodi:nodetypes="cssc" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
+   id="path5599"
+   sodipodi:nodetypes="ssss" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
+   id="path6508"
+   sodipodi:nodetypes="csssc" />
+<path
+   style="stroke-linejoin:miter;
+   stroke-miterlimit:4;
+   stroke-dasharray:none;
+   stroke-opacity:1"
+   d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
+/> 
+</svg>
\ No newline at end of file
diff --git a/src/components/Footer copy.vue b/src/components/Footer copy.vue
new file mode 100644
index 0000000..211c747
--- /dev/null
+++ b/src/components/Footer copy.vue	
@@ -0,0 +1,302 @@
+<script setup>
+import { ref } from 'vue';
+
+const show = ref(false)
+
+</script>
+<template>
+  <svg
+  viewBox="0 0 20 20"
+  class="arrow"
+  v-bind:class="show ? 'down' : ''"
+  @click="show = !show"
+  >
+    <circle
+    style="fill:#e65353;stroke:#000000;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+    id="path833"
+    cx="10"
+    cy="10"
+    r="8" />
+    <path
+      style="fill:none;stroke:#000000;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="M 5.5,11 10,7 14.5,11"
+      id="path841"
+      sodipodi:nodetypes="ccc" />
+  </svg>
+    
+  <div class="footer"
+    v-bind:class="show ? '' : 'hide'">
+    <h1>
+    Design
+    </h1>
+    <svg
+       viewBox="0 0 100 100"
+       style="stroke:#fff;stroke-opacity:1;stroke-width:0.8;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:square;stroke-linejoin:miter;fill:#fff;fill-opacity:1">
+      <g
+         id="g1053"
+         transform="matrix(3.2926021,0,0,3.2926021,13.394942,5.0000002)"
+         style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
+        <path
+           style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000"
+           d="m 0,13.56745 c -5e-6,2.75062 2.261097,5.01172 5.011719,5.01171 2.750621,0 5.013677,-2.26109 5.013672,-5.01171 m 0,0 C 10.025388,10.81683 7.762335,8.55377 5.011719,8.55377 2.261103,8.55377 3e-6,10.81683 0,13.56745 m 3,0 c 1e-6,-1.1293 0.882422,-2.01368 2.011719,-2.01368 1.129297,0 2.013671,0.88438 2.013672,2.01368 m 0,0 c 2e-6,1.12929 -0.884373,2.01171 -2.013672,2.01171 -1.1293,0 -2.011721,-0.88242 -2.011719,-2.01171"
+           id="path843"
+           sodipodi:nodetypes="csccsccsccsc" />
+        <path
+           id="rect841"
+           style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           d="M 0,0 H 3 V 13.56714 H 0 Z" />
+      </g>
+      <g
+         id="path894"
+         transform="matrix(3.2926021,0,0,3.2926021,19.411444,-4.7252006)"
+         style="fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
+        <g
+           id="path954"
+           style="opacity:1;fill:#fff;fill-opacity:1;stroke:#fff;stroke-width:0.24296893;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;stroke-linecap:square;stroke-linejoin:miter">
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:#fff;stroke-width:0.24296893;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000;stop-opacity:1"
+             d="m 8.375,11.507812 4.9375,10.226563 1.755005,-2.977802 -3.469849,-7.248761 z"
+            />
+        </g>
+      </g>
+      <g
+         id="g985"
+         style="fill:#fff;
+         fill-opacity:1;
+         stroke:#fff;
+         stroke-width:0.24296893;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1;
+         stroke-linecap:square;
+         stroke-linejoin:miter"
+         transform="matrix(3.2926021,0,0,3.2926021,32.860095,5.3294217)">
+        <g
+           id="g973"
+           transform="matrix(-1,0,0,1,29.989768,-3.053701)"
+           style="fill:#fff;
+           fill-opacity:1;
+           stroke:#fff;
+           stroke-width:0.24296893;
+           stroke-miterlimit:4;
+           stroke-dasharray:none;
+           stroke-opacity:1;
+           stroke-linecap:square;
+           stroke-linejoin:miter" />
+        <g
+           id="g977"
+           transform="matrix(-1,0,0,1,25.149768,6.974189)"
+           style="fill:#fff;
+           fill-opacity:1;
+           stroke:#fff;
+           stroke-width:0.24296893;
+           stroke-miterlimit:4;
+           stroke-dasharray:none;
+           stroke-opacity:1;
+           stroke-linecap:square;
+           stroke-linejoin:miter">
+          <g
+             id="path975"
+             style="opacity:1;
+             fill:#fff;
+             fill-opacity:1;
+             stroke:#fff;
+             stroke-width:0.24296893;
+             stroke-miterlimit:4;
+             stroke-dasharray:none;
+             stroke-opacity:1;
+             stroke-linecap:square;
+             stroke-linejoin:miter">
+            <path
+              style="fill:#fff;
+               fill-opacity:1;
+               fill-rule:nonzero;
+               stroke:#fff;
+               stroke-width:0.24296893;
+               stroke-linecap:square;
+               stroke-linejoin:miter;
+               stroke-miterlimit:4;
+               stroke-dasharray:none;
+               stroke-dashoffset:0;
+               stroke-opacity:1;
+               color-rendering:auto;
+               image-rendering:auto;
+               shape-rendering:auto;
+               text-rendering:auto;
+               enable-background:accumulate;
+               stop-color:#000000;
+               stop-opacity:1"
+               d="M 8.8268232,1.4804688 17.883467,20.259766 h 3.222656 L 12.04948,1.4804688 Z"
+               id="path1039"
+              />
+          </g>
+        </g>
+      </g>
+    </svg>
+    <svg
+      viewBox="75 -50 300 150"
+      style="fill:none;
+      stroke:white;
+      stroke-width:5;
+      stroke-linecap:round;"
+    >
+      <path
+         style="
+         stroke-linejoin:round;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1"
+         d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
+         id="path862"
+         sodipodi:nodetypes="cscc" />
+      <path
+         style="
+         stroke-linejoin:miter;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1"
+         d="m 312.83425,25.675399 0.42594,12.212728"
+         id="path3943" />
+      <path
+         style="stroke-linejoin:miter;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1"
+         d="m 311.63779,8.7395766 0.2454,2.4946354"
+         id="path3945" />
+      <path
+         style="stroke-linejoin:round;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1"
+         d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
+         id="path4209"
+         sodipodi:nodetypes="cssc" />
+      <path
+         style="stroke-linejoin:miter;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1"
+         d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
+         id="path5599"
+         sodipodi:nodetypes="ssss" />
+      <path
+         style="stroke-linejoin:miter;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1"
+         d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
+         id="path6508"
+         sodipodi:nodetypes="csssc" />
+      <path
+         style="stroke-linejoin:miter;
+         stroke-miterlimit:4;
+         stroke-dasharray:none;
+         stroke-opacity:1"
+         d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
+/> 
+</svg>
+    <svg
+    viewBox="465 -39 150 175"
+    style="height : 1.8em"
+    >
+      <path
+       style="
+       fill:hsl(0, 0%, 100%);
+       fill-opacity:1;"
+       d="m 521.33907,-32.100947 c -15.696,0 -29.8501,8.729044 -37.09062,22.1790455 -7.24053,13.4500045 -5.91492,32.3446665 7.17197,47.3022185 1.43732,1.642749 2.73071,2.928216 4.18011,4.572672 -20.02696,12.307516 -29.31825,31.315366 -27.02756,49.047466 2.9147,22.562305 23.06212,41.445905 49.20662,41.095695 18.2011,-0.24382 34.35419,-5.08829 46.57016,-15.17682 l 10.19351,11.31199 h 33.48737 c 0,0 -11.40008,-11.45583 -29.00271,-30.005825 7.62555,-15.07261 10.59424,-34.29628 9.60156,-58.272386 l -23.51583,0.976066 c 0.67379,16.27413 -0.91616,28.50638 -3.78227,38.04548 -8.45792,-9.04987 -17.26393,-18.82395 -26.48118,-28.95849 18.17595,-10.00276 28.62124,-26.326473 28.99029,-42.851552 0.22733,-10.173154 -3.52637,-20.406463 -11.12929,-27.770227 -7.60295,-7.363764 -18.67436,-11.495333 -31.37213,-11.495333 z m 0,23.537054 c 7.83107,0 12.28773,2.235786 15.00174,4.864433 2.71403,2.628646 4.06455,6.013533 3.96794,10.338903 -0.17763,7.953448 -6.4503,18.778829 -22.19495,25.070124 -3.12812,-3.52063 -5.90343,-6.306983 -8.98089,-9.824346 -7.894,-9.022371 -7.14525,-15.113741 -4.16423,-20.6512899 2.98102,-5.5375481 9.84988,-9.7978241 16.37039,-9.7978241 z m -9.29389,68.499888 c 12.77594,14.14387 25.16291,27.83514 36.50712,39.92866 -7.12746,5.655985 -16.83937,8.508835 -31.091,8.699735 -15.02851,0.20131 -24.1429,-9.703835 -25.54754,-20.577015 -1.19923,-9.28313 3.16266,-20.11957 20.13142,-28.05138 z"/>
+    </svg>
+    <svg
+  viewBox="144 105 45 27"
+  style="stroke:#ffffff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;"
+  >
+  
+      <circle
+         style="display:inline; fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;"
+         id="path905-7"
+         cx="80.57341"
+         cy="225.22316"
+         r="0.95786411"
+         transform="matrix(1.0762321,0,0,1.0762321,69.515692,-132.21175)" />
+      <path
+         style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 145.67023,114.3131 c 1.78592,-2.29773 3.12471,-4.35186 3.94309,-6.12246 l 0.48061,4.00796 2.67648,-3.44512 c 0,0 -1.33095,6.24196 0.31881,10.88518"
+         id="path929"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 155.88053,113.34602 c -0.45893,4.69925 -1.25065,3.69121 -0.18477,4.04488 1.55502,0.51598 4.4305,-0.81121 10.33621,-4.63748"
+         id="path931"
+         sodipodi:nodetypes="csc" />
+      <path
+         style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 160.60127,112.03858 c 0,0 -1.72603,7.30276 -7.26034,13.1046"
+         id="path933"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 159.24101,117.33599 c 0,0 1.82586,2.56841 3.00349,5.26021 2.17197,-3.1972 4.23136,-5.70438 6.74074,-10.34101 0,0 8.08433,12.22102 13.33159,16.24117 1.18468,0.90765 5.45607,1.69302 4.48962,-3.15342"
+         id="path935"
+         sodipodi:nodetypes="cccsc" />
+      <path
+         style="fill:none;fill-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 165.97522,118.73555 c 0.217,0.2611 2.78332,2.20999 2.78332,2.20999 l 3.36893,-3.46208"
+         id="path939"
+         sodipodi:nodetypes="ccc" />
+    </svg>
+
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/style/shared.scss";
+
+  div.footer{
+    position : fixed;
+    bottom: 0em;
+    padding-left:3em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    background-color: hsla(0, 0%, 1%, 0.904);
+    min-height:3.5em;
+    width: 100%;
+    max-width: $maxWidth;
+    z-index: 9;
+    transition: 0.5s;
+    &.hide{
+      transform:translateY(100%)
+    }
+  }
+  svg{
+    height: 2.5em;
+  }
+  h1{
+    font-size: 2em;
+    margin-right: 0.5em;
+    color:white;
+  }
+  .arrow{
+    margin-left: 0.4em;
+    position : fixed;
+    bottom:0.5em;
+    transition: 0.35s;
+    z-index: 99;
+    &.up{
+      transform: rotate(0deg);
+    }
+    &.down{
+      transform: rotate(180deg);
+    }
+  }
+  @supports (backdrop-filter: blur(0.5rem)){
+    div.footer{
+      background-color: hsla(0, 100%, 0%, 0.25);
+      backdrop-filter: blur(0.5rem);
+      /* adding backdrop-filter compatibility for firefox and safari */
+      -webkit-backdrop-filter: blur(0.6rem);
+    }
+  }
+  
+</style>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 211c747..6fa9b09 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 
-const show = ref(false)
+const show = ref(true)
 
 </script>
 <template>
@@ -133,70 +133,29 @@ const show = ref(false)
         </g>
       </g>
     </svg>
-    <svg
-      viewBox="75 -50 300 150"
-      style="fill:none;
-      stroke:white;
-      stroke-width:5;
-      stroke-linecap:round;"
-    >
-      <path
-         style="
-         stroke-linejoin:round;
-         stroke-miterlimit:4;
-         stroke-dasharray:none;
-         stroke-opacity:1"
-         d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416"
-         id="path862"
-         sodipodi:nodetypes="cscc" />
-      <path
-         style="
-         stroke-linejoin:miter;
-         stroke-miterlimit:4;
-         stroke-dasharray:none;
-         stroke-opacity:1"
-         d="m 312.83425,25.675399 0.42594,12.212728"
-         id="path3943" />
-      <path
-         style="stroke-linejoin:miter;
-         stroke-miterlimit:4;
-         stroke-dasharray:none;
-         stroke-opacity:1"
-         d="m 311.63779,8.7395766 0.2454,2.4946354"
-         id="path3945" />
-      <path
-         style="stroke-linejoin:round;
-         stroke-miterlimit:4;
-         stroke-dasharray:none;
-         stroke-opacity:1"
-         d="M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375"
-         id="path4209"
-         sodipodi:nodetypes="cssc" />
-      <path
-         style="stroke-linejoin:miter;
-         stroke-miterlimit:4;
-         stroke-dasharray:none;
-         stroke-opacity:1"
-         d="m 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419 z"
-         id="path5599"
-         sodipodi:nodetypes="ssss" />
-      <path
-         style="stroke-linejoin:miter;
-         stroke-miterlimit:4;
-         stroke-dasharray:none;
-         stroke-opacity:1"
-         d="m 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896"
-         id="path6508"
-         sodipodi:nodetypes="csssc" />
-      <path
-         style="stroke-linejoin:miter;
-         stroke-miterlimit:4;
-         stroke-dasharray:none;
-         stroke-opacity:1"
-         d="m 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027"
-/> 
-</svg>
-    <svg
+    <div class="raffi">
+     COUCOU
+      <!-- <svg id = "raffi" viewBox="75 -50 300 150"> -->
+        <path id="raffi_path"
+        style="fill:none;
+        stroke-width:6;
+        stroke-linecap:round;
+        stroke-linejoin:round;
+        stroke-miterlimit:4;
+        stroke-dasharray:none;
+        stroke-opacity:1;
+        stroke:rgb(235, 235, 235);"
+
+d="M 139.17222,9.3942355 C 173.00215,31.292212 218.1812,60.980457 218.48057,79.674699 218.59904,87.056983 99.966521,77.122595 100.0371,73.59533 212.37863,43.378561 246.84869,31.106644 355.29155,12.76416
+M 98.736495,1.2925001 C 130.71965,-24.665921 192.41147,-27.93255 195.70827,-12.082894 c 3.52112,16.9281249 -16.15069,23.426128 -5.21999,35.069064 7.51533,8.004927 22.54721,0.801375 22.54721,0.801375
+M 230.59072,12.767977 c -3.05309,3.537063 -5.46022,13.433154 -3.26784,14.895394 4.2835,2.856811 13.40139,-12.097612 13.1368,-13.525975 -0.40148,-2.164937 -8.06688,-3.457217 -9.86896,-1.369419
+M 268.00837,42.908163 c -26.42894,-1.402892 -17.3056,39.667651 -1.54342,31.364589 9.85909,-5.193503 -6.22644,-101.377213 2.11133,-100.854828 4.16005,0.260637 0.22284,13.904191 -6.67691,26.02389012 C 254.99972,11.56156 245.13969,22.122662 242.18918,19.553315 240.05011,17.69049 240.35315,11.012501 241.34202,8.7752027
+M 283.01637,21.941476 c 13.77166,-17.5948162 20.26231,-58.430437 14.87852,-54.688625 -16.63519,11.561933 1.50986,84.878597 -3.86255,94.259788 -2.77674,4.848515 -20.37598,-8.366388 -16.48804,-18.315105 2.64201,-6.760505 6.86016,-5.127064 11.95096,-8.174896
+M 312.83425,36 313,29
+M 311.63779,10 312.2454,10"/>
+<!-- </svg> -->
+</div>
+<svg
     viewBox="465 -39 150 175"
     style="height : 1.8em"
     >
@@ -277,6 +236,30 @@ const show = ref(false)
     margin-right: 0.5em;
     color:white;
   }
+  
+    .raffi{
+      background: linear-gradient(90deg, #0f0, #f0f, #00f, #FF0, #0ff);
+
+      color:transparent;
+
+    }
+    .stop1{
+      stop-color:#f0f;
+    }
+    .stop2{
+      offset-gradient: 20%;
+      stop-color:#f00;
+    }
+    .stop3{
+      stop-color:#0f0;
+    }
+    .stop4{
+      stop-color:#00f;
+    }
+    .stop5{
+      stop-color:#f0f;
+    }
+  
   .arrow{
     margin-left: 0.4em;
     position : fixed;