add confetti to react certificate

paalss · Oct 28, 2022 · 6c358f8 · 6c358f8 · vercel · Oct 28, 2022
1 parent 700ce0e
commit 6c358f8
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 58 deletions.
diff --git a/kilder.md b/kilder.md
@@ -2,6 +2,7 @@
 
 Brukt kode/bilder fra
 - [Lightbox (UIkit)](https://getuikit.com/docs/lightbox)
+- https://codepen.io/catdad/pen/VwjRLoM
 
 Remixet kode fra disse
 - [Bar chart (Felix Schimdt)](https://codepen.io/FelixSchmidt/pen/MKzXNp)

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "canvas-confetti": "^1.6.0",
     "next": "^12.2.2",
     "react": "^17.0.2",
     "react-darkreader": "^1.5.6",

diff --git a/src/components/common/Certificate/Certificate.js b/src/components/common/Certificate/Certificate.js
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { t } from "@lingui/macro";
 import classes from "./Certificate.module.css";
+import fireConfettiFrom from "./confetti";
 
 const Certificate = () => {
   useEffect(() => {
@@ -26,12 +27,16 @@ const Certificate = () => {
         Card3D(card, ev);
       });
 
-      card.addEventListener("mouseleave", (ev) => {
+      card.addEventListener("mouseleave", () => {
         let img = card.querySelector("img");
 
         img.style.transform = "rotateX(0deg) rotateY(0deg)";
         img.style.filter = "brightness(1)";
       });
+
+      card.addEventListener("mouseenter", (ev) => {
+        fireConfettiFrom(ev.target);
+      });
     });
   }, []);
 

diff --git a/src/components/common/Certificate/confetti.js b/src/components/common/Certificate/confetti.js
@@ -0,0 +1,73 @@
+import confetti from "canvas-confetti";
+
+// ------------ Confetti sources -------------
+// confetti package https://github.com/catdad/canvas-confetti
+// positioning to element https://codepen.io/catdad/pen/VwjRLoM
+
+const randomInRange = (min, max) => Math.random() * (max - min) + min;
+
+const fireConfetti = (x, y) => {
+  confetti({
+    angle: randomInRange(55, 125),
+    spread: randomInRange(50, 70),
+    particleCount: randomInRange(50, 100),
+    origin: {
+      x: x,
+      y: y,
+    },
+  });
+};
+
+const fireConfettiFrom = (element) => {
+  let width = window.innerWidth;
+  let height = window.innerHeight;
+
+  window.addEventListener("resize", () => {
+    width = window.innerWidth;
+    height = window.innerHeight;
+  });
+  const rect = element.getBoundingClientRect();
+
+  const originX = (rect.x + 0.5 * rect.width) / width;
+  const originY = (rect.y + 0.5 * rect.height) / height;
+
+  fireConfetti(originX, originY);
+
+  // fire(0.25, {
+  //   spread: 26,
+  //   startVelocity: 55,
+  // });
+  // fire(0.2, {
+  //   spread: 60,
+  // });
+  // fire(0.35, {
+  //   spread: 100,
+  //   decay: 0.91,
+  //   scalar: 0.8,
+  // });
+  // fire(0.1, {
+  //   spread: 120,
+  //   startVelocity: 25,
+  //   decay: 0.92,
+  //   scalar: 1.2,
+  // });
+  // fire(0.1, {
+  //   spread: 120,
+  //   startVelocity: 45,
+  // });
+
+  // const count = 200;
+  // const defaults = {
+  //   origin: { y: -10 },
+  // };
+
+  // const fire = (particleRatio, opts) => {
+  //   confetti(
+  //     Object.assign({}, defaults, opts, {
+  //       particleCount: Math.floor(count * particleRatio),
+  //     })
+  //   );
+  // };
+};
+
+export default fireConfettiFrom;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -11,70 +11,71 @@ import Certificate from "../components/common/Certificate";
 // react lingui
 import { Trans, t } from "@lingui/macro";
 
-const Index = () => (
-  <>
-    <Head>
-      <title>Pål Stakvik</title>
-    </Head>
+const Index = () => {
+  return (
+    <>
+      <Head>
+        <title>Pål Stakvik</title>
+      </Head>
 
-    <Trans>
-      <h2>Kompetanse</h2>
-      <div className="mb-50">
-        Jeg har erfaring innen webutvikling og grafisk design.
-      </div>
-    </Trans>
+      <Trans>
+        <h2>Kompetanse</h2>
+        <div className="mb-50">
+          Jeg har erfaring innen webutvikling og grafisk design.
+        </div>
+      </Trans>
 
-    <div id="skills-placeholder" className="skills-placeholder mb-130">
-      <Barchart
-        web={[
-          { tech: "HTML & CSS", level: "3" },
-          { tech: "JavaScript", level: "3" },
-          { tech: "React", level: "3" },
-          {
-            // denne string'en passer for bar title, men ikke som label innerhtml...
-            tech: t`MySQL & relasjonsdatabaser`,
-            // ...label trenger en HTML-versjon med soft hyphen (&shy;), slik at ordet kan orddeles ved linjeskift
-            techHtmlEntities: (
-              <Trans>MySQL &amp; relasjons&shy;databaser</Trans>
-            ),
-            level: "2",
-          },
-          { tech: "PHP", level: "2" },
-          { tech: t`Automatisk testing`, level: "1" },
-          { tech: "NodeJS", level: "1" },
-          { tech: "Next", level: "1" },
-        ]}
-        design={[
-          {
-            tech: "Adobe XD, Photoshop, Illustrator & InDesign",
-            level: "2",
-          },
-        ]}
-      />
-    </div>
+      <div id="skills-placeholder" className="skills-placeholder mb-130">
+        <Barchart
+          web={[
+            { tech: "HTML & CSS", level: "3" },
+            { tech: "JavaScript", level: "3" },
+            { tech: "React", level: "3" },
+            {
+              // denne string'en passer for bar title, men ikke som label innerhtml...
+              tech: t`MySQL & relasjonsdatabaser`,
+              // ...label trenger en HTML-versjon med soft hyphen (&shy;), slik at ordet kan orddeles ved linjeskift
+              techHtmlEntities: (
+                <Trans>MySQL &amp; relasjons&shy;databaser</Trans>
+              ),
+              level: "2",
+            },
+            { tech: "PHP", level: "2" },
+            { tech: t`Automatisk testing`, level: "1" },
+            { tech: "NodeJS", level: "1" },
+            { tech: "Next", level: "1" },
+          ]}
+          design={[
+            {
+              tech: "Adobe XD, Photoshop, Illustrator & InDesign",
+              level: "2",
+            },
+          ]} />
+      </div>
 
-    <h2 className="mb-50">
-      <Trans>Nettsider</Trans>
-    </h2>
-    <WebworkLinks />
+      <h2 className="mb-50">
+        <Trans>Nettsider</Trans>
+      </h2>
+      <WebworkLinks />
 
-    <h2 className="mb-50">
-      <Trans>Grafisk</Trans>
-    </h2>
+      <h2 className="mb-50">
+        <Trans>Grafisk</Trans>
+      </h2>
 
-    <GraphicworkLinks />
+      <GraphicworkLinks />
 
-    <h2 className="mb-50">
-      <Trans>Annet</Trans>
-    </h2>
-    <OtherworkLinks />
+      <h2 className="mb-50">
+        <Trans>Annet</Trans>
+      </h2>
+      <OtherworkLinks />
 
-    <h2 className="mb-50">
-      <Trans>React sertifikat</Trans>
-    </h2>
+      <h2 className="mb-50">
+        <Trans>React sertifikat</Trans>
+      </h2>
 
-    <Certificate />
-  </>
-);
+      <Certificate />
+    </>
+  );
+};
 
 export default Index;
diff --git a/yarn.lock b/yarn.lock
@@ -1233,6 +1233,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvas-confetti@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "canvas-confetti@npm:1.6.0"
+  checksum: be19e3be736ab28aa8af7b53cba9f4146f5714edadbf4d5a7d7b1899914dc59a8ac5574260fe6b7d9995c51df5787b0b707adfbb72dbacbc61fc03f9f2b25291
+  languageName: node
+  linkType: hard
+
 "chalk@npm:^2.0.0":
   version: 2.4.2
   resolution: "chalk@npm:2.4.2"
@@ -2887,6 +2894,7 @@ __metadata:
     "@testing-library/react": ^11.1.0
     "@testing-library/user-event": ^12.1.10
     babel-plugin-macros: ^3.1.0
+    canvas-confetti: ^1.6.0
     next: ^12.2.2
     prop-types: ^15.8.1
     react: ^17.0.2