|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>StellarFolio - Cosmic Portfolio</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<style> |
|
|
@keyframes pulse { |
|
|
0%,100% { opacity: 0.6; transform: scale(1); } |
|
|
50% { opacity: 1; transform: scale(1.05); } |
|
|
} |
|
|
.constellation { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
filter: drop-shadow(0 0 8px currentColor); |
|
|
z-index: 10; |
|
|
transition: all 0.3s ease; |
|
|
animation: pulse 4s infinite; |
|
|
} |
|
|
.constellation:hover { |
|
|
transform: scale(1.2) !important; |
|
|
animation: none; |
|
|
filter: drop-shadow(0 0 15px currentColor); |
|
|
} |
|
|
.constellation-line { |
|
|
position: absolute; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.8)); |
|
|
transform-origin: left center; |
|
|
z-index: 5; |
|
|
} |
|
|
#starship-nav { |
|
|
transform: translateY(0); |
|
|
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); |
|
|
} |
|
|
#starship-nav:hover { |
|
|
transform: translateY(-10px); |
|
|
} |
|
|
.starship-engine { |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 4px; |
|
|
background: #60a5fa; |
|
|
border-radius: 50%; |
|
|
filter: blur(2px); |
|
|
opacity: 0; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
#starship-nav:hover .starship-engine { |
|
|
opacity: 0.8; |
|
|
transform: translateX(5px); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 overflow-x-hidden"> |
|
|
<div id="vanta-bg" class="fixed inset-0 z-0"></div> |
|
|
|
|
|
<header class="relative z-10 py-6 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500"> |
|
|
StellarFolio |
|
|
</h1> |
|
|
<nav id="starship-nav" class="flex items-center space-x-2 bg-gray-800 bg-opacity-50 rounded-full px-4 py-2 border border-gray-700 backdrop-blur-sm relative"> |
|
|
<div class="starship-engine"></div> |
|
|
<div class="starship-engine" style="top: 12px;"></div> |
|
|
<div class="starship-engine" style="top: 24px;"></div> |
|
|
<a href="#about" class="px-3 py-1 hover:text-blue-300 transition">About</a> |
|
|
<a href="#work" class="px-3 py-1 hover:text-purple-300 transition">Work</a> |
|
|
<a href="#contact" class="px-3 py-1 hover:text-teal-300 transition">Contact</a> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="relative z-10 min-h-screen"> |
|
|
|
|
|
<div class="relative w-full h-screen overflow-hidden"> |
|
|
|
|
|
<div class="constellation" style="top: 30%; left: 20%; width: 15px; height: 15px; background: #3b82f6;" data-skill="UI Design"></div> |
|
|
<div class="constellation" style="top: 45%; left: 35%; width: 18px; height: 18px; background: #8b5cf6;" data-skill="UX Research"></div> |
|
|
<div class="constellation" style="top: 25%; left: 60%; width: 12px; height: 12px; background: #ec4899;" data-skill="Frontend Dev"></div> |
|
|
<div class="constellation" style="top: 60%; left: 50%; width: 16px; height: 16px; background: #10b981;" data-skill="Motion Design"></div> |
|
|
<div class="constellation" style="top: 40%; left: 75%; width: 14px; height: 14px; background: #f59e0b;" data-skill="3D Modeling"></div> |
|
|
|
|
|
|
|
|
<div class="constellation-line" style="top: 32%; left: 21%; width: 100px; transform: rotate(30deg);"></div> |
|
|
<div class="constellation-line" style="top: 48%; left: 38%; width: 150px; transform: rotate(-15deg);"></div> |
|
|
<div class="constellation-line" style="top: 28%; left: 63%; width: 120px; transform: rotate(45deg);"></div> |
|
|
|
|
|
|
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-24 rounded-full bg-gradient-to-br from-blue-400 to-purple-600 filter blur-xl opacity-30"></div> |
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white"></div> |
|
|
|
|
|
|
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center"> |
|
|
<h2 class="text-4xl md:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-300 to-purple-400"> |
|
|
Cosmic Creations |
|
|
</h2> |
|
|
<p class="text-xl md:text-2xl text-gray-300 max-w-md"> |
|
|
Navigating the digital universe one pixel at a time |
|
|
</p> |
|
|
<button class="mt-8 px-8 py-3 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full font-medium hover:shadow-lg hover:shadow-blue-500/30 transition-all"> |
|
|
Launch Expedition |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="skill-info" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 bg-opacity-70 backdrop-blur-sm rounded-xl p-4 max-w-xs opacity-0 transition-opacity"> |
|
|
<h3 class="font-bold text-lg mb-1" id="skill-title">Skill Name</h3> |
|
|
<p class="text-sm text-gray-300" id="skill-desc">Hover over a constellation to learn more</p> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
|
|
|
VANTA.NET({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x4f46e5, |
|
|
backgroundColor: 0x111827, |
|
|
points: 10.00, |
|
|
maxDistance: 22.00, |
|
|
spacing: 17.00 |
|
|
}); |
|
|
|
|
|
|
|
|
const constellations = document.querySelectorAll('.constellation'); |
|
|
const skillInfo = document.getElementById('skill-info'); |
|
|
const skillTitle = document.getElementById('skill-title'); |
|
|
const skillDesc = document.getElementById('skill-desc'); |
|
|
|
|
|
const skills = { |
|
|
"UI Design": "Crafting beautiful, intuitive interfaces that delight users across the cosmos.", |
|
|
"UX Research": "Exploring user behaviors to design experiences that resonate across galaxies.", |
|
|
"Frontend Dev": "Building stellar digital experiences with React, Vue and cosmic CSS magic.", |
|
|
"Motion Design": "Animating the universe with smooth transitions and interstellar micro-interactions.", |
|
|
"3D Modeling": "Creating nebula-inspired 3D assets and spatial designs for VR worlds." |
|
|
}; |
|
|
|
|
|
constellations.forEach(star => { |
|
|
star.addEventListener('mouseenter', () => { |
|
|
const skill = star.getAttribute('data-skill'); |
|
|
skillTitle.textContent = skill; |
|
|
skillDesc.textContent = skills[skill]; |
|
|
skillInfo.style.opacity = '1'; |
|
|
}); |
|
|
|
|
|
star.addEventListener('mouseleave', () => { |
|
|
skillInfo.style.opacity = '0'; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
constellations.forEach(star => { |
|
|
if (Math.random() > 0.8) { |
|
|
star.style.opacity = Math.random() * 0.5 + 0.5; |
|
|
} |
|
|
}); |
|
|
}, 300); |
|
|
|
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
