[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":57,"_120":-5,"_121":-5,"_122":123},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","43ae5818-26df-11f0-a5b3-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport * as THREE from \"https://esm.sh/three@0.158.0\";\n\nconst projects = [\n {\n title: \"E-commerce Sales Prediction\",\n description: \"Developed a machine learning model to predict sales trends using historical e-commerce data, achieving 85% accuracy in forecasting.\",\n technologies: [\"Python\", \"Pandas\", \"Scikit-learn\", \"Matplotlib\"],\n githubLink: \"https://github.com/sumeshbamaniya/ecommerce-sales-prediction\",\n color: 0x3498db\n },\n {\n title: \"COVID-19 Data Analysis Dashboard\",\n description: \"Interactive visualization of pandemic statistics with geospatial analysis and predictive modeling of infection rates.\",\n technologies: [\"R\", \"Tableau\", \"Shiny\", \"Leaflet\"],\n githubLink: \"https://github.com/sumeshbamaniya/covid19-analysis-dashboard\",\n color: 0x2ecc71\n },\n {\n title: \"Customer Churn Prediction\",\n description: \"Machine learning model to predict customer churn for telecom industry using advanced feature engineering techniques.\",\n technologies: [\"Python\", \"TensorFlow\", \"Keras\", \"NumPy\"],\n githubLink: \"https://github.com/sumeshbamaniya/telecom-churn-prediction\",\n color: 0xe74c3c\n }\n];\n\nconst skills = [\n \"Python\", \"R\", \"SQL\", \n \"Machine Learning\", \"Data Visualization\", \n \"Statistical Analysis\", \"Tableau\", \n \"PowerBI\", \"Excel\", \n \"TensorFlow\", \"Scikit-learn\",\n \"Pandas\", \"NumPy\"\n];\n\nfunction ThreeBackground() {\n const mountRef = useRef(null);\n\n useEffect(() => {\n if (!mountRef.current) return;\n\n // Scene setup with enhanced configuration\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 const renderer = new THREE.WebGLRenderer({ \n alpha: true, \n antialias: true,\n powerPreference: \"high-performance\"\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 // Advanced Particle System with Dynamic Colors\n const particlesGeometry = new THREE.BufferGeometry();\n const particlesCount = 10000;\n const posArray = new Float32Array(particlesCount * 3);\n const colorArray = new Float32Array(particlesCount * 3);\n\n for (let i = 0; i < particlesCount * 3; i++) {\n posArray[i] = (Math.random() - 0.5) * 100;\n colorArray[i] = Math.random();\n }\n\n particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));\n particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorArray, 3));\n\n const particlesMaterial = new THREE.PointsMaterial({\n size: 0.05,\n vertexColors: true,\n blending: THREE.AdditiveBlending,\n transparent: true\n });\n\n const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);\n scene.add(particlesMesh);\n\n // Dynamic Geometric Shapes\n const geometryGroup = new THREE.Group();\n scene.add(geometryGroup);\n\n const shapes = projects.map((project, index) => {\n const geometry = new THREE.IcosahedronGeometry(\n Math.random() * 2 + 1, \n 2\n );\n const material = new THREE.MeshPhongMaterial({ \n color: project.color, \n wireframe: Math.random() > 0.5,\n transparent: true,\n opacity: 0.7\n });\n const mesh = new THREE.Mesh(geometry, material);\n \n const angle = (index / projects.length) * Math.PI * 2;\n mesh.position.set(\n Math.cos(angle) * 15, \n Math.sin(angle) * 15, \n Math.random() * 10 - 5\n );\n \n geometryGroup.add(mesh);\n return mesh;\n });\n\n // Lighting with Multiple Sources\n const ambientLight = new THREE.AmbientLight(0x404040, 2);\n scene.add(ambientLight);\n\n const colors = [0xff6b6b, 0x4ecdc4, 0x45b7d1, 0xf9d56e];\n colors.forEach((color, index) => {\n const pointLight = new THREE.PointLight(color, 1, 50);\n pointLight.position.set(\n Math.cos(index * Math.PI / 2) * 10,\n Math.sin(index * Math.PI / 2) * 10,\n 5\n );\n scene.add(pointLight);\n });\n\n camera.position.z = 30;\n\n // Advanced Animation Loop\n const clock = new THREE.Clock();\n const animate = () => {\n requestAnimationFrame(animate);\n\n const elapsedTime = clock.getElapsedTime();\n\n // Rotate and move geometric shapes\n shapes.forEach((shape, index) => {\n shape.rotation.x += 0.01 * (index + 1);\n shape.rotation.y += 0.005 * (index + 1);\n shape.position.z = Math.sin(elapsedTime + index) * 5;\n });\n\n // Particle system dynamic movement\n particlesMesh.rotation.y += 0.0005;\n particlesMesh.rotation.x += 0.0002;\n\n // Color gradient transformation\n scene.background = new THREE.Color(\n 0.5 + 0.5 * Math.sin(elapsedTime * 0.5),\n 0.5 + 0.5 * Math.sin(elapsedTime * 0.3),\n 0.5 + 0.5 * Math.cos(elapsedTime * 0.2)\n );\n\n renderer.render(scene, camera);\n };\n\n animate();\n\n // Responsive Handling\n const handleResize = () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n };\n\n window.addEventListener('resize', handleResize);\n\n // Cleanup\n return () => {\n window.removeEventListener('resize', handleResize);\n mountRef.current?.removeChild(renderer.domElement);\n };\n }, []);\n\n return

;\n}\n\n// Rest of the code remains the same as in the previous implementation\n// (ProjectCard, App, client, server, and CSS remain unchanged)","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, ErrorInfo } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport * as THREE from \"https://esm.sh/three@0.158.0\";\n\n// Error Boundary Component for catching rendering errors\nclass ErrorBoundary extends React.Component<{children: React.ReactNode}, { hasError: boolean, error?: Error }> {\n constructor(props: {children: React.ReactNode}) {\n super(props);\n this.state = { hasError: false };\n }\n\n static getDerivedStateFromError(error: Error) {\n return { hasError: true, error };\n }\n\n componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n console.error(\"Uncaught error:\", error, errorInfo);\n }\n\n render() {\n if (this.state.hasError) {\n return (\n

