fix perf

wheattoast11 · Nov 30, 2024 · 78c5a1a · 78c5a1a
1 parent 7ab3d3a
commit 78c5a1a
Show file tree

Hide file tree

Showing 14 changed files with 308 additions and 144 deletions.
diff --git a/404.html b/404.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Intuition Labs</title>
+    <title>Intuition Labs LLC</title>
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // MIT License

diff --git a/index.html b/index.html
@@ -3,26 +3,25 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Intuition Labs LLC - Pioneering the future of AI through intuitive design">
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: light)">
+    <meta name="msapplication-TileColor" content="#000000">
+
     <title>Intuition Labs LLC - AI Research & Consulting</title>
+
+    <!-- Preload critical assets -->
+    <link rel="preload" href="/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="/src/style.css" as="style">
+
+    <!-- Favicons -->
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="manifest" href="/site.webmanifest">
-    <script type="text/javascript">
-      (function(l) {
-        if (l.search[1] === '/' ) {
-          var decoded = l.search.slice(1).split('&').map(function(s) { 
-            return s.replace(/~and~/g, '&')
-          }).join('?');
-          window.history.replaceState(null, null,
-              l.pathname.slice(0, -1) + decoded + l.hash
-          );
-        }
-      }(window.location))
-    </script>
 </head>
 <body>
     <div id="root"></div>
-    <script type="module" src="/main.jsx"></script>
+    <script type="module" src="/src/main.jsx"></script>
 </body>
 </html>
diff --git a/main.js b/main.js
diff --git a/manifesto.html b/manifesto.html
@@ -3,12 +3,20 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Our Manifesto</title>
+    <meta name="description" content="Intuition Labs LLC - Our vision and principles for the future of AI">
+    <meta http-equiv="refresh" content="0;url=/#/manifesto">
+    <title>Our Manifesto - Intuition Labs LLC</title>
     <link rel="stylesheet" href="/style.css">
+
+    <!-- Favicons -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
 </head>
 <body>
-    <canvas id="bg"></canvas>
     <div id="app">
+        <canvas id="bg"></canvas>
         <header>
             <a href="/" class="back-link">← Back to Home</a>
             <h1>Our Manifesto</h1>
@@ -52,13 +60,19 @@ <h2>Our Guiding Principles</h2>
 
         <footer>
             <div class="social-links">
-                <a href="#linkedin">LinkedIn</a>
-                <a href="#github">GitHub</a>
-                <a href="#twitter">Twitter</a>
+                <a href="https://www.linkedin.com/company/intuition-labs">LinkedIn</a>
+                <a href="https://github.com/wheattoast11">GitHub</a>
+                <a href="https://www.youtube.com/@IntuitionLabsLLC">YouTube</a>
             </div>
             <p class="copyright">© 2024 Intuition Labs LLC. Pioneering the future of AI.</p>
         </footer>
     </div>
-    <script type="module" src="/main.jsx"></script>
+    <noscript>
+        <style>
+            .back-link { display: inline-block; margin-bottom: 2rem; }
+            #bg { display: none; }
+            #app { opacity: 1 !important; }
+        </style>
+    </noscript>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "framer-motion": "^11.0.3",
-    "pts": "^0.11.4"
+    "pts": "^0.11.4",
+    "web-vitals": "^3.5.2"
   },
   "devDependencies": {
     "vite": "^5.4.2",

diff --git a/site.webmanifest b/site.webmanifest
@@ -1 +1,21 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "Intuition Labs LLC",
+  "short_name": "IntuitionLab",
+  "description": "Pioneering the future of AI through intuitive design",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#000000",
+  "theme_color": "#7A9E9F",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,82 +1,35 @@
-import React, { Suspense, lazy, useEffect, useState } from 'react';
+import React, { Suspense, lazy, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import LoadingState from './components/LoadingState';
+import Canvas from './components/Canvas';
+import ErrorBoundary from './components/ErrorBoundary';
+import reportWebVitals from './utils/reportWebVitals';
 
 // Lazy load components
 const Home = lazy(() => import('./pages/Home'));
 const Manifesto = lazy(() => import('./pages/Manifesto'));
-const Scene = lazy(() => import('./three/Scene').then(module => ({ default: module.Scene })));
 
 function App() {
-  const [scene, setScene] = useState(null);
-  const [isLoading, setIsLoading] = useState(true);
-
   useEffect(() => {
-    // Preload critical assets
-    const preloadAssets = async () => {
-      try {
-        // Initialize Three.js scene
-        const newScene = new Scene();
-        await newScene.init(); // Assuming we make init async
-        setScene(newScene);
-
-        // Simulate minimum loading time for smooth transition
-        await new Promise(resolve => setTimeout(resolve, 1000));
-
-        setIsLoading(false);
-      } catch (error) {
-        console.error('Error loading assets:', error);
-        setIsLoading(false);
-      }
-    };
-
-    preloadAssets();
-
-    return () => {
-      if (scene) {
-        scene.dispose();
-      }
-    };
+    reportWebVitals(console.log);
+
+    if ('performance' in window) {
+      window.performance.mark('app_start');
+    }
   }, []);
 
-  // Debounced resize handler
-  useEffect(() => {
-    let resizeTimeout;
-    const handleResize = () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        if (scene) {
-          scene.handleResize();
-        }
-      }, 250);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => {
-      window.removeEventListener('resize', handleResize);
-      clearTimeout(resizeTimeout);
-    };
-  }, [scene]);
-
-  if (isLoading) {
-    return <LoadingState />;
-  }
-
   return (
-    <Router>
-      <Suspense fallback={<LoadingState />}>
-        <Routes>
-          <Route 
-            path="/" 
-            element={<Home onMount={() => scene?.animate()} />} 
-          />
-          <Route 
-            path="/manifesto" 
-            element={<Manifesto onMount={() => scene?.animate()} />} 
-          />
-        </Routes>
-      </Suspense>
-    </Router>
+    <ErrorBoundary>
+      <Router>
+        <Canvas />
+        <Suspense fallback={<LoadingState />}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/manifesto" element={<Manifesto />} />
+          </Routes>
+        </Suspense>
+      </Router>
+    </ErrorBoundary>
   );
 }
 

diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx
@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react';
+import { Scene } from '../three/Scene';
+
+const Canvas = () => {
+  const canvasRef = useRef(null);
+
+  useEffect(() => {
+    if (!canvasRef.current) return;
+
+    const handleResize = () => {
+      if (canvasRef.current) {
+        canvasRef.current.width = window.innerWidth;
+        canvasRef.current.height = window.innerHeight;
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    const scene = new Scene(canvasRef.current);
+    scene.init();
+    scene.animate();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      scene.dispose();
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100vw',
+        height: '100vh',
+        zIndex: -1,
+        background: '#000000'
+      }}
+    />
+  );
+};
+
+export default Canvas; 
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error:', error);
+    console.error('Error Info:', errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ 
+          padding: '2rem', 
+          textAlign: 'center',
+          minHeight: '100vh',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          background: '#000000',
+          color: 'white'
+        }}>
+          <div>
+            <h1>Something went wrong</h1>
+            <p>Please refresh the page or try again later.</p>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary; 
diff --git a/main.jsx → src/main.jsx b/main.jsx → src/main.jsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './src/App';
+import App from './App';
 import './style.css';
 
+// Create React root and render App
 const root = createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);