Claude/improve code quality 26 m0 r

.Jules/bolt.md

@@ -0,0 +1,7 @@
+## 2026-02-14 - Redundant Library Loading
+**Learning:** Manually injecting library scripts (like Three.js) via CDN while also importing the library as a dependency leads to double loading, version conflicts, and wasted bandwidth.
+**Action:** Always check if a library is already bundled before adding a CDN script. Use the bundled version whenever possible.
+
+## 2026-02-19 - WebGL Animation Efficiency
+**Learning:** In WebGL animation loops (using `requestAnimationFrame`), simply pausing the state update (e.g., `time`) when reduced motion is preferred is insufficient; the `renderer.render()` call must also be skipped to save GPU resources.
+**Action:** Implement conditional rendering in animation loops: only call `renderer.render()` when animation is active or on resize events to update static views.

.Jules/palette.md

@@ -0,0 +1,7 @@
+## 2026-02-17 - WebGL Reduced Motion
+**Learning:** Custom WebGL implementations using `requestAnimationFrame` do not automatically respect `prefers-reduced-motion` settings, potentially causing vestibular issues.
+**Action:** Always check `window.matchMedia('(prefers-reduced-motion: reduce)').matches` in custom animation loops to pause or simplify effects.
+
+## 2026-02-18 - Glassmorphism Consistency
+**Learning:** The project uses `backdrop-filter: blur(8px)` with specific `rgba` backgrounds for UI containers.
+**Action:** Apply this pattern to new floating elements (like scroll-to-top) to maintain visual consistency.

.nvmrc

@@ -0,0 +1 @@
+22

README.md

@@ -1,30 +1,2 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+![Screenshot_20230513_215640_Photo_Editor_Pro_-_Polish](https://github.com/topherchris420/vanta/assets/93827718/616c1cab-be33-4b63-a6fe-c44abc5e31ab)
+my portfolio

components/ScrollToTop.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "react";
+import styles from "../styles/Home.module.css";
+
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const toggleVisibility = () => {
+      const shouldShow = window.scrollY > 300;
+      setIsVisible((prev) => (prev !== shouldShow ? shouldShow : prev));
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={`${styles.scrollToTop} ${isVisible ? styles.visible : ""}`}
+      aria-label="Scroll to top"
+      type="button"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        width="24"
+        height="24"
+      >
+        <path d="M18 15l-6-6-6 6" />
+      </svg>
+    </button>
+  );
+};
+
+export default ScrollToTop;

components/VantaEffect.js

