Update Background

Author: Magicherry

src/components/MainFrame/Particle.js

@@ -13,50 +13,62 @@ function Particle() {
         enable: true,
         zIndex: -1
       },
+      background: {
+        color: {
+          value: "transparent",
+        },
+      },
+      fpsLimit: 120,
       particles: {
+        color: {
+          value: "#38bdf8", // 科技蓝
+        },
+        links: {
+          color: "#38bdf8",
+          distance: 160, // 增加连线判定距离，让更多节点连接
+          enable: true,
+          opacity: 0.15, // 稍微提高连线可见度
+          width: 1,
+        },
+        move: {
+          direction: "none",
+          enable: true,
+          outModes: {
+            default: "bounce",
+          },
+          random: false,
+          speed: 0.4, // 极慢的呼吸感漂浮
+          straight: false,
+        },
         number: {
-          value: 220,
           density: {
             enable: true,
-            value_area: 1500
-          }
+            area: 800,
+          },
+          value: 120, // 节点数量
         },
-        line_linked: {
-          enable: false,
-          opacity: 0.03
+        opacity: {
+          value: 0.3,
         },
-        move: {
-          direction: "right",
-          speed: 0.05
+        shape: {
+          type: "circle",
         },
         size: {
-          value: 1
+          value: { min: 1, max: 2 },
         },
-        opacity: {
-          value: { min: 0.1, max: 1 },
-          animation: {
-            enable: true,
-            speed: 1,
-            sync: false,
-            startValue: "random",
-            destroy: "none"
-          }
-        }
       },
       interactivity: {
         events: {
-          onclick: {
-            enable: true,
-            mode: "push"
-          }
+          onHover: {
+            enable: false,
+          },
+          onClick: {
+            enable: false,
+          },
+          resize: true,
         },
-        modes: {
-          push: {
-            particles_nb: 1
-          }
-        }
       },
-      retina_detect: true
+      detectRetina: true,
     }),
     []
   );

src/css/style.css

@@ -73,7 +73,7 @@ body {
     --surface-glass-hover: rgba(255, 255, 255, 0.08);
     --surface-glass-active: rgba(255, 255, 255, 0.12);
     --surface-glass-strong: rgba(255, 255, 255, 0.15);
-    --surface-panel: rgba(23, 28, 40, 0.7);
+    --surface-panel: rgba(15, 23, 42, 0.65);
 
     /* Borders */
     --border-subtle: rgba(255, 255, 255, 0.1);
@@ -116,15 +116,15 @@ body {
     /*====================
         Scrollbar
     ====================*/
-    --scrollbar-bg-track: #192850;
+    --scrollbar-bg-track: #0f172a;
     --scrollbar-bg-thumb: rgba(121, 205, 216, 0.959);
     --scrollbar-bg-thumb-hover: rgba(213, 232, 235, 0.91);
 
     /*====================
         Navbar
     ====================*/
-    --navbar-bg: rgba(26, 31, 46, 0.6);
-    --navbar-bg-mobile: rgba(24, 28, 39, 0.7);
+    --navbar-bg: rgba(15, 23, 42, 0.6);
+    --navbar-bg-mobile: rgba(15, 23, 42, 0.7);
     --navbar-color-brand: rgb(16, 227, 246);
     --navbar-color-brand-hover: rgb(3, 248, 248);
     --navbar-color-toggler: #50c0f4;
@@ -138,8 +138,8 @@ body {
     --navbar-glass-active-bg: rgba(255, 255, 255, 0.14);
     --navbar-glass-active-border: rgba(230, 220, 210, 0.18);
     /* Project cards: darker glass, slightly stronger border so it’s visible */
-    --card-glass-bg: rgba(26, 32, 44, 0.55);
-    --card-glass-bg-list: rgba(20, 26, 36, 0.7);
+    --card-glass-bg: rgba(15, 23, 42, 0.55);
+    --card-glass-bg-list: rgba(15, 23, 42, 0.7);
     --card-glass-border: rgba(220, 235, 245, 0.15);
     --card-glass-border-hover: rgba(220, 240, 255, 0.35);
     --card-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.25);
@@ -205,10 +205,10 @@ body {
     --color-black: #000;
     --color-warning: #ffc107;
     --color-success: #28a745;
-    --surface-overlay-dark: rgba(13, 22, 26, 0.65);
-    --surface-overlay-dark-soft: rgba(13, 22, 26, 0.6);
-    --surface-overlay-dark-strong: rgba(13, 22, 26, 0.75);
-    --surface-nav-collapse: rgba(28, 38, 52, 0.95);
+    --surface-overlay-dark: rgba(3, 7, 18, 0.65);
+    --surface-overlay-dark-soft: rgba(3, 7, 18, 0.6);
+    --surface-overlay-dark-strong: rgba(3, 7, 18, 0.75);
+    --surface-nav-collapse: rgba(15, 23, 42, 0.95);
     --shadow-inset-soft: inset 0 1px 0 rgba(255, 255, 255, 0.06);
     --navbar-collapse-shadow: inset 0 -1.2px 1.2px rgba(255, 255, 255, 0.2), 0 -6px 32px 0 rgba(0, 0, 0, 0.2);
     --blur-top-gradient: linear-gradient(180deg, rgba(3, 7, 18, 0.92) 0%, rgba(15, 23, 42, 0.78) 32%, rgba(15, 23, 42, 0.42) 62%, rgba(15, 23, 42, 0.14) 84%, rgba(15, 23, 42, 0) 100%);
@@ -895,10 +895,10 @@ button:focus {
     border-top-right-radius: 27px;
     background: linear-gradient(
         to bottom,
-        rgba(20, 25, 36, 0.98) 0%,
-        rgba(20, 25, 36, 0.9) 60%,
-        rgba(20, 25, 36, 0.5) 85%,
-        rgba(20, 25, 36, 0) 100%
+        rgba(15, 23, 42, 0.98) 0%,
+        rgba(15, 23, 42, 0.9) 60%,
+        rgba(15, 23, 42, 0.5) 85%,
+        rgba(15, 23, 42, 0) 100%
     );
     mask-image: linear-gradient(to bottom, black 0%, black 60%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
     -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, rgba(0, 0, 0, 0.5) 85%, transparent 100%);
@@ -1070,10 +1070,10 @@ a.floating-nav-contact-item:hover {
     border-bottom-right-radius: 27px;
     background: linear-gradient(
         to top,
-        rgba(20, 25, 36, 0.98) 0%,
-        rgba(20, 25, 36, 0.9) 60%,
-        rgba(20, 25, 36, 0.5) 85%,
-        rgba(20, 25, 36, 0) 100%
+        rgba(15, 23, 42, 0.98) 0%,
+        rgba(15, 23, 42, 0.9) 60%,
+        rgba(15, 23, 42, 0.5) 85%,
+        rgba(15, 23, 42, 0) 100%
     );
     backdrop-filter: blur(24px);
     -webkit-backdrop-filter: blur(24px);