Hugging Face's logo

Spaces:
gaur3009
/
dsd
Running

App Files Community
gaur3009 commited on
Commit
3dfedf2
·
verified ·
1 Parent(s): e363d44

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +306 -19
index.html CHANGED
@@ -1,19 +1,306 @@
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/ML 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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .project-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
16
+ }
17
+ .skill-pill:hover {
18
+ background-color: #4f46e5;
19
+ color: white;
20
+ }
21
+ </style>
22
+ </head>
23
+ <body class="bg-gray-50 font-sans">
24
+ <!-- Header Section -->
25
+ <header class="gradient-bg text-white py-12">
26
+ <div class="container mx-auto px-4">
27
+ <div class="flex flex-col md:flex-row items-center justify-between">
28
+ <div class="mb-8 md:mb-0">
29
+ <h1 class="text-4xl md:text-5xl font-bold mb-2">Aditya Singh Gaur</h1>
30
+ <p class="text-xl md:text-2xl opacity-90">AI/ML Engineer & Generative AI Specialist</p>
31
+ </div>
32
+ <div class="flex space-x-4">
33
+ <a href="https://github.com/gaur3009-p" target="_blank" class="bg-white text-purple-700 p-3 rounded-full hover:bg-purple-100 transition">
34
+ <i class="fab fa-github text-2xl"></i>
35
+ </a>
36
+ <a href="#" class="bg-white text-blue-600 p-3 rounded-full hover:bg-blue-100 transition">
37
+ <i class="fab fa-linkedin-in text-2xl"></i>
38
+ </a>
39
+ <a href="#" class="bg-white text-red-500 p-3 rounded-full hover:bg-red-100 transition">
40
+ <i class="fas fa-envelope text-2xl"></i>
41
+ </a>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </header>
46
+
47
+ <!-- Main Content -->
48
+ <main class="container mx-auto px-4 py-12">
49
+ <!-- About Section -->
50
+ <section class="mb-16">
51
+ <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b-2 border-purple-200 pb-2">About Me</h2>
52
+ <p class="text-gray-700 text-lg leading-relaxed">
53
+ AI/ML Engineer specializing in Natural Language Processing and Generative AI applications.
54
+ Passionate about building innovative solutions that bridge human-computer interaction through
55
+ voice interfaces, intelligent chatbots, and creative AI tools. Experienced in both technical
56
+ implementation and product strategy for AI-powered startups.
57
+ </p>
58
+ </section>
59
+
60
+ <!-- Projects Section -->
61
+ <section class="mb-16">
62
+ <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b-2 border-purple-200 pb-2">Featured Projects</h2>
63
+
64
+ <!-- Project 1 -->
65
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
66
+ <div class="md:flex">
67
+ <div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-r from-purple-500 to-indigo-600 p-8 flex items-center justify-center">
68
+ <i class="fas fa-microphone-alt text-white text-8xl"></i>
69
+ </div>
70
+ <div class="p-8 md:w-2/3">
71
+ <div class="uppercase tracking-wide text-sm text-indigo-600 font-semibold mb-1">NLP & Speech Processing</div>
72
+ <h3 class="text-2xl font-bold text-gray-800 mb-3">Speech Grammar Correction via Voice Input</h3>
73
+ <p class="text-gray-600 mb-4">
74
+ Enables users to speak grammatically incorrect sentences, and the system automatically corrects them using AI-based NLP models.
75
+ Combines Automatic Speech Recognition (ASR), grammar correction transformers, and Text-to-Speech (TTS) to complete the loop.
76
+ </p>
77
+ <div class="flex flex-wrap gap-2 mb-4">
78
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Python</span>
79
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Gradio</span>
80
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Transformers</span>
81
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">TTS</span>
82
+ <span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded">Hugging Face</span>
83
+ </div>
84
+ <div class="flex flex-col sm:flex-row gap-3">
85
+ <a href="https://huggingface.co/spaces/gaur3009-p/SHL_assign" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-center transition">
86
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
87
+ </a>
88
+ <a href="https://github.com/gaur3009-p/SHL_assign" target="_blank" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg text-center transition">
89
+ <i class="fab fa-github mr-2"></i> GitHub Repo
90
+ </a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </div>
95
+
96
+ <!-- Project 2 -->
97
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
98
+ <div class="md:flex">
99
+ <div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-r from-blue-500 to-teal-600 p-8 flex items-center justify-center">
100
+ <i class="fas fa-robot text-white text-8xl"></i>
101
+ </div>
102
+ <div class="p-8 md:w-2/3">
103
+ <div class="uppercase tracking-wide text-sm text-blue-600 font-semibold mb-1">Question Answering System</div>
104
+ <h3 class="text-2xl font-bold text-gray-800 mb-3">QA Bot – RAG-Based Question Answering System</h3>
105
+ <p class="text-gray-600 mb-4">
106
+ Developed a chatbot capable of answering questions from custom documents using Retrieval Augmented Generation (RAG).
107
+ Built using vector databases, LLMs, and document chunking strategies to handle both unstructured and semi-structured data.
108
+ </p>
109
+ <div class="mb-4">
110
+ <h4 class="font-semibold text-gray-800 mb-2">Features:</h4>
111
+ <ul class="list-disc list-inside text-gray-600 space-y-1">
112
+ <li>Upload any document (PDF, DOCX, TXT)</li>
113
+ <li>Parses and indexes with Weaviate</li>
114
+ <li>Queries answered with accuracy and real-time context awareness</li>
115
+ </ul>
116
+ </div>
117
+ <div class="flex flex-wrap gap-2 mb-4">
118
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Weaviate-Client</span>
119
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Cohere</span>
120
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Gradio</span>
121
+ <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">PyPDFLoader</span>
122
+ </div>
123
+ <a href="https://github.com/gaur3009-p/QA_Bot" target="_blank" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
124
+ <i class="fab fa-github mr-2"></i> GitHub Repo
125
+ </a>
126
+ </div>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Project 3 -->
131
+ <div class="project-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
132
+ <div class="md:flex">
133
+ <div class="md:flex-shrink-0 md:w-1/3 bg-gradient-to-r from-pink-500 to-rose-600 p-8 flex items-center justify-center">
134
+ <i class="fas fa-rocket text-white text-8xl"></i>
135
+ </div>
136
+ <div class="p-8 md:w-2/3">
137
+ <div class="uppercase tracking-wide text-sm text-pink-600 font-semibold mb-1">Startup Experience</div>
138
+ <h3 class="text-2xl font-bold text-gray-800 mb-3">Rookus Startup – GenAI Campaign Pivot</h3>
139
+ <p class="text-gray-600 mb-4">
140
+ Originally began with a vision to generate fashion designs using AI, but pivoted to Creative Campaigns as a Service (CaaS)
141
+ after identifying market needs. Built AI tools for generating marketing content, product descriptions, and integrating with
142
+ SEO tools and CRM workflows.
143
+ </p>
144
+ <div class="mb-4">
145
+ <h4 class="font-semibold text-gray-800 mb-2">Impact:</h4>
146
+ <ul class="list-disc list-inside text-gray-600 space-y-1">
147
+ <li>Runner-Up in the BIT Winter Cohort (July 26th 2025)</li>
148
+ <li>Secured initial funding and praise for innovation</li>
149
+ <li>Judges appreciated the pivot and idea clarity</li>
150
+ </ul>
151
+ </div>
152
+ <div class="mb-4">
153
+ <h4 class="font-semibold text-gray-800 mb-2">Key Learnings:</h4>
154
+ <ul class="list-disc list-inside text-gray-600 space-y-1">
155
+ <li>Market research and user demand are critical</li>
156
+ <li>Pivoting at the right time can transform product trajectory</li>
157
+ <li>Effective storytelling and problem solving wins investors</li>
158
+ </ul>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- Skills Section -->
166
+ <section class="mb-16">
167
+ <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b-2 border-purple-200 pb-2">Technical Skills</h2>
168
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
169
+ <div class="skill-pill bg-white p-6 rounded-lg shadow-sm border border-gray-200 transition duration-300">
170
+ <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
171
+ <i class="fas fa-language text-purple-600 mr-2"></i> NLP & LLMs
172
+ </h3>
173
+ <ul class="space-y-2 text-gray-700">
174
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Prompt engineering & fine-tuning</li>
175
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Retrieval-Augmented Generation (RAG)</li>
176
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Speech-to-Text & Text-to-Speech</li>
177
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Grammar correction models</li>
178
+ </ul>
179
+ </div>
180
+ <div class="skill-pill bg-white p-6 rounded-lg shadow-sm border border-gray-200 transition duration-300">
181
+ <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
182
+ <i class="fas fa-laptop-code text-blue-600 mr-2"></i> Development
183
+ </h3>
184
+ <ul class="space-y-2 text-gray-700">
185
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Python programming</li>
186
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Gradio UI development</li>
187
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Hugging Face ecosystem</li>
188
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Vector databases (Weaviate)</li>
189
+ </ul>
190
+ </div>
191
+ <div class="skill-pill bg-white p-6 rounded-lg shadow-sm border border-gray-200 transition duration-300">
192
+ <h3 class="text-xl font-semibold mb-3 text-gray-800 flex items-center">
193
+ <i class="fas fa-lightbulb text-yellow-600 mr-2"></i> Product & Strategy
194
+ </h3>
195
+ <ul class="space-y-2 text-gray-700">
196
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> AI product development</li>
197
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Market research & validation</li>
198
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Startup pitching & storytelling</li>
199
+ <li class="flex items-center"><i class="fas fa-check text-green-500 mr-2"></i> Product pivoting strategies</li>
200
+ </ul>
201
+ </div>
202
+ </div>
203
+ </section>
204
+
205
+ <!-- Contact Section -->
206
+ <section>
207
+ <h2 class="text-3xl font-bold mb-8 text-gray-800 border-b-2 border-purple-200 pb-2">Get In Touch</h2>
208
+ <div class="bg-white rounded-lg shadow-md p-8">
209
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
210
+ <div>
211
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Contact Information</h3>
212
+ <div class="space-y-4">
213
+ <div class="flex items-start">
214
+ <i class="fas fa-envelope text-purple-600 mt-1 mr-3"></i>
215
+ <div>
216
+ <p class="text-gray-600">Email</p>
217
+ <a href="mailto:[email protected]" class="text-gray-800 font-medium hover:text-purple-600 transition">[email protected]</a>
218
+ </div>
219
+ </div>
220
+ <div class="flex items-start">
221
+ <i class="fab fa-github text-purple-600 mt-1 mr-3"></i>
222
+ <div>
223
+ <p class="text-gray-600">GitHub</p>
224
+ <a href="https://github.com/gaur3009-p" target="_blank" class="text-gray-800 font-medium hover:text-purple-600 transition">github.com/gaur3009-p</a>
225
+ </div>
226
+ </div>
227
+ <div class="flex items-start">
228
+ <i class="fab fa-linkedin-in text-purple-600 mt-1 mr-3"></i>
229
+ <div>
230
+ <p class="text-gray-600">LinkedIn</p>
231
+ <a href="#" target="_blank" class="text-gray-800 font-medium hover:text-purple-600 transition">linkedin.com/in/aditya-gaur</a>
232
+ </div>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ <div>
237
+ <h3 class="text-xl font-semibold mb-4 text-gray-800">Send a Message</h3>
238
+ <form class="space-y-4">
239
+ <div>
240
+ <label for="name" class="block text-gray-700 mb-1">Name</label>
241
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
242
+ </div>
243
+ <div>
244
+ <label for="email" class="block text-gray-700 mb-1">Email</label>
245
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition">
246
+ </div>
247
+ <div>
248
+ <label for="message" class="block text-gray-700 mb-1">Message</label>
249
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 outline-none transition"></textarea>
250
+ </div>
251
+ <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-2 rounded-lg transition">
252
+ Send Message
253
+ </button>
254
+ </form>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </section>
259
+ </main>
260
+
261
+ <!-- Footer -->
262
+ <footer class="bg-gray-800 text-white py-8">
263
+ <div class="container mx-auto px-4">
264
+ <div class="flex flex-col md:flex-row justify-between items-center">
265
+ <div class="mb-4 md:mb-0">
266
+ <p>&copy; 2023 Aditya Singh Gaur. All rights reserved.</p>
267
+ </div>
268
+ <div class="flex space-x-4">
269
+ <a href="#" class="hover:text-purple-300 transition">
270
+ <i class="fab fa-github text-xl"></i>
271
+ </a>
272
+ <a href="#" class="hover:text-blue-300 transition">
273
+ <i class="fab fa-linkedin-in text-xl"></i>
274
+ </a>
275
+ <a href="#" class="hover:text-red-300 transition">
276
+ <i class="fab fa-twitter text-xl"></i>
277
+ </a>
278
+ </div>
279
+ </div>
280
+ </div>
281
+ </footer>
282
+
283
+ <script>
284
+ // Simple animation for project cards on scroll
285
+ document.addEventListener('DOMContentLoaded', function() {
286
+ const projectCards = document.querySelectorAll('.project-card');
287
+
288
+ const observer = new IntersectionObserver((entries) => {
289
+ entries.forEach(entry => {
290
+ if (entry.isIntersecting) {
291
+ entry.target.style.opacity = 1;
292
+ entry.target.style.transform = 'translateY(0)';
293
+ }
294
+ });
295
+ }, { threshold: 0.1 });
296
+
297
+ projectCards.forEach(card => {
298
+ card.style.opacity = 0;
299
+ card.style.transform = 'translateY(20px)';
300
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
301
+ observer.observe(card);
302
+ });
303
+ });
304
+ </script>
305
+ </body>
306
+ </html>