diff --git a/index.html b/index.html
index e59f257..c6b4151 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,20 @@
             50% { opacity: 0; }
         }
 
+        /* Performance optimization for 3D canvases */
+        canvas {
+            display: block;
+            will-change: transform;
+        }
+
+        /* Ensure 3D canvas containers don't cause layout shift */
+        .three-canvas-project,
+        .three-canvas-webdemo,
+        .three-canvas-skill {
+            width: 100%;
+            height: 100%;
+        }
+
         /*
             NEW: Mobile Menu Transitions
             (The pointer-events rules are now removed, as JS will use 'display: none')
@@ -141,6 +155,8 @@
     <main>
         <!-- Hero Section -->
         <section id="home" class="min-h-screen flex justify-center items-center relative overflow-hidden bg-gradient-to-br from-black to-gray-950">
+            <!-- 3D Background Canvas -->
+            <div id="hero-3d-background" class="absolute inset-0 z-0"></div>
             <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
                 <div class="py-12 text-center bg-black/20 backdrop-blur-xl rounded-2xl border border-white/10 shadow-2xl p-8 md:p-12">
                     <h1 class="text-5xl md:text-7xl font-extrabold">
@@ -206,7 +222,11 @@ <h2 class="text-4xl font-bold text-center mb-16 text-gradient">Engineering Proje
                 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
                     
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
-                        <div class="text-7xl p-8 bg-gray-800/80 text-center">🏆</div>
+                        <!-- 3D Thumbnail -->
+                        <div class="h-32 bg-gray-800/80 relative">
+                            <div class="three-canvas-project absolute inset-0" data-geometry="torus" data-color="blue"></div>
+                            <div class="text-7xl p-8 text-center absolute inset-0 flex items-center justify-center pointer-events-none">🏆</div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3">ASME IMECE BrainBolt 2025</h3>
                             <p class="text-gray-400 mb-4">
@@ -226,7 +246,11 @@ <h3 class="text-2xl font-semibold mb-3">ASME IMECE BrainBolt 2025</h3>
                     </div>
 
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-pink-500/30 hover:border-pink-500 transform hover:-translate-y-2">
-                        <div class="text-7xl p-8 bg-gray-800/80 text-center">🚣</div>
+                        <!-- 3D Thumbnail -->
+                        <div class="h-32 bg-gray-800/80 relative">
+                            <div class="three-canvas-project absolute inset-0" data-geometry="sphere" data-color="pink"></div>
+                            <div class="text-7xl p-8 text-center absolute inset-0 flex items-center justify-center pointer-events-none">🚣</div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3">Kayak Paddle Optimization</h3>
                             <p class="text-gray-400 mb-4">
@@ -246,7 +270,11 @@ <h3 class="text-2xl font-semibold mb-3">Kayak Paddle Optimization</h3>
                     </div>
 
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
-                        <div class="text-7xl p-8 bg-gray-800/80 text-center">🤖</div>
+                        <!-- 3D Thumbnail -->
+                        <div class="h-32 bg-gray-800/80 relative">
+                            <div class="three-canvas-project absolute inset-0" data-geometry="robot" data-color="blue"></div>
+                            <div class="text-7xl p-8 text-center absolute inset-0 flex items-center justify-center pointer-events-none">🤖</div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3">Glass Cleaning Robot</h3>
                             <p class="text-gray-400 mb-4">
@@ -276,6 +304,10 @@ <h2 class="text-4xl font-bold text-center mb-16 text-gradient">Web Demos & Mini-
                 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
 
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 bg-gray-800/80 relative">
+                            <div class="three-canvas-webdemo absolute inset-0" data-geometry="cube" data-color="blue"></div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3 text-blue-400">Pitchathon Site</h3>
                             <p class="text-gray-400 mb-6 h-16">A simple, clean website for a pitching competition. Built with HTML & CSS.</p>
@@ -287,6 +319,10 @@ <h3 class="text-2xl font-semibold mb-3 text-blue-400">Pitchathon Site</h3>
                     </div>
                     
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-pink-500/30 hover:border-pink-500 transform hover:-translate-y-2">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 bg-gray-800/80 relative">
+                            <div class="three-canvas-webdemo absolute inset-0" data-geometry="cylinder" data-color="pink"></div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3 text-pink-400">Job Application Form</h3>
                             <p class="text-gray-400 mb-6 h-16">A responsive job application form layout. A pure HTML & CSS exercise.</p>
@@ -298,6 +334,10 @@ <h3 class="text-2xl font-semibold mb-3 text-pink-400">Job Application Form</h3>
                     </div>
 
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 bg-gray-800/80 relative">
+                            <div class="three-canvas-webdemo absolute inset-0" data-geometry="torus" data-color="blue"></div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3 text-blue-400">Drestein</h3>
                             <p class="text-gray-400 mb-6 h-16">A landing page concept. (Feel free to update this description!)</p>
@@ -309,6 +349,10 @@ <h3 class="text-2xl font-semibold mb-3 text-blue-400">Drestein</h3>
                     </div>
 
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 bg-gray-800/80 relative">
+                            <div class="three-canvas-webdemo absolute inset-0" data-geometry="sphere" data-color="blue"></div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3 text-blue-400">SIH Campus 2</h3>
                             <p class="text-gray-400 mb-6 h-16">A website for the Smart India Hackathon campus event.</p>
@@ -320,6 +364,10 @@ <h3 class="text-2xl font-semibold mb-3 text-blue-400">SIH Campus 2</h3>
                     </div>
                     
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-pink-500/30 hover:border-pink-500 transform hover:-translate-y-2">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 bg-gray-800/80 relative">
+                            <div class="three-canvas-webdemo absolute inset-0" data-geometry="octahedron" data-color="pink"></div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3 text-pink-400">SIH Cam</h3>
                             <p class="text-gray-400 mb-6 h-16">Another project related to the Smart India Hackathon.</p>
@@ -331,6 +379,10 @@ <h3 class="text-2xl font-semibold mb-3 text-pink-400">SIH Cam</h3>
                     </div>
 
                     <div class="bg-gray-900/70 backdrop-blur-sm rounded-lg overflow-hidden shadow-lg border border-gray-800 transition duration-300 hover:shadow-blue-500/30 hover:border-blue-500 transform hover:-translate-y-2">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 bg-gray-800/80 relative">
+                            <div class="three-canvas-webdemo absolute inset-0" data-geometry="dodecahedron" data-color="blue"></div>
+                        </div>
                         <div class="p-6">
                             <h3 class="text-2xl font-semibold mb-3 text-blue-400">Robot Project Page</h3>
                             <p class="text-gray-400 mb-6 h-16">A simple HTML page for the Smart Glass Cleaning Robot project.</p>
@@ -367,6 +419,10 @@ <h2 class="text-4xl font-bold text-center mb-16 text-gradient">Technical Skills<
                 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
 
                     <div class="bg-gray-900 p-8 rounded-xl border border-gray-800 shadow-lg">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 mb-6 bg-gray-800/50 rounded-lg relative overflow-hidden">
+                            <div class="three-canvas-skill absolute inset-0" data-geometry="gear" data-color="blue"></div>
+                        </div>
                         <h3 class="text-2xl font-semibold text-blue-400 mb-6">Simulation & Analysis</h3>
                         <div class="grid grid-cols-2 gap-4">
                             <div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg border border-gray-700 hover:bg-gray-700 hover:border-blue-500 transform hover:scale-105 transition-all duration-300">
@@ -398,6 +454,10 @@ <h3 class="text-2xl font-semibold text-blue-400 mb-6">Simulation & Analysis</h3>
                     </div>
 
                     <div class="bg-gray-900 p-8 rounded-xl border border-gray-800 shadow-lg">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 mb-6 bg-gray-800/50 rounded-lg relative overflow-hidden">
+                            <div class="three-canvas-skill absolute inset-0" data-geometry="torusknot" data-color="pink"></div>
+                        </div>
                         <h3 class="text-2xl font-semibold text-pink-400 mb-6">Design & Manufacturing</h3>
                         <div class="grid grid-cols-2 gap-4">
                             <div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg border border-gray-700 hover:bg-gray-700 hover:border-pink-500 transform hover:scale-105 transition-all duration-300">
@@ -428,6 +488,10 @@ <h3 class="text-2xl font-semibold text-pink-400 mb-6">Design & Manufacturing</h3
                     </div>
 
                     <div class="bg-gray-900 p-8 rounded-xl border border-gray-800 shadow-lg">
+                        <!-- 3D Thumbnail -->
+                        <div class="h-24 mb-6 bg-gray-800/50 rounded-lg relative overflow-hidden">
+                            <div class="three-canvas-skill absolute inset-0" data-geometry="robot" data-color="blue"></div>
+                        </div>
                         <h3 class="text-2xl font-semibold text-blue-400 mb-6">Automation & Robotics</h3>
                         <div class="grid grid-cols-2 gap-4">
                             <div class="flex flex-col items-center justify-center p-4 bg-gray-800 rounded-lg border border-gray-700 hover:bg-gray-700 hover:border-blue-500 transform hover:scale-105 transition-all duration-300">
@@ -495,6 +559,97 @@ <h3 class="text-2xl font-semibold text-gray-100">Let's work together</h3>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             
+            // --- Hero Background 3D Animation ---
+            function initHeroBackground() {
+                const heroContainer = document.getElementById('hero-3d-background');
+                if (!heroContainer) {
+                    console.error("Hero 3D background container not found");
+                    return;
+                }
+
+                // Scene
+                const heroScene = new THREE.Scene();
+
+                // Camera
+                const heroCamera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+                heroCamera.position.z = 30;
+
+                // Renderer
+                const heroRenderer = new THREE.WebGLRenderer({ 
+                    antialias: true, 
+                    alpha: true,
+                    powerPreference: 'high-performance'
+                });
+                heroRenderer.setSize(window.innerWidth, window.innerHeight);
+                heroRenderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Limit pixel ratio for performance
+                heroContainer.appendChild(heroRenderer.domElement);
+
+                // Create multiple small icosahedrons scattered in space
+                const icosahedrons = [];
+                const numShapes = 15; // Number of icosahedrons
+
+                for (let i = 0; i < numShapes; i++) {
+                    const geometry = new THREE.IcosahedronGeometry(1.5, 0);
+                    
+                    // Alternate between pink and blue with wireframe
+                    const color = i % 2 === 0 ? 0xec4899 : 0x3b82f6;
+                    const material = new THREE.MeshBasicMaterial({
+                        color: color,
+                        wireframe: true,
+                        transparent: true,
+                        opacity: 0.15 // Very subtle
+                    });
+                    
+                    const mesh = new THREE.Mesh(geometry, material);
+                    
+                    // Random position
+                    mesh.position.x = (Math.random() - 0.5) * 60;
+                    mesh.position.y = (Math.random() - 0.5) * 40;
+                    mesh.position.z = (Math.random() - 0.5) * 40;
+                    
+                    // Random rotation speed
+                    mesh.userData.rotationSpeed = {
+                        x: (Math.random() - 0.5) * 0.01,
+                        y: (Math.random() - 0.5) * 0.01,
+                        z: (Math.random() - 0.5) * 0.01
+                    };
+                    
+                    heroScene.add(mesh);
+                    icosahedrons.push(mesh);
+                }
+
+                // Animation loop
+                let isVisible = true;
+                const observer = new IntersectionObserver((entries) => {
+                    isVisible = entries[0].isIntersecting;
+                }, { threshold: 0.1 });
+                observer.observe(heroContainer);
+
+                function animateHero() {
+                    requestAnimationFrame(animateHero);
+
+                    if (!isVisible) return; // Skip rendering if not visible
+
+                    // Rotate each icosahedron
+                    icosahedrons.forEach(mesh => {
+                        mesh.rotation.x += mesh.userData.rotationSpeed.x;
+                        mesh.rotation.y += mesh.userData.rotationSpeed.y;
+                        mesh.rotation.z += mesh.userData.rotationSpeed.z;
+                    });
+
+                    heroRenderer.render(heroScene, heroCamera);
+                }
+
+                // Handle window resize
+                window.addEventListener('resize', () => {
+                    heroCamera.aspect = window.innerWidth / window.innerHeight;
+                    heroCamera.updateProjectionMatrix();
+                    heroRenderer.setSize(window.innerWidth, window.innerHeight);
+                });
+
+                animateHero();
+            }
+
             // --- About Me Canvas ---
             function initAboutCanvas() {
                 const aboutContainer = document.getElementById('three-canvas-about');
@@ -547,23 +702,55 @@ <h3 class="text-2xl font-semibold text-gray-100">Let's work together</h3>
                 let mouseRotationX = 0;
                 let mouseRotationY = 0;
                 let autoRotationY = 0;  // For constant auto-rotation
+                let isDragging = false;
+                let previousMousePosition = { x: 0, y: 0 };
 
-                // --- Mouse Move Listener for "following" effect ---
-                function onMouseMove(event) {
+                // --- Mouse Move/Touch Move for both following and dragging ---
+                function onPointerMove(event) {
                     if (aboutContainer) {
                         const rect = aboutContainer.getBoundingClientRect();
+                        const clientX = event.touches ? event.touches[0].clientX : event.clientX;
+                        const clientY = event.touches ? event.touches[0].clientY : event.clientY;
+                        
                         // Calculate normalized device coordinates (-1 to +1)
-                        mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
-                        mouse.y = -((event.clientY - rect.top) / rect.height) * 2 - 1;
+                        mouse.x = ((clientX - rect.left) / rect.width) * 2 - 1;
+                        mouse.y = -((clientY - rect.top) / rect.height) * 2 - 1;
 
-                        // Set target rotation based on mouse position
-                        mouseRotationX = mouse.y * 0.3;
-                        mouseRotationY = mouse.x * 0.3;
+                        if (isDragging) {
+                            // Dragging mode
+                            const deltaX = clientX - previousMousePosition.x;
+                            const deltaY = clientY - previousMousePosition.y;
+                            
+                            // Update rotation based on drag
+                            mouseRotationY += deltaX * 0.01;
+                            mouseRotationX += deltaY * 0.01;
+                            
+                            previousMousePosition = { x: clientX, y: clientY };
+                        } else {
+                            // Following mode (when not dragging)
+                            mouseRotationX = mouse.y * 0.3;
+                            mouseRotationY = mouse.x * 0.3;
+                        }
                     }
                 }
 
+                // --- Mouse Down/Touch Start for dragging ---
+                function onPointerDown(event) {
+                    isDragging = true;
+                    const clientX = event.touches ? event.touches[0].clientX : event.clientX;
+                    const clientY = event.touches ? event.touches[0].clientY : event.clientY;
+                    previousMousePosition = { x: clientX, y: clientY };
+                }
+
+                // --- Mouse Up/Touch End ---
+                function onPointerUp() {
+                    isDragging = false;
+                }
+
                 // --- Click Listener for color change ---
                 function onClick() {
+                    if (isDragging) return; // Don't trigger click if we were dragging
+                    
                     // Update the picking ray with the camera and mouse position
                     raycaster.setFromCamera(mouse, aboutCamera);
 
@@ -576,7 +763,7 @@ <h3 class="text-2xl font-semibold text-gray-100">Let's work together</h3>
                                                                         
                         if (currentWireColor === 0xec4899) { // If pink
                             aboutMesh.material.color.set(0x3b82f6); // Set wire to blue
-                            aboutPoints.material.color.set(0xfec4899); // Set points to pink
+                            aboutPoints.material.color.set(0xec4899); // Set points to pink
                         } else { // If blue
                             aboutMesh.material.color.set(0xec4899); // Set wire to pink
                             aboutPoints.material.color.set(0x3b82f6); // Set points to blue
@@ -585,7 +772,24 @@ <h3 class="text-2xl font-semibold text-gray-100">Let's work together</h3>
                 }
                 
                 // Add event listeners to the canvas container
-                aboutContainer.addEventListener('mousemove', onMouseMove);
+                aboutContainer.addEventListener('mousemove', onPointerMove);
+                aboutContainer.addEventListener('mousedown', onPointerDown);
+                aboutContainer.addEventListener('mouseup', onPointerUp);
+                aboutContainer.addEventListener('mouseleave', onPointerUp);
+                
+                // Touch events
+                aboutContainer.addEventListener('touchstart', (e) => {
+                    onPointerDown(e);
+                    if (isDragging) e.preventDefault();
+                }, { passive: false });
+                aboutContainer.addEventListener('touchmove', (e) => {
+                    if (isDragging) {
+                        e.preventDefault();
+                        onPointerMove(e);
+                    }
+                }, { passive: false });
+                aboutContainer.addEventListener('touchend', onPointerUp);
+                
                 aboutContainer.addEventListener('click', onClick);
 
                 // Animation loop
@@ -620,6 +824,260 @@ <h3 class="text-2xl font-semibold text-gray-100">Let's work together</h3>
                 animateAbout();
             }
 
+            // --- Generic 3D Canvas Initialization Function ---
+            function initCardCanvas(container, geometryType, colorType) {
+                if (!container) return;
+
+                const scene = new THREE.Scene();
+                const camera = new THREE.PerspectiveCamera(50, container.clientWidth / container.clientHeight, 0.1, 1000);
+                camera.position.z = 5;
+
+                const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+                renderer.setSize(container.clientWidth, container.clientHeight);
+                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+                container.appendChild(renderer.domElement);
+
+                // Create geometry based on type
+                let geometry;
+                switch(geometryType) {
+                    case 'cube':
+                        geometry = new THREE.BoxGeometry(2, 2, 2);
+                        break;
+                    case 'sphere':
+                        geometry = new THREE.SphereGeometry(1.5, 32, 32);
+                        break;
+                    case 'torus':
+                        geometry = new THREE.TorusGeometry(1.2, 0.4, 16, 100);
+                        break;
+                    case 'cylinder':
+                        geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
+                        break;
+                    case 'octahedron':
+                        geometry = new THREE.OctahedronGeometry(1.5);
+                        break;
+                    case 'dodecahedron':
+                        geometry = new THREE.DodecahedronGeometry(1.5);
+                        break;
+                    case 'torusknot':
+                        geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16);
+                        break;
+                    case 'gear':
+                        // Create a gear-like shape using a cylinder with teeth
+                        geometry = new THREE.CylinderGeometry(1.5, 1.5, 0.5, 8);
+                        break;
+                    case 'robot':
+                        // Create a simple robot shape using a group
+                        geometry = new THREE.BoxGeometry(1.5, 2, 1.5); // Body
+                        break;
+                    default:
+                        geometry = new THREE.IcosahedronGeometry(1.5);
+                }
+
+                // Determine color
+                const baseColor = colorType === 'pink' ? 0xec4899 : 0x3b82f6;
+                const altColor = colorType === 'pink' ? 0x3b82f6 : 0xec4899;
+
+                // Create materials
+                const material = new THREE.MeshBasicMaterial({
+                    color: baseColor,
+                    wireframe: true,
+                    transparent: true,
+                    opacity: 0.8
+                });
+
+                const mesh = new THREE.Mesh(geometry, material);
+                
+                // For robot, add additional parts
+                if (geometryType === 'robot') {
+                    const headGeometry = new THREE.BoxGeometry(1, 1, 1);
+                    const headMaterial = new THREE.MeshBasicMaterial({
+                        color: baseColor,
+                        wireframe: true,
+                        transparent: true,
+                        opacity: 0.8
+                    });
+                    const head = new THREE.Mesh(headGeometry, headMaterial);
+                    head.position.y = 1.5;
+                    mesh.add(head);
+                    
+                    // Add antenna
+                    const antennaGeometry = new THREE.CylinderGeometry(0.05, 0.05, 0.5, 8);
+                    const antenna = new THREE.Mesh(antennaGeometry, headMaterial);
+                    antenna.position.y = 0.5;
+                    head.add(antenna);
+                }
+
+                scene.add(mesh);
+
+                // Interaction variables
+                let isHovering = false;
+                let isDragging = false;
+                let previousPointer = { x: 0, y: 0 };
+                let targetRotationX = 0;
+                let targetRotationY = 0;
+                let baseRotationSpeed = 0.005;
+                let currentRotationSpeed = baseRotationSpeed;
+                let targetScale = 1;
+                let currentScale = 1;
+                let bounceOffset = 0;
+                let isBouncing = false;
+
+                // Mouse/Touch event handlers
+                function onPointerEnter() {
+                    isHovering = true;
+                    targetScale = 1.1;
+                    currentRotationSpeed = baseRotationSpeed * 2;
+                }
+
+                function onPointerLeave() {
+                    isHovering = false;
+                    if (!isDragging) {
+                        targetScale = 1;
+                        currentRotationSpeed = baseRotationSpeed;
+                    }
+                }
+
+                function onPointerDown(event) {
+                    isDragging = true;
+                    const clientX = event.touches ? event.touches[0].clientX : event.clientX;
+                    const clientY = event.touches ? event.touches[0].clientY : event.clientY;
+                    previousPointer = { x: clientX, y: clientY };
+                    event.preventDefault();
+                }
+
+                function onPointerMove(event) {
+                    if (isDragging) {
+                        const clientX = event.touches ? event.touches[0].clientX : event.clientX;
+                        const clientY = event.touches ? event.touches[0].clientY : event.clientY;
+                        
+                        const deltaX = clientX - previousPointer.x;
+                        const deltaY = clientY - previousPointer.y;
+                        
+                        targetRotationY += deltaX * 0.01;
+                        targetRotationX += deltaY * 0.01;
+                        
+                        previousPointer = { x: clientX, y: clientY };
+                        event.preventDefault();
+                    }
+                }
+
+                function onPointerUp() {
+                    isDragging = false;
+                    if (!isHovering) {
+                        targetScale = 1;
+                        currentRotationSpeed = baseRotationSpeed;
+                    }
+                }
+
+                function onClick() {
+                    // Toggle color
+                    const currentColor = mesh.material.color.getHex();
+                    mesh.material.color.set(currentColor === baseColor ? altColor : baseColor);
+                    
+                    // Trigger bounce effect
+                    isBouncing = true;
+                    bounceOffset = 0;
+                }
+
+                // Add event listeners
+                container.addEventListener('mouseenter', onPointerEnter);
+                container.addEventListener('mouseleave', onPointerLeave);
+                container.addEventListener('mousedown', onPointerDown);
+                container.addEventListener('mousemove', onPointerMove);
+                container.addEventListener('mouseup', onPointerUp);
+                container.addEventListener('click', onClick);
+                
+                // Touch events
+                container.addEventListener('touchstart', (e) => {
+                    onPointerDown(e);
+                    if (isDragging) e.preventDefault();
+                }, { passive: false });
+                container.addEventListener('touchmove', (e) => {
+                    if (isDragging) {
+                        e.preventDefault();
+                        onPointerMove(e);
+                    }
+                }, { passive: false });
+                container.addEventListener('touchend', onPointerUp);
+
+                // Animation loop
+                let isVisible = true;
+                const visibilityObserver = new IntersectionObserver((entries) => {
+                    isVisible = entries[0].isIntersecting;
+                }, { threshold: 0.1 });
+                visibilityObserver.observe(container);
+
+                function animate() {
+                    requestAnimationFrame(animate);
+
+                    if (!isVisible) return; // Skip rendering if not visible
+
+                    // Auto-rotation
+                    targetRotationY += currentRotationSpeed;
+
+                    // Smooth rotation interpolation
+                    mesh.rotation.x += (targetRotationX - mesh.rotation.x) * 0.1;
+                    mesh.rotation.y += (targetRotationY - mesh.rotation.y) * 0.1;
+
+                    // Smooth scale interpolation
+                    currentScale += (targetScale - currentScale) * 0.1;
+                    mesh.scale.set(currentScale, currentScale, currentScale);
+
+                    // Bounce effect
+                    if (isBouncing) {
+                        bounceOffset += 0.15;
+                        const bounce = Math.abs(Math.sin(bounceOffset)) * 0.3;
+                        mesh.position.y = bounce;
+                        
+                        if (bounceOffset > Math.PI * 2) {
+                            isBouncing = false;
+                            mesh.position.y = 0;
+                        }
+                    }
+
+                    renderer.render(scene, camera);
+                }
+
+                // Handle resize
+                const resizeObserver = new ResizeObserver(() => {
+                    if (container.clientWidth > 0 && container.clientHeight > 0) {
+                        camera.aspect = container.clientWidth / container.clientHeight;
+                        camera.updateProjectionMatrix();
+                        renderer.setSize(container.clientWidth, container.clientHeight);
+                    }
+                });
+                resizeObserver.observe(container);
+
+                animate();
+            }
+
+            // --- Initialize all card canvases ---
+            function initAllCardCanvases() {
+                // Project cards
+                const projectCanvases = document.querySelectorAll('.three-canvas-project');
+                projectCanvases.forEach(canvas => {
+                    const geometry = canvas.getAttribute('data-geometry');
+                    const color = canvas.getAttribute('data-color');
+                    initCardCanvas(canvas, geometry, color);
+                });
+
+                // Web demo cards
+                const webdemoCanvases = document.querySelectorAll('.three-canvas-webdemo');
+                webdemoCanvases.forEach(canvas => {
+                    const geometry = canvas.getAttribute('data-geometry');
+                    const color = canvas.getAttribute('data-color');
+                    initCardCanvas(canvas, geometry, color);
+                });
+
+                // Skills cards
+                const skillCanvases = document.querySelectorAll('.three-canvas-skill');
+                skillCanvases.forEach(canvas => {
+                    const geometry = canvas.getAttribute('data-geometry');
+                    const color = canvas.getAttribute('data-color');
+                    initCardCanvas(canvas, geometry, color);
+                });
+            }
+
             // --- Typing Animation for Hero Section ---
             function initTypingAnimation() {
                 const typingElement = document.getElementById('typing-text');
@@ -729,7 +1187,9 @@ <h3 class="text-2xl font-semibold text-gray-100">Let's work together</h3>
             }
 
             // Start everything
+            initHeroBackground(); // Initialize hero background animation
             initAboutCanvas(); // Initialize the new canvas
+            initAllCardCanvases(); // Initialize all card canvases (projects, web demos, skills)
             initTypingAnimation(); // Start the typing effect
             initMobileMenu(); // Initialize the mobile menu
         });