@@ -0,0 +1,173 @@
+import { useEffect, useRef } from "react";
+import {
+  Camera,
+  Scene,
+  PlaneGeometry,
+  Vector2,
+  ShaderMaterial,
+  Mesh,
+  WebGLRenderer,
+} from "three";
+
+// Simple debounce utility to limit the rate of execution
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+const vertexShader = `
+  void main() {
+    gl_Position = vec4(position, 1.0);
+  }
+`;
+
+const fragmentShader = `
+  precision mediump float;
+  uniform vec2 resolution;
+  uniform float time;
+
+  void main(void) {
+    vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
+    float t = time * 0.04;
+    float r = length(uv);
+
+    float wave1 = sin(34.0 * r - t * 8.0);
+    float wave2 = sin(52.0 * r - t * 10.0 + 1.4);
+    float wave3 = sin(72.0 * r - t * 12.0 + 2.2);
+
+    float rings = 0.55 + 0.28 * wave1 + 0.22 * wave2 + 0.15 * wave3;
+
+    float pulse = 0.5 + 0.5 * sin(t * 2.6 - r * 30.0);
+    float halo = 0.15 / max(0.025, abs(fract((r - t * 0.22) * 14.0) - 0.5));
+    float fade = smoothstep(1.4, 0.0, r);
+
+    vec3 deepBlue = vec3(0.02, 0.05, 0.16);
+    vec3 cyan = vec3(0.12, 0.86, 1.00);
+    vec3 violet = vec3(0.70, 0.38, 1.00);
+    vec3 pink = vec3(1.00, 0.42, 0.78);
+
+    vec3 sweep = mix(cyan, violet, 0.5 + 0.5 * sin(t * 0.9 + r * 12.0));
+    vec3 sweep2 = mix(sweep, pink, 0.5 + 0.5 * cos(t * 0.7 - r * 9.0));
+
+    float intensity = clamp(rings * 0.72 + pulse * 0.35 + halo * 0.45, 0.0, 1.2);
+    vec3 color = mix(deepBlue, sweep2, intensity) * fade + sweep2 * 0.06;
+
+    gl_FragColor = vec4(color, 1.0);
+  }
+`;
+
+const VantaEffect = ({ className }) => {
+  const containerRef = useRef(null);
+  const sceneRef = useRef(null);
+
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    const container = containerRef.current;
+
+    const camera = new Camera();
+    camera.position.z = 1;
+
+    const scene = new Scene();
+    const geometry = new PlaneGeometry(2, 2);
+
+    const uniforms = {
+      time: { value: 1.0 },
+      resolution: { value: new Vector2() },
+    };
+
+    const material = new ShaderMaterial({
+      uniforms,
+      vertexShader,
+      fragmentShader,
+    });
+
+    const mesh = new Mesh(geometry, material);
+    scene.add(mesh);
+
+    // Disable antialiasing for performance as we render a full-screen quad
+    const renderer = new WebGLRenderer({ antialias: false, alpha: false });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setClearColor(0x000000, 1);
+
+    container.appendChild(renderer.domElement);
+
+    // Reduced motion support
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    let isReduced = mediaQuery.matches;
+
+    let animationId = 0;
+
+    const startAnimation = () => {
+      const animate = () => {
+        uniforms.time.value += 0.05;
+        renderer.render(scene, camera);
+        animationId = window.requestAnimationFrame(animate);
+      };
+      animationId = window.requestAnimationFrame(animate);
+    };
+
+    const stopAnimation = () => {
+      window.cancelAnimationFrame(animationId);
+      animationId = 0;
+    };
+
+    const handleMotionChange = (e) => {
+      isReduced = e.matches;
+      if (isReduced) {
+        stopAnimation();
+      } else {
+        startAnimation();
+      }
+    };
+
+    mediaQuery.addEventListener("change", handleMotionChange);
+
+    const onWindowResize = () => {
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width, height, false);
+      uniforms.resolution.value.set(renderer.domElement.width, renderer.domElement.height);
+      renderer.render(scene, camera);
+    };
+
+    // Debounce the resize event to improve performance
+    const debouncedResize = debounce(onWindowResize, 200);
+
+    onWindowResize();
+    window.addEventListener("resize", debouncedResize);
+
+    sceneRef.current = { renderer, geometry, material, animationId };
+    if (!isReduced) {
+      startAnimation();
+    }
+
+    return () => {
+      window.removeEventListener("resize", debouncedResize);
+      mediaQuery.removeEventListener("change", handleMotionChange);
+      stopAnimation();
+
+      if (renderer.domElement && renderer.domElement.parentNode === container) {
+        container.removeChild(renderer.domElement);
+      }
+
+      geometry.dispose();
+      material.dispose();
+      renderer.dispose();
+      sceneRef.current = null;
+    };
+  }, []);
+
+  return <div ref={containerRef} className={className} />;
+};
+
+export default VantaEffect;

package.json

@@ -2,16 +2,19 @@
   "name": "vanta",
   "version": "0.1.0",
   "private": true,
+  "engines": {
+    "node": "22.x"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start"
   },
   "dependencies": {
-    "next": "10.0.2",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "three": "^0.122.0",
-    "vanta": "^0.5.21"
+    "next": "latest",
+    "react": "latest",
+    "react-dom": "latest",
+    "three": "^0.156.0",
+    "vanta": "^0.5.24"
   }
 }

pages/_app.js

@@ -1,21 +1,6 @@
 import "../styles/globals.css";
-import { useEffect } from "react";
 
 function MyApp({ Component, pageProps }) {
-  useEffect(() => {
-    const threeScript = document.createElement("script");
-    threeScript.setAttribute("id", "threeScript");
-    threeScript.setAttribute(
-      "src",
-      "https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"
-    );
-    document.getElementsByTagName("head")[0].appendChild(threeScript);
-    return () => {
-      if (threeScript) {
-        threeScript.remove();
-      }
-    };
-  }, []);
   return <Component {...pageProps} />;
 }