diff --git a/src/App.jsx b/src/App.jsx index 1d9c7d8..d1c6482 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -149,8 +149,8 @@ function App() { {/* Your gothic header */}
-

Npc-About-Me

-

Console View

+

Npc About Me

+

Console View

{/* Your terminal component */} @@ -179,7 +179,7 @@ function App() {
- + terminal@npc-about-me diff --git a/src/components/BackgroundImages.jsx b/src/components/BackgroundImages.jsx index ae276f2..388c440 100644 --- a/src/components/BackgroundImages.jsx +++ b/src/components/BackgroundImages.jsx @@ -17,22 +17,67 @@ const BackgroundImages = () => { "/bg-ims/blahaj.png", ]; + // Function to generate random values within a range + const randomRange = (min, max) => Math.random() * (max - min) + min; + + // Function to generate new position and animation values + const generateImageData = () => { + // Generate random movement offsets + const moveX1 = randomRange(-20, 20); + const moveY1 = randomRange(-20, 20); + const moveX2 = randomRange(-20, 20); + const moveY2 = randomRange(-20, 20); + const moveX3 = randomRange(-20, 20); + const moveY3 = randomRange(-20, 20); + const rotateDeg = randomRange(-20, 20); + + return { + src: bgImages[Math.floor(Math.random() * bgImages.length)], + size: randomRange(50, 150), + opacity: randomRange(0.1, 0.3), + // Animation durations (in seconds) + moveDuration: randomRange(60, 120), + rotateDuration: randomRange(30, 60), + // Starting position + startTop: randomRange(5, 90), + startLeft: randomRange(5, 90), + // Pre-calculated movement values + moveX1, + moveY1, + moveX2, + moveY2, + moveX3, + moveY3, + rotateDeg, + }; + }; + useEffect(() => { - // Generate 30 random positioned images - const randomImages = []; - for (let i = 0; i < 30; i++) { - randomImages.push({ - src: bgImages[Math.floor(Math.random() * bgImages.length)], - top: Math.random() * 90 + 5, // 5-95% from top - left: Math.random() * 90 + 5, // 5-95% from left - size: Math.random() * 100 + 50, // 50-150px - rotation: Math.random() * 40 - 20, // -20 to 20 degrees - opacity: Math.random() * 0.2 + 0.1, // 0.1-0.3 opacity - }); - } - setImages(randomImages); + // Generate initial images + const initialImages = Array(30).fill(null).map(generateImageData); + setImages(initialImages); }, []); + // Helper to create the keyframes CSS + const generateKeyframesStyles = () => { + return images + .map( + (img, index) => ` + @keyframes float-${index} { + 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } + 25% { transform: translate(-50%, -50%) translate(${img.moveX1}px, ${img.moveY1}px); } + 50% { transform: translate(-50%, -50%) translate(${img.moveX2}px, ${img.moveY2}px); } + 75% { transform: translate(-50%, -50%) translate(${img.moveX3}px, ${img.moveY3}px); } + } + @keyframes rotate-${index} { + 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } + 50% { transform: translate(-50%, -50%) rotate(${img.rotateDeg}deg); } + } + ` + ) + .join("\n"); + }; + return (
{images.map((img, index) => ( @@ -40,9 +85,13 @@ const BackgroundImages = () => { key={index} className="absolute" style={{ - top: `${img.top}%`, - left: `${img.left}%`, - transform: `translate(-50%, -50%) rotate(${img.rotation}deg)`, + top: `${img.startTop}%`, + left: `${img.startLeft}%`, + transform: "translate(-50%, -50%)", + animation: ` + float-${index} ${img.moveDuration}s infinite ease-in-out, + rotate-${index} ${img.rotateDuration}s infinite ease-in-out + `, }} > { />
))} + +