Skip to content

Commit

Permalink
bills update
Browse files Browse the repository at this point in the history
  • Loading branch information
darkskittlz committed Oct 5, 2024
1 parent d347089 commit 24752a8
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 70 deletions.
2 changes: 1 addition & 1 deletion dev-dist/sw.js
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
"revision": "3ca0b8505b4bec776b69afdba2768812"
}, {
"url": "index.html",
"revision": "0.t476p1t6re8"
"revision": "0.rqd8dmrt7tg"
}], {});
workbox.cleanupOutdatedCaches();
workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
Expand Down
3 changes: 2 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,12 @@
<link rel="mask-icon" href="/mask-icon.svg" color="#FFFFFF">
<script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/preset-stars@3/tsparticles.preset.stars.bundle.min.js"></script>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>

</html>
</html>
33 changes: 31 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
"react-tsparticles": "^2.12.2",
"styled-components": "^6.0.7",
"tailwindcss": "^3.3.3",
"tsparticles": "^2.12.0"
"tsparticles": "^2.12.0",
"tsparticles-engine": "^2.12.0",
"tsparticles-preset-stars": "^2.12.0"
},
"devDependencies": {
"@types/react": "^18.2.15",
Expand Down
Binary file added public/dollarIMG.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 30 additions & 18 deletions src/components/Expenses.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Expenses = () => {
<tr>
<td>🏠</td>
<td>Rent (Tristan)</td>
<td>$1450</td>
<td>$1495</td>
<td>1st</td>
</tr>
<tr>
Expand All @@ -30,7 +30,7 @@ const Expenses = () => {
<tr>
<td>📶</td>
<td>Internet</td>
<td>$70</td>
<td>$82</td>
<td>4th</td>
</tr>
<tr>
Expand All @@ -42,7 +42,7 @@ const Expenses = () => {
<tr>
<td>📺</td>
<td>HBO</td>
<td>$7.99</td>
<td>$17</td>
<td>9th</td>
</tr>
<tr>
Expand All @@ -53,16 +53,22 @@ const Expenses = () => {
</tr>
<tr>
<td>📺</td>
<td>Google Storage (Alice)</td>
<td>$10</td>
<td>Prime Ad-Free</td>
<td>$3</td>
<td>10th</td>
</tr>
<tr>
<td>🍿</td>
<td>Netflix</td>
<td>$15.50</td>
<td>📺</td>
<td>Google Storage (Alice)</td>
<td>$10</td>
<td>10th</td>
</tr>
{/* <tr> */}
{/* <td>🍿</td> */}
{/* <td>Netflix</td> */}
{/* <td>$15.50</td> */}
{/* <td>10th</td> */}
{/* </tr> */}
<tr>
<td>🕹️</td>
<td>Nintendo </td>
Expand All @@ -75,6 +81,12 @@ const Expenses = () => {
<td>$5</td>
<td>12th</td>
</tr>
<tr>
<td>🍋</td>
<td>Lemonade Insurance</td>
<td>$32</td>
<td>12th</td>
</tr>
<tr>
<td>💳</td>
<td>Geico</td>
Expand All @@ -93,6 +105,12 @@ const Expenses = () => {
<td>$534</td>
<td>17th</td>
</tr>
<tr>
<td>💳</td>
<td>Capital One</td>
<td>$25</td>
<td>19th</td>
</tr>
<tr>
<td>🍏</td>
<td>Apple </td>
Expand All @@ -112,24 +130,18 @@ const Expenses = () => {
<td>22nd</td>
</tr>
<tr>
<td>🌲</td>
<td>Amazon</td>
<td>📺</td>
<td>Amazon Prime</td>
<td>$15</td>
<td>25th</td>
</tr>
<tr>
<td>📺</td>
<td>Prime Video</td>
<td>$5</td>
<td>28th</td>
</tr>
</table>
<table>
<tr>
<th>💵 Checking Account for Bills 💵</th>
<th>💵 Total Bills 💵</th>
</tr>
<tr>
<td>$2,398</td>
<td>$2,654</td>
</tr>
</table>
</TableContainer>
Expand Down
106 changes: 59 additions & 47 deletions src/components/ParticleBackground.jsx
Original file line number Diff line number Diff line change
@@ -1,53 +1,65 @@
import React, { Component } from "react";
import ParticlesBg from "particles-bg";
import React, { Component, useEffect } from "react";
// import ParticlesBg from "particles-bg";
import { tsParticles } from "tsparticles-engine";
import { loadStarsPreset } from "tsparticles-preset-stars";
import DollarIMG from "/dollarIMG.png"

export class ParticleBackground extends Component {
constructor() {
super();
this.state = {
name: "React"
};
}
export const ParticleBackground = () => {
useEffect(() => {
const loadParticles = async () => {
// Load the stars preset into tsParticles
await loadStarsPreset(tsParticles);

render() {
let config = {
num: [7, 7],
rps: 0.1,
radius: [1, 40],
life: [1.5, 3],
v: [1, 1],
tha: [-40, 40],
alpha: [0.6, 0],
scale: [.1, 0.4],
position: "all",
color: ["random", "#ff0000"],
cross: "dead",
// emitter: "follow",
random: 15
};

if (Math.random() > 0.85) {
config = Object.assign(config, {
onParticleUpdate: (ctx, particle) => {
ctx.beginPath();
ctx.rect(
particle.p.x,
particle.p.y,
particle.radius * 2,
particle.radius * 2
);
ctx.fillStyle = particle.color;
ctx.fill();
ctx.closePath();
}
});
// Initialize tsParticles with the 'stars' preset
await tsParticles.load("tsparticles", {
preset: "stars", // Use the stars preset
background: {
color: {
value: "#0000000"
},
image: url(),
position: "50% 50%",
repeat: "no-repeat",
size: "20%",
opacity: 1
},
interactivity: {
events: {
onClick: { enable: true, mode: "repulse" },
onHover: { enable: true, mode: "bubble" },
resize: true
}
},
particles: {
number: {
value: 160,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
opacity: {
value: { min: 0.1, max: 1 },
anim: { enable: true, speed: 1 }
},
size: {
value: { min: 1, max: 3 },
anim: { enable: true, speed: 5 }
},
move: {
enable: true,
speed: { min: 0.1, max: 1 }
}
}
});
};

loadParticles(); // Call the async function when component is mounted
}, []);

return (
<div>
<ParticlesBg type="custom" config={config} bg={true} />
</div>
);
}
return <div id="tsparticles" style={{ position: "absolute", width: "100%", height: "100%" }}></div>;
}

0 comments on commit 24752a8

Please sign in to comment.