From c5e385318b40bdebb8d98e1112dafb07c6792c7e Mon Sep 17 00:00:00 2001
From: Felix Kirchner <felix.kirchner.fk@gmail.com>
Date: Thu, 18 Dec 2025 22:33:57 +0100
Subject: [PATCH] Adjusted bubbles

---
 src/components/Bubbles.jsx | 40 +++++++++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/components/Bubbles.jsx b/src/components/Bubbles.jsx
index d6b7e53..c31722e 100644
--- a/src/components/Bubbles.jsx
+++ b/src/components/Bubbles.jsx
@@ -1,26 +1,40 @@
 import React from 'react';
 import {motion} from 'framer-motion';
 
-export const Bubbles = () => (
-    <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
-        {Array.from({length: 15}).map((_, i) => (
-            <motion.div key={i}
-                        className="absolute rounded-full bg-[#00A3FF]/20 backdrop-blur-sm border border-[#00A3FF]/30"
+export const Bubbles = () => {
+    const sizes = [20, 40, 60, 80];
+
+    return (
+        <div className="absolute inset-0 overflow-hidden pointer-events-none z-0">
+            {Array.from({length: 15}).map((_, i) => {
+                const size = sizes[i % sizes.length];
+
+                return (
+                    <motion.div
+                        key={i}
+                        className="absolute rounded-full"
                         initial={{
                             y: "120vh",
                             x: Math.random() * 100 + "vw",
-                            scale: Math.random() * 0.5 + 0.5,
                             opacity: 0
                         }}
-                        animate={{y: "-20vh", opacity: [0, 1, 0]}}
+                        animate={{y: "-20vh", opacity: [0, 0.7, 0]}}
                         transition={{
-                            duration: Math.random() * 10 + 10,
+                            duration: Math.random() * 10 + 15,
                             repeat: Infinity,
                             ease: "linear",
                             delay: Math.random() * 10
                         }}
-                        style={{width: Math.random() * 50 + 20 + "px", height: Math.random() * 50 + 20 + "px"}}
-            />
-        ))}
-    </div>
-);
+                        style={{
+                            width: `${size}px`,
+                            height: `${size}px`,
+                            aspectRatio: '1/1',
+                            boxSizing: 'border-box',
+                            border: `${size / 5}px solid rgba(0, 163, 255, 0.6)`
+                        }}
+                    />
+                );
+            })}
+        </div>
+    );
+};