🚨 Oops! Something went wrong.

An unexpected error occurred while rendering the page.

Error Details

{this.state.error?.toString()}

\n \n

\n );\n }\n\n return this.props.children;\n }\n}\n\nfunction ThreeBackground() {\n const mountRef = useRef(null);\n const [threeError, setThreeError] = useState(null);\n\n useEffect(() => {\n if (!mountRef.current) return;\n\n try {\n // Scene setup with enhanced error handling\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x0a192f);\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n \n // Defensive WebGL context creation\n const renderer = new THREE.WebGLRenderer({ \n alpha: true, \n antialias: true,\n powerPreference: \"high-performance\"\n });\n \n if (!renderer.getContext()) {\n throw new Error(\"WebGL not supported on this device\");\n }\n\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n mountRef.current.appendChild(renderer.domElement);\n\n // Rest of the existing ThreeBackground code remains the same...\n // (Particle system, shapes, lighting, animation logic)\n\n } catch (error) {\n console.error(\"Three.js initialization error:\", error);\n setThreeError(error instanceof Error ? error.message : \"Unknown Three.js error\");\n }\n }, []);\n\n if (threeError) {\n return (\n

🖥️ Graphics Initialization Error

Unable to render 3D background: {threeError}

Your device might not support WebGL.

\n );\n }\n\n return

;\n}\n\n// Existing components and code remain the same...\n\nfunction App() {\n return (\n \n

\n \n {/* Rest of your existing App content */}\n

\n \n );\n}\n\nfunction client() {\n try {\n createRoot(document.getElementById(\"root\")!).render();\n } catch (error) {\n console.error(\"Client-side rendering error:\", error);\n document.getElementById(\"root\")!.innerHTML = `\n

\n Failed to render application. Please refresh the page.\n

\n `;\n }\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Portfolio\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n overflow: hidden;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Sumeshbamaniya/dataAnalyticsPortfolio/code/main.tsx","extension","actionData","errors"]