From c36c00a344b80b44ff5d1321c14ee23c3a209dbc Mon Sep 17 00:00:00 2001
From: Anthony Dumas <anthony@dumas.cc>
Date: Fri, 24 Feb 2023 09:54:42 +0000
Subject: [PATCH] Ajout de Powerline (c'est rigolo)

---
 package-lock.json                   | 11 +++++++++++
 package.json                        |  1 +
 src/components/MainCard/MainCard.js | 10 ++++++++--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4ab95c6..31961c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@testing-library/react": "^11.2.2",
         "@testing-library/user-event": "^12.5.0",
         "bulma": "^0.9.4",
+        "powerglitch": "^2.3.2",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
         "react-intl": "^5.10.9",
@@ -13608,6 +13609,11 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/powerglitch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/powerglitch/-/powerglitch-2.3.2.tgz",
+      "integrity": "sha512-nRKMttDRu0aOeu5/rUm0CFvwuaE3b7Klujjn0AIgoLUim0E2+4YpXZ76+2t9cJERQuFZ+7D36ywG7GLtRUSyMQ=="
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -26652,6 +26658,11 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "powerglitch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/powerglitch/-/powerglitch-2.3.2.tgz",
+      "integrity": "sha512-nRKMttDRu0aOeu5/rUm0CFvwuaE3b7Klujjn0AIgoLUim0E2+4YpXZ76+2t9cJERQuFZ+7D36ywG7GLtRUSyMQ=="
+    },
     "prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/package.json b/package.json
index 38af22e..eceff11 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^12.5.0",
     "bulma": "^0.9.4",
+    "powerglitch": "^2.3.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-intl": "^5.10.9",
diff --git a/src/components/MainCard/MainCard.js b/src/components/MainCard/MainCard.js
index bbbc1bd..d963acb 100644
--- a/src/components/MainCard/MainCard.js
+++ b/src/components/MainCard/MainCard.js
@@ -7,13 +7,19 @@ import headshotFond from '../../images/headshot_fond.webp';
 import headshotMain from '../../images/headshot_main.webp';
 import ButtonIcon from '../ButtonIcon/index';
 import ExperienceCard from '../ExperienceCard/index';
-
+import { PowerGlitch } from 'powerglitch';
 
 class MainCard extends Component {
+
+    glitching() {
+        PowerGlitch.glitch('#photoProfil');
+    }
+
     render() {
         var metaThemeColor = document.querySelector("meta[name=theme-color]");
         metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ? "#25444b" : "#5c9ead");
         const experienceCardMessage = this.props.intl.messages.experienceCard;
+
         return <section id="idCard" class="hero is-medium is-info">
             <div class="hero-body">
                 <div class="container">
@@ -22,7 +28,7 @@ class MainCard extends Component {
                         <div id="photosAndButtons" class="column is-3-widescreen is-4-tablet is-success">
                             <div class="card">
                                 <div class="card-image">
-                                    <figure id="photoProfil" class="image">
+                                    <figure id="photoProfil" class="image" onMouseOver={this.glitching} >
                                         <img fetchpriority="high" class="background" src={headshotFond} alt="Anthony Dumas" />
                                         <img fetchpriority="high" class="actor" src={headshotMain} alt="Anthony Dumas" />
                                     </figure>