Spaces:
Running
Running
File size: 10,914 Bytes
a41526d 2821ede |
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 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abhinav Kumar | Portfolio</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">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#8b5cf6',
dark: '#0f172a',
light: '#f8fafc'
},
fontFamily: {
'sans': ['JetBrains Mono', 'monospace'],
'mono': ['JetBrains Mono', 'monospace']
}
}
}
}
</script>
<style type="text/css">
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-12px); }
100% { transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.8s ease-out forwards;
}
.float {
animation: float 4s ease-in-out infinite;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-8px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-dark font-mono text-light min-h-screen">
<!-- Navigation -->
<nav class="py-6 px-4 lg:px-8 backdrop-blur-lg bg-dark/70 sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Abhinav Kumar</a>
<div class="flex space-x-6">
<a href="#about" class="text-light hover:text-primary transition-colors">About</a>
<a href="#links" class="text-light hover:text-primary transition-colors">Links</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="about" class="container mx-auto px-4 lg:px-8 py-16 md:py-24 flex flex-col lg:flex-row items-center justify-between gap-12">
<div class="lg:w-1/2 flex justify-center">
<div class="relative">
<div class="absolute inset-0 bg-gradient-to-r from-primary to-secondary rounded-full blur-2xl opacity-30 animate-pulse"></div>
<img src="https://cdn.glitch.global/5f96b627-6eea-408d-afe5-da809f7ea7b7/ak.png?v=1739507763340"
alt="Abhinav Kumar"
class="relative w-72 h-72 rounded-full object-cover border-4 border-dark ring-4 ring-white/10 ring-offset-2 ring-offset-dark float">
</div>
</div>
<div class="lg:w-1/2 fade-in mt-12 lg:mt-0">
<h1 class="text-4xl md:text-6xl font-bold mb-6">Hi, I'm <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">Abhinav Kumar</span></h1>
<p class="text-xl text-gray-300 mb-10">Developer passionate about creating innovative solutions through technology</p>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center mr-4">
<i class="fa-solid fa-location-dot"></i>
</div>
<span>Based in India</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-secondary flex items-center justify-center mr-4">
<i class="fa-solid fa-code"></i>
</div>
<span>Full Stack Developer</span>
</div>
</div>
</div>
</section>
<!-- Links Section -->
<section id="links" class="container mx-auto px-4 lg:px-8 py-16 md:py-24">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-20">Connect With Me</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
<!-- LinkedIn Card -->
<a href="https://www.linkedin.com/in/abhinav-kr007/" target="_blank" class="card-hover fade-in">
<div class="bg-dark border border-gray-800 rounded-xl p-8 h-full flex flex-col items-center text-center hover:border-primary/40 transition-colors">
<div class="w-16 h-16 rounded-lg bg-blue-900/30 flex items-center justify-center mb-6">
<img src="https://cdn.glitch.global/5f96b627-6eea-408d-afe5-da809f7ea7b7/LI-In-Bug.png?v=1739507927623" alt="LinkedIn" class="w-10">
</div>
<h3 class="text-xl font-semibold mb-4">LinkedIn Profile</h3>
<p class="text-gray-400 mb-6">Connect with me professionally and view my work experience and achievements</p>
<div class="mt-auto flex items-center text-primary font-medium">
<span>View Profile</span>
<i class="fa-solid fa-arrow-right ml-2"></i>
</div>
</div>
</a>
<!-- GitHub Card -->
<a href="https://github.com/Abhinav-Kumar012" target="_blank" class="card-hover fade-in" style="animation-delay: 0.2s;">
<div class="bg-dark border border-gray-800 rounded-xl p-8 h-full flex flex-col items-center text-center hover:border-primary/40 transition-colors">
<div class="w-16 h-16 rounded-lg bg-gray-900/30 flex items-center justify-center mb-6">
<img src="https://cdn.glitch.global/5f96b627-6eea-408d-afe5-da809f7ea7b7/github-mark.png?v=1739508491008" alt="GitHub" class="w-10">
</div>
<h3 class="text-xl font-semibold mb-4">GitHub Profile</h3>
<p class="text-gray-400 mb-6">Explore my coding projects, contributions, and repositories</p>
<div class="mt-auto flex items-center text-primary font-medium">
<span>View Profile</span>
<i class="fa-solid fa-arrow-right ml-2"></i>
</div>
</div>
</a>
<!-- Resume Card -->
<a href="https://github.com/Abhinav-Kumar012/resume/releases/download/latest/Resume.pdf" target="_blank" class="card-hover fade-in" style="animation-delay: 0.4s;">
<div class="bg-dark border border-gray-800 rounded-xl p-8 h-full flex flex-col items-center text-center hover:border-primary/40 transition-colors">
<div class="w-16 h-16 rounded-lg bg-purple-900/30 flex items-center justify-center mb-6">
<i class="fa-regular fa-file-lines text-white text-2xl"></i>
</div>
<h3 class="text-xl font-semibold mb-4">My Resume</h3>
<p class="text-gray-400 mb-6">Download my detailed resume with qualifications and experience</p>
<div class="mt-auto flex items-center text-primary font-medium">
<span>Download CV</span>
<i class="fa-solid fa-download ml-2"></i>
</div>
</div>
</a>
</div>
</section>
<!-- Footer -->
<footer class="py-8 border-t border-gray-800 mt-auto">
<div class="container mx-auto px-4 lg:px-8">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center mb-4 md:mb-0">
<div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center mr-3">
<i class="fa-solid fa-a text-xs"></i>
</div>
<span class="text-lg font-bold">Abhinav Kumar</span>
</div>
<p class="text-gray-500 text-sm">© 2023 All rights reserved. Designed with ❤️</p>
</div>
</div>
</footer>
<!-- Back to top button -->
<button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white shadow-lg transition-opacity opacity-0 invisible">
<i class="fa-solid fa-arrow-up"></i>
</button>
<script>
// Back to top button functionality
const backToTopButton = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100');
} else {
backToTopButton.classList.remove('opacity-100');
backToTopButton.classList.add('opacity-0', 'invisible');
}
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// 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>
<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=Jitsy009/website-jbm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>
|