| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cosmic Portfolio Experience</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.7.0/dist/vanilla-tilt.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --color-pink: #ff9ff3; |
| --color-gold: #feca57; |
| --color-lavender: #9c88ff; |
| --color-teal: #00d2d3; |
| --color-dark: #1e272e; |
| } |
| |
| body { |
| font-family: 'Space Grotesk', sans-serif; |
| margin: 0; |
| padding: 0; |
| overflow-x: hidden; |
| color: white; |
| background: linear-gradient(135deg, #1e272e 0%, #2d3436 100%); |
| } |
| |
| #nebula-bg { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| opacity: 0.7; |
| } |
| |
| .glass-orb { |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| -webkit-backdrop-filter: blur(10px); |
| border-radius: 50%; |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); |
| border: 1px solid rgba(255, 255, 255, 0.18); |
| transition: all 0.3s ease; |
| } |
| |
| .floating-shard { |
| position: absolute; |
| background: rgba(255, 255, 255, 0.2); |
| clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| |
| .isometric-tile { |
| transform-style: preserve-3d; |
| transform: rotateX(15deg) rotateY(-15deg); |
| transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); |
| box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.3); |
| } |
| |
| .isometric-tile:hover { |
| transform: rotateX(0deg) rotateY(0deg) translateY(-10px); |
| } |
| |
| .progress-robot { |
| position: absolute; |
| width: 30px; |
| height: 30px; |
| background-color: var(--color-gold); |
| border-radius: 50%; |
| animation: weld 2s infinite alternate; |
| } |
| |
| @keyframes weld { |
| 0% { box-shadow: 0 0 5px var(--color-gold); } |
| 100% { box-shadow: 0 0 20px var(--color-gold); } |
| } |
| |
| .color-wheel { |
| width: 200px; |
| height: 200px; |
| border-radius: 50%; |
| background: conic-gradient( |
| red, yellow, lime, cyan, blue, magenta, red |
| ); |
| cursor: grab; |
| } |
| |
| .radial-menu { |
| position: fixed; |
| bottom: 2rem; |
| right: 2rem; |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(10px); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| z-index: 100; |
| transition: all 0.3s ease; |
| } |
| |
| .radial-menu:hover { |
| transform: scale(1.1); |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.3); |
| } |
| |
| .radial-items { |
| position: absolute; |
| width: 300px; |
| height: 300px; |
| pointer-events: none; |
| opacity: 0; |
| transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| |
| .radial-item { |
| position: absolute; |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| background: rgba(255, 255, 255, 0.1); |
| backdrop-filter: blur(5px); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .radial-item:hover { |
| transform: scale(1.2); |
| background: rgba(255, 255, 255, 0.3); |
| } |
| |
| .heartbeat { |
| animation: heartbeat 1.5s ease-in-out infinite both; |
| } |
| |
| @keyframes heartbeat { |
| 0% { transform: scale(1); } |
| 25% { transform: scale(1.1); } |
| 50% { transform: scale(1); } |
| 75% { transform: scale(1.1); } |
| 100% { transform: scale(1); } |
| } |
| |
| .draggable-card { |
| cursor: grab; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| touch-action: none; |
| } |
| |
| .draggable-card:active { |
| cursor: grabbing; |
| transform: scale(1.05) !important; |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important; |
| } |
| |
| .paint-drip { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .paint-drip::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| width: 150%; |
| height: 150%; |
| background: linear-gradient(45deg, var(--color-pink), var(--color-lavender)); |
| border-radius: 40%; |
| transform: translateX(-50%) rotate(0deg); |
| animation: rotate 10s linear infinite; |
| opacity: 0.3; |
| z-index: -1; |
| } |
| |
| @keyframes rotate { |
| 0% { transform: translateX(-50%) rotate(0deg); } |
| 100% { transform: translateX(-50%) rotate(360deg); } |
| } |
| |
| .avatar-tooltip { |
| position: absolute; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: var(--color-teal); |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| } |
| |
| .avatar-tooltip:hover { |
| transform: scale(1.2); |
| } |
| |
| .tooltip-content { |
| position: absolute; |
| width: 200px; |
| padding: 1rem; |
| background: rgba(255, 255, 255, 0.9); |
| border-radius: 10px; |
| color: var(--color-dark); |
| font-size: 0.9rem; |
| opacity: 0; |
| pointer-events: none; |
| transition: all 0.3s ease; |
| transform: translateY(10px); |
| } |
| |
| .avatar-tooltip:hover .tooltip-content { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .bounce-button { |
| transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
| } |
| |
| .bounce-button:active { |
| transform: scale(0.95); |
| } |
| |
| .parallax-banner { |
| transform-style: preserve-3d; |
| transition: all 0.5s ease-out; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="nebula-bg"></div> |
| |
| |
| <section class="min-h-screen flex flex-col justify-center items-center relative overflow-hidden"> |
| |
| <div class="glass-orb w-64 h-64 flex justify-center items-center mb-12" data-tilt data-tilt-max="15" data-tilt-speed="400" data-tilt-perspective="1000"> |
| <h1 class="text-4xl font-bold text-center">Welcome</h1> |
| </div> |
| |
| |
| <div id="shard-container" class="relative w-full h-32 mb-20"> |
| |
| </div> |
| |
| <h2 class="text-6xl font-bold mb-8 text-center">Let's Create Something <span class="text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-purple-600">Extraordinary</span></h2> |
| <p class="text-xl max-w-2xl text-center mb-12 opacity-80">A fusion of love, trust, and creativity in every pixel and line of code</p> |
| |
| <button class="bounce-button px-8 py-4 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 text-white font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300"> |
| Explore My Universe |
| </button> |
| |
| |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
| <div class="w-6 h-10 border-2 border-white rounded-full flex justify-center"> |
| <div class="w-1 h-2 bg-white rounded-full mt-2 animate-pulse"></div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-4 sm:px-8 max-w-7xl mx-auto"> |
| <h2 class="text-4xl font-bold mb-16 text-center">My Creative Cosmos</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12"> |
| |
| <div class="isometric-tile bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg p-8 relative overflow-hidden group"> |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity"></div> |
| <div class="relative z-10"> |
| <div class="w-16 h-16 bg-pink-500 rounded-full mb-6 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" 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-2xl font-bold mb-4">Design Philosophy</h3> |
| <p class="text-gray-300 mb-6">Where aesthetics meet purpose in perfect harmony</p> |
| <div class="h-1 w-full bg-gray-700 rounded-full mb-4"> |
| <div class="h-1 bg-pink-500 rounded-full" style="width: 85%"> |
| <div class="progress-robot" style="left: calc(85% - 15px); top: -15px;"></div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400">85% mastery</p> |
| </div> |
| </div> |
| |
| |
| <div class="isometric-tile bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg p-8 relative overflow-hidden group"> |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity"></div> |
| <div class="relative z-10"> |
| <div class="w-16 h-16 bg-purple-500 rounded-full mb-6 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" 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-2xl font-bold mb-4">Code Craftsmanship</h3> |
| <p class="text-gray-300 mb-6">Elegant solutions to complex problems</p> |
| <div class="h-1 w-full bg-gray-700 rounded-full mb-4"> |
| <div class="h-1 bg-purple-500 rounded-full" style="width: 92%"> |
| <div class="progress-robot" style="left: calc(92% - 15px); top: -15px;"></div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400">92% mastery</p> |
| </div> |
| </div> |
| |
| |
| <div class="isometric-tile bg-gradient-to-br from-gray-800 to-gray-900 rounded-lg p-8 relative overflow-hidden group"> |
| <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80')] bg-cover bg-center opacity-20 group-hover:opacity-30 transition-opacity"></div> |
| <div class="relative z-10"> |
| <div class="w-16 h-16 bg-teal-500 rounded-full mb-6 flex items-center justify-center"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" /> |
| </svg> |
| </div> |
| <h3 class="text-2xl font-bold mb-4">Innovation Engine</h3> |
| <p class="text-gray-300 mb-6">Pushing boundaries with every project</p> |
| <div class="h-1 w-full bg-gray-700 rounded-full mb-4"> |
| <div class="h-1 bg-teal-500 rounded-full" style="width: 78%"> |
| <div class="progress-robot" style="left: calc(78% - 15px); top: -15px;"></div> |
| </div> |
| </div> |
| <p class="text-sm text-gray-400">78% mastery</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-20 px-4 sm:px-8 max-w-7xl mx-auto"> |
| <div class="paint-drip bg-gray-800 rounded-3xl p-12 mb-20 relative overflow-hidden"> |
| <h2 class="text-4xl font-bold mb-6">Generative Art Playground</h2> |
| <p class="text-xl mb-12 max-w-3xl">Interact with these tools to create your own unique compositions</p> |
| |
| <div class="flex flex-col lg:flex-row gap-12"> |
| |
| <div class="flex-1"> |
| <h3 class="text-2xl font-bold mb-6">Color Spectrum Explorer</h3> |
| <div class="color-wheel mx-auto mb-6" id="color-wheel"></div> |
| <div class="text-center"> |
| <p class="mb-4">Selected color: <span id="selected-color" class="font-bold">#FF0000</span></p> |
| <button class="px-6 py-2 bg-white bg-opacity-10 rounded-full hover:bg-opacity-20 transition">Save Palette</button> |
| </div> |
| </div> |
| |
| |
| <div class="flex-1"> |
| <h3 class="text-2xl font-bold mb-6">Modular Composition</h3> |
| <p class="mb-6">Drag and rearrange these elements to create your own layout</p> |
| |
| <div class="grid grid-cols-3 gap-4" id="card-grid"> |
| <div class="draggable-card bg-pink-500 aspect-square rounded-lg flex items-center justify-center">1</div> |
| <div class="draggable-card bg-purple-500 aspect-square rounded-lg flex items-center justify-center">2</div> |
| <div class="draggable-card bg-teal-500 aspect-square rounded-lg flex items-center justify-center">3</div> |
| <div class="draggable-card bg-yellow-500 aspect-square rounded-lg flex items-center justify-center">4</div> |
| <div class="draggable-card bg-blue-500 aspect-square rounded-lg flex items-center justify-center">5</div> |
| <div class="draggable-card bg-green-500 aspect-square rounded-lg flex items-center justify-center">6</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="avatar-tooltip absolute top-8 right-8"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> |
| </svg> |
| <div class="tooltip-content"> |
| <p>This interactive section showcases my passion for creative coding and generative art. Play with the tools to see how dynamic digital experiences can be!</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-32 px-4 sm:px-8 relative overflow-hidden"> |
| <div class="parallax-banner max-w-4xl mx-auto bg-gradient-to-r from-pink-500 to-purple-600 rounded-3xl p-12 text-center"> |
| <h2 class="text-5xl font-bold mb-6 heartbeat">Let's Build the Future Together</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">I'm passionate about creating digital experiences that resonate with love, trust, and understanding.</p> |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| <button class="bounce-button px-8 py-4 bg-white text-gray-900 font-bold rounded-full hover:bg-opacity-90 transition"> |
| Start a Project |
| </button> |
| <button class="bounce-button px-8 py-4 bg-black bg-opacity-30 text-white font-bold rounded-full hover:bg-opacity-50 transition"> |
| Learn More About Me |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <div class="radial-menu" id="radial-menu"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" 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> |
| |
| <div class="radial-items" id="radial-items"> |
| <div class="radial-item" style="top: 50%; left: 50%; transform: translate(-50%, -50%);"> |
| <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" /> |
| </svg> |
| </div> |
| <div class="radial-item" style="top: 20%; left: 50%; transform: translateX(-50%);"> |
| <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> |
| </svg> |
| </div> |
| <div class="radial-item" style="top: 50%; left: 80%; transform: translateY(-50%);"> |
| <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="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9-3-9m-9 9a9 9 0 019-9" /> |
| </svg> |
| </div> |
| <div class="radial-item" style="top: 80%; left: 50%; transform: translateX(-50%);"> |
| <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="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 class="radial-item" style="top: 50%; left: 20%; transform: translateY(-50%);"> |
| <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.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> |
| </svg> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const nebulaBg = document.getElementById('nebula-bg'); |
| 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); |
| nebulaBg.appendChild(renderer.domElement); |
| |
| |
| const particlesGeometry = new THREE.BufferGeometry(); |
| const particleCount = 5000; |
| |
| const posArray = new Float32Array(particleCount * 3); |
| const colorArray = new Float32Array(particleCount * 3); |
| |
| for(let i = 0; i < particleCount * 3; i++) { |
| posArray[i] = (Math.random() - 0.5) * 10; |
| colorArray[i] = Math.random() * 0.5 + 0.5; |
| } |
| |
| particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); |
| particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colorArray, 3)); |
| |
| const particlesMaterial = new THREE.PointsMaterial({ |
| size: 0.05, |
| vertexColors: true, |
| transparent: true, |
| opacity: 0.8, |
| blending: THREE.AdditiveBlending |
| }); |
| |
| const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); |
| scene.add(particlesMesh); |
| |
| camera.position.z = 5; |
| |
| |
| function animateNebula() { |
| requestAnimationFrame(animateNebula); |
| |
| particlesMesh.rotation.x += 0.0001; |
| particlesMesh.rotation.y += 0.0002; |
| |
| |
| particlesMesh.scale.x = 1 + Math.sin(Date.now() * 0.001) * 0.05; |
| particlesMesh.scale.y = 1 + Math.sin(Date.now() * 0.001) * 0.05; |
| |
| renderer.render(scene, camera); |
| } |
| |
| animateNebula(); |
| |
| |
| window.addEventListener('resize', function() { |
| camera.aspect = window.innerWidth / window.innerHeight; |
| camera.updateProjectionMatrix(); |
| renderer.setSize(window.innerWidth, window.innerHeight); |
| }); |
| |
| |
| const shardContainer = document.getElementById('shard-container'); |
| const word = "Understanding"; |
| const shardCount = 100; |
| |
| for(let i = 0; i < shardCount; i++) { |
| const shard = document.createElement('div'); |
| shard.className = 'floating-shard'; |
| |
| |
| const size = Math.random() * 20 + 10; |
| shard.style.width = `${size}px`; |
| shard.style.height = `${size}px`; |
| |
| |
| shard.style.left = `${Math.random() * 100}%`; |
| shard.style.top = `${Math.random() * 100}%`; |
| |
| |
| const colors = ['rgba(255, 159, 243, 0.6)', 'rgba(254, 202, 87, 0.6)', 'rgba(156, 136, 255, 0.6)']; |
| shard.style.background = colors[Math.floor(Math.random() * colors.length)]; |
| |
| shardContainer.appendChild(shard); |
| } |
| |
| |
| setTimeout(() => { |
| const shards = document.querySelectorAll('.floating-shard'); |
| const centerX = shardContainer.offsetWidth / 2; |
| const centerY = shardContainer.offsetHeight / 2; |
| |
| |
| const letterPositions = []; |
| const fontSize = 80; |
| const fontWidth = fontSize * 0.6; |
| const startX = centerX - (word.length * fontWidth) / 2; |
| |
| |
| const canvas = document.createElement('canvas'); |
| const ctx = canvas.getContext('2d'); |
| canvas.width = shardContainer.offsetWidth; |
| canvas.height = shardContainer.offsetHeight; |
| |
| ctx.font = `bold ${fontSize}px 'Space Grotesk', sans-serif`; |
| ctx.fillStyle = 'white'; |
| ctx.textAlign = 'center'; |
| ctx.fillText(word, centerX, centerY + fontSize/3); |
| |
| |
| const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data; |
| |
| |
| const points = []; |
| for(let y = 0; y < canvas.height; y += 4) { |
| for(let x = 0; x < canvas.width; x += 4) { |
| const index = (y * canvas.width + x) * 4; |
| if(imageData[index + 3] > 0) { |
| points.push({x, y}); |
| } |
| } |
| } |
| |
| |
| shards.forEach((shard, index) => { |
| if(index < points.length) { |
| const point = points[index]; |
| gsap.to(shard, { |
| x: point.x - parseFloat(shard.style.left), |
| y: point.y - parseFloat(shard.style.top), |
| duration: 2, |
| ease: "elastic.out(1, 0.5)" |
| }); |
| } |
| }); |
| }, 2000); |
| |
| |
| VanillaTilt.init(document.querySelector(".glass-orb"), { |
| max: 15, |
| speed: 400, |
| glare: true, |
| "max-glare": 0.2, |
| }); |
| |
| |
| const radialMenu = document.getElementById('radial-menu'); |
| const radialItems = document.getElementById('radial-items'); |
| let menuOpen = false; |
| |
| radialMenu.addEventListener('click', function() { |
| menuOpen = !menuOpen; |
| |
| if(menuOpen) { |
| radialItems.style.opacity = '1'; |
| radialItems.style.pointerEvents = 'auto'; |
| |
| |
| const items = radialItems.querySelectorAll('.radial-item'); |
| items.forEach((item, index) => { |
| const angle = (index / items.length) * Math.PI * 2; |
| const radius = 120; |
| const x = Math.cos(angle) * radius; |
| const y = Math.sin(angle) * radius; |
| |
| gsap.fromTo(item, |
| { x: 0, y: 0, opacity: 0 }, |
| { x: x, y: y, opacity: 1, duration: 0.5, delay: index * 0.1, ease: "back.out(1.7)" } |
| ); |
| }); |
| } else { |
| radialItems.style.opacity = '0'; |
| radialItems.style.pointerEvents = 'none'; |
| |
| |
| const items = radialItems.querySelectorAll('.radial-item'); |
| items.forEach((item) => { |
| gsap.to(item, |
| { x: 0, y: 0, opacity: 0, duration: 0.3, ease: "back.in(1.7)" } |
| ); |
| }); |
| } |
| }); |
| |
| |
| const colorWheel = document.getElementById('color-wheel'); |
| const selectedColor = document.getElementById('selected-color'); |
| |
| colorWheel.addEventListener('mousemove', function(e) { |
| const rect = colorWheel.getBoundingClientRect(); |
| const x = e.clientX - rect.left; |
| const y = e.clientY - rect.top; |
| const centerX = rect.width / 2; |
| const centerY = rect.height / 2; |
| |
| const angle = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI; |
| const normalizedAngle = (angle + 360) % 360; |
| |
| |
| const hue = Math.round(normalizedAngle); |
| |
| |
| const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)); |
| const saturation = Math.min(100, Math.round(distance / (rect.width / 2) * 100)); |
| |
| |
| const lightness = 50; |
| |
| selectedColor.textContent = `HSL(${hue}, ${saturation}%, ${lightness}%)`; |
| selectedColor.style.color = `hsl(${hue}, ${saturation}%, ${lightness}%)`; |
| }); |
| |
| |
| const cardGrid = document.getElementById('card-grid'); |
| const cards = document.querySelectorAll('.draggable-card'); |
| |
| cards.forEach(card => { |
| let posX = 0, posY = 0, mouseX = 0, mouseY = 0; |
| let isDragging = false; |
| |
| card.addEventListener('mousedown', function(e) { |
| isDragging = true; |
| mouseX = e.clientX; |
| mouseY = e.clientY; |
| |
| |
| card.style.zIndex = '10'; |
| card.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.3)'; |
| |
| document.addEventListener('mousemove', moveCard); |
| document.addEventListener('mouseup', function() { |
| isDragging = false; |
| card.style.zIndex = '1'; |
| card.style.boxShadow = ''; |
| document.removeEventListener('mousemove', moveCard); |
| }); |
| }); |
| |
| function moveCard(e) { |
| if(isDragging) { |
| const dx = e.clientX - mouseX; |
| const dy = e.clientY - mouseY; |
| |
| posX += dx; |
| posY += dy; |
| |
| card.style.transform = `translate(${posX}px, ${posY}px) rotate(${posX * 0.1}deg)`; |
| |
| mouseX = e.clientX; |
| mouseY = e.clientY; |
| } |
| } |
| }); |
| |
| |
| const parallaxBanner = document.querySelector('.parallax-banner'); |
| |
| window.addEventListener('mousemove', function(e) { |
| const x = e.clientX / window.innerWidth; |
| const y = e.clientY / window.innerHeight; |
| |
| parallaxBanner.style.transform = `rotateX(${(y - 0.5) * 5}deg) rotateY(${(x - 0.5) * 5}deg)`; |
| }); |
| |
| |
| const bounceButtons = document.querySelectorAll('.bounce-button'); |
| |
| bounceButtons.forEach(button => { |
| button.addEventListener('mouseenter', function() { |
| gsap.to(button, { |
| scale: 1.05, |
| duration: 0.3, |
| ease: "elastic.out(1, 0.5)" |
| }); |
| }); |
| |
| button.addEventListener('mouseleave', function() { |
| gsap.to(button, { |
| scale: 1, |
| duration: 0.3, |
| ease: "elastic.out(1, 0.5)" |
| }); |
| }); |
| }); |
| }); |
| </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=Marv12/nice" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
