diff --git a/src/assets/css/App.css b/src/assets/css/App.css index 3ab6e84..3a2b930 100644 --- a/src/assets/css/App.css +++ b/src/assets/css/App.css @@ -21,7 +21,6 @@ } html, body { - background-color: #1b1f27; overflow-x: hidden; } @@ -164,7 +163,7 @@ a { padding-left: 8rem; width: calc(100%-8rem); min-height: calc(100vh - 8rem); - background-color: rgb(44, 44, 44, .5); + background-color: rgb(44, 44, 44, .75); padding-bottom: 1rem; overflow: hidden; transition: .4s; @@ -185,7 +184,8 @@ a { #HomeContent { padding: 3rem; display: inline-block; - background-color: rgb(44, 44, 44, .95); + background-color: rgb(44, 44, 44, .75); + border: solid black 4px; } #Vertical { @@ -377,6 +377,8 @@ a { margin: 2em; box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #5271ff, 0 0 0.8rem #5271ff, 0 0 2.8rem #5271ff, inset 0 0 1.3rem #5271ff; + background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thedermacompany.co.uk%2Fwp-content%2Fuploads%2F2020%2F11%2Fblack-brick-scaled.jpg&f=1&nofb=1&ipt=d10be6df79141da1b4ec0c725575cef0f7b67e957e391662226d66cff02d25e6&ipo=images'); + /* background-blend-mode: ; */ text-align: center; } @@ -398,8 +400,8 @@ a { height: 100vh; width: 100%; display: flex; + position: absolute; justify-content: center; - background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.thedermacompany.co.uk%2Fwp-content%2Fuploads%2F2020%2F11%2Fblack-brick-scaled.jpg&f=1&nofb=1&ipt=d10be6df79141da1b4ec0c725575cef0f7b67e957e391662226d66cff02d25e6&ipo=images'); background-position: center; background-repeat: no-repeat; background-size: cover; diff --git a/src/componets/Idler.js b/src/componets/Idler.js index 5da0c5e..0536793 100644 --- a/src/componets/Idler.js +++ b/src/componets/Idler.js @@ -2,12 +2,10 @@ import Sketch from "react-p5"; import React from "react"; const balls = []; -const density = 0.00003; +const density = 0.00005; const screenWidth = window.innerWidth; const screenHeight = window.innerHeight; -let rendered = false; - export default class Idler extends React.Component { setup = (p5, parentRef) => { p5.frameRate(15); @@ -40,11 +38,15 @@ export default class Idler extends React.Component { 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) { + if (distance < 100){ p5.stroke(200); + p5.line(balls[i].x, balls[i].y, balls[j].x, balls[j].y); + } + if (distance < 125) { + p5.stroke(75); let chance = 0.3 ** (((p5.random(0.2) + 0.8) * distance) / 150); if (chance < 0.5) { - p5.stroke(100); + p5.stroke(50); } p5.line(balls[i].x, balls[i].y, balls[j].x, balls[j].y); } @@ -52,7 +54,7 @@ export default class Idler extends React.Component { } }; render() { - return ; + return ; } } diff --git a/src/index.js b/src/index.js index 5ad1315..50fe40e 100644 --- a/src/index.js +++ b/src/index.js @@ -6,9 +6,9 @@ import reportWebVitals from './scripts/reportWebVitals'; const container = document.getElementById('root'); const root = createRoot(container); root.render( - + // - + // );