Hugging Face's logo

Spaces:
gaur3009
/
dsd
Running

App Files Community
gaur3009 commited on
Commit
c17f647
·
verified ·
1 Parent(s): d30dcd8

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +292 -266
index.html CHANGED
@@ -3,304 +3,330 @@
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" 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="https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/" 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="[email protected]" 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="[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">https://www.linkedin.com/in/aditya-singh-gaur-8356ba229/</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; 2025 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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Aditya Singh Gaur - Portfolio</title>
7
+ <!-- Load Font Awesome for icons -->
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: #6c63ff;
12
+ --secondary: #4a44b5;
13
+ --dark: #2a2a4a;
14
+ --light: #f8f9fa;
15
+ }
16
+
17
+ * {
18
+ margin: 0;
19
+ padding: 0;
20
+ box-sizing: border-box;
21
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
22
+ }
23
+
24
+ body {
25
+ background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
26
+ color: var(--light);
27
+ min-height: 100vh;
28
+ }
29
+
30
  .gradient-bg {
31
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
32
+ }
33
+
34
+ .container {
35
+ width: 100%;
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ padding: 0 20px;
39
+ }
40
+
41
+ header {
42
+ padding: 80px 0;
43
+ position: relative;
44
+ overflow: hidden;
45
+ }
46
+
47
+ header::before {
48
+ content: "";
49
+ position: absolute;
50
+ top: 0;
51
+ left: 0;
52
+ width: 100%;
53
+ height: 100%;
54
+ background: radial-gradient(circle at top right, rgba(108, 99, 255, 0.2), transparent 70%);
55
+ pointer-events: none;
56
+ }
57
+
58
+ .flex {
59
+ display: flex;
60
+ }
61
+
62
+ .flex-col {
63
+ flex-direction: column;
64
+ }
65
+
66
+ .md\:flex-row {
67
+ flex-direction: column;
68
+ }
69
+
70
+ .items-center {
71
+ align-items: center;
72
+ }
73
+
74
+ .justify-between {
75
+ justify-content: space-between;
76
+ }
77
+
78
+ .mb-8 {
79
+ margin-bottom: 2rem;
80
+ }
81
+
82
+ .md\:mb-0 {
83
+ margin-bottom: 0;
84
+ }
85
+
86
+ .text-4xl {
87
+ font-size: 2.25rem;
88
+ }
89
+
90
+ .md\:text-5xl {
91
+ font-size: 3rem;
92
+ }
93
+
94
+ .font-bold {
95
+ font-weight: 700;
96
+ }
97
+
98
+ .mb-2 {
99
+ margin-bottom: 0.5rem;
100
+ }
101
+
102
+ .text-xl {
103
+ font-size: 1.25rem;
104
+ }
105
+
106
+ .md\:text-2xl {
107
+ font-size: 1.5rem;
108
+ }
109
+
110
+ .opacity-90 {
111
+ opacity: 0.9;
112
+ }
113
+
114
+ .space-x-4 > * + * {
115
+ margin-left: 1rem;
116
+ }
117
+
118
+ .bg-white {
119
+ background-color: white;
120
+ }
121
+
122
+ .text-purple-700 {
123
+ color: #6c63ff;
124
+ }
125
+
126
+ .p-3 {
127
+ padding: 0.75rem;
128
+ }
129
+
130
+ .rounded-full {
131
+ border-radius: 9999px;
132
+ }
133
+
134
+ .hover\:bg-purple-100:hover {
135
+ background-color: #e0d7ff;
136
+ }
137
+
138
+ .transition {
139
+ transition: all 0.3s ease;
140
+ }
141
+
142
+ .text-2xl {
143
+ font-size: 1.5rem;
144
+ }
145
+
146
+ .text-blue-600 {
147
+ color: #2563eb;
148
+ }
149
+
150
+ .hover\:bg-blue-100:hover {
151
+ background-color: #dbeafe;
152
+ }
153
+
154
+ .text-red-500 {
155
+ color: #ef4444;
156
+ }
157
+
158
+ .hover\:bg-red-100:hover {
159
+ background-color: #fee2e2;
160
+ }
161
+
162
+ /* Content section */
163
+ .content {
164
+ padding: 60px 0;
165
+ background-color: rgba(255, 255, 255, 0.05);
166
+ backdrop-filter: blur(10px);
167
+ border-radius: 20px;
168
+ margin: 40px;
169
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
170
  }
171
+
172
+ .section-title {
173
+ text-align: center;
174
+ font-size: 2.5rem;
175
+ margin-bottom: 40px;
176
+ position: relative;
177
  }
178
+
179
+ .section-title::after {
180
+ content: "";
181
+ position: absolute;
182
+ bottom: -10px;
183
+ left: 50%;
184
+ transform: translateX(-50%);
185
+ width: 80px;
186
+ height: 4px;
187
+ background: linear-gradient(to right, var(--primary), var(--secondary));
188
+ border-radius: 2px;
189
+ }
190
+
191
+ .skills-container {
192
+ display: grid;
193
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
194
+ gap: 30px;
195
+ padding: 0 40px;
196
+ }
197
+
198
+ .skill-card {
199
+ background: rgba(255, 255, 255, 0.1);
200
+ border-radius: 15px;
201
+ padding: 30px;
202
+ text-align: center;
203
+ transition: transform 0.3s ease;
204
+ }
205
+
206
+ .skill-card:hover {
207
+ transform: translateY(-10px);
208
+ background: rgba(255, 255, 255, 0.15);
209
+ }
210
+
211
+ .skill-icon {
212
+ font-size: 3rem;
213
+ margin-bottom: 20px;
214
+ color: var(--primary);
215
+ }
216
+
217
+ .skill-title {
218
+ font-size: 1.5rem;
219
+ margin-bottom: 15px;
220
+ }
221
+
222
+ .skill-desc {
223
+ color: rgba(255, 255, 255, 0.8);
224
+ line-height: 1.6;
225
+ }
226
+
227
+ @media (min-width: 768px) {
228
+ .md\:flex-row {
229
+ flex-direction: row;
230
+ }
231
+ }
232
+
233
+ /* Animation for header text */
234
+ @keyframes fadeInUp {
235
+ from {
236
+ opacity: 0;
237
+ transform: translateY(20px);
238
+ }
239
+ to {
240
+ opacity: 1;
241
+ transform: translateY(0);
242
+ }
243
+ }
244
+
245
+ .animated {
246
+ animation: fadeInUp 1s ease-out forwards;
247
+ }
248
+
249
+ .delay-1 {
250
+ animation-delay: 0.2s;
251
+ }
252
+
253
+ .delay-2 {
254
+ animation-delay: 0.4s;
255
+ }
256
+
257
+ .delay-3 {
258
+ animation-delay: 0.6s;
259
+ }
260
+
261
+ /* Footer */
262
+ footer {
263
+ text-align: center;
264
+ padding: 30px 0;
265
+ color: rgba(255, 255, 255, 0.6);
266
+ font-size: 0.9rem;
267
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
268
  }
269
  </style>
270
  </head>
271
+ <body>
 
272
  <header class="gradient-bg text-white py-12">
273
  <div class="container mx-auto px-4">
274
  <div class="flex flex-col md:flex-row items-center justify-between">
275
+ <div class="mb-8 md:mb-0 animated">
276
  <h1 class="text-4xl md:text-5xl font-bold mb-2">Aditya Singh Gaur</h1>
277
+ <p class="text-xl md:text-2xl opacity-90 delay-1 animated">AI/ML Engineer & Generative AI Specialist</p>
278
  </div>
279
  <div class="flex space-x-4">
280
+ <a href="mailto:gaur3009@gmail.com" class="bg-white text-red-500 p-3 rounded-full hover:bg-red-100 transition delay-2 animated">
 
 
 
 
 
 
281
  <i class="fas fa-envelope text-2xl"></i>
282
  </a>
283
  </div>
284
  </div>
285
  </div>
286
  </header>
287
+
288
+ <main class="content">
289
+ <h2 class="section-title">My Skills</h2>
290
+ <div class="skills-container">
291
+ <div class="skill-card">
292
+ <div class="skill-icon">
293
+ <i class="fas fa-brain"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
294
  </div>
295
+ <h3 class="skill-title">Machine Learning</h3>
296
+ <p class="skill-desc">Building predictive models and implementing ML algorithms for real-world applications.</p>
297
  </div>
298
 
299
+ <div class="skill-card">
300
+ <div class="skill-icon">
301
+ <i class="fas fa-robot"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
302
  </div>
303
+ <h3 class="skill-title">Generative AI</h3>
304
+ <p class="skill-desc">Creating innovative solutions with GANs, transformers, and other generative models.</p>
305
  </div>
306
 
307
+ <div class="skill-card">
308
+ <div class="skill-icon">
309
+ <i class="fas fa-chart-line"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
310
  </div>
311
+ <h3 class="skill-title">Data Science</h3>
312
+ <p class="skill-desc">Extracting insights from complex datasets and creating visualizations.</p>
313
  </div>
314
+
315
+ <div class="skill-card">
316
+ <div class="skill-icon">
317
+ <i class="fas fa-code"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
318
  </div>
319
+ <h3 class="skill-title">Deep Learning</h3>
320
+ <p class="skill-desc">Developing neural network architectures for computer vision and NLP tasks.</p>
321
  </div>
322
+ </div>
323
  </main>
324
+
325
+ <footer>
326
+ <div class="container">
327
+ <p>© 2023 Aditya Singh Gaur. All rights reserved.</p>
328
+ <p class="mt-2">Designed with ❤️ and AI</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
329
  </div>
330
  </footer>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
331
  </body>
332
  </html>