Remove commented code and clean up unused styles across multiple components

@@ -7,32 +7,26 @@ const Constellations = ({ options }) => {  const canvas = useRef(null);  useEffect(() => {    // Get the canvas for resizing    const cvs = canvas.current;    // Size canvas to the parent    cvs.width = cvs.offsetWidth;    cvs.height = cvs.offsetHeight;    // Add new event listener for resize the canvas on window resize    const resizeCanvas = () => {      cvs.width = cvs.offsetWidth;      cvs.height = cvs.offsetHeight;    };    window.addEventListener("resize", resizeCanvas);    // Clean up event listener when dismounting the component    return () => {      window.removeEventListener("resize", resizeCanvas);    };  }, []);  useEffect(() => {    // Get our canvas and draw stars    const cvs = canvas.current;    const ctx = cvs.getContext("2d");    // Generate all stars    let stars = [];    let numStars = 0;    const maxNumStars = options.numStars;

@@ -48,22 +42,17 @@ const Constellations = ({ options }) => {      numStars++;    }    // Create draw for use in animation frame rerendering    let starsAnimationFrame = null;    const starDistance = 150;    const drawStars = () => {      // Clear the canvas      ctx.clearRect(0, 0, cvs.width, cvs.height);      // Draw the canvas      stars.map((star) => {        // Generate stars        ctx.beginPath();        ctx.arc(...star.loc, 2, 0, 2 * Math.PI);        ctx.fillStyle = "rgb(255, 255, 255)";        ctx.fill();        ctx.closePath();        // Generate lines to close stars        const closeStars = stars.filter((closeStar) => {          return (            Math.hypot(

@@ -89,19 +78,15 @@ const Constellations = ({ options }) => {        });      });      // Update star locations      stars = stars.map((star) => {        // Change star direction when hitting the side of the canvas        if (star.loc[0] < 0) star.dir[0] = "+";        else if (star.loc[0] > cvs.width) star.dir[0] = "-";        if (star.loc[1] < 0) star.dir[1] = "+";        else if (star.loc[1] > cvs.height) star.dir[1] = "-";        // Set new star location with direction added to it        star.loc[0] += parseFloat(`${star.dir[0]}0.5`);        star.loc[1] += parseFloat(`${star.dir[1]}0.5`);        // Return star to back to array with new dir and loc        return star;      });

@@ -110,12 +95,10 @@ const Constellations = ({ options }) => {      }    };    // Start the initial drawing and our recursion will take it from there    if (isActive) {      starsAnimationFrame = window.requestAnimationFrame(drawStars);    }    // Cancel star drawing animation frame rendering when dismounting component    return () => {      window.cancelAnimationFrame(starsAnimationFrame);    };

@@ -129,5 +112,3 @@ Constellations.propTypes = {};export default Constellations;// migrated to CSS Modules

@@ -32,5 +32,3 @@ Grid.propTypes = {};export default Grid;// migrated to CSS Modules

