Add varied 3D materials and fix WebXR polyfill errors

- Added 5 different material types for floating shapes (glass, metal, neon, hologram, crystal)
- Simplified material properties to avoid Three.js uniform errors
- Improved Canvas configuration for better WebXR compatibility
- Added proper fallback component for loading states
- Enhanced error handling for 3D rendering context

Author: foobar404

public/assets/resume-austin-michaud.pdf

@@ -28,11 +28,13 @@ const FloatingShapes = () => {
   const shapes = useMemo(() => {
     const shapeArray = []
     const shapeTypes = ['sphere', 'cube']
+    const materialTypes = ['glass', 'metal', 'neon', 'hologram', 'crystal']
 
     for (let i = 0; i < 200; i++) { // Doubled from 100 to 200 balls
       shapeArray.push({
         id: i,
         type: shapeTypes[Math.floor(Math.random() * shapeTypes.length)], // Random sphere or cube
+        materialType: materialTypes[Math.floor(Math.random() * materialTypes.length)], // Random material
         position: [
           (Math.random() - 0.5) * 30, // Even wider spread for more balls
           (Math.random() - 0.5) * 20, // Higher spread
@@ -71,8 +73,8 @@ const FloatingShapes = () => {
         child.position.y += shape.direction[1] * delta * 0.15 // Reduced from 0.3
         child.position.z += shape.direction[2] * delta * 0.2 // Reduced from 0.4
 
-        // Add upward movement based on scroll
-        child.position.y += scrollYRef.current * 0.01 * delta // Use ref instead of state
+        // Add upward movement based on scroll - reduced to 1/4 speed
+        child.position.y += scrollYRef.current * 0.0025 * delta // Reduced from 0.01 to 0.0025
 
         // Gentle sinusoidal movement for organic feel - reduced intensity
         child.position.x += Math.sin(time * 0.5) * delta * 0.1 // Reduced from 0.2
@@ -114,6 +116,68 @@ const FloatingShapes = () => {
       }
     }, [shape.type])
 
+    // Different material types for variety
+    const material = useMemo(() => {
+      switch (shape.materialType) {
+        case 'glass':
+          return (
+            <meshPhysicalMaterial
+              color={shape.color}
+              metalness={0.0}
+              roughness={0.0}
+              transmission={0.9}
+              transparent={true}
+              opacity={0.6}
+            />
+          )
+        case 'metal':
+          return (
+            <meshStandardMaterial
+              color={shape.color}
+              metalness={1.0}
+              roughness={0.2}
+            />
+          )
+        case 'neon':
+          return (
+            <meshBasicMaterial
+              color={shape.color}
+              transparent={true}
+              opacity={0.8}
+            />
+          )
+        case 'hologram':
+          return (
+            <meshPhongMaterial
+              color={shape.color}
+              transparent={true}
+              opacity={0.4}
+              shininess={100}
+            />
+          )
+        case 'crystal':
+          return (
+            <meshPhysicalMaterial
+              color={shape.color}
+              metalness={0.1}
+              roughness={0.0}
+              transparent={true}
+              opacity={0.7}
+            />
+          )
+        default:
+          return (
+            <meshStandardMaterial
+              color={shape.color}
+              metalness={0.2}
+              roughness={0.1}
+              transparent={true}
+              opacity={0.8}
+            />
+          )
+      }
+    }, [shape.materialType, shape.color])
+
     return (
       <mesh
         ref={meshRef}
@@ -122,17 +186,7 @@ const FloatingShapes = () => {
         scale={shape.scale}
       >
         {geometry}
-        <meshPhysicalMaterial
-          color={shape.color}
-          metalness={0.2}
-          roughness={0.1}
-          clearcoat={0.8}
-          clearcoatRoughness={0.1}
-          transparent
-          opacity={0.8}
-          emissive={shape.color}
-          emissiveIntensity={0.05}
-        />
+        {material}
       </mesh>
     )
   }

src/components/FloatingShapes.jsx

@@ -11,16 +11,18 @@ const Scene = () => {
   useCursorInteraction()
 
   return (
-    <MouseCameraController>
-      <GradientSkybox />
-      <SceneLighting />
-      
-      {/* Futuristic Platform */}
-      <Platform />
-      
-      {/* Minimal floating shapes */}
-      <FloatingShapes />
-    </MouseCameraController>
+    <>
+      <MouseCameraController>
+        <GradientSkybox />
+        <SceneLighting />
+        
+        {/* Futuristic Platform - Hidden for now */}
+        {/* <Platform /> */}
+        
+        {/* Minimal floating shapes */}
+        <FloatingShapes />
+      </MouseCameraController>
+    </>
   )
 }
 
@@ -46,14 +48,24 @@ const HeroSection = () => {
       {/* Navbar */}
       <nav className="navbar">
         <div className="navbar__content">
-          <a href="mailto:austinthemichaud@gmail.com" className="navbar__link">
-            austinthemichaud@gmail.com
-          </a>
-          <a href="https://www.linkedin.com/in/austin-michaud-9b25aa141/" target="_blank" rel="noopener noreferrer" className="navbar__link">
-            LinkedIn
-          </a>
-          <a href="https://github.com/foobar404" target="_blank" rel="noopener noreferrer" className="navbar__link">
-            GitHub
+          <div className="navbar__links">
+            <a href="mailto:austinthemichaud@gmail.com" className="navbar__link">
+              austinthemichaud@gmail.com
+            </a>
+            <a href="https://www.linkedin.com/in/austin-michaud-9b25aa141/" target="_blank" rel="noopener noreferrer" className="navbar__link">
+              LinkedIn
+            </a>
+            <a href="https://github.com/foobar404" target="_blank" rel="noopener noreferrer" className="navbar__link">
+              GitHub
+            </a>
+          </div>
+          <a href="/assets/resume.pdf" download="Austin_Michaud_Resume.pdf" className="navbar__resume-btn">
+            <span>Download Resume</span>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+              <polyline points="7,10 12,15 17,10"></polyline>
+              <line x1="12" y1="15" x2="12" y2="3"></line>
+            </svg>
           </a>
         </div>
       </nav>
@@ -68,11 +80,16 @@ const HeroSection = () => {
           gl={{ 
             antialias: false,
             alpha: true,
-            powerPreference: "default"
+            powerPreference: "high-performance",
+            preserveDrawingBuffer: false,
+            failIfMajorPerformanceCaveat: false
+          }}
+          dpr={[1, 2]}
+          onCreated={({ gl }) => {
+            gl.setClearColor('#000000', 0)
           }}
-          dpr={1}
         >
-          <Suspense fallback={null}>
+          <Suspense fallback={<LoadingFallback />}>
             <Scene />
           </Suspense>
         </Canvas>
@@ -105,14 +122,72 @@ const HeroSection = () => {
           <h1 className="hero__title">
             Austin Michaud
           </h1>
-          <div className="flex justify-center items-center mt-8">
+
+          
+          {/* Floating Tech Bubbles */}
+          <div className="tech-bubbles">
+            <div className="tech-bubble">
+              <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/blender/blender-original.svg" alt="Blender" />
+              <span className="tooltip">Blender - 3D modeling and animation for XR assets</span>
+            </div>
+            <div className="tech-bubble">
+              <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/godot/godot-original.svg" alt="Godot" />
+              <span className="tooltip">Godot Engine - Open-source game engine for XR development</span>
+            </div>
+            <div className="tech-bubble">
+              <svg width="32" height="32" viewBox="0 0 100 100" fill="none">
+                <circle cx="50" cy="50" r="50" fill="#DC2626"/>
+                <text x="50" y="70" textAnchor="middle" fontSize="45" fill="white" fontWeight="bold">XR</text>
+              </svg>
+              <span className="tooltip">WebXR - Web-based extended reality experiences</span>
+            </div>
+            <div className="tech-bubble">
+              <svg width="32" height="32" viewBox="0 0 100 100" fill="none">
+                <path d="M50 10L80 80H20L50 10Z" fill="#EF2D5E"/>
+                <path d="M35 65L50 35L65 65H35Z" fill="#FFF"/>
+              </svg>
+              <span className="tooltip">A-Frame - Web framework for building VR experiences</span>
+            </div>
+            <div className="tech-bubble">
+              <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/threejs/threejs-original.svg" alt="Three.js" />
+              <span className="tooltip">Three.js - JavaScript 3D library for interactive graphics</span>
+            </div>
+            <div className="tech-bubble">
+              <svg width="32" height="32" viewBox="0 0 100 100" fill="none">
+                <circle cx="30" cy="30" r="15" fill="#4A90E2" opacity="0.8"/>
+                <rect x="55" y="15" width="30" height="30" rx="5" fill="#7B68EE" opacity="0.8"/>
+                <polygon points="20,85 35,60 50,85" fill="#FF6B9D" opacity="0.8"/>
+                <path d="M65 85L85 65L85 85Z" fill="#50E3C2" opacity="0.8"/>
+              </svg>
+              <span className="tooltip">ShapesXR - Professional XR creation platform</span>
+            </div>
+            <div className="tech-bubble">
+              <svg width="32" height="32" viewBox="0 0 100 100" fill="none">
+                <defs>
+                  <linearGradient id="gravityGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <stop offset="0%" stopColor="#FF4081"/>
+                    <stop offset="50%" stopColor="#9C27B0"/>
+                    <stop offset="100%" stopColor="#3F51B5"/>
+                  </linearGradient>
+                </defs>
+                <circle cx="50" cy="50" r="45" fill="url(#gravityGrad)" opacity="0.9"/>
+                <path d="M30 30Q50 15 70 30Q70 50 70 70Q50 85 30 70Q30 50 30 30Z" fill="#FFF" opacity="0.9"/>
+                <circle cx="50" cy="40" r="8" fill="url(#gravityGrad)"/>
+                <path d="M40 55L50 65L60 55" stroke="url(#gravityGrad)" strokeWidth="3" fill="none" strokeLinecap="round"/>
+              </svg>
+              <span className="tooltip">Gravity Sketch - VR design and modeling tool for 3D creation</span>
+            </div>
+          </div>
+
+          <div className="flex justify-center items-center mt-14">
             <button 
               className="btn btn--secondary"
               onClick={handleScrollToNext}
             >
               Scroll
             </button>
           </div>
+
         </div>
       </section>
 

src/components/HeroSection.jsx

@@ -1,40 +1,67 @@
-import React, { useRef, useEffect, useState } from 'react'
-import { useFrame } from '@react-three/fiber'
-import { useMouseParallax } from '../utils/useInteractions'
+import React, { useRef, useEffect } from 'react'
+import { useFrame, useThree } from '@react-three/fiber'
 
 const MouseCameraController = ({ children }) => {
   const groupRef = useRef()
-  const mousePosition = useMouseParallax(1.2) // Increased intensity for more responsiveness
-  const [scrollY, setScrollY] = useState(0)
+  const { camera } = useThree()
+  const mouseRef = useRef({ x: 0, y: 0 })
+  const scrollYRef = useRef(0)
+  const targetRotation = useRef({ x: 0, y: 0 })
+  const currentRotation = useRef({ x: 0, y: 0 })
 
-  // Listen to scroll events
+  // Mouse tracking
   useEffect(() => {
+    const handleMouseMove = (event) => {
+      mouseRef.current.x = (event.clientX / window.innerWidth) * 2 - 1
+      mouseRef.current.y = -(event.clientY / window.innerHeight) * 2 + 1
+    }
+
+    window.addEventListener('mousemove', handleMouseMove, { passive: true })
+    return () => window.removeEventListener('mousemove', handleMouseMove)
+  }, [])
+
+  // Scroll tracking
+  useEffect(() => {
+    let ticking = false
+    
     const handleScroll = () => {
-      setScrollY(window.scrollY)
+      if (!ticking) {
+        requestAnimationFrame(() => {
+          scrollYRef.current = window.scrollY
+          ticking = false
+        })
+        ticking = true
+      }
     }
 
-    window.addEventListener('scroll', handleScroll)
+    window.addEventListener('scroll', handleScroll, { passive: true })
     return () => window.removeEventListener('scroll', handleScroll)
   }, [])
 
   useFrame((state, delta) => {
-    if (groupRef.current) {
-      // Much more responsive mouse movement
-      const targetX = mousePosition.x * 1.5 // Increased from 0.5 to 1.5
-      const targetY = mousePosition.y * 0.8 // Increased from 0.3 to 0.8
+    if (groupRef.current && camera) {
+      const mouse = mouseRef.current
+      const scrollInfluence = scrollYRef.current * 0.0002
+      
+      // Calculate target rotations based on mouse position
+      targetRotation.current.x = mouse.y * 0.3 // Vertical mouse movement
+      targetRotation.current.y = mouse.x * 0.5 // Horizontal mouse movement
 
-      // Reduced scroll influence for focus on mouse control
-      const scrollInfluence = scrollY * 0.0002 // Reduced from 0.0005
+      // Smooth interpolation for camera panning
+      const lerpSpeed = delta * 3
+      currentRotation.current.x += (targetRotation.current.x - currentRotation.current.x) * lerpSpeed
+      currentRotation.current.y += (targetRotation.current.y - currentRotation.current.y) * lerpSpeed
 
-      // Much faster, snappier interpolation
-      groupRef.current.rotation.y += (targetX - groupRef.current.rotation.y + scrollInfluence) * delta * 8 // Increased from 1.5 to 8
-      groupRef.current.rotation.x += (targetY - groupRef.current.rotation.x + scrollInfluence * 0.2) * delta * 8 // Increased from 1.5 to 8
+      // Apply rotation to the group (which contains all 3D objects)
+      groupRef.current.rotation.x = currentRotation.current.x + scrollInfluence * 0.1
+      groupRef.current.rotation.y = currentRotation.current.y + scrollInfluence
 
-      // Minimal continuous rotation so mouse control is primary
-      groupRef.current.rotation.y += delta * (0.01 - scrollInfluence * 0.005) // Reduced base rotation
+      // Add gentle continuous rotation
+      groupRef.current.rotation.y += delta * 0.008
 
-      // More responsive position shift
-      groupRef.current.position.z = Math.sin(scrollInfluence) * 0.3 // Reduced from 0.5
+      // Optional: Subtle camera position shift for additional parallax
+      camera.position.x = mouse.x * 0.2
+      camera.position.y = mouse.y * 0.1
     }
   })