From 78c5a1a8be1f1dea7e59ec9cd55c94f1bdf960a4 Mon Sep 17 00:00:00 2001 From: wheattoast11 Date: Sat, 30 Nov 2024 13:01:31 -0600 Subject: [PATCH] fix perf --- 404.html | 4 +- index.html | 25 +++++---- main.js | 22 -------- manifesto.html | 26 +++++++--- package.json | 3 +- site.webmanifest | 22 +++++++- src/App.jsx | 87 ++++++++------------------------ src/components/Canvas.jsx | 46 +++++++++++++++++ src/components/ErrorBoundary.jsx | 43 ++++++++++++++++ main.jsx => src/main.jsx | 5 +- src/pages/Home.jsx | 32 ++++++++++-- src/pages/Manifesto.jsx | 50 +++++++++++++----- src/utils/reportWebVitals.js | 13 +++++ style.css | 74 +++++++++++++++++++++------ 14 files changed, 308 insertions(+), 144 deletions(-) delete mode 100644 main.js create mode 100644 src/components/Canvas.jsx create mode 100644 src/components/ErrorBoundary.jsx rename main.jsx => src/main.jsx (77%) create mode 100644 src/utils/reportWebVitals.js diff --git a/404.html b/404.html index 2a1fbdb..72c066e 100644 --- a/404.html +++ b/404.html @@ -1,9 +1,9 @@ - + - Intuition Labs + Intuition Labs LLC
- + \ No newline at end of file diff --git a/main.js b/main.js deleted file mode 100644 index 85bcc46..0000000 --- a/main.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Scene } from './src/three/Scene'; -import { CardEffects } from './src/ui/CardEffects'; -import { ScrollEffects } from './src/ui/ScrollEffects'; -import { createRoot } from 'react-dom/client'; -import { RemotionVideo } from './src/Video'; - -// Initialize Three.js scene -const scene = new Scene(); -scene.animate(); - -// Initialize UI effects -new CardEffects(); -new ScrollEffects(); - -// Initialize Remotion video -const videoContainer = document.createElement('div'); -videoContainer.id = 'remotion-video'; -document.body.appendChild(videoContainer); - -// Create React root and render Remotion video -const root = createRoot(videoContainer); -root.render(); \ No newline at end of file diff --git a/manifesto.html b/manifesto.html index 3bcea40..2773783 100644 --- a/manifesto.html +++ b/manifesto.html @@ -3,12 +3,20 @@ - Our Manifesto + + + Our Manifesto - Intuition Labs LLC + + + + + + -
+
← Back to Home

Our Manifesto

@@ -52,13 +60,19 @@

Our Guiding Principles

- + \ No newline at end of file diff --git a/package.json b/package.json index a533e0f..183dffa 100644 --- 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 index 45dc8a2..ed0beef 100644 --- 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"} \ No newline at end of file +{ + "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" + } + ] +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index ecc767b..765d448 100644 --- 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 ; - } - return ( - - }> - - scene?.animate()} />} - /> - scene?.animate()} />} - /> - - - + + + + }> + + } /> + } /> + + + + ); } diff --git a/src/components/Canvas.jsx b/src/components/Canvas.jsx new file mode 100644 index 0000000..e2b8b49 --- /dev/null +++ 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 ( + + ); +}; + +export default Canvas; \ No newline at end of file diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx new file mode 100644 index 0000000..775667e --- /dev/null +++ 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 ( +
+
+

Something went wrong

+

Please refresh the page or try again later.

+
+
+ ); + } + + return this.props.children; + } +} + +export default ErrorBoundary; \ No newline at end of file diff --git a/main.jsx b/src/main.jsx similarity index 77% rename from main.jsx rename to src/main.jsx index 9aaf4b1..648009a 100644 --- a/main.jsx +++ b/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( -); \ No newline at end of file +); \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index b45fdc0..4b745c4 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,14 +1,25 @@ import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import { motion } from 'framer-motion'; +import { ScrollEffects } from '../ui/ScrollEffects'; +import { CardEffects } from '../ui/CardEffects'; function Home({ onMount }) { const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { - onMount?.(); - setIsLoaded(true); - }, [onMount]); + if (!isLoaded) { + onMount?.(); + setIsLoaded(true); + const cardEffects = new CardEffects(); + const scrollEffects = new ScrollEffects(); + + return () => { + cardEffects.dispose?.(); + scrollEffects.dispose?.(); + }; + } + }, [isLoaded, onMount]); const containerVariants = { hidden: { opacity: 0 }, @@ -60,6 +71,21 @@ function Home({ onMount }) { +
+
+ {[...Array(2)].map((_, setIndex) => ( +
+ terminals + radical + pathfinder + wuji + boom + journey +
+ ))} +
+
+ { - onMount(); + onMount?.(); }, [onMount]); + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.1, + delayChildren: 0.2 + } + } + }; + + const itemVariants = { + hidden: { y: 20, opacity: 0 }, + visible: { + y: 0, + opacity: 1, + transition: { duration: 0.6, ease: [0.23, 1, 0.32, 1] } + } + }; + return ( -
+ -
+ ← Back to Home

Our Manifesto

Shaping the future of AI with purpose and responsibility

-
+ -
+

Purpose

@@ -48,17 +74,17 @@ function Manifesto({ onMount }) {
  • Commitment to diversity, equity, and inclusion in AI development
    • -
    + - -
    + + ); } diff --git a/src/utils/reportWebVitals.js b/src/utils/reportWebVitals.js new file mode 100644 index 0000000..295727a --- /dev/null +++ b/src/utils/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = (onPerfEntry) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; \ No newline at end of file diff --git a/style.css b/style.css index f6b9543..c0c7c89 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,51 @@ +@import url('https://fonts.googleapis.com/css2?family=Space+Mono&family=Syncopate:wght@700&family=Cinzel&family=Audiowide&family=Cormorant+Garamond:ital@1&display=swap'); + :root { - --primary: #2A2B2E; - --accent: #506C7F; - --glow: #7A9E9F; - --background: #030303; - --text: #E4E4E4; - --card-bg: rgba(255, 255, 255, .03); - --hover: rgba(122, 158, 159, .08); - --font-display: "Garnett", system-ui, -apple-system; - --font-body: "Aeonik", sans-serif; + --font-display: system-ui, -apple-system, sans-serif; + --text: rgba(255, 255, 255, 0.9); + --accent: #7A9E9F; + --background: #000000; + --glow: rgba(122, 158, 159, 0.5); + --card-bg: rgba(122, 158, 159, 0.05); + --hover: rgba(122, 158, 159, 0.1); +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + background: #000000; + color: white; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + overflow-x: hidden; + min-height: 100vh; +} + +.gradient-text { + background: linear-gradient(135deg, var(--primary) 0%, var(--glow) 100%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; +} + +.cta-button { + padding: 1rem 2rem; + border: 1px solid var(--primary); + border-radius: 4px; + text-decoration: none; + color: white; + transition: all 0.3s ease; +} + +.cta-button.primary { + background: var(--primary); +} + +.cta-button.secondary { + background: transparent; } @font-face { @@ -54,12 +92,6 @@ font-display: swap; } -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - body { font-family: var(--font-body); color: var(--text); @@ -766,4 +798,16 @@ footer { flex-wrap: wrap; justify-content: center; margin-top: 2rem; +} + +body { + margin: 0; + background: #000000; + color: white; + font-family: system-ui, -apple-system, sans-serif; + overflow-x: hidden; +} + +#root { + min-height: 100vh; } \ No newline at end of file