|
|
<!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> |
