Add particles to home-background

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
+}