Hugging Face's logo

Spaces:
RounakRC
/
portfolio
Running

App Files Community
RounakRC commited on
Commit
09a6e15
·
verified ·
1 Parent(s): 121b968

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +590 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Portfolio
3
- emoji: 💻
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: portfolio
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,590 @@
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>Rounak Chauhan | AI & Data Science 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
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .gradient-text {
18
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
19
+ -webkit-background-clip: text;
20
+ background-clip: text;
21
+ color: transparent;
22
+ }
23
+
24
+ .project-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+
29
+ .skill-pill:hover {
30
+ transform: scale(1.05);
31
+ }
32
+
33
+ .timeline-item:not(:last-child)::after {
34
+ content: '';
35
+ position: absolute;
36
+ left: 20px;
37
+ top: 30px;
38
+ height: calc(100% - 30px);
39
+ width: 2px;
40
+ background: #e5e7eb;
41
+ }
42
+
43
+ .nav-link {
44
+ position: relative;
45
+ }
46
+
47
+ .nav-link::after {
48
+ content: '';
49
+ position: absolute;
50
+ width: 0;
51
+ height: 2px;
52
+ bottom: -2px;
53
+ left: 0;
54
+ background: #3b82f6;
55
+ transition: width 0.3s ease;
56
+ }
57
+
58
+ .nav-link:hover::after {
59
+ width: 100%;
60
+ }
61
+
62
+ .active::after {
63
+ width: 100%;
64
+ }
65
+ </style>
66
+ </head>
67
+ <body class="bg-gray-50 text-gray-800">
68
+ <!-- Navigation -->
69
+ <nav class="fixed w-full bg-white shadow-sm z-50">
70
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
71
+ <div class="flex justify-between h-16">
72
+ <div class="flex items-center">
73
+ <span class="text-xl font-bold gradient-text">Rounak Chauhan</span>
74
+ </div>
75
+ <div class="hidden md:flex items-center space-x-8">
76
+ <a href="#home" class="nav-link active">Home</a>
77
+ <a href="#about" class="nav-link">About</a>
78
+ <a href="#experience" class="nav-link">Experience</a>
79
+ <a href="#projects" class="nav-link">Projects</a>
80
+ <a href="#contact" class="nav-link">Contact</a>
81
+ </div>
82
+ <div class="md:hidden flex items-center">
83
+ <button id="menu-btn" class="text-gray-600 hover:text-gray-900 focus:outline-none">
84
+ <i class="fas fa-bars text-2xl"></i>
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ <!-- Mobile menu -->
90
+ <div id="mobile-menu" class="hidden md:hidden bg-white pb-4 px-4 shadow-lg">
91
+ <div class="flex flex-col space-y-3">
92
+ <a href="#home" class="nav-link py-2 active">Home</a>
93
+ <a href="#about" class="nav-link py-2">About</a>
94
+ <a href="#experience" class="nav-link py-2">Experience</a>
95
+ <a href="#projects" class="nav-link py-2">Projects</a>
96
+ <a href="#contact" class="nav-link py-2">Contact</a>
97
+ </div>
98
+ </div>
99
+ </nav>
100
+
101
+ <!-- Hero Section -->
102
+ <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 bg-gradient-to-r from-blue-50 to-purple-50">
103
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
104
+ <div class="flex flex-col md:flex-row items-center justify-between">
105
+ <div class="md:w-1/2 mb-10 md:mb-0">
106
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Hi, I'm <span class="gradient-text">Rounak Chauhan</span></h1>
107
+ <h2 class="text-2xl md:text-3xl font-semibold text-gray-600 mb-6">AI & Data Science Enthusiast</h2>
108
+ <p class="text-gray-600 mb-8 text-lg">Passionate about building intelligent systems and extracting insights from data to solve real-world problems.</p>
109
+ <div class="flex space-x-4">
110
+ <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Contact Me</a>
111
+ <a href="#projects" class="border border-blue-600 text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium transition duration-300">View Projects</a>
112
+ </div>
113
+ </div>
114
+ <div class="md:w-1/2 flex justify-center">
115
+ <div class="relative w-64 h-64 md:w-80 md:h-80 rounded-full overflow-hidden border-4 border-white shadow-xl">
116
+ <img src="https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Rounak Chauhan" class="w-full h-full object-cover">
117
+ </div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- About Section -->
124
+ <section id="about" class="py-16 bg-white">
125
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
126
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">About Me</h2>
127
+
128
+ <div class="flex flex-col md:flex-row gap-8">
129
+ <div class="md:w-1/2">
130
+ <h3 class="text-2xl font-semibold mb-4">Education</h3>
131
+ <div class="space-y-6">
132
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
133
+ <h4 class="font-bold text-lg">Bachelor of Technology in Artificial Intelligence & Data Science</h4>
134
+ <p class="text-gray-600">Madhav Institute of Technology and Science, Gwalior</p>
135
+ <p class="text-gray-500">August 2021 - June 2025 | CGPA: 8.4/10</p>
136
+ </div>
137
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
138
+ <h4 class="font-bold text-lg">Class 12th - CBSE</h4>
139
+ <p class="text-gray-600">Kendriya Vidyalaya No.2, Indore</p>
140
+ <p class="text-gray-500">April 2020 – March 2021 | Percentage: 90%</p>
141
+ </div>
142
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
143
+ <h4 class="font-bold text-lg">Class 10th - CBSE</h4>
144
+ <p class="text-gray-600">Vaishnav Bal Mandir Girls School, Indore</p>
145
+ <p class="text-gray-500">April 2018 – March 2019 | Percentage: 89%</p>
146
+ </div>
147
+ </div>
148
+ </div>
149
+
150
+ <div class="md:w-1/2">
151
+ <h3 class="text-2xl font-semibold mb-4">Skills</h3>
152
+ <div class="mb-8">
153
+ <h4 class="font-medium mb-2">Programming Languages</h4>
154
+ <div class="flex flex-wrap gap-2">
155
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm transition duration-300">Python</span>
156
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm transition duration-300">C++</span>
157
+ <span class="skill-pill bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm transition duration-300">SQL</span>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="mb-8">
162
+ <h4 class="font-medium mb-2">Technical Skills</h4>
163
+ <div class="flex flex-wrap gap-2">
164
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Machine Learning</span>
165
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Deep Learning</span>
166
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">AI</span>
167
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Data Science</span>
168
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Data Structures</span>
169
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">Algorithms</span>
170
+ <span class="skill-pill bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm transition duration-300">OOP</span>
171
+ </div>
172
+ </div>
173
+
174
+ <div class="mb-8">
175
+ <h4 class="font-medium mb-2">Software & Tools</h4>
176
+ <div class="flex flex-wrap gap-2">
177
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">MySQL</span>
178
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">WEKA</span>
179
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">Git</span>
180
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">GitHub</span>
181
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">Jupyter</span>
182
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">FastAPI</span>
183
+ <span class="skill-pill bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm transition duration-300">Postman</span>
184
+ </div>
185
+ </div>
186
+
187
+ <div>
188
+ <h4 class="font-medium mb-2">ML Frameworks & Libraries</h4>
189
+ <div class="flex flex-wrap gap-2">
190
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">Pandas</span>
191
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">NumPy</span>
192
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">Matplotlib</span>
193
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">Flask</span>
194
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">TensorFlow</span>
195
+ <span class="skill-pill bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm transition duration-300">OpenCV</span>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Experience Section -->
204
+ <section id="experience" class="py-16 bg-gray-50">
205
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
206
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Experience</h2>
207
+
208
+ <div class="relative">
209
+ <!-- Timeline -->
210
+ <div class="space-y-8">
211
+ <div class="timeline-item relative pl-12">
212
+ <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-white">
213
+ <i class="fas fa-briefcase"></i>
214
+ </div>
215
+ <div class="bg-white p-6 rounded-lg shadow-sm">
216
+ <h3 class="font-bold text-xl">AI Intern</h3>
217
+ <p class="text-gray-600">Supersourcing, Indore</p>
218
+ <p class="text-gray-500 mb-4">March 2025 – June 2025</p>
219
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
220
+ <li>Worked on developing an AI chatbot using Large Language Models (LLMs)</li>
221
+ <li>Handled end-to-end data collection, web scraping, cleaning, and formatting for fine-tuning the chatbot</li>
222
+ <li>Developed Python scripts for automated web scraping to extract real-time data used in chatbot responses</li>
223
+ <li>Collaborated with cross-functional teams to deploy and test the chatbot in real-world environments</li>
224
+ </ul>
225
+ </div>
226
+ </div>
227
+
228
+ <div class="timeline-item relative pl-12">
229
+ <div class="absolute left-0 top-0 w-10 h-10 rounded-full bg-purple-600 flex items-center justify-center text-white">
230
+ <i class="fas fa-laptop-code"></i>
231
+ </div>
232
+ <div class="bg-white p-6 rounded-lg shadow-sm">
233
+ <h3 class="font-bold text-xl">Project Intern</h3>
234
+ <p class="text-gray-600">Infosys Springboard</p>
235
+ <p class="text-gray-500 mb-4">April 2024 – June 2024</p>
236
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
237
+ <li>Developed a Plant Disease Classification model achieving 91% accuracy using NumPy, Pandas, Matplotlib, and Flask</li>
238
+ <li>Collaborated effectively within a team of 4 members, actively participating in daily meetings and discussions</li>
239
+ <li>Demonstrated strong communication, analytical, and teamwork skills through collaborative project work</li>
240
+ </ul>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- Projects Section -->
249
+ <section id="projects" class="py-16 bg-white">
250
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
251
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Projects</h2>
252
+
253
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
254
+ <!-- Project 1 -->
255
+ <div class="project-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300">
256
+ <div class="h-48 bg-gradient-to-r from-blue-400 to-purple-500 flex items-center justify-center">
257
+ <i class="fas fa-leaf text-white text-6xl"></i>
258
+ </div>
259
+ <div class="p-6">
260
+ <h3 class="font-bold text-xl mb-2">Plant Disease Classification</h3>
261
+ <p class="text-gray-600 mb-4">Achieved 91% accuracy in identifying plant diseases using CNN with TensorFlow</p>
262
+ <div class="flex flex-wrap gap-2 mb-4">
263
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">NumPy</span>
264
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Pandas</span>
265
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Matplotlib</span>
266
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">TensorFlow</span>
267
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Flask</span>
268
+ </div>
269
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
270
+ View Details <i class="fas fa-arrow-right ml-2"></i>
271
+ </a>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Project 2 -->
276
+ <div class="project-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300">
277
+ <div class="h-48 bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center">
278
+ <i class="fas fa-robot text-white text-6xl"></i>
279
+ </div>
280
+ <div class="p-6">
281
+ <h3 class="font-bold text-xl mb-2">Voice Assistant</h3>
282
+ <p class="text-gray-600 mb-4">Created a voice assistant capable of recognizing and responding to user commands</p>
283
+ <div class="flex flex-wrap gap-2 mb-4">
284
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Python</span>
285
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">SpeechRecognition</span>
286
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">PyAudio</span>
287
+ <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Text-to-Speech</span>
288
+ </div>
289
+ <a href="#" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
290
+ View Details <i class="fas fa-arrow-right ml-2"></i>
291
+ </a>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Project 3 -->
296
+ <div class="project-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300">
297
+ <div class="h-48 bg-gradient-to-r from-green-400 to-blue-500 flex items-center justify-center">
298
+ <i class="fas fa-eye text-white text-6xl"></i>
299
+ </div>
300
+ <div class="p-6">
301
+ <h3 class="font-bold text-xl mb-2">AlertGuard</h3>
302
+ <p class="text-gray-600 mb-4">Real-time drowsiness detection system using OpenCV and Dlib</p>
303
+ <div class="flex flex-wrap gap-2 mb-4">
304
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">OpenCV</span>
305
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">NumPy</span>
306
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Dlib</span>
307
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Pygame</span>
308
+ </div>
309
+ <a href="#" class="text-green-600 hover:text-green-800 font-medium inline-flex items-center">
310
+ View Details <i class="fas fa-arrow-right ml-2"></i>
311
+ </a>
312
+ </div>
313
+ </div>
314
+ </div>
315
+ </div>
316
+ </section>
317
+
318
+ <!-- Achievements & Certifications -->
319
+ <section class="py-16 bg-gray-50">
320
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
321
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
322
+ <!-- Achievements -->
323
+ <div>
324
+ <h2 class="text-3xl font-bold mb-8 gradient-text text-center md:text-left">Achievements</h2>
325
+ <div class="space-y-4">
326
+ <div class="bg-white p-6 rounded-lg shadow-sm">
327
+ <div class="flex items-start">
328
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
329
+ <i class="fas fa-trophy text-blue-600"></i>
330
+ </div>
331
+ <div>
332
+ <h3 class="font-bold text-lg">2nd Position at Model Making Competition</h3>
333
+ <p class="text-gray-600">Drowsiness Detection System project organized by Madhav Institute of Technology and Science</p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="bg-white p-6 rounded-lg shadow-sm">
339
+ <div class="flex items-start">
340
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
341
+ <i class="fas fa-users text-purple-600"></i>
342
+ </div>
343
+ <div>
344
+ <h3 class="font-bold text-lg">Design Strategist Lead</h3>
345
+ <p class="text-gray-600">Google Developer Student Clubs (GDSC) MITS Gwalior</p>
346
+ </div>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="bg-white p-6 rounded-lg shadow-sm">
351
+ <div class="flex items-start">
352
+ <div class="bg-green-100 p-3 rounded-full mr-4">
353
+ <i class="fas fa-paint-brush text-green-600"></i>
354
+ </div>
355
+ <div>
356
+ <h3 class="font-bold text-lg">Graphics & Creativity Head</h3>
357
+ <p class="text-gray-600">Girls' Grievance Cell MITS Gwalior</p>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+
364
+ <!-- Certifications -->
365
+ <div>
366
+ <h2 class="text-3xl font-bold mb-8 gradient-text text-center md:text-left">Certifications</h2>
367
+ <div class="space-y-4">
368
+ <div class="bg-white p-6 rounded-lg shadow-sm">
369
+ <div class="flex items-start">
370
+ <div class="bg-yellow-100 p-3 rounded-full mr-4">
371
+ <i class="fas fa-certificate text-yellow-600"></i>
372
+ </div>
373
+ <div>
374
+ <h3 class="font-bold text-lg">AI Associate Certified</h3>
375
+ <p class="text-gray-600">Salesforce</p>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <div class="bg-white p-6 rounded-lg shadow-sm">
381
+ <div class="flex items-start">
382
+ <div class="bg-red-100 p-3 rounded-full mr-4">
383
+ <i class="fas fa-chart-line text-red-600"></i>
384
+ </div>
385
+ <div>
386
+ <h3 class="font-bold text-lg">Deloitte Data Analytics Job Simulation</h3>
387
+ <p class="text-gray-600">Forage</p>
388
+ </div>
389
+ </div>
390
+ </div>
391
+
392
+ <div class="bg-white p-6 rounded-lg shadow-sm">
393
+ <div class="flex items-start">
394
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
395
+ <i class="fas fa-brain text-indigo-600"></i>
396
+ </div>
397
+ <div>
398
+ <h3 class="font-bold text-lg">Artificial Intelligence Primer</h3>
399
+ <p class="text-gray-600">Infosys Springboard</p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="bg-white p-6 rounded-lg shadow-sm">
405
+ <div class="flex items-start">
406
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
407
+ <i class="fas fa-cloud text-blue-600"></i>
408
+ </div>
409
+ <div>
410
+ <h3 class="font-bold text-lg">Google Cloud Digital Leader Training</h3>
411
+ <p class="text-gray-600">Coursera</p>
412
+ </div>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ </section>
420
+
421
+ <!-- Contact Section -->
422
+ <section id="contact" class="py-16 bg-white">
423
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
424
+ <h2 class="text-3xl font-bold text-center mb-12 gradient-text">Get In Touch</h2>
425
+
426
+ <div class="flex flex-col md:flex-row gap-8">
427
+ <div class="md:w-1/2">
428
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
429
+ <h3 class="text-xl font-semibold mb-6">Contact Information</h3>
430
+ <div class="space-y-4">
431
+ <div class="flex items-start">
432
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
433
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
434
+ </div>
435
+ <div>
436
+ <h4 class="font-medium">Location</h4>
437
+ <p class="text-gray-600">Indore, Madhya Pradesh, India</p>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="flex items-start">
442
+ <div class="bg-purple-100 p-2 rounded-full mr-4">
443
+ <i class="fas fa-envelope text-purple-600"></i>
444
+ </div>
445
+ <div>
446
+ <h4 class="font-medium">Email</h4>
447
+ <p class="text-gray-600">[email protected]</p>
448
+ </div>
449
+ </div>
450
+
451
+ <div class="flex items-start">
452
+ <div class="bg-green-100 p-2 rounded-full mr-4">
453
+ <i class="fas fa-phone text-green-600"></i>
454
+ </div>
455
+ <div>
456
+ <h4 class="font-medium">Phone</h4>
457
+ <p class="text-gray-600">+91-9399381575</p>
458
+ </div>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="mt-8">
463
+ <h3 class="text-xl font-semibold mb-4">Connect With Me</h3>
464
+ <div class="flex space-x-4">
465
+ <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition duration-300">
466
+ <i class="fab fa-linkedin-in"></i>
467
+ </a>
468
+ <a href="#" class="bg-gray-800 text-white p-3 rounded-full hover:bg-gray-900 transition duration-300">
469
+ <i class="fab fa-github"></i>
470
+ </a>
471
+ <a href="#" class="bg-red-600 text-white p-3 rounded-full hover:bg-red-700 transition duration-300">
472
+ <i class="fab fa-google"></i>
473
+ </a>
474
+ </div>
475
+ </div>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="md:w-1/2">
480
+ <div class="bg-gray-50 p-8 rounded-lg shadow-sm">
481
+ <h3 class="text-xl font-semibold mb-6">Send Me a Message</h3>
482
+ <form>
483
+ <div class="mb-4">
484
+ <label for="name" class="block text-gray-700 mb-2">Name</label>
485
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
486
+ </div>
487
+ <div class="mb-4">
488
+ <label for="email" class="block text-gray-700 mb-2">Email</label>
489
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
490
+ </div>
491
+ <div class="mb-4">
492
+ <label for="subject" class="block text-gray-700 mb-2">Subject</label>
493
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
494
+ </div>
495
+ <div class="mb-4">
496
+ <label for="message" class="block text-gray-700 mb-2">Message</label>
497
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
498
+ </div>
499
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300 w-full">Send Message</button>
500
+ </form>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </section>
506
+
507
+ <!-- Footer -->
508
+ <footer class="bg-gray-900 text-white py-8">
509
+ <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
510
+ <div class="flex flex-col md:flex-row justify-between items-center">
511
+ <div class="mb-4 md:mb-0">
512
+ <span class="text-xl font-bold gradient-text">Rounak Chauhan</span>
513
+ <p class="text-gray-400 mt-2">AI & Data Science Portfolio</p>
514
+ </div>
515
+ <div class="flex space-x-6">
516
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
517
+ <i class="fab fa-linkedin-in text-xl"></i>
518
+ </a>
519
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
520
+ <i class="fab fa-github text-xl"></i>
521
+ </a>
522
+ <a href="#" class="text-gray-400 hover:text-white transition duration-300">
523
+ <i class="fab fa-twitter text-xl"></i>
524
+ </a>
525
+ </div>
526
+ </div>
527
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
528
+ <p>&copy; 2023 Rounak Chauhan. All rights reserved.</p>
529
+ </div>
530
+ </div>
531
+ </footer>
532
+
533
+ <script>
534
+ // Mobile menu toggle
535
+ const menuBtn = document.getElementById('menu-btn');
536
+ const mobileMenu = document.getElementById('mobile-menu');
537
+
538
+ menuBtn.addEventListener('click', () => {
539
+ mobileMenu.classList.toggle('hidden');
540
+ });
541
+
542
+ // Smooth scrolling for navigation links
543
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
544
+ anchor.addEventListener('click', function (e) {
545
+ e.preventDefault();
546
+
547
+ const targetId = this.getAttribute('href');
548
+ const targetElement = document.querySelector(targetId);
549
+
550
+ if (targetElement) {
551
+ // Close mobile menu if open
552
+ mobileMenu.classList.add('hidden');
553
+
554
+ // Scroll to target
555
+ window.scrollTo({
556
+ top: targetElement.offsetTop - 80,
557
+ behavior: 'smooth'
558
+ });
559
+
560
+ // Update active nav link
561
+ document.querySelectorAll('.nav-link').forEach(link => {
562
+ link.classList.remove('active');
563
+ });
564
+ this.classList.add('active');
565
+ }
566
+ });
567
+ });
568
+
569
+ // Update active nav link on scroll
570
+ window.addEventListener('scroll', () => {
571
+ const scrollPosition = window.scrollY;
572
+
573
+ document.querySelectorAll('section').forEach(section => {
574
+ const sectionTop = section.offsetTop - 100;
575
+ const sectionHeight = section.offsetHeight;
576
+ const sectionId = section.getAttribute('id');
577
+
578
+ if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
579
+ document.querySelectorAll('.nav-link').forEach(link => {
580
+ link.classList.remove('active');
581
+ if (link.getAttribute('href') === `#${sectionId}`) {
582
+ link.classList.add('active');
583
+ }
584
+ });
585
+ }
586
+ });
587
+ });
588
+ </script>
589
+ <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=RounakRC/portfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
590
+ </html>