Add particles to home-background

package-lock.json

@@ -17732,6 +17732,12 @@
             "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
             "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
         },
+        "pathseg": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz",
+            "integrity": "sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==",
+            "optional": true
+        },
         "peek-readable": {
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/peek-readable/-/peek-readable-3.1.3.tgz",
@@ -23237,6 +23243,14 @@
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
             "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
         },
+        "tsparticles": {
+            "version": "1.26.2",
+            "resolved": "https://registry.npmjs.org/tsparticles/-/tsparticles-1.26.2.tgz",
+            "integrity": "sha512-rUOd8lrpZwcEIa0Ft+QzS73Eorl4xo6neVDNGFPxakSOMbOPL7OHdzjbqZgoE93dbRBzJlguhRMGZiRRuH86gQ==",
+            "requires": {
+                "pathseg": "^1.2.0"
+            }
+        },
         "tsutils": {
             "version": "3.21.0",
             "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",

package.json

@@ -45,7 +45,8 @@
         "react-dom": "17.0.2",
         "react-github-btn": "1.2.0",
         "react-helmet": "6.1.0",
-        "react-i18next": "11.8.12"
+        "react-i18next": "11.8.12",
+        "tsparticles": "^1.26.2"
     },
     "devDependencies": {
         "@fab/actions": "1.0.0-rc.3-beta.1",

src/pages/index.js

@@ -9,6 +9,9 @@ import { Trans, Link } from "gatsby-plugin-react-i18next";
 import { graphql } from "gatsby";
 
 import anime from "animejs";
+import { tsParticles } from "tsparticles";
+
+import * as particleConfig from "./index.particles.json";
 
 export const query = graphql`
   query GetMetaAndProjects($language: String) {
@@ -83,6 +86,8 @@ const IndexPage = (props) => {
       duration: 250,
       easing: "easeInOutCirc",
     });
+
+    tsParticles.load("particle-container", particleConfig);
   }, []);
 
   let meta = props.data.site.siteMetadata;
@@ -90,6 +95,8 @@ const IndexPage = (props) => {
   return (
     <Layout title="Kevin Kandlbinder" transparentTopbar={true}>
       <section className={styles.heroSection}>
+        <div className={styles.heroSectionBg} id="particle-container"></div>
+        <div className={styles.heroSectionBgOver}></div>
         <div className={styles.profile + " profile"}>
           <div
             data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)"
@@ -236,15 +243,6 @@ const IndexPage = (props) => {
   );
 };
 
-/*class IndexPage extends React.Component {
-  componentDidMount() {
-  }
-
-  render() {
-
-    
-}*/
-
 IndexPage.propTypes = {
   data: PropTypes.object.isRequired,
 };

src/pages/index.module.scss

@@ -3,16 +3,32 @@
 
 .heroSection {
     width: 100%;
-    background: #000710;
-    min-height: 600px;
-    padding-top: 100px;
+    height: 600px;
     overflow: hidden;
-    background: linear-gradient(to bottom, transparent 80%, $background),
-        radial-gradient(ellipse at top left, #1f0ba659, transparent),
-        radial-gradient(ellipse at bottom right, #4a086829, transparent);
+
+    .heroSectionBg, .heroSectionBgOver {
+        position: absolute;
+        width: 100%;
+        max-width: unset;
+        height: 600px;
+        padding: 0;
+
+        @media (pointer: coarse), (pointer: none) {
+            height: 700px;
+        }
+    }
+
+    .heroSectionBg {
+        background: radial-gradient(ellipse at top left, #1f0ba659, transparent),
+            radial-gradient(ellipse at bottom right, #4a086829, transparent);
+    }
+
+    .heroSectionBgOver {
+        background: linear-gradient(to bottom, transparent 80%, $background);
+    }
 
     @media (pointer: coarse), (pointer: none) {
-        min-height: 700px;
+        height: 700px;
     }
 
     .profile {
@@ -22,6 +38,7 @@
         max-width: 600px;
         max-height: 400px;
         transform: translate(-50%, 0%);
+        top: 100px;
 
         .hello {
             font-weight: 100;

src/pages/index.particles.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 33,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#1b1e34"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000"
+      },
+      "polygon": {
+        "nb_sides": 3
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 5,
+        "height": 5
+      }
+    },
+    "opacity": {
+      "value": 0.3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 27.620603391810075,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 10,
+        "size_min": 40,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 200,
+      "color": "#ffffff",
+      "opacity": 0.14994041841268327,
+      "width": 2
+    },
+    "move": {
+      "enable": true,
+      "speed": 0.2,
+      "direction": "top",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "window",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}