stable state

components/Skills.tsx

@@ -1,7 +1,5 @@
 "use client";
 
-import { useEffect, useRef } from "react";
-
 interface SkillsProps {
   skills: string[];
   languages: { name: string; level: string }[];
@@ -9,25 +7,6 @@ interface SkillsProps {
 }
 
 export default function Skills({ skills, languages, interests }: SkillsProps) {
-  const headingRef = useRef<HTMLDivElement>(null);
-  const skillsRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const els = [headingRef.current, skillsRef.current].filter(Boolean);
-    const obs = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            entry.target.classList.add("visible");
-          }
-        });
-      },
-      { threshold: 0.1 }
-    );
-    els.forEach((el) => el && obs.observe(el));
-    return () => obs.disconnect();
-  }, []);
-
   // Give skills a pseudo-random "weight" based on their index for visual variety
   const weights = [1.3, 1, 1.5, 1, 1.2, 0.9, 1.4, 1, 1.1, 0.95, 1.3, 1, 1.2, 0.9, 1.4, 1, 1.1, 1.3];
 
@@ -44,7 +23,7 @@ export default function Skills({ skills, languages, interests }: SkillsProps) {
       style={{ padding: "8rem 2rem", background: "#0a0b0e" }}
     >
       <div style={{ maxWidth: "1200px", margin: "0 auto" }}>
-        <div ref={headingRef} className="reveal" style={{ marginBottom: "4rem" }}>
+        <div style={{ marginBottom: "4rem" }}>
           <div className="section-label" style={{ marginBottom: "0.75rem" }}>Expertise</div>
           <h2
             className="font-display"
@@ -69,7 +48,7 @@ export default function Skills({ skills, languages, interests }: SkillsProps) {
           }}
         >
           {/* Tech skills */}
-          <div ref={skillsRef} className="reveal">
+          <div>
             <div
               className="font-mono"
               style={{