Spaces:
Running
Running
make the image double size, and make the contact button position after the name and before description, project and about me button make them in same line horizontally in the buttom of the page
c22ac1a
verified
| <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> | |