Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NebulaPortfolio | Creative Developer</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| cosmic: '#6e45e2', | |
| nebula: '#88d3ce', | |
| space: '#0f0e17', | |
| star: '#fffffe' | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'gradient-x': 'gradient-x 8s ease infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-20px)' }, | |
| }, | |
| 'gradient-x': { | |
| '0%, 100%': { | |
| 'background-size':'200% 200%', | |
| 'background-position': 'left center' | |
| }, | |
| '50%': { | |
| 'background-size':'200% 200%', | |
| 'background-position': 'right center' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| @keyframes textReveal { | |
| 0% { | |
| transform: translateY(100%); | |
| opacity: 0; | |
| } | |
| 100% { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| } | |
| .animate-text-reveal { | |
| animation: textReveal 1s cubic-bezier(0.19, 1, 0.22, 1) forwards; | |
| animation-delay: var(--delay); | |
| opacity: 0; | |
| } | |
| .cursor-dot { | |
| width: 8px; | |
| height: 8px; | |
| background-color: #6e45e2; | |
| } | |
| .cursor-outline { | |
| width: 40px; | |
| height: 40px; | |
| border: 2px solid rgba(110, 69, 226, 0.5); | |
| } | |
| .cursor-dot, | |
| .cursor-outline { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| transform: translate(-50%, -50%); | |
| border-radius: 50%; | |
| z-index: 999; | |
| pointer-events: none; | |
| transition: transform 0.1s ease; | |
| } | |
| .text-stroke { | |
| -webkit-text-stroke: 1px #fffffe; | |
| color: transparent; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-space text-star min-h-screen overflow-x-hidden"> | |
| <!-- Custom Cursor --> | |
| <div class="cursor-dot"></div> | |
| <div class="cursor-outline"></div> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 backdrop-blur-md bg-space/80 border-b border-nebula/10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-cosmic to-nebula bg-clip-text text-transparent">Nebula</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-8"> | |
| <a href="#about" class="text-nebula hover:text-cosmic px-3 py-2 transition-all duration-300 ease-in-out">About</a> | |
| <a href="#work" class="text-nebula hover:text-cosmic px-3 py-2 transition-all duration-300 ease-in-out">Work</a> | |
| <a href="#skills" class="text-nebula hover:text-cosmic px-3 py-2 transition-all duration-300 ease-in-out">Skills</a> | |
| <a href="#contact" class="text-nebula hover:text-cosmic px-3 py-2 transition-all duration-300 ease-in-out">Contact</a> | |
| <button id="theme-toggle" class="ml-4 p-2 rounded-full bg-space border border-nebula/20 hover:bg-nebula/10 transition-colors"> | |
| <i data-feather="moon" class="text-nebula"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="p-2 rounded-md inline-flex items-center justify-center text-nebula hover:text-cosmic"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-space/95 backdrop-blur-lg border-t border-nebula/10"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#about" class="block px-3 py-2 text-nebula hover:text-cosmic">About</a> | |
| <a href="#work" class="block px-3 py-2 text-nebula hover:text-cosmic">Work</a> | |
| <a href="#skills" class="block px-3 py-2 text-nebula hover:text-cosmic">Skills</a> | |
| <a href="#contact" class="block px-3 py-2 text-nebula hover:text-cosmic">Contact</a> | |
| <div class="pt-4 pb-3 border-t border-nebula/10"> | |
| <button id="theme-toggle-mobile" class="w-full flex items-center justify-center px-4 py-2 rounded-md bg-space border border-nebula/20 hover:bg-nebula/10"> | |
| <span class="text-nebula mr-2">Toggle Theme</span> | |
| <i data-feather="moon" class="text-nebula"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section with Vanta.js Globe --> | |
| <section class="relative h-screen w-full flex items-center justify-center overflow-hidden" id="vanta-globe"> | |
| <div class="absolute inset-0 bg-gradient-to-b from-space/90 to-space"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center"> | |
| <div class="mx-auto w-40 h-40 rounded-full border-4 border-nebula/30 overflow-hidden mb-8 animate-float"> | |
| <img src="http://static.photos/technology/320x240/42" alt="Profile" class="w-full h-full object-cover"> | |
| </div> | |
| <h1 class="text-5xl md:text-7xl font-bold mb-4"> | |
| <span class="bg-gradient-to-r from-cosmic to-nebula bg-clip-text text-transparent relative inline-block"> | |
| <span class="animate-text-reveal inline-block" style="--delay: 0.1s">Cosmic</span> | |
| </span> | |
| <span class="animate-text-reveal inline-block" style="--delay: 0.3s">Creator</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl text-nebula mb-8 max-w-2xl mx-auto"> | |
| Designing stellar digital experiences that orbit beyond imagination | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#work" class="px-8 py-3 bg-gradient-to-r from-cosmic to-nebula rounded-full text-space font-semibold hover:shadow-lg hover:shadow-cosmic/30 transition-all duration-300 transform hover:scale-105"> | |
| Explore Work | |
| </a> | |
| <a href="#contact" class="px-8 py-3 border-2 border-nebula rounded-full text-nebula font-semibold hover:bg-nebula/10 transition-all duration-300 transform hover:scale-105"> | |
| Contact Me | |
| </a> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <a href="#about" class="text-nebula"> | |
| <i data-feather="chevron-down" class="w-8 h-8"></i> | |
| </a> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-space/50 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4"> | |
| <span class="text-stroke">01.</span> <span class="text-nebula">About Me</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cosmic to-nebula mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <div class="relative"> | |
| <div class="w-full h-80 lg:h-96 bg-gradient-to-br from-cosmic/20 to-nebula/20 rounded-2xl overflow-hidden"> | |
| <img src="http://static.photos/technology/640x360/12" alt="About" class="w-full h-full object-cover object-center"> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gradient-to-br from-cosmic to-nebula rounded-2xl -z-10"></div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-3xl font-bold mb-6">Digital Alchemist Turning Ideas Into Stellar Experiences</h3> | |
| <p class="text-nebula/80 mb-6"> | |
| I'm a cosmic creator with 5+ years of experience crafting immersive digital experiences that defy gravity. My journey began in the far reaches of the internet and has taken me through galaxies of design and development. | |
| </p> | |
| <p class="text-nebula/80 mb-8"> | |
| When I'm not pushing pixels or debugging code, you'll find me exploring new design frontiers, experimenting with futuristic interfaces, or contemplating the next big thing in digital experiences. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mr-4"> | |
| <i data-feather="code" class="text-space"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Frontend Wizardry</h4> | |
| <p class="text-sm text-nebula/70">React, Vue, GSAP</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mr-4"> | |
| <i data-feather="pen-tool" class="text-space"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">UI/UX Design</h4> | |
| <p class="text-sm text-nebula/70">Figma, Adobe XD</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Work Section --> | |
| <section id="work" class="py-20 bg-gradient-to-b from-space to-space/80"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4"> | |
| <span class="text-stroke">02.</span> <span class="text-nebula">Featured Work</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cosmic to-nebula mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Project 1 --> | |
| <div class="group relative overflow-hidden rounded-2xl border border-nebula/10 hover:border-nebula/30 transition-all duration-500 h-96"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-cosmic/20 to-nebula/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10"></div> | |
| <img src="http://static.photos/technology/640x360/1" alt="Project 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-space to-transparent z-20 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500"> | |
| <h3 class="text-xl font-bold text-star mb-2">Nebula Dashboard</h3> | |
| <p class="text-nebula/80 mb-4">An analytics dashboard with cosmic visualization</p> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 bg-cosmic/20 text-nebula rounded-full text-xs">React</span> | |
| <span class="px-3 py-1 bg-nebula/20 text-nebula rounded-full text-xs">D3.js</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2 --> | |
| <div class="group relative overflow-hidden rounded-2xl border border-nebula/10 hover:border-nebula/30 transition-all duration-500 h-96"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-cosmic/20 to-nebula/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10"></div> | |
| <img src="http://static.photos/technology/640x360/2" alt="Project 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-space to-transparent z-20 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500"> | |
| <h3 class="text-xl font-bold text-star mb-2">Stellar Mobile App</h3> | |
| <p class="text-nebula/80 mb-4">Astronomy learning app with AR features</p> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 bg-cosmic/20 text-nebula rounded-full text-xs">Flutter</span> | |
| <span class="px-3 py-1 bg-nebula/20 text-nebula rounded-full text-xs">ARKit</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 3 --> | |
| <div class="group relative overflow-hidden rounded-2xl border border-nebula/10 hover:border-nebula/30 transition-all duration-500 h-96"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-cosmic/20 to-nebula/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-10"></div> | |
| <img src="http://static.photos/technology/640x360/3" alt="Project 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"> | |
| <div class="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-space to-transparent z-20 opacity-0 group-hover:opacity-100 translate-y-4 group-hover:translate-y-0 transition-all duration-500"> | |
| <h3 class="text-xl font-bold text-star mb-2">Quantum Website</h3> | |
| <p class="text-nebula/80 mb-4">Interactive physics simulation platform</p> | |
| <div class="flex space-x-2"> | |
| <span class="px-3 py-1 bg-cosmic/20 text-nebula rounded-full text-xs">Three.js</span> | |
| <span class="px-3 py-1 bg-nebula/20 text-nebula rounded-full text-xs">GSAP</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-nebula/30 rounded-full text-nebula hover:bg-nebula/10 hover:border-nebula/50 transition-all duration-300"> | |
| <span>View All Projects</span> | |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Skills Section --> | |
| <section id="skills" class="py-20 bg-space/50 backdrop-blur-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4"> | |
| <span class="text-stroke">03.</span> <span class="text-nebula">My Skills</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cosmic to-nebula mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Design Skills --> | |
| <div class="p-8 rounded-2xl bg-gradient-to-br from-space to-space/80 border border-nebula/10 hover:border-nebula/30 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mb-6"> | |
| <i data-feather="pen-tool" class="text-space w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Design</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">UI/UX Design</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 95%"></div> | |
| </div> | |
| </li> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">Prototyping</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 90%"></div> | |
| </div> | |
| </li> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">Interaction Design</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 85%"></div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Development Skills --> | |
| <div class="p-8 rounded-2xl bg-gradient-to-br from-space to-space/80 border border-nebula/10 hover:border-nebula/30 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mb-6"> | |
| <i data-feather="code" class="text-space w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Development</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">React/Vue</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 90%"></div> | |
| </div> | |
| </li> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">JavaScript</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 95%"></div> | |
| </div> | |
| </li> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">CSS/Animation</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 98%"></div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Other Skills --> | |
| <div class="p-8 rounded-2xl bg-gradient-to-br from-space to-space/80 border border-nebula/10 hover:border-nebula/30 transition-all duration-300 hover:-translate-y-2"> | |
| <div class="w-16 h-16 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mb-6"> | |
| <i data-feather="sliders" class="text-space w-6 h-6"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4">Other</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">Motion Design</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 85%"></div> | |
| </div> | |
| </li> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">3D Modeling</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 75%"></div> | |
| </div> | |
| </li> | |
| <li class="flex justify-between items-center"> | |
| <span class="text-nebula/80">Photography</span> | |
| <div class="w-24 h-1.5 bg-nebula/10 rounded-full"> | |
| <div class="h-full bg-gradient-to-r from-cosmic to-nebula rounded-full" style="width: 80%"></div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-cosmic/5 to-nebula/5 -z-10"></div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-4xl font-bold mb-4"> | |
| <span class="text-stroke">04.</span> <span class="text-nebula">Get In Touch</span> | |
| </h2> | |
| <div class="w-20 h-1 bg-gradient-to-r from-cosmic to-nebula mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-3xl font-bold mb-6">Let's Create Something Amazing Together</h3> | |
| <p class="text-nebula/80 mb-8"> | |
| Have a project in mind or just want to say hello? I'd love to hear from you! Whether it's about a potential collaboration or just to chat about design and tech, drop me a message. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mr-4"> | |
| <i data-feather="mail" class="text-space"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Email Me</h4> | |
| <a href="mailto:hello@cosmiccreator.com" class="text-nebula/80 hover:text-nebula transition-colors">hello@cosmiccreator.com</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mr-4"> | |
| <i data-feather="phone" class="text-space"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Call Me</h4> | |
| <a href="tel:+1234567890" class="text-nebula/80 hover:text-nebula transition-colors">+1 (234) 567-890</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-br from-cosmic to-nebula flex items-center justify-center mr-4"> | |
| <i data-feather="map-pin" class="text-space"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Location</h4> | |
| <p class="text-nebula/80">San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex mt-8 space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full border border-nebula/20 flex items-center justify-center hover:bg-nebula/10 hover:border-nebula/30 transition-all"> | |
| <i data-feather="twitter" class="text-nebula"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full border border-nebula/20 flex items-center justify-center hover:bg-nebula/10 hover:border-nebula/30 transition-all"> | |
| <i data-feather="github" class="text-nebula"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full border border-nebula/20 flex items-center justify-center hover:bg-nebula/10 hover:border-nebula/30 transition-all"> | |
| <i data-feather="linkedin" class="text-nebula"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full border border-nebula/20 flex items-center justify-center hover:bg-nebula/10 hover:border-nebula/30 transition-all"> | |
| <i data-feather="dribbble" class="text-nebula"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <form class="space-y-6"> | |
| <div class="relative"> | |
| <input type="text" id="name" class="peer w-full px-4 py-3 bg-space border border-nebula/20 rounded-lg focus:outline-none focus:border-nebula/50 focus:ring-1 focus:ring-nebula/30 transition-all placeholder-transparent" placeholder=" " /> | |
| <label for="name" class="absolute left-4 -top-3 px-1 bg-space text-nebula/80 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-nebula/50 peer-placeholder-shown:top-3 peer-placeholder-shown:left-4 peer-focus:-top-3 peer-focus:text-nebula/80 peer-focus:text-sm"> | |
| Your Name | |
| </label> | |
| </div> | |
| <div class="relative"> | |
| <input type="email" id="email" class="peer w-full px-4 py-3 bg-space border border-nebula/20 rounded-lg focus:outline-none focus:border-nebula/50 focus:ring-1 focus:ring-nebula/30 transition-all placeholder-transparent" placeholder=" " /> | |
| <label for="email" class="absolute left-4 -top-3 px-1 bg-space text-nebula/80 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-nebula/50 peer-placeholder-shown:top-3 peer-placeholder-shown:left-4 peer-focus:-top-3 peer-focus:text-nebula/80 peer-focus:text-sm"> | |
| Email Address | |
| </label> | |
| </div> | |
| <div class="relative"> | |
| <textarea id="message" rows="5" class="peer w-full px-4 py-3 bg-space border border-nebula/20 rounded-lg focus:outline-none focus:border-nebula/50 focus:ring-1 focus:ring-nebula/30 transition-all placeholder-transparent" placeholder=" "></textarea> | |
| <label for="message" class="absolute left-4 -top-3 px-1 bg-space text-nebula/80 text-sm transition-all peer-placeholder-shown:text-base peer-placeholder-shown:text-nebula/50 peer-placeholder-shown:top-3 peer-placeholder-shown:left-4 peer-focus:-top-3 peer-focus:text-nebula/80 peer-focus:text-sm"> | |
| Your Message | |
| </label> | |
| </div> | |
| <button type="submit" class="w-full px-6 py-3 bg-gradient-to-r from-cosmic to-nebula rounded-lg text-space font-semibold hover:shadow-lg hover:shadow-cosmic/30 transition-all transform hover:scale-105"> | |
| Send Message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 border-t border-nebula/10"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="flex items-center space-x-2"> | |
| <span class="text-2xl font-bold bg-gradient-to-r from-cosmic to-nebula bg-clip-text text-transparent">Nebula</span> | |
| </a> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8"> | |
| <a href="#about" class="text-nebula/80 hover:text-nebula transition-colors">About</a> | |
| <a href="#work" class="text-nebula/80 hover:text-nebula transition-colors">Work</a> | |
| <a href="#skills" class="text-nebula/80 hover:text-nebula transition-colors">Skills</a> | |
| <a href="#contact" class="text-nebula/80 hover:text-nebula transition-colors">Contact</a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-8 border-t border-nebula/10 text-center"> | |
| <p class="text-nebula/60"> | |
| © 2023 NebulaPortfolio. All rights reserved. Made with <i data-feather="heart" class="inline w-4 h-4 text-cosmic"></i> in the cosmos. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js globe | |
| VANTA.GLOBE({ | |
| el: "#vanta-globe", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x6e45e2, | |
| backgroundColor: 0x0f0e17, | |
| size: 0.8 | |
| }); | |
| // Custom cursor | |
| const cursorDot = document.querySelector(".cursor-dot"); | |
| const cursorOutline = document.querySelector(".cursor-outline"); | |
| window.addEventListener("mousemove", (e) => { | |
| const posX = e.clientX; | |
| const posY = e.clientY; | |
| cursorDot.style.left = `${posX}px`; | |
| cursorDot.style.top = `${posY}px`; | |
| cursorOutline.animate({ | |
| left: `${posX}px`, | |
| top: `${posY}px` | |
| }, { duration: 500, fill: "forwards" }); | |
| }); | |
| // Make cursor interactive | |
| document.querySelectorAll("a, button").forEach(el => { | |
| el.addEventListener("mouseenter", () => { | |
| cursorDot.style.transform = "translate(-50%, -50%) scale(2)"; | |
| cursorOutline.style.transform = "translate(-50%, -50%) scale(0.5)"; | |
| }); | |
| el.addEventListener("mouseleave", () => { | |
| cursorDot.style.transform = "translate(-50%, -50%) scale(1)"; | |
| cursorOutline.style.transform = "translate(-50%, -50%) scale(1)"; | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById("mobile-menu-button"); | |
| const mobileMenu = document.getElementById("mobile-menu"); | |
| mobileMenuButton.addEventListener("click", () => { | |
| mobileMenu.classList.toggle("hidden"); | |
| const icon = mobileMenuButton.querySelector("i"); | |
| if (mobileMenu.classList.contains("hidden")) { | |
| feather.icons.menu.replace(icon); | |
| } else { | |
| feather.icons.x.replace(icon); | |
| } | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById("theme-toggle"); | |
| const themeToggleMobile = document.getElementById("theme-toggle-mobile"); | |
| function toggleTheme() { | |
| document.documentElement.classList.toggle("dark"); | |
| const icon = themeToggle.querySelector("i"); | |
| const iconMobile = themeToggleMobile.querySelector("i"); | |
| if (document.documentElement.classList.contains("dark")) { | |
| feather.icons.sun.replace(icon); | |
| feather.icons.sun.replace(iconMobile); | |
| } else { | |
| feather.icons.moon.replace(icon); | |
| feather.icons.moon.replace(iconMobile); | |
| } | |
| } | |
| themeToggle.addEventListener("click", toggleTheme); | |
| themeToggleMobile.addEventListener("click", toggleTheme); | |
| // Scroll animations | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll("section, .animate-float"); | |
| elements.forEach(el => { | |
| const rect = el.getBoundingClientRect(); | |
| const isVisible = (rect.top <= window.innerHeight * 0.8) && (rect.bottom >= 0); | |
| if (isVisible) { | |
| el.classList.add("animate-fadeIn"); | |
| } | |
| }); | |
| }; | |
| window.addEventListener("scroll", animateOnScroll); | |
| window.addEventListener("load", animateOnScroll); | |
| // Animate cosmic creator on load | |
| document.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| const letters = document.querySelectorAll('.animate-text-reveal'); | |
| letters.forEach(letter => { | |
| letter.style.animationPlayState = 'running'; | |
| }); | |
| }, 500); | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |