From d4b842c7eeb53745020dc7fdc01fae38d24c8c1d Mon Sep 17 00:00:00 2001
From: Vivi <vachetvirginie@gmail.com>
Date: Thu, 12 Oct 2023 12:04:21 +0200
Subject: [PATCH] feat: new style

---
 public/imgs/technos/cypress.svg               | 96 +++++++++++++++++++
 src/components/commons/Title.vue              |  2 +-
 .../commons/assets/patternFooter.svg          |  2 +-
 src/sections/portfolio/assets/dotsSvg.vue     | 63 +++++++++++-
 src/sections/skills/data.json                 |  8 +-
 tailwind.config.js                            | 17 +++-
 6 files changed, 180 insertions(+), 8 deletions(-)
 create mode 100644 public/imgs/technos/cypress.svg

diff --git a/public/imgs/technos/cypress.svg b/public/imgs/technos/cypress.svg
new file mode 100644
index 000000000..320beb943
--- /dev/null
+++ b/public/imgs/technos/cypress.svg
@@ -0,0 +1,96 @@
+<svg version="1.1" id="_x30_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 963 961.4" style="enable-background:new 0 0 963 961.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:url(#SVGID_1_);}
+	.st2{fill:#69D3A7;}
+	.st3{fill:url(#SVGID_00000034072960266603865680000001771952526296163971_);}
+	.st4{fill:url(#SVGID_00000070076384827554734350000014051287915572456331_);}
+	.st5{fill:url(#SVGID_00000031903688611292260920000016222038111573203631_);}
+	.st6{fill:url(#SVGID_00000122718241624521638850000008037160691744253621_);}
+</style>
+    <g>
+	<path class="st0" d="M-1993.6,309c38.9,0,70.5,20.7,86.8,56.9l1.3,2.8l65.2-22.2l-1.4-3.3c-25.3-61.6-83.5-99.9-151.9-99.9
+		c-48.1,0-87.3,15.4-119.6,47.1c-32.1,31.5-48.4,71.1-48.4,117.8c0,46.3,16.3,85.7,48.4,117.2c32.3,31.7,71.4,47.1,119.6,47.1
+		c68.4,0,126.7-38.3,151.9-99.9l1.4-3.3l-65.3-22.2l-1.2,2.9c-14.6,35.6-47,56.8-86.7,56.8c-27.1,0-49.9-9.5-68-28.1
+		c-18.3-18.9-27.6-42.6-27.6-70.5c0-28.1,9-51.4,27.6-71.1C-2043.5,318.4-2020.6,309-1993.6,309z"/>
+        <g>
+		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-1332.0939" y1="411.2339" x2="-1762.0063" y2="689.5857">
+			<stop  offset="8.142510e-02" style="stop-color:#69D3A7"/>
+            <stop  offset="1" style="stop-color:#69D3A7;stop-opacity:0"/>
+		</linearGradient>
+            <path class="st1" d="M-1710.2,868.1l-19.5-64.1c175.6-53.4,293.5-212.4,293.5-395.8c0-50.6-9-100.1-26.9-146.9l62.6-23.8
+			c20.8,54.5,31.3,112,31.3,170.8C-1369.1,621.3-1506.2,806.1-1710.2,868.1z"/>
+	</g>
+        <g>
+		<path class="st2" d="M-1454.2,286.9C-1507.8,112-1667.1-5.5-1850.5-5.5c-24.9,0-49.9,2.2-74.2,6.6l-11.9-66
+			c28.2-5.1,57.2-7.7,86.1-7.7c213.1,0,398.1,136.6,460.4,339.8L-1454.2,286.9z"/>
+	</g>
+        <g>
+
+			<linearGradient id="SVGID_00000027594368571832825320000012150300442423805353_" gradientUnits="userSpaceOnUse" x1="-2010.8448" y1="-66.5067" x2="-2280.9309" y2="506.316">
+			<stop  offset="0" style="stop-color:#69D3A7"/>
+                <stop  offset="1" style="stop-color:#69D3A7"/>
+		</linearGradient>
+            <path style="fill:url(#SVGID_00000027594368571832825320000012150300442423805353_);" d="M-2301.3,577.7
+			c-20.4-54.1-30.8-111.2-30.8-169.5c0-248.3,186.4-454,433.6-478.3l6.6,66.7c-212.7,21-373.1,197.9-373.1,411.6
+			c0,50.2,8.9,99.3,26.5,145.8L-2301.3,577.7z"/>
+	</g>
+        <polygon class="st0" points="-1584.7,249.3 -1677.8,484.9 -1771.4,249.3 -1848,249.3 -1716.7,570.9 -1812.3,803 -1745.3,816.3
+		-1512.4,249.3 	"/>
+
+        <linearGradient id="SVGID_00000183230330393599205210000012274534758368872091_" gradientUnits="userSpaceOnUse" x1="-2332.7361" y1="628.3037" x2="-1624.5309" y2="850.5662">
+		<stop  offset="7.735210e-02" style="stop-color:#69D3A7"/>
+            <stop  offset="0.1611" style="stop-color:#74D6AD"/>
+            <stop  offset="0.3087" style="stop-color:#92DFBF"/>
+            <stop  offset="0.5027" style="stop-color:#C2EDDB"/>
+            <stop  offset="0.7187" style="stop-color:#FFFFFF"/>
+	</linearGradient>
+        <path style="fill:url(#SVGID_00000183230330393599205210000012274534758368872091_);" d="M-1800.3,773.8l-14.1,34.2
+		c-3.2,7.8-10.7,13.1-19,13.5c-5.7,0.2-11.5,0.4-17.3,0.4c-184,0-347.8-123.2-398.4-299.5l-64.4,18.5
+		c58.8,204.9,249.1,348,462.7,348c0,0,0,0,0,0c0,0,0.1,0,0.1,0v0c6.7,0,13.4-0.1,20-0.4c34.4-1.4,65.1-23,78.2-55l19.1-46.3
+		L-1800.3,773.8z"/>
+</g>
+    <g>
+	<path class="st0" d="M340.4,382.8c38.4,0,69.6,20.5,85.6,56.1l1.2,2.8l64.4-21.9l-1.3-3.3c-24.9-60.8-82.4-98.5-149.9-98.5
+		c-47.5,0-86.1,15.2-118,46.5c-31.7,31.1-47.7,70.2-47.7,116.2c0,45.7,16.1,84.6,47.7,115.6c31.9,31.3,70.5,46.5,118,46.5
+		c67.5,0,124.9-37.8,149.9-98.5l1.3-3.3l-64.5-21.9L426,522c-14.4,35.1-46.4,56-85.6,56c-26.7,0-49.3-9.3-67.1-27.7
+		c-18.1-18.6-27.2-42.1-27.2-69.6c0-27.7,8.9-50.7,27.2-70.2C291.2,392.1,313.7,382.8,340.4,382.8z"/>
+        <g>
+
+			<linearGradient id="SVGID_00000046319717966458416970000015607462967221361851_" gradientUnits="userSpaceOnUse" x1="992.9913" y1="483.7015" x2="568.87" y2="758.3036">
+			<stop  offset="8.142510e-02" style="stop-color:#69D3A7"/>
+                <stop  offset="1" style="stop-color:#69D3A7;stop-opacity:0"/>
+		</linearGradient>
+            <path style="fill:url(#SVGID_00000046319717966458416970000015607462967221361851_);" d="M620,934.4l-19.2-63.3
+			C774,818.5,890.4,661.6,890.4,480.7c0-49.9-8.9-98.7-26.5-144.9l61.8-23.5c20.5,53.8,30.9,110.4,30.9,168.5
+			C956.5,690.9,821.3,873.2,620,934.4z"/>
+	</g>
+        <g>
+		<path class="st2" d="M872.5,361.1c-52.9-172.6-210-288.5-391-288.5c-24.6,0-49.2,2.2-73.2,6.5L396.6,14c27.8-5,56.4-7.6,84.9-7.6
+			c210.2,0,392.7,134.7,454.2,335.2L872.5,361.1z"/>
+	</g>
+        <polygon class="st0" points="743.7,324 652,556.4 559.6,324 484,324 613.6,641.2 519.2,870.2 585.3,883.4 815.1,324 	"/>
+
+        <linearGradient id="SVGID_00000100373257584267226060000002155254387837733269_" gradientUnits="userSpaceOnUse" x1="533.2401" y1="903.2662" x2="86.9093" y2="46.6224">
+		<stop  offset="6.132909e-02" style="stop-color:#FFFFFF"/>
+            <stop  offset="0.138" style="stop-color:#DEF5EC"/>
+            <stop  offset="0.2374" style="stop-color:#BAEBD7"/>
+            <stop  offset="0.3427" style="stop-color:#9DE2C5"/>
+            <stop  offset="0.4536" style="stop-color:#86DBB8"/>
+            <stop  offset="0.573" style="stop-color:#76D7AE"/>
+            <stop  offset="0.7067" style="stop-color:#6CD4A9"/>
+            <stop  offset="0.8842" style="stop-color:#69D3A7"/>
+	</linearGradient>
+        <path style="fill:url(#SVGID_00000100373257584267226060000002155254387837733269_);" d="M531.1,841.4l-13.9,33.7
+		c-3.2,7.7-10.5,13-18.7,13.3c-5.7,0.2-11.3,0.4-17.1,0.4c-170.8,0-324-107.6-383.1-265.3c-0.9-2.4-1.8-4.8-2.6-7.2
+		c-0.2-0.6-0.4-1.3-0.7-1.9c-0.7-2.2-1.5-4.3-2.2-6.5c-0.3-0.8-0.5-1.6-0.8-2.5c-0.6-2-1.3-3.9-1.9-5.9c-0.3-1-0.6-2-0.9-3
+		c-11.1-37.4-16.7-76.3-16.7-115.9c0-210.8,158.3-385.4,368.1-406.1l-6.5-65.8C190.4,32.8,6.5,235.7,6.5,480.7
+		c0,44.6,6.2,88.5,18.3,130.9l0,0c0,0,0,0.1,0,0.1c0.8,2.9,1.7,5.7,2.6,8.6c0.1,0.4,0.2,0.8,0.4,1.2c0.8,2.7,1.7,5.4,2.6,8.1
+		c0.2,0.5,0.3,0.9,0.5,1.4c0.9,2.7,1.8,5.4,2.8,8.1c0.1,0.4,0.3,0.7,0.4,1.1c0.9,2.6,1.9,5.2,2.8,7.7l0,0
+		c69,182.5,246.5,306.9,444.4,307c0,0,0,0,0,0c0,0,0.1,0,0.1,0v0c6.6,0,13.2-0.1,19.8-0.4c33.9-1.4,64.2-22.7,77.2-54.2l18.8-45.7
+		L531.1,841.4z"/>
+</g>
+    <image style="overflow:visible;" width="512" height="512" xlink:href="../../../../../../../../Users/katiesculley/Downloads/Logo/Type=Mark, Variant=White + Color.png"  transform="matrix(1.9513 0 0 1.9513 -386.8387 2385.2271)">
+</image>
+</svg>
diff --git a/src/components/commons/Title.vue b/src/components/commons/Title.vue
index 0b14a4e28..39e21363b 100644
--- a/src/components/commons/Title.vue
+++ b/src/components/commons/Title.vue
@@ -23,7 +23,7 @@ export default {
 <style>
 .title-gradient {
   font-size: 72px;
-  background: -webkit-linear-gradient(#60BDAF, #F88AAF, #EDFCC2);
+  background: -webkit-linear-gradient(#60BDAF, #BC2649, #EDFCC2);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
diff --git a/src/components/commons/assets/patternFooter.svg b/src/components/commons/assets/patternFooter.svg
index 7951bb9fe..d3703b36b 100644
--- a/src/components/commons/assets/patternFooter.svg
+++ b/src/components/commons/assets/patternFooter.svg
@@ -1,7 +1,7 @@
   <svg
     width="1440"
     height="941"
-    fill="#F88AAF"
+    fill="#BC2649"
     xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0)">
       <path
diff --git a/src/sections/portfolio/assets/dotsSvg.vue b/src/sections/portfolio/assets/dotsSvg.vue
index a4b0232dd..ab9d0fd73 100644
--- a/src/sections/portfolio/assets/dotsSvg.vue
+++ b/src/sections/portfolio/assets/dotsSvg.vue
@@ -6,261 +6,313 @@
     :fill="color"
     xmlns="http://www.w3.org/2000/svg">
     <circle
+      :class="colorClass"
       cx="6"
       cy="78"
       r="6"
       transform="rotate(-180 6 78)" />
     <circle
+      :class="colorClass"
       cx="30"
       cy="78"
       r="6"
       transform="rotate(-180 30 78)" />
     <circle
+      :class="colorClass"
       cx="54"
       cy="78"
       r="6"
       transform="rotate(-180 54 78)" />
     <circle
+      :class="colorClass"
       cx="78"
       cy="78"
       r="6"
       transform="rotate(-180 78 78)" />
     <circle
+      :class="colorClass"
       cx="102"
       cy="78"
       r="6"
       transform="rotate(-180 102 78)" />
     <circle
+      :class="colorClass"
       cx="126"
       cy="78"
       r="6"
       transform="rotate(-180 126 78)" />
     <circle
+      :class="colorClass"
       cx="150"
       cy="78"
       r="6"
       transform="rotate(-180 150 78)" />
     <circle
+      :class="colorClass"
       cx="174"
       cy="78"
       r="6"
       transform="rotate(-180 174 78)" />
     <circle
+      :class="colorClass"
       cx="198"
       cy="78"
       r="6"
       transform="rotate(-180 198 78)" />
     <circle
+      :class="colorClass"
       cx="222"
       cy="78"
       r="6"
       transform="rotate(-180 222 78)" />
     <circle
+      :class="colorClass"
       cx="246"
       cy="78"
       r="6"
       transform="rotate(-180 246 78)" />
     <circle
+      :class="colorClass"
       cx="270"
       cy="78"
       r="6"
       transform="rotate(-180 270 78)" />
     <circle
+      :class="colorClass"
       cx="294"
       cy="78"
       r="6"
       transform="rotate(-180 294 78)" />
     <circle
+      :class="colorClass"
       cx="6"
       cy="54"
       r="6"
       transform="rotate(-180 6 54)" />
     <circle
+      :class="colorClass"
       cx="30"
       cy="54"
       r="6"
       transform="rotate(-180 30 54)" />
     <circle
+      :class="colorClass"
       cx="54"
       cy="54"
       r="6"
       transform="rotate(-180 54 54)" />
     <circle
+      :class="colorClass"
       cx="78"
       cy="54"
       r="6"
       transform="rotate(-180 78 54)" />
     <circle
+      :class="colorClass"
       cx="102"
       cy="54"
       r="6"
       transform="rotate(-180 102 54)" />
     <circle
+      :class="colorClass"
       cx="126"
       cy="54"
       r="6"
       transform="rotate(-180 126 54)" />
     <circle
+      :class="colorClass"
       cx="150"
       cy="54"
       r="6"
       transform="rotate(-180 150 54)" />
     <circle
+      :class="colorClass"
       cx="174"
       cy="54"
       r="6"
       transform="rotate(-180 174 54)" />
     <circle
+      :class="colorClass"
       cx="198"
       cy="54"
       r="6"
       transform="rotate(-180 198 54)" />
     <circle
+      :class="colorClass"
       cx="222"
       cy="54"
       r="6"
       transform="rotate(-180 222 54)" />
     <circle
+      :class="colorClass"
       cx="246"
       cy="54"
       r="6"
       transform="rotate(-180 246 54)" />
     <circle
+      :class="colorClass"
       cx="270"
       cy="54"
       r="6"
       transform="rotate(-180 270 54)" />
     <circle
+      :class="colorClass"
       cx="294"
       cy="54"
       r="6"
       transform="rotate(-180 294 54)" />
     <circle
+      :class="colorClass"
       cx="6"
       cy="30"
       r="6"
       transform="rotate(-180 6 30)" />
     <circle
+      :class="colorClass"
       cx="30"
       cy="30"
       r="6"
       transform="rotate(-180 30 30)" />
     <circle
+      :class="colorClass"
       cx="54"
       cy="30"
       r="6"
       transform="rotate(-180 54 30)" />
     <circle
+      :class="colorClass"
       cx="78"
       cy="30"
       r="6"
       transform="rotate(-180 78 30)" />
     <circle
+      :class="colorClass"
       cx="102"
       cy="30"
       r="6"
       transform="rotate(-180 102 30)" />
     <circle
+      :class="colorClass"
       cx="126"
       cy="30"
       r="6"
       transform="rotate(-180 126 30)" />
     <circle
+      :class="colorClass"
       cx="150"
       cy="30"
       r="6"
       transform="rotate(-180 150 30)" />
     <circle
+      :class="colorClass"
       cx="174"
       cy="30"
       r="6"
       transform="rotate(-180 174 30)" />
     <circle
+      :class="colorClass"
       cx="198"
       cy="30"
       r="6"
       transform="rotate(-180 198 30)" />
     <circle
+      :class="colorClass"
       cx="222"
       cy="30"
       r="6"
       transform="rotate(-180 222 30)" />
     <circle
+      :class="colorClass"
       cx="246"
       cy="30"
       r="6"
       transform="rotate(-180 246 30)" />
     <circle
+      :class="colorClass"
       cx="270"
       cy="30"
       r="6"
       transform="rotate(-180 270 30)" />
     <circle
+      :class="colorClass"
       cx="294"
       cy="30"
       r="6"
       transform="rotate(-180 294 30)" />
     <circle
+      :class="colorClass"
       cx="6"
       cy="5.99998"
       r="6"
       transform="rotate(-180 6 5.99998)" />
     <circle
+      :class="colorClass"
       cx="30"
       cy="5.99998"
       r="6"
       transform="rotate(-180 30 5.99998)" />
     <circle
+      :class="colorClass"
       cx="54"
       cy="5.99998"
       r="6"
       transform="rotate(-180 54 5.99998)" />
     <circle
+      :class="colorClass"
       cx="78"
       cy="5.99998"
       r="6"
       transform="rotate(-180 78 5.99998)" />
     <circle
+      :class="colorClass"
       cx="102"
       cy="5.99998"
       r="6"
       transform="rotate(-180 102 5.99998)" />
     <circle
+      :class="colorClass"
       cx="126"
       cy="5.99998"
       r="6"
       transform="rotate(-180 126 5.99998)" />
     <circle
+      :class="colorClass"
       cx="150"
       cy="5.99998"
       r="6"
       transform="rotate(-180 150 5.99998)" />
     <circle
+      :class="colorClass"
       cx="174"
       cy="5.99999"
       r="6"
       transform="rotate(-180 174 5.99999)" />
     <circle
+      :class="colorClass"
       cx="198"
       cy="5.99999"
       r="6"
       transform="rotate(-180 198 5.99999)" />
     <circle
+      :class="colorClass"
       cx="222"
       cy="5.99999"
       r="6"
       transform="rotate(-180 222 5.99999)" />
     <circle
+      :class="colorClass"
       cx="246"
       cy="5.99999"
       r="6"
       transform="rotate(-180 246 5.99999)" />
     <circle
+      :class="colorClass"
       cx="270"
       cy="6"
       r="6"
       transform="rotate(-180 270 6)" />
     <circle
+      :class="colorClass"
       cx="294"
       cy="6"
       r="6"
@@ -274,7 +326,16 @@ export default {
     props: {
         color: {
             type: String,
-            default: "#A1D8B1"
+            default: "secondary"
+        }
+    },
+    computed: {
+        colorClass() {
+            const colorMap = {
+                secondary: "fill-secondary",
+            };
+            console.log(this.color);
+            return colorMap[this.color] || colorMap.secondary;
         }
     }
 };
diff --git a/src/sections/skills/data.json b/src/sections/skills/data.json
index bbf8d6fae..580cddadb 100644
--- a/src/sections/skills/data.json
+++ b/src/sections/skills/data.json
@@ -3,7 +3,7 @@
     "message": "JavaScript",
     "img": "javascript.svg"
   },
-  "skill12":{
+  "skill2":{
     "message": "TypeScript",
     "img": "typescript.svg"
   },
@@ -58,5 +58,9 @@
     "skill15": {
         "message": "Github",
         "img": "github.svg"
-    }
+    },
+  "skill16": {
+    "message": "Cypress",
+    "img": "cypress.svg"
+  }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 38d397308..636be637c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,8 +9,8 @@ module.exports = {
         extend: {
             colors: {
                 // primary: "#5311DF",
-                primary: "#F88AAF",
-                secondary: "#60BDAF",
+                primary: "#BC2649",
+                secondary: "#015950",
                 tertiary: "#F8E3AF",
                 yellow_primary: "#EDFCC2",
                 yellow_secondary: "#D3A400",
@@ -39,5 +39,16 @@ module.exports = {
         extend: {},
     },
     content: ["./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js"],
-    plugins: [require("tw-elements/dist/plugin")],
+    corePlugins: {
+        fill: true,
+    },
+    plugins: [require("tw-elements/dist/plugin"),
+              function ({ addUtilities }) {
+                  const newUtilities = {
+                      ".fill-secondary": {
+                          fill: "#015950",
+                      },
+                  };
+                  addUtilities(newUtilities, ["responsive", "hover"]);
+              }],
 };