Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>3D Portfolio | Creative Developer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| overflow-x: hidden; | |
| background: #0f0f1a; | |
| color: #fff; | |
| } | |
| .perspective { | |
| perspective: 1000px; | |
| } | |
| .card-3d { | |
| transform-style: preserve-3d; | |
| transition: transform 0.5s ease; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #ff4d4d, #f9cb28); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .floating { | |
| animation: floating 6s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| #canvas-container { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| .skill-bar { | |
| transform: rotateX(45deg); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -5px; | |
| left: 0; | |
| background: linear-gradient(90deg, #ff4d4d, #f9cb28); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-item:hover::after { | |
| width: 100%; | |
| } | |
| .project-card:hover { | |
| transform: translateY(-10px) rotateY(5deg); | |
| box-shadow: 0 20px 30px rgba(0,0,0,0.4); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- 3D Background Canvas --> | |
| <div id="canvas-container"></div> | |
| <!-- Floating Navigation --> | |
| <nav class="fixed top-0 left-0 right-0 z-50 py-4 px-8 backdrop-blur-md bg-black bg-opacity-30"> | |
| <div class="max-w-6xl mx-auto flex justify-between items-center"> | |
| <div class="text-2xl font-bold gradient-text">3D PORTFOLIO</div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-item text-white hover:text-yellow-300 transition">Home</a> | |
| <a href="#about" class="nav-item text-white hover:text-yellow-300 transition">About</a> | |
| <a href="#skills" class="nav-item text-white hover:text-yellow-300 transition">Skills</a> | |
| <a href="#projects" class="nav-item text-white hover:text-yellow-300 transition">Projects</a> | |
| <a href="#contact" class="nav-item text-white hover:text-yellow-300 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-white"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="min-h-screen flex items-center justify-center px-4 pt-20"> | |
| <div class="max-w-6xl mx-auto text-center perspective"> | |
| <div class="card-3d floating"> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text">HELLO, I'M <span class="text-yellow-300">ALEX</span></h1> | |
| <h2 class="text-2xl md:text-3xl mb-8 text-gray-300">3D Web Developer & Designer</h2> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="px-8 py-3 bg-gradient-to-r from-red-500 to-yellow-500 rounded-full font-semibold transform hover:scale-110 transition duration-300 shadow-lg"> | |
| View Work | |
| </button> | |
| <button class="px-8 py-3 border-2 border-yellow-400 text-yellow-400 rounded-full font-semibold transform hover:scale-110 transition duration-300 hover:bg-yellow-400 hover:bg-opacity-10"> | |
| Contact Me | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center gradient-text">ABOUT ME</h2> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="perspective"> | |
| <div class="card-3d bg-gray-900 bg-opacity-50 p-8 rounded-2xl backdrop-blur-sm border border-gray-800 transform hover:rotateY-10 transition duration-500"> | |
| <h3 class="text-2xl font-semibold mb-4 text-yellow-400">Who am I?</h3> | |
| <p class="text-gray-300 mb-4"> | |
| I'm a passionate 3D web developer with 5+ years of experience creating immersive digital experiences. | |
| I specialize in blending cutting-edge 3D technologies with elegant UI/UX design. | |
| </p> | |
| <p class="text-gray-300 mb-6"> | |
| My mission is to push the boundaries of web development by incorporating 3D elements that enhance user engagement | |
| without compromising performance. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="px-4 py-2 bg-gray-800 rounded-full text-sm">Three.js</div> | |
| <div class="px-4 py-2 bg-gray-800 rounded-full text-sm">WebGL</div> | |
| <div class="px-4 py-2 bg-gray-800 rounded-full text-sm">GSAP</div> | |
| <div class="px-4 py-2 bg-gray-800 rounded-full text-sm">React</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative h-80 perspective"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-red-500 to-yellow-500 rounded-2xl opacity-20 blur-xl"></div> | |
| <div class="absolute inset-0 bg-gray-900 bg-opacity-50 rounded-2xl backdrop-blur-sm border border-gray-800 flex items-center justify-center"> | |
| <div class="text-center p-8"> | |
| <div class="w-32 h-32 mx-auto mb-6 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center text-4xl font-bold"> | |
| AJ | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Alex Johnson</h3> | |
| <p class="text-gray-400">3D Web Developer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 px-4 bg-gray-900 bg-opacity-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center gradient-text">MY SKILLS</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Skill 1 --> | |
| <div class="perspective"> | |
| <div class="card-3d bg-gray-900 bg-opacity-70 p-6 rounded-2xl backdrop-blur-sm border border-gray-800 h-full transform hover:rotateY-5 transition duration-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold">3D Development</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Creating immersive 3D experiences for the web using Three.js, WebGL, and other modern technologies.</p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Three.js</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="skill-bar bg-gradient-to-r from-red-500 to-yellow-500 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skill 2 --> | |
| <div class="perspective"> | |
| <div class="card-3d bg-gray-900 bg-opacity-70 p-6 rounded-2xl backdrop-blur-sm border border-gray-800 h-full transform hover:rotateY-5 transition duration-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold">UI/UX Design</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Designing beautiful, intuitive interfaces that prioritize user experience and accessibility.</p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span>Figma</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="skill-bar bg-gradient-to-r from-red-500 to-yellow-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skill 3 --> | |
| <div class="perspective"> | |
| <div class="card-3d bg-gray-900 bg-opacity-70 p-6 rounded-2xl backdrop-blur-sm border border-gray-800 h-full transform hover:rotateY-5 transition duration-500"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> | |
| </svg> | |
| </div> | |
| <h3 class="text-xl font-semibold">Frontend Development</h3> | |
| </div> | |
| <p class="text-gray-400 mb-4">Building responsive, performant websites with modern frameworks and best practices.</p> | |
| <div class="mt-6"> | |
| <div class="flex justify-between mb-2"> | |
| <span>React</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="w-full bg-gray-800 rounded-full h-2"> | |
| <div class="skill-bar bg-gradient-to-r from-red-500 to-yellow-500 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 px-4"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center gradient-text">MY PROJECTS</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="perspective"> | |
| <div class="card-3d project-card bg-gray-900 bg-opacity-50 rounded-2xl overflow-hidden border border-gray-800 transition duration-500 h-full"> | |
| <div class="h-48 bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">3D Portfolio Builder</h3> | |
| <p class="text-gray-400 mb-4">A customizable 3D portfolio template with interactive elements.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">Three.js</span> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">GSAP</span> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">WebGL</span> | |
| </div> | |
| <a href="#" class="text-yellow-400 hover:text-yellow-300 font-medium">View Project →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="perspective"> | |
| <div class="card-3d project-card bg-gray-900 bg-opacity-50 rounded-2xl overflow-hidden border border-gray-800 transition duration-500 h-full"> | |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">VR Museum Experience</h3> | |
| <p class="text-gray-400 mb-4">A virtual reality museum with WebXR and Three.js integration.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">WebXR</span> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">Three.js</span> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">A-Frame</span> | |
| </div> | |
| <a href="#" class="text-yellow-400 hover:text-yellow-300 font-medium">View Project →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="perspective"> | |
| <div class="card-3d project-card bg-gray-900 bg-opacity-50 rounded-2xl overflow-hidden border border-gray-800 transition duration-500 h-full"> | |
| <div class="h-48 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> | |
| </svg> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Data Visualization Suite</h3> | |
| <p class="text-gray-400 mb-4">Interactive 3D data visualizations for complex datasets.</p> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">D3.js</span> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">Three.js</span> | |
| <span class="text-xs px-3 py-1 bg-gray-800 rounded-full">React</span> | |
| </div> | |
| <a href="#" class="text-yellow-400 hover:text-yellow-300 font-medium">View Project →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 px-4 bg-gray-900 bg-opacity-50"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold mb-16 text-center gradient-text">GET IN TOUCH</h2> | |
| <div class="grid md:grid-cols-2 gap-12"> | |
| <div class="perspective"> | |
| <div class="card-3d bg-gray-900 bg-opacity-70 p-8 rounded-2xl backdrop-blur-sm border border-gray-800 h-full"> | |
| <h3 class="text-2xl font-semibold mb-6 text-yellow-400">Contact Information</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Email</h4> | |
| <p class="text-gray-400">hello@3dportfolio.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Phone</h4> | |
| <p class="text-gray-400">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 flex items-center justify-center mr-4 flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| </svg> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Location</h4> | |
| <p class="text-gray-400">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h4 class="font-medium mb-4">Follow Me</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gradient-to-r from-red-500 to-yellow-500 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gradient-to-r from-red-500 to-yellow-500 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gradient-to-r from-red-500 to-yellow-500 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-gradient-to-r from-red-500 to-yellow-500 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.13c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="perspective"> | |
| <div class="card-3d bg-gray-900 bg-opacity-70 p-8 rounded-2xl backdrop-blur-sm border border-gray-800"> | |
| <h3 class="text-2xl font-semibold mb-6 text-yellow-400">Send Me a Message</h3> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent" placeholder="Your name"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent" placeholder="Your email"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent" placeholder="Your message"></textarea> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-red-500 to-yellow-500 rounded-lg font-semibold hover:opacity-90 transition duration-300"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-8 px-4 border-t border-gray-800"> | |
| <div class="max-w-6xl mx-auto text-center"> | |
| <div class="flex justify-center space-x-6 mb-6"> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.13c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/> | |
| </svg> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-yellow-400 transition"> | |
| <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> | |
| <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/> | |
| </svg> | |
| </a> | |
| </div> | |
| <p class="text-gray-500 text-sm">© 2023 3D Portfolio. All rights reserved.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Three.js scene | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Set up Three.js scene | |
| const container = document.getElementById('canvas-container'); | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| container.appendChild(renderer.domElement); | |
| // Add floating particles | |
| const particlesGeometry = new THREE.BufferGeometry(); | |
| const particlesCount = 500; | |
| const posArray = new Float32Array(particlesCount * 3); | |
| for(let i = 0; i < particlesCount * 3; i++) { | |
| posArray[i] = (Math.random() - 0.5) * 10; | |
| } | |
| particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); | |
| const particlesMaterial = new THREE.PointsMaterial({ | |
| size: 0.02, | |
| color: 0xffffff, | |
| transparent: true, | |
| opacity: 0.8 | |
| }); | |
| const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); | |
| scene.add(particlesMesh); | |
| // Add floating torus knot | |
| const geometry = new THREE.TorusKnotGeometry(1, 0.3, 100, 16); | |
| const material = new THREE.MeshBasicMaterial({ | |
| color: 0x00ffff, | |
| wireframe: true, | |
| transparent: true, | |
| opacity: 0.5 | |
| }); | |
| const torusKnot = new THREE.Mesh(geometry, material); | |
| scene.add(torusKnot); | |
| camera.position.z = 5; | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| particlesMesh.rotation.x += 0.0005; | |
| particlesMesh.rotation.y += 0.0005; | |
| torusKnot.rotation.x += 0.01; | |
| torusKnot.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| // Handle window resize | |
| window.addEventListener('resize', function() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| }); | |
| // Add 3D hover effects to cards | |
| const cards = document.querySelectorAll('.card-3d'); | |
| cards.forEach(card => { | |
| card.addEventListener('mousemove', (e) => { | |
| const xAxis = (window.innerWidth / 2 - e.pageX) / 25; | |
| const yAxis = (window.innerHeight / 2 - e.pageY) / 25; | |
| card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; | |
| }); | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transition = 'none'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transition = 'transform 0.5s ease'; | |
| card.style.transform = 'rotateY(0deg) rotateX(0deg)'; | |
| }); | |
| }); | |
| // Smooth scrolling for navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // GSAP animations | |
| gsap.from('nav', { | |
| duration: 1, | |
| y: -50, | |
| opacity: 0, | |
| ease: 'power3.out' | |
| }); | |
| gsap.from('#home h1', { | |
| duration: 1, | |
| y: 50, | |
| opacity: 0, | |
| delay: 0.5, | |
| ease: 'power3.out' | |
| }); | |
| gsap.from('#home h2', { | |
| duration: 1, | |
| y: 50, | |
| opacity: 0, | |
| delay: 0.8, | |
| ease: 'power3.out' | |
| }); | |
| gsap.from('#home button', { | |
| duration: 1, | |
| y: 50, | |
| opacity: 0, | |
| delay: 1.1, | |
| ease: 'power3.out', | |
| stagger: 0.2 | |
| }); | |
| // Scroll animations | |
| const sections = document.querySelectorAll('section'); | |
| sections.forEach(section => { | |
| gsap.from(section, { | |
| scrollTrigger: { | |
| trigger: section, | |
| start: 'top 80%', | |
| toggleActions: 'play none none none' | |
| }, | |
| duration: 1, | |
| y: 50, | |
| opacity: 0, | |
| ease: 'power3.out' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=muneebable/3d-portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |