andrew/asimonson1125.github.io
1
0
Fork 0
mirror of https://github.com/asimonson1125/asimonson1125.github.io.git synced 2026-02-25 05:09:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

update styles for new background

Browse Source
This commit is contained in:
Andrew Simonson
2022-09-28 10:23:11 -04:00
parent b07061e7f2
commit 364a3e140b
3 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/css/App.css
View File

@@ -21,7 +21,6 @@
} }
html, body { html, body {
background-color: #1b1f27;
overflow-x: hidden; overflow-x: hidden;
} }
@@ -164,7 +163,7 @@ a {
padding-left: 8rem; padding-left: 8rem;
width: calc(100%-8rem); width: calc(100%-8rem);
min-height: calc(100vh - 8rem); min-height: calc(100vh - 8rem);
background-color: rgb(44, 44, 44, .5); background-color: rgb(44, 44, 44, .75);
padding-bottom: 1rem; padding-bottom: 1rem;
overflow: hidden; overflow: hidden;
transition: .4s; transition: .4s;
@@ -185,7 +184,8 @@ a {
#HomeContent { #HomeContent {
padding: 3rem; padding: 3rem;
display: inline-block; display: inline-block;
background-color: rgb(44, 44, 44, .95); background-color: rgb(44, 44, 44, .75);
border: solid black 4px;
} }
#Vertical { #Vertical {
@@ -377,6 +377,8 @@ a {
margin: 2em; margin: 2em;
box-shadow: 0 0 0.2rem #fff, 0 0 0.2rem #fff, 0 0 2rem #5271ff, 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; 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; text-align: center;
} }
@@ -398,8 +400,8 @@ a {
height: 100vh; height: 100vh;
width: 100%; width: 100%;
display: flex; display: flex;
position: absolute;
justify-content: center; 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-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;

14
src/componets/Idler.js
View File

@@ -2,12 +2,10 @@ import Sketch from "react-p5";
import React from "react"; import React from "react";
const balls = []; const balls = [];
const density = 0.00003; const density = 0.00005;
const screenWidth = window.innerWidth; const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight; const screenHeight = window.innerHeight;
let rendered = false;
export default class Idler extends React.Component { export default class Idler extends React.Component {
setup = (p5, parentRef) => { setup = (p5, parentRef) => {
p5.frameRate(15); 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 i = 0; i < balls.length - 1; i++) {
for (let j = i + 1; j < balls.length; j++) { 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); 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.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); let chance = 0.3 ** (((p5.random(0.2) + 0.8) * distance) / 150);
if (chance < 0.5) { if (chance < 0.5) {
p5.stroke(100); p5.stroke(50);
} }
p5.line(balls[i].x, balls[i].y, balls[j].x, balls[j].y); 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() { render() {
return <Sketch setup={this.setup} draw={this.draw} style={{position: 'fixed'}}/>; return <Sketch setup={this.setup} draw={this.draw} style={{position: 'fixed', zIndex:-1}}/>;
} }
} }

4
src/index.js
View File

@@ -6,9 +6,9 @@ import reportWebVitals from './scripts/reportWebVitals';
const container = document.getElementById('root'); const container = document.getElementById('root');
const root = createRoot(container); const root = createRoot(container);
root.render( root.render(
<React.StrictMode> // <React.StrictMode>
<App /> <App />
</React.StrictMode> // </React.StrictMode>
); );