diff --git a/package-lock.json b/package-lock.json index 2be1d55..125454b 100644 --- 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", diff --git a/package.json b/package.json index 2469897..7fea513 100644 --- 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", diff --git a/public/index.html b/public/index.html index 880282a..d5f6494 100644 --- a/public/index.html +++ b/public/index.html @@ -1,34 +1,40 @@ - - - - - - - - - + - - - + + gtag("config", "G-E2V93W9CNV"); + - Simonson - Portfolio - + Simonson - Portfolio + - - -
- - - \ No newline at end of file + + +
+ + diff --git a/src/App.js b/src/App.js index f761961..81e45fb 100644 --- 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 for styles import { toggleMenu } from './scripts/responsive' - AOS.init(); function App() { return ( +
diff --git a/src/assets/css/App.css b/src/assets/css/App.css index c0f3b3c..3ab6e84 100644 --- 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; } diff --git a/src/componets/Idler.js b/src/componets/Idler.js new file mode 100644 index 0000000..5da0c5e --- /dev/null +++ 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 ; + } +} + +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; + } + } +}