0.9

assets/js/main.js

@@ -9,57 +9,77 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
     });
 });
 
-// Three.js 3D Visual
+// 3D Logo
-document.addEventListener('DOMContentLoaded', () => {
+function init3DLogo() {
-    const container = document.getElementById('3d-canvas-container');
+    const canvas = document.getElementById('3d-logo-canvas');
-    if (container) {
+    if (canvas && typeof THREE !== 'undefined') {
-        let scene, camera, renderer, cube;
+        let scene, camera, renderer, plane;
 
         function init() {
             // Scene
             scene = new THREE.Scene();
 
             // Camera
-            camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+            camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
             camera.position.z = 5;
 
             // Renderer
-            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: canvas });
-            renderer.setSize(container.clientWidth, container.clientHeight);
+            renderer.setSize(canvas.clientWidth, canvas.clientHeight);
-            container.appendChild(renderer.domElement);
 
-            // Cube
+            // Texture
-            const geometry = new THREE.BoxGeometry(2, 2, 2);
+            const textureLoader = new THREE.TextureLoader();
-            const material = new THREE.MeshStandardMaterial({ color: 0x8B5CF6, roughness: 0.5, metalness: 0.5 });
+            textureLoader.load('assets/pasted-20251022-215019-f7191fbf.png', function(texture) {
-            cube = new THREE.Mesh(geometry, material);
+                // Plane
-            scene.add(cube);
+                const geometry = new THREE.PlaneGeometry(5, 1.5);
+                const material = new THREE.MeshStandardMaterial({ map: texture, transparent: true, roughness: 0.4, metalness: 0.2 });
+                plane = new THREE.Mesh(geometry, material);
+                scene.add(plane);
+            });
 
             // Lights
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
             scene.add(ambientLight);
 
             const pointLight = new THREE.PointLight(0xffffff, 0.8);
-            pointLight.position.set(5, 5, 5);
+            pointLight.position.set(0, 0, 5);
             scene.add(pointLight);
 
             // Animation
             animate();
         }
 
+        let mouseX = 0, mouseY = 0;
+        let targetX = 0, targetY = 0;
+        const windowHalfX = window.innerWidth / 2;
+        const windowHalfY = window.innerHeight / 2;
+
+        function onDocumentMouseMove(event) {
+            mouseX = (event.clientX - windowHalfX) / 2;
+            mouseY = (event.clientY - windowHalfY) / 2;
+        }
+        document.addEventListener('mousemove', onDocumentMouseMove);
+
+
         function animate() {
             requestAnimationFrame(animate);
             
-            cube.rotation.x += 0.005;
+            targetX = mouseX * .001;
-            cube.rotation.y += 0.005;
+            targetY = mouseY * .001;
+
+            if (plane) {
+                plane.rotation.y += .05 * (targetX - plane.rotation.y);
+                plane.rotation.x += .05 * (targetY - plane.rotation.x);
+            }
 
             renderer.render(scene, camera);
         }
 
         function onWindowResize() {
-            if (container.clientWidth > 0 && container.clientHeight > 0) {
+            if (canvas.clientWidth > 0 && canvas.clientHeight > 0) {
-                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.aspect = canvas.clientWidth / canvas.clientHeight;
                 camera.updateProjectionMatrix();
-                renderer.setSize(container.clientWidth, container.clientHeight);
+                renderer.setSize(canvas.clientWidth, canvas.clientHeight);
             }
         }
 
@@ -67,4 +87,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
         init();
     }
-});
+}
+
+window.addEventListener('load', init3DLogo);

index.php

@@ -26,7 +26,7 @@
     <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
         <div class="container">
             <a class="navbar-brand" href="/">
-                <img src="assets/pasted-20251022-215019-f7191fbf.png" alt="Vision AI Logo" class="logo">
+                <canvas id="3d-logo-canvas" style="width: 150px; height: 50px;"></canvas>
             </a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
@@ -56,10 +56,7 @@
         </div>
     </header>
 
-    <!-- 3D Visual Section -->
+    
-    <section id="3d-visual" class="section-3d" style="height: 400px; overflow: hidden; position: relative; background-color: #f8f9fa;">
-        <div id="3d-canvas-container" style="width: 100%; height: 100%;"></div>
-    </section>
 
     <!-- The Problem Section -->
     <section id="problem" class="section">