Spaces:
Running
Running
File size: 4,533 Bytes
91bec68 86ba311 91bec68 86ba311 4037316 c22ac1a 741bd9d 4037316 c22ac1a 4037316 741bd9d 4037316 741bd9d 4037316 741bd9d 4037316 741bd9d 4037316 741bd9d c22ac1a 741bd9d c22ac1a 86ba311 4037316 db2e9cc 86ba311 39a5719 a84dee5 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BioSphere Clone</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
}
.glass-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
</style>
</head>
<body class="bg-gray-900 text-white min-h-screen">
<!-- Hero Section -->
<div id="vanta-bg" class="min-h-screen flex items-center justify-center px-4">
<div class="glass-card p-6 max-w-md w-full mx-auto text-center" style="aspect-ratio: 9/19; max-height: 95vh;">
<div class="flex flex-col justify-center h-full">
<div class="w-56 h-56 mx-auto mb-6 rounded-full overflow-hidden border-4 border-indigo-500">
<img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover">
</div>
<h1 class="text-3xl font-bold mb-3 gradient-text">John Doe</h1>
<a href="#contact" class="px-6 py-3 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-base mb-4">Contact</a>
<p class="text-xl text-gray-300 mb-4">Full Stack Developer & UI/UX Designer</p>
<p class="text-base text-gray-400 mb-8 px-2">Building digital experiences that matter. Passionate about creating clean, efficient code and beautiful interfaces.</p>
<div class="flex justify-center space-x-4 mb-8">
<a href="#" class="p-3 rounded-full bg-indigo-600 hover:bg-indigo-700 transition">
<i data-feather="github" class="w-5 h-5"></i>
</a>
<a href="#" class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 transition">
<i data-feather="twitter" class="w-5 h-5"></i>
</a>
<a href="#" class="p-3 rounded-full bg-red-500 hover:bg-red-600 transition">
<i data-feather="youtube" class="w-5 h-5"></i>
</a>
<a href="#" class="p-3 rounded-full bg-blue-700 hover:bg-blue-800 transition">
<i data-feather="linkedin" class="w-5 h-5"></i>
</a>
</div>
<div class="flex justify-center space-x-3 mt-auto">
<a href="#projects" class="px-4 py-2 bg-indigo-600 rounded-full hover:bg-indigo-700 transition text-sm">Projects</a>
<a href="#about" class="px-4 py-2 border border-indigo-500 rounded-full hover:bg-indigo-900/30 transition text-sm">About Me</a>
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
VANTA.GLOBE({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x3b82f6,
backgroundColor: 0x111827,
size: 0.8
});
feather.replace();
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
|