File size: 8,246 Bytes
0245bc7 41fd1e3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
<!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">
<!-- Cosmic Constellation Map -->
<div class="relative w-full h-screen overflow-hidden">
<!-- Constellation Points -->
<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>
<!-- Constellation Lines -->
<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>
<!-- Central Star -->
<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>
<!-- Floating Title -->
<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>
<!-- Skill Info Panel -->
<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>
// Initialize Vanta.js background
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
});
// Constellation hover effects
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';
});
});
// Random twinkling effect
setInterval(() => {
constellations.forEach(star => {
if (Math.random() > 0.8) {
star.style.opacity = Math.random() * 0.5 + 0.5;
}
});
}, 300);
// Initialize feather icons
feather.replace();
</script>
</body>
</html>
|