Refactor font and video sources

assets/css/style.css

@@ -1,3 +1,8 @@
+@font-face {
+  font-family: 'Scriptina';
+  src: url("/assets/scriptina.regular.ttf");
+}
+
 body {
     padding: 0;
     margin: 0;
@@ -7,7 +12,14 @@ body {
 * {
   font-family: Consolas, sans-serif;
 }
-
+.particles-js-canvas-el {
+  position: fixed;
+}
+#title {
+  font-family: 'Scriptina';
+  font-weight: 800; 
+  font-size: 5em;
+}
 video#bgvid {
     width: 100vw;
     height: 100vh;

assets/js/script.js

@@ -8,13 +8,18 @@ window.mobileAndTabletCheck = function () {
 };
 
 document.addEventListener("DOMContentLoaded", async () => {
-    document.getElementById('videoSelector').value = "assets/content/bg.mp4"
+    document.getElementById('videoSelector').value = "assets/content/petunias.mp4"
 
+
+    /* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
+particlesJS.load('particles-js', '/assets/particles.json', function() {
+    console.log('callback - particles.js config loaded');
+  });
     // gonna troll with IP
     let res = await fetch("https://freeipapi.com/api/json/")
     res = await res.json()
 
-    document.getElementById("marquee-data").innerHTML = `🌴 Hello from IPv{ver} 🌴 {ipAddress} 🌴 {city} 🌴 {country} ({countryCode}) 🌴 Lat: {lat} 🌴 Long: {lon} 🌴 {regionName} 🌴 TZ: {timezone} 🌴 {zip}`
+    document.getElementById("marquee-data").innerHTML = `🌴 IPv{ver} 🌴 {ipAddress} 🌴 {city} 🌴 {country} ({countryCode}) 🌴 Lat: {lat} 🌴 Long: {lon} 🌴 {regionName} 🌴 TZ: {timezone} 🌴 {zip}`
 
     document.getElementById("marquee-data").innerHTML = await document.getElementById("marquee-data").innerHTML.replace('{ver}', res.ipVersion).replace('{ipAddress}', res.ipAddress).replace('{city}', res.cityName).replace('{country}', res.countryName).replace('{countryCode}', res.countryCode).replace('{lat}', res.latitude).replace('{lon}', res.longitude).replace('{region}', res.region).replace('{regionName}', res.regionName).replace('{timezone}', res.timeZone).replace('{zip}', res.zipCode)
 
@@ -40,7 +45,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
 
 
-    var titleText = [ "hiizun.fr", "hiizun.f", "hiizun.", "hiizun", "hiizu", "hiiz", "hiiz", "hii", "hi", "h", "i", "i g", "i go", "i got", "i got u", "i got ur", "i got ur i", "i got ur ip", "hi got ur ip", "hii got ur p", "hiiz got ur", "hiizun.fr" ];
+    var titleText = [ "hiizun.fr", "hiizun.f", "hiizun.", "hiizun", "hiizu", "hiiz", "hii", "hi", "h", "∆", "h", "hi", "hii", "hiiz", "hiizu", "hiizun", "hiizun.", "hiizun.f" ]
     var x = 0;
 
     setInterval(() => {

assets/particles.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 208,
+      "density": {
+        "enable": true,
+        "value_area": 500
+      }
+    },
+    "color": {
+      "value": "#ffffff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 4
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 1,
+      "random": true,
+      "anim": {
+        "enable": true,
+        "speed": 1,
+        "opacity_min": 0,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 4,
+        "size_min": 0.3,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": false,
+      "distance": 150,
+      "color": "#ffffff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 1,
+      "direction": "none",
+      "random": true,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": true,
+        "rotateX": 600,
+        "rotateY": 600
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "bubble"
+      },
+      "onclick": {
+        "enable": true,
+        "mode": "repulse"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 250,
+        "size": 0,
+        "duration": 2,
+        "opacity": 0,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 400,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": false
+}