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>