feat: Implement dark mode and mobile optimizations

This commit introduces dark mode support by defining CSS variables and applies optimizations for mobile devices by reducing polygon counts in 3D models.

Co-authored-by: matissjurevics <matissjurevics@gmail.com>

src/App.jsx

@@ -5,6 +5,7 @@ import ProductGrid from './components/ProductGrid';
 import InfoTabs from './components/InfoTabs';
 import Footer from './components/Footer';
 import './index.css';
+import './styles/variables.css';
 import gsap from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import Lenis from '@studio-freight/lenis'
@@ -83,7 +84,7 @@ function App() {
             zIndex: 10,
             pointerEvents: 'none',
             textAlign: 'center',
-            color: '#000' // Solid black text to sit on top of wireframe
+            color: 'var(--text-main, #000)' // Adapts to dark mode
           }}>
             <div style={{ overflow: 'hidden' }}>
               <h1 className="hero-title" style={{

src/canvas/Globe.jsx

@@ -19,6 +19,12 @@ const GlobeMesh = () => {
     const groupRef = useRef();
     const [bordersTexture, setBordersTexture] = useState(null);
 
+    // Detect mobile device and reduce polygon count accordingly
+    const isMobile = useMemo(() => {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+               (window.innerWidth <= 768);
+    }, []);
+
     // Generate Borders Texture using D3
     useEffect(() => {
         const generateTexture = async () => {
@@ -69,17 +75,23 @@ const GlobeMesh = () => {
         }
     });
 
+    // Reduce segment counts for mobile devices
+    const baseSphereSegments = isMobile ? 24 : 64; // Reduce from 64x64 to 24x24 on mobile
+    const wireframeSegments = isMobile ? 16 : 32; // Reduce from 32x32 to 16x16 on mobile
+    const markerSegments = isMobile ? 8 : 16; // Reduce from 16x16 to 8x8 on mobile
+    const ringSegments = isMobile ? 16 : 32; // Reduce from 32 to 16 on mobile
+
     return (
         <group ref={groupRef}>
             {/* 1. Base Dark Sphere (blocks background stars/wireframe from showing through backface) */}
             <mesh>
-                <sphereGeometry args={[1.95, 64, 64]} />
+                <sphereGeometry args={[1.95, baseSphereSegments, baseSphereSegments]} />
                 <meshBasicMaterial color="#000000" />
             </mesh>
 
             {/* 2. Light Wireframe Sphere - Outer Cage */}
             <mesh>
-                <sphereGeometry args={[2.0, 32, 32]} />
+                <sphereGeometry args={[2.0, wireframeSegments, wireframeSegments]} />
                 <meshBasicMaterial
                     color="#444"
                     wireframe={true}
@@ -91,7 +103,7 @@ const GlobeMesh = () => {
             {/* 3. Borders Sphere (Texture) */}
             {bordersTexture && (
                 <mesh>
-                    <sphereGeometry args={[2.01, 64, 64]} />
+                    <sphereGeometry args={[2.01, baseSphereSegments, baseSphereSegments]} />
                     <meshBasicMaterial
                         map={bordersTexture}
                         transparent={true}
@@ -105,11 +117,11 @@ const GlobeMesh = () => {
 
             {/* Ireland Marker */}
             <mesh position={irelandPos}>
-                <sphereGeometry args={[0.04, 16, 16]} />
+                <sphereGeometry args={[0.04, markerSegments, markerSegments]} />
                 <meshBasicMaterial color="#ff4d00" />
             </mesh>
             <mesh position={irelandPos}>
-                <ringGeometry args={[0.06, 0.09, 32]} />
+                <ringGeometry args={[0.06, 0.09, ringSegments]} />
                 <meshBasicMaterial color="#ff4d00" side={THREE.DoubleSide} transparent opacity={0.6} />
             </mesh>
         </group>

src/canvas/HeroModel.jsx

@@ -8,8 +8,15 @@ const Terrain = () => {
     const materialRef = useRef();
     const noise3D = useMemo(() => createNoise3D(), []);
 
-    // Create geometry with HIGHER segment count for smoother, denser wave like the reference
+    // Detect mobile device and reduce polygon count accordingly
-    const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, 100, 100), []);
+    const isMobile = useMemo(() => {
+        return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || 
+               (window.innerWidth <= 768);
+    }, []);
+
+    // Create geometry with reduced segment count for mobile devices
+    const segments = isMobile ? 40 : 100; // Reduce from 100x100 to 40x40 on mobile (84% reduction)
+    const geometry = useMemo(() => new THREE.PlaneGeometry(20, 20, segments, segments), [segments]);
 
     useFrame((state) => {
         if (mesh.current) {
@@ -52,6 +59,12 @@ const Terrain = () => {
 };
 
 const HeroModel = () => {
+    // Detect dark mode for fog color
+    const fogColor = useMemo(() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return prefersDark ? '#0a0a0a' : '#e4e4e4';
+    }, []);
+
     return (
         <div style={{ width: '100%', height: '100vh', position: 'absolute', top: 0, left: 0, zIndex: 0 }}>
             <Canvas
@@ -66,7 +79,7 @@ const HeroModel = () => {
                     <Terrain />
 
                     {/* Fog to fade edges into background color */}
-                    <fog attach="fog" args={['#e4e4e4', 5, 20]} />
+                    <fog attach="fog" args={[fogColor, 5, 20]} />
                 </Suspense>
             </Canvas>
         </div>

src/components/ProductGrid.jsx

@@ -111,43 +111,49 @@ const ProductGrid = () => {
     }, [products]);
 
     const onEnter = ({ currentTarget }) => {
-        gsap.to(currentTarget, { backgroundColor: '#fff', scale: 0.98, duration: 0.3 });
+        const computedStyle = getComputedStyle(document.documentElement);
+        const hoverBg = computedStyle.getPropertyValue('--product-bg-hover').trim() || '#fff';
+        const gridLine = computedStyle.getPropertyValue('--grid-line').trim() || '#ccc';
+        gsap.to(currentTarget, { backgroundColor: hoverBg, scale: 0.98, duration: 0.3 });
         gsap.to(currentTarget.querySelector('.product-img'), { scale: 1.1, duration: 0.3 });
         gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ff4d00', scale: 1.5, duration: 0.3 });
     };
 
     const onLeave = ({ currentTarget }) => {
-        gsap.to(currentTarget, { backgroundColor: '#f5f5f5', scale: 1, duration: 0.3 });
+        const computedStyle = getComputedStyle(document.documentElement);
+        const productBg = computedStyle.getPropertyValue('--product-bg').trim() || '#f5f5f5';
+        const gridLine = computedStyle.getPropertyValue('--grid-line').trim() || '#ccc';
+        gsap.to(currentTarget, { backgroundColor: productBg, scale: 1, duration: 0.3 });
         gsap.to(currentTarget.querySelector('.product-img'), { scale: 1, duration: 0.3 });
-        gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: '#ccc', scale: 1, duration: 0.3 });
+        gsap.to(currentTarget.querySelector('.indicator'), { backgroundColor: gridLine, scale: 1, duration: 0.3 });
     };
 
     return (
         <>
             <section id="work" ref={gridRef} style={{
                 padding: '100px 20px',
-                background: '#fff',
+                background: 'var(--bg-color, #fff)',
                 minHeight: '100vh'
             }}>
                 <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
                     <div style={{
                         marginBottom: '60px',
-                        borderBottom: '1px solid #000',
+                        borderBottom: '1px solid var(--text-main, #000)',
                         paddingBottom: '20px',
                         display: 'flex',
                         justifyContent: 'space-between',
                         alignItems: 'baseline'
                     }} ref={titleRef}>
-                        <h2 className="uppercase" style={{ fontSize: '2rem', margin: 0 }}>Selected Work</h2>
+                        <h2 className="uppercase" style={{ fontSize: '2rem', margin: 0, color: 'var(--text-main, #000)' }}>Selected Work</h2>
-                        <span className="mono" style={{ fontSize: '0.9rem', color: '#666' }}>DESIGN / CODE</span>
+                        <span className="mono" style={{ fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>DESIGN / CODE</span>
                     </div>
 
                     <div style={{
                         display: 'grid',
                         gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))',
                         gap: '2px', // Tight gap for grid lines effect
-                        background: '#ccc', // Color of grid lines
+                        background: 'var(--grid-line, #ccc)', // Color of grid lines
-                        border: '1px solid #ccc'
+                        border: '1px solid var(--grid-line, #ccc)'
                     }}>
                         {products.map((p, i) => (
                             <div
@@ -155,7 +161,7 @@ const ProductGrid = () => {
                                 ref={el => itemRefs.current[i] = el}
                                 className="product-item"
                                 style={{
-                                    background: '#f5f5f5',
+                                    background: 'var(--product-bg, #f5f5f5)',
                                     height: '450px',
                                     padding: '30px',
                                     display: 'flex',
@@ -176,7 +182,7 @@ const ProductGrid = () => {
                                     <div className="indicator" style={{
                                         width: '8px',
                                         height: '8px',
-                                        background: '#ccc',
+                                        background: 'var(--grid-line, #ccc)',
                                         borderRadius: '50%'
                                     }}></div>
                                 </div>
@@ -188,7 +194,7 @@ const ProductGrid = () => {
                                     alignItems: 'center',
                                     justifyContent: 'center',
                                     fontSize: '3rem',
-                                    color: '#e0e0e0',
+                                    color: 'var(--text-dim, #e0e0e0)',
                                     fontWeight: 800,
                                     userSelect: 'none',
                                     textAlign: 'center',
@@ -204,8 +210,8 @@ const ProductGrid = () => {
                                 </div>
 
                                 <div style={{ zIndex: 2 }}>
-                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</h3>
+                                    <h3 style={{ fontSize: '1.5rem', marginBottom: '5px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: 'var(--text-main, #000)' }}>{p.name}</h3>
-                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: '#666' }}>
+                                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem', color: 'var(--text-dim, #666)' }}>
                                         <span style={{ maxWidth: '70%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.desc}</span>
                                         <span>{p.price}</span>
                                     </div>

src/styles/variables.css

@@ -1,10 +1,12 @@
 :root {
-  /* Teenage Engineering Palette */
+  /* Teenage Engineering Palette - Dark mode default */
-  --bg-color: #e4e4e4;
+  --bg-color: #0a0a0a;
-  --text-main: #000000;
+  --text-main: #e4e4e4;
-  --text-dim: #666666;
+  --text-dim: #888888;
   --accent-orange: #ff4d00;
-  --grid-line: #cccccc;
+  --grid-line: #333333;
+  --product-bg: #1a1a1a;
+  --product-bg-hover: #2a2a2a;
   
   /* Typos */
   --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@@ -13,3 +15,15 @@
   /* Layout */
   --header-height: 60px;
 }
+
+@media (prefers-color-scheme: light) {
+  :root {
+    /* Light mode overrides */
+    --bg-color: #e4e4e4;
+    --text-main: #000000;
+    --text-dim: #666666;
+    --grid-line: #cccccc;
+    --product-bg: #f5f5f5;
+    --product-bg-hover: #ffffff;
+  }
+}