🚨 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`;","createdAt",["D",1741115289446],"branchVersion","branchId","43ab82e6-26df-11f0-a5b3-569c3dd06744","id","43aaf1f0-26df-11f0-a5b3-569c3dd06744","dataAnalyticsPortfolio",["D",1746140080330],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","2e469ae0-f925-11ef-81a4-2dba13ab5f24","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","8a4f2d7c-abe4-4fcb-8ce3-bdf7be27c188","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Sumeshbamaniya","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydHJabnh2bm9CTmJyR2poZTdMYWRFUElnRWIifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":148,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":149,"_79":150,"_81":151,"_83":25},"tree",[143],"files",[143],"counts",{"_132":61,"_133":134,"_135":61,"_136":137,"_138":139},"contents",[124],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":57,"_38":128,"_13":129,"_33":34,"_35":37,"_24":25,"_130":-5,"_27":131},"43d2a380-26df-11f0-a5b3-569c3dd06744","parentId","latest",["D",1741115289446],6,"label",[28],"pulls","branches",1,"forks","envVars",{"_140":61,"_142":61},"connections",{"_140":61,"_141":61},"count","unfilledCount","emptyCount",{"_43":125,"_32":28,"_30":31,"_126":-5,"_41":42,"_40":14,"_127":57,"_38":144,"_13":129,"_33":34,"_35":37,"_24":25,"_130":-5,"_145":146,"_27":147},["D",1741115289446],"children",[],[28],["D",1746140080330],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":14,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_77":-5,"_121":185,"_186":187,"_188":189,"_190":25,"_191":25,"_192":25,"_193":57,"_194":-5,"_195":-7,"_196":-7,"_197":61,"_198":25,"_199":25,"_200":-5,"_201":25,"_202":25,"_203":25,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":84,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v7