add idler background

2026-02-24 21:09:49 -06:00 · 2022-09-27 20:14:19 -04:00
parent d8786454fa
commit b07061e7f2
6 changed files with 207 additions and 27 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,13 @@
        "aos": "^2.3.4",
        "node": "^17.7.2",
        "node-dom": "^0.1.0",
+        "on-resize": "^2.0.0",
        "react": "^18.0.0",
        "react-bootstrap": "^2.2.3",
        "react-dom": "^18.0.0",
        "react-ga": "^3.3.1",
        "react-image-gallery": "^1.2.7",
+        "react-p5": "^1.3.30",
        "react-responsive-carousel": "^3.2.23",
        "react-router-dom": "^6.3.0",
        "react-scripts": "5.0.0",
@@ -3253,6 +3255,11 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
    },
+    "node_modules/@types/p5": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.3.3.tgz",
+      "integrity": "sha512-PBSFnX6IgV6Pqlx9wocUjSkGlm1I1ymz9tEiTbdNCqig6FOGiWcVUHx13TXRTBfRIhZC9+MqqgztMsgzpueaUg=="
+    },
    "node_modules/@types/parse-json": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -9948,6 +9955,11 @@
        "node": ">= 0.8"
      }
    },
+    "node_modules/on-resize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/on-resize/-/on-resize-2.0.0.tgz",
+      "integrity": "sha512-7aQt8SQNm35qe1e0bMSAigcYlLmUmCLpaRSIh4mrcoJiHqlLIoY4YBhc+mmioAk92d63fhCiQ4msmoQ6N4KCcA=="
+    },
    "node_modules/once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -9986,6 +9998,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw==",
+      "bin": {
+        "opencollective-postinstall": "index.js"
+      }
+    },
    "node_modules/optionator": {
      "version": "0.9.1",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -10047,6 +10067,11 @@
        "node": ">=6"
      }
    },
+    "node_modules/p5": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/p5/-/p5-1.3.1.tgz",
+      "integrity": "sha512-g7W2htgEwiAEGcl0WHccAJKbunUJwrUojUSR9+KihphJ33p5VpDdh1K8pDx4ppYjOr/lVEXaZ1XXDj27nwlNOg=="
+    },
    "node_modules/param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -11804,6 +11829,25 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "node_modules/react-p5": {
+      "version": "1.3.30",
+      "resolved": "https://registry.npmjs.org/react-p5/-/react-p5-1.3.30.tgz",
+      "integrity": "sha512-0RBwKj2E9SKTnIVdZ0Huzc3ea+gaPL9eH06hYvvlwDDII1ySg2u2CwgVqlJxpl6cgc8c0yG5HL03fKz6KEqonw==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@types/p5": "1.3.3",
+        "opencollective-postinstall": "2.0.2",
+        "p5": "1.3.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/gherciu-gheorghe"
+      },
+      "peerDependencies": {
+        "react": ">= 17.0.1",
+        "react-dom": ">= 17.0.1"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16872,6 +16916,11 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
    },
+    "@types/p5": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@types/p5/-/p5-1.3.3.tgz",
+      "integrity": "sha512-PBSFnX6IgV6Pqlx9wocUjSkGlm1I1ymz9tEiTbdNCqig6FOGiWcVUHx13TXRTBfRIhZC9+MqqgztMsgzpueaUg=="
+    },
    "@types/parse-json": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
@@ -21788,6 +21837,11 @@
      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
    },
+    "on-resize": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/on-resize/-/on-resize-2.0.0.tgz",
+      "integrity": "sha512-7aQt8SQNm35qe1e0bMSAigcYlLmUmCLpaRSIh4mrcoJiHqlLIoY4YBhc+mmioAk92d63fhCiQ4msmoQ6N4KCcA=="
+    },
    "once": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -21814,6 +21868,11 @@
        "is-wsl": "^2.2.0"
      }
    },
+    "opencollective-postinstall": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz",
+      "integrity": "sha512-pVOEP16TrAO2/fjej1IdOyupJY8KDUM1CvsaScRbw6oddvpQoOfGk4ywha0HKKVAD6RkW4x6Q+tNBwhf3Bgpuw=="
+    },
    "optionator": {
      "version": "0.9.1",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
@@ -21857,6 +21916,11 @@
      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
    },
+    "p5": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/p5/-/p5-1.3.1.tgz",
+      "integrity": "sha512-g7W2htgEwiAEGcl0WHccAJKbunUJwrUojUSR9+KihphJ33p5VpDdh1K8pDx4ppYjOr/lVEXaZ1XXDj27nwlNOg=="
+    },
    "param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -22987,6 +23051,16 @@
      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
    },
