{item.title}
diff --git a/src/components/ParticlesBackground.tsx b/src/components/ParticlesBackground.tsx
index f1ba7d1..6d1cbc7 100644
--- a/src/components/ParticlesBackground.tsx
+++ b/src/components/ParticlesBackground.tsx
@@ -79,6 +79,7 @@ const ParticlesBackground: React.FC = () => {
// Mobile (390x844) -> ~48 particles
// Mobile Landscape (844x390) -> ~48 particles (Same as portrait!)
const area = canvas.width * canvas.height;
+ // Reduce density further to specificially help the heavy About page
const particleCount = Math.floor(Math.sqrt(area) / 12);
particles = [];
@@ -90,17 +91,7 @@ const ParticlesBackground: React.FC = () => {
const animate = () => {
if (!ctx || !canvas) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
- // Draw a subtle gradient background for the canvas itself if needed, or keep transparent
- // For now, let's keep it transparent so we can style the container behind it if we want,
- // OR we can make this the definitive background.
- // Let's add a deep gradient here to match the user's previous aesthetic but cooler.
- const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
- gradient.addColorStop(0, '#0f0c29');
- gradient.addColorStop(0.5, '#302b63');
- gradient.addColorStop(1, '#24243e');
- ctx.fillStyle = gradient;
- ctx.fillRect(0, 0, canvas.width, canvas.height);
-
+ // Gradient is now handled by CSS to avoid repainting every frame
particles.forEach((particle) => {
particle.update();
@@ -119,18 +110,38 @@ const ParticlesBackground: React.FC = () => {
for (let b = a; b < particles.length; b++) {
const dx = particles[a].x - particles[b].x;
const dy = particles[a].y - particles[b].y;
- const distance = Math.sqrt(dx * dx + dy * dy);
+
+ // Optimization 1: Strictly check max possible visible distance
+ // The opacity formula becomes <= 0 when distance > (2/3 * distanceThreshold).
+ // Max distanceThreshold is 300, so max visible distance is 200.
+ if (Math.abs(dx) > 200 || Math.abs(dy) > 200) continue;
+
+ const distSq = dx * dx + dy * dy;
+
const sizeAverage = (particles[a].size + particles[b].size) / 2;
// Scale from 100 to 300 based on size average (2 to 6)
const distanceThreshold = 100 + (sizeAverage - 2) * 50;
- if (distance < distanceThreshold) {
- ctx.strokeStyle = `rgba(255, 255, 255, ${(distanceThreshold * (2 / 3) * .001) - distance / 1000})`;
- ctx.lineWidth = sizeAverage;
- ctx.beginPath();
- ctx.moveTo(particles[a].x, particles[a].y);
- ctx.lineTo(particles[b].x, particles[b].y);
- ctx.stroke();
+ // Optimization 2: Only calculate if we are within the VISIBLE threshold (2/3 of logical threshold)
+ // Opacity = (Threshold * 2/3 * 0.001) - (dist / 1000)
+ // 0 = (2/3 T)/1000 - d/1000 => d = 2/3 T
+ const distinctThreshold = distanceThreshold * (2 / 3);
+ const distinctThresholdSq = distinctThreshold * distinctThreshold;
+
+ if (distSq < distinctThresholdSq) {
+ const distance = Math.sqrt(distSq);
+
+ // Calculate opacity
+ const opacity = (distanceThreshold * (2 / 3) * .001) - distance / 1000;
+
+ if (opacity > 0) {
+ ctx.strokeStyle = `rgba(255, 255, 255, ${opacity})`;
+ ctx.lineWidth = sizeAverage;
+ ctx.beginPath();
+ ctx.moveTo(particles[a].x, particles[a].y);
+ ctx.lineTo(particles[b].x, particles[b].y);
+ ctx.stroke();
+ }
}
}
}
@@ -166,6 +177,7 @@ const ParticlesBackground: React.FC = () => {
width: '100%',
height: '120vh', // Extend well below viewport to cover mobile browser bar retraction
zIndex: -1, // Behind everything
+ background: 'linear-gradient(to bottom, #0f0c29 0%, #302b63 50%, #24243e 100%)'
}}
/>
);
diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index f436cee..9537938 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -34,7 +34,7 @@ export default function About() {
transition={{ duration: 0.8 }}
>
-
About Me
-
+ */}
- Personal Interests