@@ -15,8 +15,6 @@ const Loader = () => {                className={styles.gridColumn}                style={{                  gridColumn: column,                  // match animation-delay: column * 100ms for both pseudo-elements                  // We'll set CSS variable that both ::before and ::after can read                  ["--delay"]: `${column * 100}ms`,                }}              />

@@ -28,5 +26,3 @@ const Loader = () => {};export default Loader;// migrated to CSS Modules

@@ -6,7 +6,6 @@ const Mouse = () => {  const circleRef = useRef(null);  const mousePos = useRef({ x: 0, y: 0 });  // Track interactive hover state  const isInteractiveRef = useRef(false);  useEffect(() => {

@@ -44,7 +43,7 @@ const Mouse = () => {      animationFrameId = requestAnimationFrame(animate);    };    animate(); // start the loop    animate();    return () => {      document.removeEventListener("mousemove", onMouseMove);

@@ -73,5 +72,3 @@ const Mouse = () => {};export default Mouse;// migrated to CSS Modules

@@ -41,5 +41,3 @@ Page.propTypes = {};export default Page;// migrated to CSS Module

@@ -7,42 +7,34 @@ const ParticleFlow = ({ options }) => {  const canvas = useRef(null);  useEffect(() => {    // Get the canvas for resizing    const cvs = canvas.current;    // Size canvas to the parent    cvs.width = cvs.offsetWidth;    cvs.height = cvs.offsetHeight;    // Add new event listener for resize the canvas on window resize    const resizeCanvas = () => {      cvs.width = cvs.offsetWidth;      cvs.height = cvs.offsetHeight;    };    window.addEventListener("resize", resizeCanvas);    // Clean up event listener when dismounting the component    return () => {      window.removeEventListener("resize", resizeCanvas);    };  }, []);  useEffect(() => {    // Get our canvas and context    const cvs = canvas.current;    const ctx = cvs.getContext("2d");    // Flow field configuration    const cols = Math.floor(cvs.width / 20);    const rows = Math.floor(cvs.height / 20);    let time = 0;    // Simple noise function (Perlin-like)    const noise = (x, y, z) => {      return Math.sin(x * 0.01 + z) * Math.cos(y * 0.01 + z) * 0.5 + 0.5;    };    // Generate flow field    const generateFlowField = () => {      const field = [];      for (let y = 0; y < rows; y++) {

@@ -58,7 +50,6 @@ const ParticleFlow = ({ options }) => {      return field;    };    // Particle class    class Particle {      constructor() {        this.x = Math.random() * cvs.width;

@@ -84,7 +75,6 @@ const ParticleFlow = ({ options }) => {            y: desired.y * this.maxSpeed - this.vy,          };          // Limit force          const mag = Math.sqrt(force.x * force.x + force.y * force.y);          if (mag > this.maxForce) {            force.x = (force.x / mag) * this.maxForce;

@@ -97,29 +87,24 @@ const ParticleFlow = ({ options }) => {      }      update() {        // Add current position to trail        this.trail.push({ x: this.x, y: this.y });        if (this.trail.length > this.maxTrailLength) {          this.trail.shift();        }        // Update position        this.x += this.vx;        this.y += this.vy;        // Wrap around edges        if (this.x > cvs.width) this.x = 0;        if (this.x < 0) this.x = cvs.width;        if (this.y > cvs.height) this.y = 0;        if (this.y < 0) this.y = cvs.height;        // Slowly shift hue        this.hue += 0.5;        if (this.hue > 360) this.hue = 0;      }      draw(ctx) {        // Draw trail        for (let i = 0; i < this.trail.length; i++) {          const alpha = (i / this.trail.length) * this.alpha;          const size = (i / this.trail.length) * 3;

@@ -131,7 +116,6 @@ const ParticleFlow = ({ options }) => {          ctx.closePath();        }        // Draw particle        ctx.beginPath();        ctx.arc(this.x, this.y, 3, 0, Math.PI * 2);        ctx.fillStyle = `hsla(${this.hue}, 80%, 70%, ${this.alpha})`;

@@ -140,24 +124,19 @@ const ParticleFlow = ({ options }) => {      }    }    // Create particles    const particles = [];    const numParticles = options.numParticles || 100;    for (let i = 0; i < numParticles; i++) {      particles.push(new Particle());    }    // Animation loop    let animationFrame = null;    const animate = () => {      // Semi-transparent black background for trail effect      ctx.fillStyle = "rgba(0, 0, 0, 0.05)";      ctx.fillRect(0, 0, cvs.width, cvs.height);      // Generate flow field      const flowField = generateFlowField();      // Update and draw particles      particles.forEach((particle) => {        particle.follow(flowField);        particle.update();

@@ -170,12 +149,10 @@ const ParticleFlow = ({ options }) => {      }    };    // Start animation    if (isActive) {      animationFrame = window.requestAnimationFrame(animate);    }    // Clean up animation frame when dismounting component    return () => {      window.cancelAnimationFrame(animationFrame);    };

@@ -189,5 +166,3 @@ ParticleFlow.propTypes = {};export default ParticleFlow;// migrated to CSS Modules

@@ -24,7 +24,6 @@ const RetroStars = ({ options }) => {  };  useEffect(() => {    // Mouse move event function    const mouseMove = (evt) => {      setMousePosition({        x: evt.clientX,

@@ -32,38 +31,31 @@ const RetroStars = ({ options }) => {      });    };    // Create event listener    window.addEventListener("mousemove", mouseMove);    // Clean up event listener when dismounting the component    return () => {      window.removeEventListener("mousemove", mouseMove);    };  }, []);  useEffect(() => {    // Get the canvas for resizing    const cvs = canvas.current;    // Size canvas to the parent    cvs.width = cvs.offsetWidth;    cvs.height = cvs.offsetHeight;    // Add new event listener for resize the canvas on window resize    const resizeCanvas = () => {      cvs.width = cvs.offsetWidth;      cvs.height = cvs.offsetHeight;    };    window.addEventListener("resize", resizeCanvas);    // Clean up event listener when dismounting the component    return () => {      window.removeEventListener("resize", resizeCanvas);    };  }, []);  useEffect(() => {    // Setup interval to change star sizes    let starSizeInterval = null;    if (isActive) {      starSizeInterval = setInterval(() => {

@@ -76,7 +68,6 @@ const RetroStars = ({ options }) => {      }, 500);    }    // Clean up interval when dismounting the component    return () => {      if (starSizeInterval) {        clearInterval(starSizeInterval);

@@ -85,14 +76,11 @@ const RetroStars = ({ options }) => {  }, [isActive]);  useEffect(() => {    // Get our canvas and draw stars    const cvs = canvas.current;    const ctx = cvs.getContext("2d");    // Fill colors    const colors = ["white", "yellow", "red", "green", "blue"];    // Generate all stars    let smallStars = [];    let mediumStars = [];    let largeStars = [];

@@ -118,18 +106,14 @@ const RetroStars = ({ options }) => {      numStars++;    }    // Create draw for use in animation frame rerendering    let starsAnimationFrame = null;    const drawStars = () => {      // Clear the canvas      ctx.clearRect(0, 0, cvs.width, cvs.height);      // Get offsets      const smallStarOffset = offsetStar(25);      const mediumStarOffset = offsetStar(75);      const largeStarOffset = offsetStar(125);      // Draw the canvas      smallStars.forEach(({ loc, color }) => {        ctx.beginPath();        ctx.fillStyle = color;

@@ -227,18 +211,15 @@ const RetroStars = ({ options }) => {        }      });      // Draw again      if (isActive) {        starsAnimationFrame = window.requestAnimationFrame(drawStars);      }    };    // Start the initial drawing and our recursion will take it from there    if (isActive) {      starsAnimationFrame = window.requestAnimationFrame(drawStars);    }    // Cancel star drawing animation frame rendering when dismounting component    return () => {      window.cancelAnimationFrame(starsAnimationFrame);    };

@@ -252,5 +233,3 @@ RetroStars.propTypes = {};export default RetroStars;// migrated to CSS Modules

@@ -5,34 +5,27 @@ const Synthwave = () => {  const canvas = useRef(null);  useEffect(() => {    // Get the canvas for resizing    const cvs = canvas.current;    // Size canvas to the parent    cvs.width = cvs.offsetWidth;    cvs.height = cvs.offsetHeight;    // Add new event listener for resize the canvas on window resize    const resizeCanvas = () => {      cvs.width = cvs.offsetWidth;      cvs.height = cvs.offsetHeight;    };    window.addEventListener("resize", resizeCanvas);    // Clean up event listener when dismounting the component    return () => {      window.removeEventListener("resize", resizeCanvas);    };  }, []);  useEffect(() => {    // Get the canvas and context    const cvs = canvas.current;    const ctx = cvs.getContext("2d");    // Create draw for use in animation frame rerendering    const drawSynth = () => {      // Generate all stars      let stars = [];      let numStars = 0;      const maxNumStars = 250;

@@ -46,14 +39,12 @@ const Synthwave = () => {        numStars++;      }      // Background      let grd = ctx.createLinearGradient(0, 0, 0, cvs.height);      grd.addColorStop(0, "#110f33");      grd.addColorStop(1, "#040103");      ctx.fillStyle = grd;      ctx.fillRect(0, 0, cvs.width, cvs.height);      // Draw stars      stars.forEach((star) => {        ctx.beginPath();        ctx.arc(...star, 2 * Math.random(), 0, 2 * Math.PI);

@@ -63,7 +54,6 @@ const Synthwave = () => {      });      ctx.filter = "none";      // Draw horizontal lines      let currentLine = 0;      let maxLines = 15;      let start = cvs.height;

@@ -82,7 +72,6 @@ const Synthwave = () => {      }      ctx.globalAlpha = 1;      // Draw vertical lines      const end = start;      quotient = 0.85;      maxLines = 30;

@@ -120,7 +109,6 @@ const Synthwave = () => {        currentLine++;      }      // Sun      ctx.beginPath();      ctx.arc(cvs.width / 2, cvs.height / 2, 100, 0, 2 * Math.PI);      grd = ctx.createLinearGradient(

@@ -140,7 +128,6 @@ const Synthwave = () => {    window.addEventListener("resize", drawSynth);    // Clean up event listener when dismounting the component    return () => {      window.removeEventListener("resize", drawSynth);    };

@@ -150,5 +137,3 @@ const Synthwave = () => {};export default Synthwave;// migrated to CSS Modules

@@ -1,4 +1,3 @@/** @type {import('next').NextConfig} */const nextConfig = {  reactStrictMode: true,};

@@ -10,7 +10,7 @@ import ParticleFlow from "../components/particleflow";const Art = () => {  const [lightboxImage, setLightboxImage] = useState(null);  const [lightboxLoaded, setLightboxLoaded] = useState(false);  const [activeArt, setActiveArt] = useState("constellations"); // Default to constellations playing  const [activeArt, setActiveArt] = useState("constellations");  const openLightbox = (image) => {    setLightboxImage(image);

@@ -230,7 +230,6 @@ const Code = ({ commits }) => {};export async function getServerSideProps() {  // NOTE: We eval the require on purpose so that webpack doesn't bundle it  const { Sequelize } = eval("require('sequelize')");  const sequelize = new Sequelize("sqlite://db.sqlite3");

@@ -19,13 +19,11 @@ const Index = () => {  };  useEffect(() => {    // Swap words interval    const wordsInterval = setInterval(() => {      let nextWordIndex = words.indexOf(currentWordsRef.current[0]) + 1;      if (nextWordIndex < words.length) setCurrentWord([words[nextWordIndex]]);      else setCurrentWord([words[0]]);    }, 2000);    // Clear words interval and constellation resize on component dismount    return () => {      clearInterval(wordsInterval);    };

@@ -94,7 +94,6 @@  z-index: 1;}/* Transition mappings for word animations */.wordAppearActive > .wordText,.wordEnterActive > .wordText {  animation-name: quickFadeIn;

@@ -205,7 +205,6 @@  object-fit: cover;}/* Card image wrapper used in JSX as styles.cardImage */.cardImage img {  object-fit: cover;  object-position: center;

@@ -297,7 +296,6 @@  visibility: hidden;}/* Lightbox image wrapper ensures centering and sizing for Next/Image with layout=fill */.lightboxImageWrapper {  position: relative;  width: 90vw;

@@ -59,8 +59,6 @@  }}/* Former GridColumn shared styles applied directly to left/right columns */.gridLeft {  grid-area: left;  background-color: rgba(0, 0, 0, 0.9);

@@ -98,7 +96,7 @@}.contactWrapper {  padding-left: 60px; /* match legacy inner offset so content doesn't hug the sidebar */  padding-left: 60px;}@media (max-width: 1023.98px) {

@@ -213,7 +211,6 @@  opacity: 0;}/* Fade-in transitions for chat lines (react-transition-group classNames="fade") */.chatLine:global(.fade-appear) {  opacity: 0;  transform: translateX(-100px);

@@ -253,9 +250,6 @@  font-weight: 800;}/* removed conflicting duplicate chat styles *//* Restore avatar spacing/sizing per legacy */.chatAvatar {  margin-right: 20px;  width: 50px;

@@ -52,7 +52,6 @@  position: absolute;}/* CSSTransition mappings for the word animation */.wordAppear,.wordEnter {  opacity: 0;

@@ -115,7 +114,6 @@  text-transform: uppercase;  padding: 5px;  margin: 0 0 2px 0;  /* centered via parent flex container */  align-self: flex-start;  background-image: linear-gradient(    to right,