+    "react-p5": {
+      "version": "1.3.30",
+      "resolved": "https://registry.npmjs.org/react-p5/-/react-p5-1.3.30.tgz",
+      "integrity": "sha512-0RBwKj2E9SKTnIVdZ0Huzc3ea+gaPL9eH06hYvvlwDDII1ySg2u2CwgVqlJxpl6cgc8c0yG5HL03fKz6KEqonw==",
+      "requires": {
+        "@types/p5": "1.3.3",
+        "opencollective-postinstall": "2.0.2",
+        "p5": "1.3.1"
+      }
+    },
    "react-refresh": {
      "version": "0.11.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
--- a/package.json
+++ b/package.json
@@ -10,11 +10,13 @@
    "aos": "^2.3.4",
    "node": "^17.7.2",
    "node-dom": "^0.1.0",
+    "on-resize": "^2.0.0",
    "react": "^18.0.0",
    "react-bootstrap": "^2.2.3",
    "react-dom": "^18.0.0",
    "react-ga": "^3.3.1",
    "react-image-gallery": "^1.2.7",
+    "react-p5": "^1.3.30",
    "react-responsive-carousel": "^3.2.23",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
--- a/public/index.html
+++ b/public/index.html
@@ -1,34 +1,40 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="Simonson - Portfolio" content="Digital portfolio of Andrew Simonson" />
-  <!--
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="Simonson - Portfolio"
+      content="Digital portfolio of Andrew Simonson"
+    />
+    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

-  <!-- Global site tag (gtag.js) - Google Analytics -->
-  <script async src="https://www.googletagmanager.com/gtag/js?id=G-E2V93W9CNV"></script>
-  <script>
-    window.dataLayer = window.dataLayer || [];
-    function gtag() { dataLayer.push(arguments); }
-    gtag('js', new Date());
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-E2V93W9CNV"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());

-    gtag('config', 'G-E2V93W9CNV');
-  </script>
+      gtag("config", "G-E2V93W9CNV");
+    </script>

-  <title>Simonson - Portfolio</title>
-</head>
+    <title>Simonson - Portfolio</title>
+  </head>

-<body>
-  <noscript>You need to enable JavaScript to run this app.</noscript>
-  <div id="root"></div>
-</body>
-
-</html>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
--- a/src/App.js
+++ b/src/App.js
@@ -10,17 +10,18 @@ import Home from './pages/Home.js'
 import Projects from './pages/Projects';
 import Activities from './pages/Activities';
 import AboutMe from './pages/AboutMe';
+import Idler from './componets/Idler'
 import ErrorNotFound from './pages/Error'
 import AOS from 'aos';
 import 'aos/dist/aos.css'; // You can also use <link> for styles
 import { toggleMenu } from './scripts/responsive'


-
 AOS.init();
 function App() {
  return (
    <Router>
+      <Idler />
      <div className="App">
        <div className="header">
          <Name />
--- a/src/assets/css/App.css
+++ b/src/assets/css/App.css
@@ -27,7 +27,7 @@ html, body {

 body {
  margin: 0;
-  background-image: url('../photos/plexus.jpg');
+  /* background-image: url('../photos/plexus.jpg'); */
  /*url('https://i.pinimg.com/originals/d6/c3/ac/d6c3ac09021dbc0cda8ee27837d2c795.png')*/
  background-attachment: fixed;
  background-size: 100% auto;
@@ -94,12 +94,21 @@ a {
  overflow: hidden;
 }

+#name-container {
+  display: inline;
+}
+
 .name {
+  display: inline;
  background: url("../../assets/photos/sun.png") 0/5rem no-repeat;
  background-size: contain;
  padding-left: 5.5rem;
 }

+.glitch {
+  display: inline;
+}
+
 .textGrad {
  font-family: "sunset-club" !important;
 }
--- a/src/componets/Idler.js
+++ b/src/componets/Idler.js
@@ -0,0 +1,88 @@
+import Sketch from "react-p5";
+import React from "react";
+ 
+const balls = [];
+const density = 0.00003;
+const screenWidth = window.innerWidth;
+const screenHeight = window.innerHeight;
+
+let rendered = false;
+
+export default class Idler extends React.Component {
+  setup = (p5, parentRef) => {
+    p5.frameRate(15);
+    const pix = screenHeight * screenWidth;
+    p5.createCanvas(screenWidth, screenHeight).parent(parentRef);
+    for (let i = 0; i < pix * density; i++) {
+      let thisBall = new Ball(
+        p5.random(screenWidth),
+        p5.random(screenHeight),
+        p5.random(6) + 3,
+        Math.exp(p5.random(4) + 3) / 1000 + 1,
+        p5.random(360)
+      );
+      balls.push(thisBall);
+    }
+
+    p5.stroke(255);
+  };
+
+  draw = (p5) => {
+    p5.background(32);
+
+    for (let i = 0; i < balls.length; i++) {
+      balls[i].update();
+      p5.stroke(200, 100);
+      p5.strokeWeight(2);
+      p5.fill(0);
+      p5.ellipse(balls[i].x, balls[i].y, balls[i].size, balls[i].size);
+    }
+    for (let i = 0; i < balls.length - 1; i++) {
+      for (let j = i + 1; j < balls.length; j++) {
+        let distance = p5.dist(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+        if (distance < 150) {
+          p5.stroke(200);
+          let chance = 0.3 ** (((p5.random(0.2) + 0.8) * distance) / 150);
+          if (chance < 0.5) {
+            p5.stroke(100);
+          }
+          p5.line(balls[i].x, balls[i].y, balls[j].x, balls[j].y);
+        }
+      }
+    }
+  };
+  render() {
+    return <Sketch setup={this.setup} draw={this.draw} style={{position: 'fixed'}}/>;
+  }
+}
+
+class Ball {
+  constructor(x, y, size, speed, angle) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+    this.speed = speed;
+    this.angle = angle;
+    this.calcChange();
+  }
+
+  calcChange() {
+    this.xSpeed = this.speed * Math.sin((this.angle * Math.PI) / 180);
+    this.ySpeed = this.speed * Math.cos((this.angle * Math.PI) / 180);
+  }
+
+  update() {
+    this.x += this.xSpeed;
+    this.y += this.ySpeed;
+    if (this.x > screenWidth) {
+      this.x -= screenWidth;
+    } else if (this.x < 0) {
+      this.x += screenWidth;
+    }
+    if (this.y > screenHeight) {
+      this.y -= screenHeight;
+    } else if (this.y < 0) {
+      this.y += screenHeight;
+    }
+  }
+}