سایت کاملا سه بعدی باشه

index.html

@@ -28,8 +28,8 @@
 
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <!-- Hero Section -->
-        <section class="flex flex-col md:flex-row items-center gap-12 mb-24">
-            <div class="md:w-1/2">
+        <section class="flex flex-col md:flex-row items-center gap-12 mb-24 floating-3d">
+<div class="md:w-1/2">
                 <h1 class="text-4xl md:text-5xl font-bold mb-6 text-primary">Hi, I'm <span class="text-secondary">Alex</span></h1>
                 <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-gray-700">Frontend Developer & UI Designer</h2>
                 <p class="text-lg text-gray-600 mb-8 leading-relaxed">I create beautiful, functional digital experiences with a focus on user-centered design and clean code.</p>
@@ -40,8 +40,8 @@
             </div>
             <div class="md:w-1/2">
                 <div class="relative">
-                    <div class="w-full h-96 bg-gradient-to-r from-primary to-secondary rounded-2xl shadow-xl overflow-hidden">
-                        <img src="http://static.photos/technology/640x360/42" alt="Profile" class="w-full h-full object-cover">
+                <div class="w-full h-96 bg-gradient-to-r from-primary to-secondary rounded-2xl shadow-xl overflow-hidden parallax-bg">
+<img src="http://static.photos/technology/640x360/42" alt="Profile" class="w-full h-full object-cover">
                     </div>
                     <div class="absolute -bottom-6 -right-6 bg-white p-4 rounded-xl shadow-lg">
                         <div class="flex items-center gap-2">
@@ -57,8 +57,8 @@
         <section class="mb-24" id="skills">
             <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">My Skills</h2>
             <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
-                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300">
-                    <div class="w-14 h-14 bg-primary-50 rounded-full flex items-center justify-center mb-4">
+                <div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300 skill-card project-card" data-depth="10">
+<div class="w-14 h-14 bg-primary-50 rounded-full flex items-center justify-center mb-4">
                         <i data-feather="code" class="text-primary w-6 h-6"></i>
                     </div>
                     <h3 class="font-bold text-lg mb-2">Frontend</h3>
@@ -92,8 +92,8 @@
         <section class="mb-24" id="projects">
             <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">Featured Projects</h2>
             <div class="grid md:grid-cols-2 gap-8">
-                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300">
-                    <div class="h-48 bg-gradient-to-r from-primary to-secondary overflow-hidden">
+                <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition duration-300 project-card" data-depth="20">
+<div class="h-48 bg-gradient-to-r from-primary to-secondary overflow-hidden">
                         <img src="http://static.photos/technology/1024x576/23" alt="Project 1" class="w-full h-full object-cover">
                     </div>
                     <div class="p-6">

script.js

@@ -16,22 +16,32 @@ document.addEventListener('DOMContentLoaded', function() {
             }
         });
     });
+// 3D Mouse Movement Effect
+const handleMouseMove = (e) => {
+    const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+    const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+    document.querySelector('main').style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
+};
 
-    // Animation for elements when they come into view
-    const animateOnScroll = () => {
-        const elements = document.querySelectorAll('.animate-on-scroll');
+// Animation for elements when they come into view
+const animateOnScroll = () => {
+    const elements = document.querySelectorAll('.animate-on-scroll');
+    
+    elements.forEach(element => {
+        const elementPosition = element.getBoundingClientRect().top;
+        const windowHeight = window.innerHeight;
         
-        elements.forEach(element => {
-            const elementPosition = element.getBoundingClientRect().top;
-            const windowHeight = window.innerHeight;
-            
-            if (elementPosition < windowHeight - 100) {
-                element.classList.add('animate-fadeInUp');
-            }
-        });
-    };
+        if (elementPosition < windowHeight - 100) {
+            const depth = element.dataset.depth || 0;
+            element.style.transform = `translateZ(${depth}px)`;
+            element.classList.add('animate-fadeInUp');
+        }
+    });
+};
 
-    // Initialize animation on load and scroll
+// Add mouse move event
+document.addEventListener('mousemove', handleMouseMove);
+// Initialize animation on load and scroll
     window.addEventListener('load', animateOnScroll);
     window.addEventListener('scroll', animateOnScroll);
 

style.css

@@ -1,10 +1,12 @@
 /* Custom styles that extend Tailwind */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
 body {
     font-family: 'Inter', sans-serif;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    min-height: 100vh;
+    overflow-x: hidden;
 }
-
 /* Smooth scrolling for anchor links */
 html {
     scroll-behavior: smooth;
@@ -17,13 +19,58 @@ html {
     color: transparent;
     background-image: linear-gradient(to right, #3B82F6, #10B981);
 }
+/* 3D Transformations */
+main {
+    transform-style: preserve-3d;
+}
+
+section {
+    transform-style: preserve-3d;
+    transition: transform 0.5s ease;
+}
+
+/* 3D Card Effects */
+.skill-card, .project-card {
+    transform-style: preserve-3d;
+    transition: all 0.5s ease;
+    transform: translateZ(0);
+}
 
-/* Animation for skill cards */
-.skill-card:hover {
-    transform: translateY(-5px);
-    transition: all 0.3s ease;
+.skill-card:hover, .project-card:hover {
+    transform: translateY(-5px) rotateX(5deg) rotateY(5deg) translateZ(20px);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
 }
 
+/* Parallax Effect */
+.parallax-bg {
+    position: relative;
+    transform-style: preserve-3d;
+}
+
+.parallax-bg::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-size: cover;
+    background-position: center;
+    transform: translateZ(-1px) scale(1.1);
+    z-index: -1;
+}
+
+/* 3D Floating Elements */
+.floating-3d {
+    animation: float3d 6s ease-in-out infinite;
+    transform-style: preserve-3d;
+}
+
+@keyframes float3d {
+    0% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
+    50% { transform: translateY(-20px) rotateX(5deg) rotateY(5deg); }
+    100% { transform: translateY(0px) rotateX(0deg) rotateY(0deg); }
+}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;