Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Rahul Janagouda</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 8px rgba(139, 92, 246, 0.6); | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| text-shadow: 0 0 8px rgba(139, 92, 246, 0.6); | |
| } | |
| to { | |
| text-shadow: 0 0 12px rgba(139, 92, 246, 0.8), | |
| 0 0 16px rgba(236, 72, 153, 0.6); | |
| } | |
| } | |
| .profile-img { | |
| border: 4px solid transparent; | |
| background: linear-gradient(white, white) padding-box, | |
| linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899) border-box; | |
| transition: transform 0.3s ease; | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .profile-img:hover { | |
| transform: scale(1.05); | |
| animation-play-state: paused; | |
| } | |
| .typing-effect::after { | |
| content: "|"; | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .skill-card { | |
| transform: translateY(20px); | |
| opacity: 0; | |
| transition: all 0.6s ease; | |
| } | |
| .skill-card.visible { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .btn-hover-effect { | |
| transition: all 0.3s ease; | |
| background-size: 200% auto; | |
| background-image: linear-gradient(to right, #3b82f6 0%, #8b5cf6 51%, #ec4899 100%); | |
| } | |
| .btn-hover-effect:hover { | |
| background-position: right center; | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.2); | |
| } | |
| .name-part { | |
| display: inline-block; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| text-shadow: 0 0 8px rgba(139, 92, 246, 0.3); | |
| } | |
| .animate-float { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .animate-float-reverse { | |
| animation: float-reverse 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-8px) rotate(2deg); } | |
| } | |
| @keyframes float-reverse { | |
| 0%, 100% { transform: translateY(0) rotate(0deg); } | |
| 50% { transform: translateY(-8px) rotate(-2deg); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4"> | |
| <div class="max-w-4xl w-full bg-gray-800 rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <!-- Left Side (Profile) --> | |
| <div class="md:w-1/3 bg-gradient-to-br from-gray-700 to-gray-800 p-8 flex flex-col items-center justify-center"> | |
| <div class="mb-6"> | |
| <img src="https://avatars3.githubusercontent.com/u/2093518?s=400&u=95ead87a351a1fb920437cbc47444fdf3c06d793&v=4" | |
| alt="Rahul Janagouda" | |
| class="profile-img rounded-full w-48 h-48 object-cover shadow-lg"> | |
| </div> | |
| <h1 class="text-3xl font-bold text-gray-100 mb-2"> | |
| <span class="name-part animate-float">Rahul</span> | |
| <span class="name-part animate-float-reverse">Janagouda</span> | |
| </h1> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="https://github.com/rahuljanagouda" target="_blank" class="text-gray-300 hover:text-purple-400 transition-colors"> | |
| <i class="fab fa-github text-2xl"></i> | |
| </a> | |
| <a href="https://rahuljanagouda.github.io/" target="_blank" class="text-gray-700 hover:text-blue-600 transition-colors"> | |
| <i class="fas fa-globe text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Right Side (Content) --> | |
| <div class="md:w-2/3 p-8 md:p-12"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl md:text-4xl font-bold mb-4"> | |
| <span class="gradient-text typing-effect"></span> | |
| </h2> | |
| <p class="text-gray-600 leading-relaxed"> | |
| Combining technical expertise with human-centered design to create meaningful solutions. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6" id="skills-grid"> | |
| <div class="skill-card bg-gray-700 p-6 rounded-xl border border-gray-600 hover:border-purple-400 transition-all hover:scale-105"> | |
| <div class="text-purple-600 mb-3"> | |
| <i class="fas fa-brain text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Intelligence</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Strategic thinking and problem-solving to tackle complex challenges. | |
| </p> | |
| </div> | |
| <div class="skill-card bg-gray-700 p-6 rounded-xl border border-gray-600 hover:border-blue-400 transition-all hover:scale-105"> | |
| <div class="text-blue-600 mb-3"> | |
| <i class="fas fa-code text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Engineering</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Robust technical implementation with attention to detail and scalability. | |
| </p> | |
| </div> | |
| <div class="skill-card bg-gray-700 p-6 rounded-xl border border-gray-600 hover:border-pink-400 transition-all hover:scale-105"> | |
| <div class="text-pink-600 mb-3"> | |
| <i class="fas fa-heart text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Humanity</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Empathy-driven design that puts people at the center of technology. | |
| </p> | |
| </div> | |
| <div class="skill-card bg-gray-700 p-6 rounded-xl border border-gray-600 hover:border-indigo-400 transition-all hover:scale-105"> | |
| <div class="text-indigo-600 mb-3"> | |
| <i class="fas fa-rocket text-3xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Innovation</h3> | |
| <p class="text-gray-600 text-sm"> | |
| Pushing boundaries to create impactful and forward-thinking solutions. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="https://rahuljanagouda.github.io/" target="_blank" | |
| class="btn-hover-effect inline-block text-white px-6 py-3 rounded-full font-medium transition-all"> | |
| Explore My Work | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="mt-8 text-center text-gray-400 text-sm"> | |
| <p>© <span id="year"></span> Rahul Janagouda. All rights reserved.</p> | |
| </footer> | |
| <script> | |
| // Current year for footer | |
| document.getElementById('year').textContent = new Date().getFullYear(); | |
| // Enhanced typing effect with multiple phrases | |
| const phrases = [ | |
| "Intelligence + Engineering + Humanity", | |
| "Problem Solver", | |
| "Creative Thinker", | |
| "Full Stack Developer", | |
| "AI Engineer" | |
| ]; | |
| let phraseIndex = 0; | |
| let charIndex = 0; | |
| let isDeleting = false; | |
| let isEnd = false; | |
| function typeWriter() { | |
| const currentPhrase = phrases[phraseIndex]; | |
| const typingElement = document.querySelector('.typing-effect'); | |
| if (isDeleting) { | |
| typingElement.textContent = currentPhrase.substring(0, charIndex - 1); | |
| charIndex--; | |
| } else { | |
| typingElement.textContent = currentPhrase.substring(0, charIndex + 1); | |
| charIndex++; | |
| } | |
| if (!isDeleting && charIndex === currentPhrase.length) { | |
| isEnd = true; | |
| setTimeout(() => { | |
| isDeleting = true; | |
| typeWriter(); | |
| }, 2000); | |
| return; | |
| } | |
| if (isDeleting && charIndex === 0) { | |
| isDeleting = false; | |
| phraseIndex = (phraseIndex + 1) % phrases.length; | |
| isEnd = false; | |
| } | |
| const speed = isDeleting ? 50 : isEnd ? 100 : 100; | |
| setTimeout(typeWriter, speed); | |
| } | |
| // Start typing effect | |
| setTimeout(typeWriter, 1000); | |
| // Scroll animation for skill cards | |
| const skillCards = document.querySelectorAll('.skill-card'); | |
| const skillsGrid = document.getElementById('skills-grid'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| skillCards.forEach(card => { | |
| observer.observe(card); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=goudas/my-website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |