update app and canvas

src/App.jsx

@@ -14,31 +14,21 @@ function App() {
     if ('performance' in window) {
       window.performance.mark('app_start');
     }
-
-    const logWebVitals = (metric) => {
-      console.log('Web Vital:', metric);
-      if (metric.value > 0) {
-        console.log('Metric details:', {
-          name: metric.name,
-          value: metric.value,
-          rating: metric.rating
-        });
-      }
-    };
-
-    reportWebVitals(logWebVitals);
+    reportWebVitals(console.log);
   }, []);
 
   return (
     <ErrorBoundary>
       <Router>
-        <Suspense fallback={<LoadingState />}>
+        <div style={{ position: 'relative', minHeight: '100vh' }}>
           <Canvas />
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/manifesto" element={<Manifesto />} />
-          </Routes>
-        </Suspense>
+          <Suspense fallback={<LoadingState />}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/manifesto" element={<Manifesto />} />
+            </Routes>
+          </Suspense>
+        </div>
       </Router>
     </ErrorBoundary>
   );

src/components/Canvas.jsx

@@ -1,46 +1,46 @@
-import React, { useEffect, useRef } from 'react';
-import { Scene } from '../three/Scene';
+import React, { useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { Scene } from './Scene';
 
-const Canvas = () => {
-  const canvasRef = useRef(null);
+function Canvas() {
+  const containerRef = useRef(null);
+  const [scene, setScene] = useState(null);
 
   useEffect(() => {
-    if (!canvasRef.current) return;
-
-    const handleResize = () => {
-      if (canvasRef.current) {
-        canvasRef.current.width = window.innerWidth;
-        canvasRef.current.height = window.innerHeight;
-      }
-    };
+    // Only initialize if container exists
+    if (!containerRef.current) return;
 
-    handleResize();
-    window.addEventListener('resize', handleResize);
-
-    const scene = new Scene(canvasRef.current);
-    scene.init();
-    scene.animate();
+    // Wait for next frame to ensure DOM measurements are accurate
+    requestAnimationFrame(() => {
+      try {
+        const newScene = new Scene(containerRef.current);
+        setScene(newScene);
 
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      scene.dispose();
-    };
+        return () => {
+          if (newScene) {
+            newScene.dispose();
+          }
+        };
+      } catch (error) {
+        console.error('Error initializing scene:', error);
+      }
+    });
   }, []);
 
   return (
-    <canvas
-      ref={canvasRef}
+    <div 
+      ref={containerRef}
       style={{
         position: 'fixed',
         top: 0,
         left: 0,
-        width: '100vw',
-        height: '100vh',
+        width: '100%',
+        height: '100%',
         zIndex: -1,
         background: '#000000'
       }}
     />
   );
-};
+}
 
 export default Canvas;