Hugging Face's logo

Spaces:
gaur3009
/
web3333
Running

App Files Community
gaur3009 commited on
Commit
0d919b0
·
verified ·
1 Parent(s): 7494027

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +701 -19
index.html CHANGED
@@ -1,19 +1,701 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aditya Singh Gaur - AI Engineer Portfolio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary: #3b82f6;
12
+ --secondary: #10b981;
13
+ --dark: #1e293b;
14
+ --light: #f8fafc;
15
+ }
16
+
17
+ body {
18
+ scroll-behavior: smooth;
19
+ }
20
+
21
+ .gradient-text {
22
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
23
+ -webkit-background-clip: text;
24
+ background-clip: text;
25
+ color: transparent;
26
+ }
27
+
28
+ .nav-link {
29
+ position: relative;
30
+ }
31
+
32
+ .nav-link::after {
33
+ content: '';
34
+ position: absolute;
35
+ width: 0;
36
+ height: 2px;
37
+ bottom: 0;
38
+ left: 0;
39
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
40
+ transition: width 0.3s ease;
41
+ }
42
+
43
+ .nav-link:hover::after {
44
+ width: 100%;
45
+ }
46
+
47
+ .card-hover:hover {
48
+ transform: translateY(-5px);
49
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
50
+ }
51
+
52
+ .timeline-item::before {
53
+ content: '';
54
+ position: absolute;
55
+ width: 16px;
56
+ height: 16px;
57
+ border-radius: 50%;
58
+ left: -8px;
59
+ top: 0;
60
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
61
+ }
62
+
63
+ .skill-bar {
64
+ height: 8px;
65
+ border-radius: 4px;
66
+ background-color: #e2e8f0;
67
+ overflow: hidden;
68
+ }
69
+
70
+ .skill-progress {
71
+ height: 100%;
72
+ border-radius: 4px;
73
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
74
+ transition: width 1s ease-in-out;
75
+ }
76
+
77
+ .animate-on-scroll {
78
+ opacity: 0;
79
+ transform: translateY(20px);
80
+ transition: opacity 0.6s ease-out, transform 0.6s ease-out;
81
+ }
82
+
83
+ .animate-on-scroll.visible {
84
+ opacity: 1;
85
+ transform: translateY(0);
86
+ }
87
+ </style>
88
+ </head>
89
+ <body class="bg-gray-50 text-gray-800 font-sans">
90
+ <!-- Header/Navigation -->
91
+ <header class="fixed w-full bg-white shadow-sm z-50">
92
+ <div class="container mx-auto px-6 py-4">
93
+ <div class="flex justify-between items-center">
94
+ <a href="#" class="text-2xl font-bold gradient-text">Aditya Gaur</a>
95
+ <nav class="hidden md:flex space-x-8">
96
+ <a href="#home" class="nav-link">Home</a>
97
+ <a href="#about" class="nav-link">About</a>
98
+ <a href="#experience" class="nav-link">Experience</a>
99
+ <a href="#projects" class="nav-link">Projects</a>
100
+ <a href="#contact" class="nav-link">Contact</a>
101
+ </nav>
102
+ <button id="mobile-menu-button" class="md:hidden text-gray-600">
103
+ <i class="fas fa-bars text-2xl"></i>
104
+ </button>
105
+ </div>
106
+ </div>
107
+ <!-- Mobile Menu -->
108
+ <div id="mobile-menu" class="hidden md:hidden bg-white w-full px-6 py-4 border-t">
109
+ <div class="flex flex-col space-y-4">
110
+ <a href="#home" class="nav-link">Home</a>
111
+ <a href="#about" class="nav-link">About</a>
112
+ <a href="#experience" class="nav-link">Experience</a>
113
+ <a href="#projects" class="nav-link">Projects</a>
114
+ <a href="#contact" class="nav-link">Contact</a>
115
+ </div>
116
+ </div>
117
+ </header>
118
+
119
+ <!-- Hero Section -->
120
+ <section id="home" class="min-h-screen flex items-center pt-20">
121
+ <div class="container mx-auto px-6 py-16">
122
+ <div class="flex flex-col md:flex-row items-center">
123
+ <div class="md:w-1/2 mb-12 md:mb-0 animate-on-scroll">
124
+ <h1 class="text-4xl md:text-6xl font-bold mb-4">Hi, I'm <span class="gradient-text">Aditya Singh Gaur</span></h1>
125
+ <h2 class="text-2xl md:text-3xl text-gray-600 mb-6">AI Engineer | Deep Learning Specialist</h2>
126
+ <p class="text-lg text-gray-600 mb-8 max-w-lg">Innovative AI Engineer with expertise in Deep Learning, NLP, and Computer Vision. Passionate about building AI-driven solutions for real-world problems.</p>
127
+ <div class="flex space-x-4">
128
+ <a href="#contact" class="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition duration-300">Contact Me</a>
129
+ <a href="#projects" class="px-6 py-3 border border-blue-500 text-blue-500 rounded-lg hover:bg-blue-50 transition duration-300">View Projects</a>
130
+ </div>
131
+ </div>
132
+ <div class="md:w-1/2 flex justify-center animate-on-scroll">
133
+ <div class="bg-gradient-to-br from-blue-400 to-green-400 p-1 rounded-full">
134
+ <div class="bg-white p-1 rounded-full">
135
+ <div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gray-200 flex items-center justify-center">
136
+ <i class="fas fa-user text-9xl text-gray-400"></i>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- About Section -->
146
+ <section id="about" class="py-20 bg-white">
147
+ <div class="container mx-auto px-6">
148
+ <h2 class="text-3xl font-bold text-center mb-12">About <span class="gradient-text">Me</span></h2>
149
+
150
+ <div class="flex flex-col md:flex-row gap-12">
151
+ <div class="md:w-1/3 animate-on-scroll">
152
+ <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
153
+ <h3 class="text-xl font-semibold mb-4">Personal Info</h3>
154
+ <div class="space-y-4">
155
+ <div class="flex items-start">
156
+ <i class="fas fa-map-marker-alt mt-1 mr-3 text-blue-500"></i>
157
+ <div>
158
+ <p class="font-medium">Location</p>
159
+ <p class="text-gray-600">Kanpur, India</p>
160
+ </div>
161
+ </div>
162
+ <div class="flex items-start">
163
+ <i class="fas fa-envelope mt-1 mr-3 text-blue-500"></i>
164
+ <div>
165
+ <p class="font-medium">Email</p>
166
+ <p class="text-gray-600">[email protected]</p>
167
+ </div>
168
+ </div>
169
+ <div class="flex items-start">
170
+ <i class="fas fa-graduation-cap mt-1 mr-3 text-blue-500"></i>
171
+ <div>
172
+ <p class="font-medium">Education</p>
173
+ <p class="text-gray-600">BS-MS in Mathematics and Computing</p>
174
+ </div>
175
+ </div>
176
+ </div>
177
+
178
+ <h3 class="text-xl font-semibold mt-8 mb-4">Connect With Me</h3>
179
+ <div class="flex space-x-4">
180
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
181
+ <i class="fab fa-github text-gray-700"></i>
182
+ </a>
183
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
184
+ <i class="fab fa-linkedin-in text-gray-700"></i>
185
+ </a>
186
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-blue-100 transition duration-300">
187
+ <i class="fab fa-hackerrank text-gray-700"></i>
188
+ </a>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <div class="md:w-2/3 animate-on-scroll">
194
+ <div class="mb-8">
195
+ <h3 class="text-2xl font-semibold mb-4">Professional Summary</h3>
196
+ <p class="text-gray-600 leading-relaxed">
197
+ Innovative AI Engineer with expertise in Deep Learning, NLP, and Computer Vision. Experienced in building AI-driven solutions for fashion technology, job matching, and virtual metaverse applications. Proficient in PyTorch, OpenCV, YOLOv8, Gradio, and StyleGAN. Passionate about AI-generated fashion and scalable AI solutions.
198
+ </p>
199
+ </div>
200
+
201
+ <div class="mb-8">
202
+ <h3 class="text-2xl font-semibold mb-4">Technical Skills</h3>
203
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
204
+ <div>
205
+ <h4 class="font-medium mb-2">Programming</h4>
206
+ <div class="space-y-3">
207
+ <div>
208
+ <div class="flex justify-between mb-1">
209
+ <span>Python</span>
210
+ <span>90%</span>
211
+ </div>
212
+ <div class="skill-bar">
213
+ <div class="skill-progress" style="width: 90%"></div>
214
+ </div>
215
+ </div>
216
+ <div>
217
+ <div class="flex justify-between mb-1">
218
+ <span>TypeScript/JavaScript</span>
219
+ <span>80%</span>
220
+ </div>
221
+ <div class="skill-bar">
222
+ <div class="skill-progress" style="width: 80%"></div>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ <div>
228
+ <h4 class="font-medium mb-2">AI & ML</h4>
229
+ <div class="space-y-3">
230
+ <div>
231
+ <div class="flex justify-between mb-1">
232
+ <span>PyTorch</span>
233
+ <span>85%</span>
234
+ </div>
235
+ <div class="skill-bar">
236
+ <div class="skill-progress" style="width: 85%"></div>
237
+ </div>
238
+ </div>
239
+ <div>
240
+ <div class="flex justify-between mb-1">
241
+ <span>OpenCV/YOLOv8</span>
242
+ <span>80%</span>
243
+ </div>
244
+ <div class="skill-bar">
245
+ <div class="skill-progress" style="width: 80%"></div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ <div>
251
+ <h4 class="font-medium mb-2">Web Technologies</h4>
252
+ <div class="space-y-3">
253
+ <div>
254
+ <div class="flex justify-between mb-1">
255
+ <span>ReactJS</span>
256
+ <span>75%</span>
257
+ </div>
258
+ <div class="skill-bar">
259
+ <div class="skill-progress" style="width: 75%"></div>
260
+ </div>
261
+ </div>
262
+ <div>
263
+ <div class="flex justify-between mb-1">
264
+ <span>Django/Flask</span>
265
+ <span>70%</span>
266
+ </div>
267
+ <div class="skill-bar">
268
+ <div class="skill-progress" style="width: 70%"></div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ <div>
274
+ <h4 class="font-medium mb-2">Tools & Platforms</h4>
275
+ <div class="space-y-3">
276
+ <div>
277
+ <div class="flex justify-between mb-1">
278
+ <span>Gradio/Hugging Face</span>
279
+ <span>85%</span>
280
+ </div>
281
+ <div class="skill-bar">
282
+ <div class="skill-progress" style="width: 85%"></div>
283
+ </div>
284
+ </div>
285
+ <div>
286
+ <div class="flex justify-between mb-1">
287
+ <span>AWS/Google Cloud</span>
288
+ <span>70%</span>
289
+ </div>
290
+ <div class="skill-bar">
291
+ <div class="skill-progress" style="width: 70%"></div>
292
+ </div>
293
+ </div>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div>
300
+ <h3 class="text-2xl font-semibold mb-4">Soft Skills</h3>
301
+ <div class="flex flex-wrap gap-2">
302
+ <span class="px-4 py-2 bg-blue-100 text-blue-800 rounded-full">Problem-Solving</span>
303
+ <span class="px-4 py-2 bg-green-100 text-green-800 rounded-full">Analytical Thinking</span>
304
+ <span class="px-4 py-2 bg-purple-100 text-purple-800 rounded-full">Leadership</span>
305
+ <span class="px-4 py-2 bg-yellow-100 text-yellow-800 rounded-full">Team Collaboration</span>
306
+ <span class="px-4 py-2 bg-pink-100 text-pink-800 rounded-full">Research & Innovation</span>
307
+ <span class="px-4 py-2 bg-indigo-100 text-indigo-800 rounded-full">Effective Communication</span>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </section>
314
+
315
+ <!-- Experience Section -->
316
+ <section id="experience" class="py-20 bg-gray-50">
317
+ <div class="container mx-auto px-6">
318
+ <h2 class="text-3xl font-bold text-center mb-12">Work <span class="gradient-text">Experience</span></h2>
319
+
320
+ <div class="relative max-w-3xl mx-auto">
321
+ <div class="absolute left-1/2 w-1 h-full bg-gray-200 transform -translate-x-1/2"></div>
322
+
323
+ <div class="space-y-8">
324
+ <!-- Experience 1 -->
325
+ <div class="relative pl-8 md:pl-16 animate-on-scroll">
326
+ <div class="timeline-item">
327
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
328
+ <div class="flex justify-between items-start mb-2">
329
+ <h3 class="text-xl font-semibold">AI Engineer (Part-Time)</h3>
330
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Jan 2024 – Present</span>
331
+ </div>
332
+ <h4 class="text-gray-600 font-medium mb-4">Rookus.in</h4>
333
+ <ul class="list-disc pl-5 space-y-2 text-gray-600">
334
+ <li>Spearheaded AI-driven design generation models for fashion</li>
335
+ <li>Integrated deep learning techniques for realistic fabric warping</li>
336
+ <li>Developed scalable GenAI B2B SaaS solutions with Gradio & PyTorch</li>
337
+ </ul>
338
+ <div class="mt-4 flex flex-wrap gap-2">
339
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">PyTorch</span>
340
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Gradio</span>
341
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">StyleGAN</span>
342
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">TypeScript</span>
343
+ </div>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <!-- Experience 2 -->
349
+ <div class="relative pl-8 md:pl-16 animate-on-scroll">
350
+ <div class="timeline-item">
351
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
352
+ <div class="flex justify-between items-start mb-2">
353
+ <h3 class="text-xl font-semibold">NLP Engineer</h3>
354
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Aug 2023 – Nov 2023</span>
355
+ </div>
356
+ <h4 class="text-gray-600 font-medium mb-4">Metaverse Ventures Pvt Ltd, Bengaluru</h4>
357
+ <ul class="list-disc pl-5 space-y-2 text-gray-600">
358
+ <li>Designed RNN-LSTM architecture for NLP</li>
359
+ <li>Built OpenCV-based body measurement models</li>
360
+ <li>Contributed to LLM development using encoder-decoder architectures like BERT</li>
361
+ </ul>
362
+ <div class="mt-4 flex flex-wrap gap-2">
363
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">NLP</span>
364
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">OpenCV</span>
365
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">YOLOv8</span>
366
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">PyTorch</span>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Experience 3 -->
373
+ <div class="relative pl-8 md:pl-16 animate-on-scroll">
374
+ <div class="timeline-item">
375
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
376
+ <div class="flex justify-between items-start mb-2">
377
+ <h3 class="text-xl font-semibold">Data Analyst Virtual Internship</h3>
378
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Jul 2023 – Sep 2023</span>
379
+ </div>
380
+ <h4 class="text-gray-600 font-medium mb-4">KPMG (Remote)</h4>
381
+ <ul class="list-disc pl-5 space-y-2 text-gray-600">
382
+ <li>Performed data-driven insights using Python, Pandas, and SQL</li>
383
+ <li>Analyzed large datasets and visualized business insights</li>
384
+ </ul>
385
+ <div class="mt-4 flex flex-wrap gap-2">
386
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Python</span>
387
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Pandas</span>
388
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">SQL</span>
389
+ </div>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Experience 4 -->
395
+ <div class="relative pl-8 md:pl-16 animate-on-scroll">
396
+ <div class="timeline-item">
397
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300">
398
+ <div class="flex justify-between items-start mb-2">
399
+ <h3 class="text-xl font-semibold">Subject Matter Expert</h3>
400
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">May 2023 – Aug 2023</span>
401
+ </div>
402
+ <h4 class="text-gray-600 font-medium mb-4">Edu Solutions Consultancy Pvt Ltd, Mumbai</h4>
403
+ <ul class="list-disc pl-5 space-y-2 text-gray-600">
404
+ <li>Provided expertise in Mathematics & Computing</li>
405
+ <li>Developed content for competitive exams</li>
406
+ </ul>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+
413
+ <!-- Education -->
414
+ <div class="mt-20">
415
+ <h2 class="text-3xl font-bold text-center mb-12">Education & <span class="gradient-text">Achievements</span></h2>
416
+
417
+ <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
418
+ <!-- Education 1 -->
419
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300 animate-on-scroll">
420
+ <div class="flex items-center mb-4">
421
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
422
+ <i class="fas fa-university text-blue-500 text-xl"></i>
423
+ </div>
424
+ <div>
425
+ <h3 class="font-semibold">Birla Institute of Technology, Mesra</h3>
426
+ <p class="text-gray-600">2021 - 2026</p>
427
+ </div>
428
+ </div>
429
+ <p class="text-gray-600 mb-2">Integrated BS-MS in Mathematics and Computing</p>
430
+ <p class="font-medium">GPA: 8.14</p>
431
+ </div>
432
+
433
+ <!-- Education 2 -->
434
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300 animate-on-scroll">
435
+ <div class="flex items-center mb-4">
436
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4">
437
+ <i class="fas fa-school text-green-500 text-xl"></i>
438
+ </div>
439
+ <div>
440
+ <h3 class="font-semibold">Air Force School</h3>
441
+ <p class="text-gray-600">Completed 2019</p>
442
+ </div>
443
+ </div>
444
+ <div class="grid grid-cols-2 gap-4">
445
+ <div>
446
+ <p class="text-gray-600">10th Grade</p>
447
+ <p class="font-medium">91.2%</p>
448
+ </div>
449
+ <div>
450
+ <p class="text-gray-600">12th Grade</p>
451
+ <p class="font-medium">90.6%</p>
452
+ </div>
453
+ </div>
454
+ </div>
455
+
456
+ <!-- Achievements -->
457
+ <div class="bg-white p-6 rounded-xl shadow-sm card-hover transition duration-300 animate-on-scroll">
458
+ <div class="flex items-center mb-4">
459
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-4">
460
+ <i class="fas fa-trophy text-purple-500 text-xl"></i>
461
+ </div>
462
+ <div>
463
+ <h3 class="font-semibold">Achievements</h3>
464
+ </div>
465
+ </div>
466
+ <ul class="space-y-3">
467
+ <li class="flex items-start">
468
+ <i class="fas fa-medal text-yellow-500 mt-1 mr-2"></i>
469
+ <span>4th Rank (College Level) - Smart India Hackathon</span>
470
+ </li>
471
+ <li class="flex items-start">
472
+ <i class="fas fa-star text-blue-500 mt-1 mr-2"></i>
473
+ <span>Selected for BIT Nishan (Top Tech Competition)</span>
474
+ </li>
475
+ <li class="flex items-start">
476
+ <i class="fas fa-award text-green-500 mt-1 mr-2"></i>
477
+ <span>BIG Accelerator Program - Recognized for AI Innovation at Rookus</span>
478
+ </li>
479
+ </ul>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+ </section>
485
+
486
+ <!-- Projects Section -->
487
+ <section id="projects" class="py-20 bg-white">
488
+ <div class="container mx-auto px-6">
489
+ <h2 class="text-3xl font-bold text-center mb-12">Featured <span class="gradient-text">Projects</span></h2>
490
+
491
+ <div class="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
492
+ <!-- Project 1 -->
493
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll">
494
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-blue-600 flex items-center justify-center">
495
+ <i class="fas fa-briefcase text-white text-6xl"></i>
496
+ </div>
497
+ <div class="p-6">
498
+ <h3 class="text-xl font-semibold mb-2">Job Board GPT</h3>
499
+ <p class="text-gray-600 mb-4">AI-powered job board using NLP and PyTorch for context-aware job recommendations.</p>
500
+ <ul class="list-disc pl-5 space-y-1 text-gray-600 mb-4">
501
+ <li>Integrated Django & Flask backend with ReactJS & Firebase</li>
502
+ <li>Enhanced job matching accuracy through semantic search</li>
503
+ <li>Implemented transformer-based ranking and chatbot</li>
504
+ </ul>
505
+ <div class="flex flex-wrap gap-2">
506
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PyTorch</span>
507
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">NLP</span>
508
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">Firebase</span>
509
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">ReactJS</span>
510
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">Django/Flask</span>
511
+ </div>
512
+ </div>
513
+ </div>
514
+
515
+ <!-- Project 2 -->
516
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-sm card-hover transition duration-300 animate-on-scroll">
517
+ <div class="h-48 bg-gradient-to-r from-pink-400 to-purple-600 flex items-center justify-center">
518
+ <i class="fas fa-tshirt text-white text-6xl"></i>
519
+ </div>
520
+ <div class="p-6">
521
+ <h3 class="text-xl font-semibold mb-2">AI Fashion (AI-Generated Design Model)</h3>
522
+ <p class="text-gray-600 mb-4">Advanced AI-driven fashion design model integrating artwork and text onto clothing & phone covers.</p>
523
+ <ul class="list-disc pl-5 space-y-1 text-gray-600 mb-4">
524
+ <li>Ensured realistic fabric warping & texture adaptation</li>
525
+ <li>Leveraged PyTorch & StyleGAN for fabric analysis</li>
526
+ <li>Analyzed fabric folds, lighting, and material properties</li>
527
+ </ul>
528
+ <div class="flex flex-wrap gap-2">
529
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">PyTorch</span>
530
+ <span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm">Gradio</span>
531
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">TypeScript</span>
532
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">StyleGAN</span>
533
+ </div>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </section>
539
+
540
+ <!-- Contact Section -->
541
+ <section id="contact" class="py-20 bg-gray-50">
542
+ <div class="container mx-auto px-6">
543
+ <h2 class="text-3xl font-bold text-center mb-12">Get In <span class="gradient-text">Touch</span></h2>
544
+
545
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-sm overflow-hidden">
546
+ <div class="md:flex">
547
+ <div class="md:w-1/2 bg-gradient-to-br from-blue-500 to-green-500 p-8 text-white">
548
+ <h3 class="text-2xl font-semibold mb-6">Contact Information</h3>
549
+ <div class="space-y-6">
550
+ <div class="flex items-start">
551
+ <i class="fas fa-map-marker-alt mt-1 mr-4 text-xl"></i>
552
+ <div>
553
+ <h4 class="font-medium">Location</h4>
554
+ <p>Kanpur, India</p>
555
+ </div>
556
+ </div>
557
+ <div class="flex items-start">
558
+ <i class="fas fa-envelope mt-1 mr-4 text-xl"></i>
559
+ <div>
560
+ <h4 class="font-medium">Email</h4>
561
+ <p>[email protected]</p>
562
+ </div>
563
+ </div>
564
+ <div class="flex items-start">
565
+ <i class="fas fa-share-alt mt-1 mr-4 text-xl"></i>
566
+ <div>
567
+ <h4 class="font-medium">Social Profiles</h4>
568
+ <div class="flex space-x-4 mt-2">
569
+ <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition duration-300">
570
+ <i class="fab fa-github"></i>
571
+ </a>
572
+ <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition duration-300">
573
+ <i class="fab fa-linkedin-in"></i>
574
+ </a>
575
+ <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-20 flex items-center justify-center hover:bg-opacity-30 transition duration-300">
576
+ <i class="fab fa-hackerrank"></i>
577
+ </a>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ </div>
582
+ </div>
583
+
584
+ <div class="md:w-1/2 p-8">
585
+ <form class="space-y-6">
586
+ <div>
587
+ <label for="name" class="block text-gray-700 mb-2">Your Name</label>
588
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300">
589
+ </div>
590
+ <div>
591
+ <label for="email" class="block text-gray-700 mb-2">Your Email</label>
592
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300">
593
+ </div>
594
+ <div>
595
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
596
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300">
597
+ </div>
598
+ <div>
599
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
600
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition duration-300"></textarea>
601
+ </div>
602
+ <button type="submit" class="w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition duration-300">Send Message</button>
603
+ </form>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </section>
609
+
610
+ <!-- Footer -->
611
+ <footer class="bg-gray-800 text-white py-8">
612
+ <div class="container mx-auto px-6 text-center">
613
+ <p>© 2024 Aditya Singh Gaur. All rights reserved.</p>
614
+ <div class="flex justify-center space-x-6 mt-4">
615
+ <a href="#" class="hover:text-blue-300 transition duration-300"><i class="fab fa-github"></i></a>
616
+ <a href="#" class="hover:text-blue-300 transition duration-300"><i class="fab fa-linkedin-in"></i></a>
617
+ <a href="#" class="hover:text-blue-300 transition duration-300"><i class="fab fa-hackerrank"></i></a>
618
+ </div>
619
+ </div>
620
+ </footer>
621
+
622
+ <script>
623
+ // Mobile menu toggle
624
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
625
+ const menu = document.getElementById('mobile-menu');
626
+ menu.classList.toggle('hidden');
627
+ });
628
+
629
+ // Smooth scrolling for navigation links
630
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
631
+ anchor.addEventListener('click', function(e) {
632
+ e.preventDefault();
633
+
634
+ const targetId = this.getAttribute('href');
635
+ const targetElement = document.querySelector(targetId);
636
+
637
+ if (targetElement) {
638
+ window.scrollTo({
639
+ top: targetElement.offsetTop - 80,
640
+ behavior: 'smooth'
641
+ });
642
+
643
+ // Close mobile menu if open
644
+ const mobileMenu = document.getElementById('mobile-menu');
645
+ if (!mobileMenu.classList.contains('hidden')) {
646
+ mobileMenu.classList.add('hidden');
647
+ }
648
+ }
649
+ });
650
+ });
651
+
652
+ // Animation on scroll
653
+ function checkScroll() {
654
+ const elements = document.querySelectorAll('.animate-on-scroll');
655
+
656
+ elements.forEach(element => {
657
+ const elementPosition = element.getBoundingClientRect().top;
658
+ const windowHeight = window.innerHeight;
659
+
660
+ if (elementPosition < windowHeight - 100) {
661
+ element.classList.add('visible');
662
+ }
663
+ });
664
+ }
665
+
666
+ // Initial check
667
+ window.addEventListener('load', checkScroll);
668
+ // Check on scroll
669
+ window.addEventListener('scroll', checkScroll);
670
+
671
+ // Animate skill bars on scroll
672
+ function animateSkillBars() {
673
+ const skillBars = document.querySelectorAll('.skill-progress');
674
+
675
+ skillBars.forEach(bar => {
676
+ const width = bar.style.width;
677
+ bar.style.width = '0';
678
+
679
+ setTimeout(() => {
680
+ bar.style.width = width;
681
+ }, 100);
682
+ });
683
+ }
684
+
685
+ // Intersection Observer for skill bars
686
+ const skillsSection = document.querySelector('#about');
687
+ const observer = new IntersectionObserver((entries) => {
688
+ entries.forEach(entry => {
689
+ if (entry.isIntersecting) {
690
+ animateSkillBars();
691
+ observer.unobserve(entry.target);
692
+ }
693
+ });
694
+ }, { threshold: 0.2 });
695
+
696
+ if (skillsSection) {
697
+ observer.observe(skillsSection);
698
+ }
699
+ </script>
700
+ </body>
701
+ </html>