Hugging Face's logo

Spaces:
Karan236
/
karanpatani
Running

App Files Community
Karan236 commited on
Commit
26696cb
·
verified ·
1 Parent(s): 5bfa955

in contact add all my options like insta linkdin whatsapp email as it is before - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +721 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Karanpatani
3
- emoji: 🌍
4
- colorFrom: pink
5
- colorTo: gray
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: karanpatani
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,721 @@
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>Karan Patani | AI/ML Backend Engineer</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=Space+Grotesk:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Space Grotesk', sans-serif;
14
+ background-color: #0f0f0f;
15
+ color: #f2f2f2;
16
+ scroll-behavior: smooth;
17
+ }
18
+
19
+ .grid-bg {
20
+ background-image:
21
+ linear-gradient(rgba(42, 42, 42, 0.1) 1px, transparent 1px),
22
+ linear-gradient(90deg, rgba(42, 42, 42, 0.1) 1px, transparent 1px);
23
+ background-size: 30px 30px;
24
+ }
25
+
26
+ .nav-item {
27
+ transition: all 0.3s ease;
28
+ display: flex;
29
+ flex-direction: column;
30
+ align-items: center;
31
+ width: 100%;
32
+ }
33
+
34
+ .nav-item:hover {
35
+ color: #7f5af0;
36
+ transform: translateX(5px);
37
+ }
38
+
39
+ .nav-item span {
40
+ transition: all 0.3s ease;
41
+ }
42
+
43
+ .nav-item-mobile {
44
+ transition: all 0.3s ease;
45
+ color: white;
46
+ }
47
+
48
+ .nav-item-mobile:hover {
49
+ color: #7f5af0;
50
+ }
51
+
52
+ .project-card {
53
+ transition: all 0.3s ease;
54
+ border: 1px solid #2a2a2a;
55
+ }
56
+
57
+ .project-card:hover {
58
+ border-color: #7f5af0;
59
+ transform: translateY(-5px);
60
+ box-shadow: 0 10px 25px rgba(127, 90, 240, 0.2);
61
+ }
62
+
63
+ .skill-pill {
64
+ transition: all 0.3s ease;
65
+ }
66
+
67
+ .skill-pill:hover {
68
+ background: linear-gradient(45deg, #7f5af0, #5eead4);
69
+ color: white;
70
+ transform: scale(1.05);
71
+ }
72
+
73
+ .typewriter {
74
+ border-right: 2px solid #7f5af0;
75
+ animation: blink 0.75s step-end infinite;
76
+ }
77
+
78
+ @keyframes blink {
79
+ from, to { border-color: transparent }
80
+ 50% { border-color: #7f5af0 }
81
+ }
82
+
83
+ .particle {
84
+ position: absolute;
85
+ background-color: rgba(127, 90, 240, 0.5);
86
+ border-radius: 50%;
87
+ pointer-events: none;
88
+ }
89
+
90
+ .section {
91
+ scroll-margin-top: 100px;
92
+ }
93
+
94
+ @media (max-width: 768px) {
95
+ .nav-menu {
96
+ display: none;
97
+ }
98
+ .mobile-nav {
99
+ display: flex;
100
+ }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body class="grid-bg min-h-screen relative overflow-x-hidden">
105
+ <!-- Particles Background -->
106
+ <div id="particles"></div>
107
+
108
+ <!-- Left Navigation (Desktop) -->
109
+ <div class="fixed left-0 top-0 h-full w-16 md:w-20 flex flex-col items-center justify-center z-50 bg-black bg-opacity-70 backdrop-blur-sm hidden md:flex">
110
+ <div class="nav-menu h-full flex flex-col items-center justify-center space-y-8 py-10">
111
+ <a href="#home" class="nav-item group text-2xl text-white hover:text-7f5af0" title="Home">
112
+ <i class="fas fa-user-astronaut group-hover:hidden"></i>
113
+ <span class="hidden group-hover:inline text-sm">Home</span>
114
+ </a>
115
+ <a href="#about" class="nav-item group text-2xl text-white hover:text-7f5af0" title="About">
116
+ <i class="fas fa-microchip group-hover:hidden"></i>
117
+ <span class="hidden group-hover:inline text-sm">About</span>
118
+ </a>
119
+ <a href="#projects" class="nav-item group text-2xl text-white hover:text-7f5af0" title="Projects">
120
+ <i class="fas fa-code-branch group-hover:hidden"></i>
121
+ <span class="hidden group-hover:inline text-sm">Projects</span>
122
+ </a>
123
+ <a href="#skills" class="nav-item group text-2xl text-white hover:text-7f5af0" title="Skills">
124
+ <i class="fas fa-cogs group-hover:hidden"></i>
125
+ <span class="hidden group-hover:inline text-sm">Skills</span>
126
+ </a>
127
+ <a href="#resume" class="nav-item group text-2xl text-white hover:text-7f5af0" title="Resume">
128
+ <i class="fas fa-id-card group-hover:hidden"></i>
129
+ <span class="hidden group-hover:inline text-sm">Resume</span>
130
+ </a>
131
+ <a href="#contact" class="nav-item group text-2xl text-white hover:text-7f5af0" title="Contact">
132
+ <i class="fas fa-paper-plane group-hover:hidden"></i>
133
+ <span class="hidden group-hover:inline text-sm">Contact</span>
134
+ </a>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Mobile Navigation -->
139
+ <div class="fixed bottom-0 left-0 right-0 bg-black bg-opacity-70 backdrop-blur-sm z-50 flex justify-around py-4 md:hidden">
140
+ <a href="#home" class="nav-item-mobile group flex flex-col items-center px-2 py-1">
141
+ <i class="fas fa-user-astronaut text-xl text-7f5af0"></i>
142
+ <span class="text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">Home</span>
143
+ </a>
144
+ <a href="#about" class="nav-item-mobile group flex flex-col items-center px-2 py-1">
145
+ <i class="fas fa-microchip text-xl text-7f5af0"></i>
146
+ <span class="text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">About</span>
147
+ </a>
148
+ <a href="#projects" class="nav-item-mobile group flex flex-col items-center px-2 py-1">
149
+ <i class="fas fa-code-branch text-xl text-7f5af0"></i>
150
+ <span class="text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">Projects</span>
151
+ </a>
152
+ <a href="#skills" class="nav-item-mobile group flex flex-col items-center px-2 py-1">
153
+ <i class="fas fa-cogs text-xl text-7f5af0"></i>
154
+ <span class="text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">Skills</span>
155
+ </a>
156
+ <a href="#resume" class="nav-item-mobile group flex flex-col items-center px-2 py-1">
157
+ <i class="fas fa-id-card text-xl text-7f5af0"></i>
158
+ <span class="text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">Resume</span>
159
+ </a>
160
+ <a href="#contact" class="nav-item-mobile group flex flex-col items-center px-2 py-1">
161
+ <i class="fas fa-paper-plane text-xl text-7f5af0"></i>
162
+ <span class="text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity">Contact</span>
163
+ </a>
164
+ </div>
165
+
166
+ <!-- Main Content -->
167
+ <div class="ml-0 md:ml-20 px-4 md:px-8 lg:px-16 py-10 pb-20 md:pb-10">
168
+ <!-- Home Section -->
169
+ <section id="home" class="section min-h-screen flex flex-col justify-center">
170
+ <div class="max-w-4xl mx-auto text-center">
171
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
172
+ Hi, I'm <span class="text-7f5af0">Karan Patani</span>
173
+ </h1>
174
+ <h2 class="text-xl md:text-2xl mb-8">
175
+ Backend Engineer • AI/ML Developer • Industrial Automator
176
+ </h2>
177
+ <div class="typewriter-container h-8 md:h-10 mb-8 flex justify-center">
178
+ <p id="typewriter" class="typewriter text-lg md:text-xl inline-block"></p>
179
+ </div>
180
+ <div class="flex justify-center space-x-4">
181
+ <a href="https://github.com/karan2362001" target="_blank" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
182
+ <i class="fab fa-github mr-2"></i> GitHub
183
+ </a>
184
+ <a href="https://linkedin.com/in/karan-patani-37a8b0180" target="_blank" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
185
+ <i class="fab fa-linkedin mr-2"></i> LinkedIn
186
+ </a>
187
+ <a href="mailto:patanikaran@gmail.com" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
188
+ <i class="fas fa-envelope mr-2"></i> Email
189
+ </a>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- About Section -->
195
+ <section id="about" class="section min-h-screen py-20 flex flex-col justify-center">
196
+ <div class="max-w-4xl mx-auto">
197
+ <h2 class="text-3xl md:text-4xl font-bold mb-8 text-7f5af0">
198
+ <i class="fas fa-robot mr-3"></i> About Me
199
+ </h2>
200
+ <div class="bg-black bg-opacity-50 p-6 md:p-8 rounded-xl border border-2a2a2a">
201
+ <p class="text-lg mb-6">
202
+ A passionate, innovation-driven Python developer blending backend architecture with artificial intelligence, automation, and real-world systems.
203
+ </p>
204
+ <p class="text-lg mb-6">
205
+ I specialize in <span class="text-7f5af0">AI Agent tools</span>, <span class="text-7f5af0">LangChain</span>, <span class="text-7f5af0">n8n-based workflow automation</span>, <span class="text-7f5af0">PLC integration</span>, <span class="text-7f5af0">vector search</span>, and <span class="text-7f5af0">cloud-native apps</span>.
206
+ </p>
207
+ <div class="bg-7f5af0 bg-opacity-10 p-4 rounded-lg border-l-4 border-7f5af0">
208
+ <p class="italic">
209
+ "I don't just write code — I automate, architect, and amplify intelligence."
210
+ </p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </section>
215
+
216
+ <!-- Projects Section -->
217
+ <section id="projects" class="section py-20">
218
+ <div class="max-w-6xl mx-auto">
219
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-7f5af0">
220
+ <i class="fas fa-rocket mr-3"></i> Projects
221
+ </h2>
222
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
223
+ <!-- Project 1 -->
224
+ <div class="project-card bg-black bg-opacity-50 p-6 rounded-xl cursor-pointer" onclick="openModal('project1')">
225
+ <div class="flex items-center mb-4">
226
+ <div class="w-12 h-12 rounded-full bg-7f5af0 bg-opacity-20 flex items-center justify-center mr-4">
227
+ <i class="fas fa-robot text-7f5af0"></i>
228
+ </div>
229
+ <h3 class="text-xl font-bold">AI Agent Workflow Platform</h3>
230
+ </div>
231
+ <p class="text-gray-300 mb-4">
232
+ LangChain + n8n + QuickBooks/Xero + WhatsApp automation
233
+ </p>
234
+ <div class="flex flex-wrap gap-2">
235
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">LangChain</span>
236
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">n8n</span>
237
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">WhatsApp API</span>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Project 2 -->
242
+ <div class="project-card bg-black bg-opacity-50 p-6 rounded-xl cursor-pointer" onclick="openModal('project2')">
243
+ <div class="flex items-center mb-4">
244
+ <div class="w-12 h-12 rounded-full bg-7f5af0 bg-opacity-20 flex items-center justify-center mr-4">
245
+ <i class="fas fa-comments text-7f5af0"></i>
246
+ </div>
247
+ <h3 class="text-xl font-bold">GRC RAG Chatbot</h3>
248
+ </div>
249
+ <p class="text-gray-300 mb-4">
250
+ Retrieval-augmented chatbot built using LangChain & vector DBs
251
+ </p>
252
+ <div class="flex flex-wrap gap-2">
253
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">LangChain</span>
254
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Vector DB</span>
255
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">RAG</span>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Project 3 -->
260
+ <div class="project-card bg-black bg-opacity-50 p-6 rounded-xl cursor-pointer" onclick="openModal('project3')">
261
+ <div class="flex items-center mb-4">
262
+ <div class="w-12 h-12 rounded-full bg-7f5af0 bg-opacity-20 flex items-center justify-center mr-4">
263
+ <i class="fas fa-shopping-basket text-7f5af0"></i>
264
+ </div>
265
+ <h3 class="text-xl font-bold">Grocery Delivery APIs</h3>
266
+ </div>
267
+ <p class="text-gray-300 mb-4">
268
+ Django REST APIs with admin panel & role-based auth
269
+ </p>
270
+ <div class="flex flex-wrap gap-2">
271
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Django</span>
272
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">DRF</span>
273
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">PostgreSQL</span>
274
+ </div>
275
+ </div>
276
+
277
+ <!-- Project 4 -->
278
+ <div class="project-card bg-black bg-opacity-50 p-6 rounded-xl cursor-pointer" onclick="openModal('project4')">
279
+ <div class="flex items-center mb-4">
280
+ <div class="w-12 h-12 rounded-full bg-7f5af0 bg-opacity-20 flex items-center justify-center mr-4">
281
+ <i class="fas fa-chart-line text-7f5af0"></i>
282
+ </div>
283
+ <h3 class="text-xl font-bold">Automated Trading System</h3>
284
+ </div>
285
+ <p class="text-gray-300 mb-4">
286
+ Delta PLC + Zerodha API for real-time industrial trading
287
+ </p>
288
+ <div class="flex flex-wrap gap-2">
289
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">PLC</span>
290
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Zerodha API</span>
291
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Python</span>
292
+ </div>
293
+ </div>
294
+
295
+ <!-- Project 5 -->
296
+ <div class="project-card bg-black bg-opacity-50 p-6 rounded-xl cursor-pointer" onclick="openModal('project5')">
297
+ <div class="flex items-center mb-4">
298
+ <div class="w-12 h-12 rounded-full bg-7f5af0 bg-opacity-20 flex items-center justify-center mr-4">
299
+ <i class="fas fa-user-check text-7f5af0"></i>
300
+ </div>
301
+ <h3 class="text-xl font-bold">Geo-Fenced Attendance System</h3>
302
+ </div>
303
+ <p class="text-gray-300 mb-4">
304
+ Facial recognition + geo-coordinates tracking
305
+ </p>
306
+ <div class="flex flex-wrap gap-2">
307
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">OpenCV</span>
308
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Geolocation</span>
309
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Django</span>
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Project 6 -->
314
+ <div class="project-card bg-black bg-opacity-50 p-6 rounded-xl cursor-pointer" onclick="openModal('project6')">
315
+ <div class="flex items-center mb-4">
316
+ <div class="w-12 h-12 rounded-full bg-7f5af0 bg-opacity-20 flex items-center justify-center mr-4">
317
+ <i class="fas fa-industry text-7f5af0"></i>
318
+ </div>
319
+ <h3 class="text-xl font-bold">Mini SCADA</h3>
320
+ </div>
321
+ <p class="text-gray-300 mb-4">
322
+ Python-based SCADA using Modbus/Snap7 for Siemens PLCs
323
+ </p>
324
+ <div class="flex flex-wrap gap-2">
325
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">SCADA</span>
326
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Modbus</span>
327
+ <span class="text-xs px-2 py-1 bg-7f5af0 bg-opacity-20 rounded-full">Snap7</span>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </section>
333
+
334
+ <!-- Skills Section -->
335
+ <section id="skills" class="section py-20">
336
+ <div class="max-w-6xl mx-auto">
337
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-7f5af0">
338
+ <i class="fas fa-brain mr-3"></i> Skills
339
+ </h2>
340
+
341
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
342
+ <!-- Core Programming -->
343
+ <div class="bg-black bg-opacity-50 p-6 rounded-xl border border-2a2a2a">
344
+ <h3 class="text-xl font-bold mb-4 flex items-center">
345
+ <i class="fas fa-code mr-3 text-7f5af0"></i> Core Programming
346
+ </h3>
347
+ <div class="flex flex-wrap gap-2">
348
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Python</span>
349
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Django</span>
350
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">DRF</span>
351
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Prompt Engineering</span>
352
+ </div>
353
+ </div>
354
+
355
+ <!-- AI & ML -->
356
+ <div class="bg-black bg-opacity-50 p-6 rounded-xl border border-2a2a2a">
357
+ <h3 class="text-xl font-bold mb-4 flex items-center">
358
+ <i class="fas fa-robot mr-3 text-7f5af0"></i> AI & Machine Learning
359
+ </h3>
360
+ <div class="flex flex-wrap gap-2">
361
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">PyTorch</span>
362
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Hugging Face</span>
363
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">OpenAI</span>
364
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Gemini</span>
365
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">RAG</span>
366
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">LangChain</span>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Workflow Automation -->
371
+ <div class="bg-black bg-opacity-50 p-6 rounded-xl border border-2a2a2a">
372
+ <h3 class="text-xl font-bold mb-4 flex items-center">
373
+ <i class="fas fa-cogs mr-3 text-7f5af0"></i> Workflow Automation
374
+ </h3>
375
+ <div class="flex flex-wrap gap-2">
376
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">n8n</span>
377
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">API Connectors</span>
378
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">System Design</span>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- Vector DBs -->
383
+ <div class="bg-black bg-opacity-50 p-6 rounded-xl border border-2a2a2a">
384
+ <h3 class="text-xl font-bold mb-4 flex items-center">
385
+ <i class="fas fa-database mr-3 text-7f5af0"></i> Vector DBs / Search
386
+ </h3>
387
+ <div class="flex flex-wrap gap-2">
388
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Pinecone</span>
389
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">FAISS</span>
390
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">ChromaDB</span>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Databases -->
395
+ <div class="bg-black bg-opacity-50 p-6 rounded-xl border border-2a2a2a">
396
+ <h3 class="text-xl font-bold mb-4 flex items-center">
397
+ <i class="fas fa-server mr-3 text-7f5af0"></i> Databases
398
+ </h3>
399
+ <div class="flex flex-wrap gap-2">
400
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">PostgreSQL</span>
401
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">SimpleDB</span>
402
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">MySQL</span>
403
+ </div>
404
+ </div>
405
+
406
+ <!-- DevOps & Cloud -->
407
+ <div class="bg-black bg-opacity-50 p-6 rounded-xl border border-2a2a2a">
408
+ <h3 class="text-xl font-bold mb-4 flex items-center">
409
+ <i class="fas fa-cloud mr-3 text-7f5af0"></i> DevOps & Cloud
410
+ </h3>
411
+ <div class="flex flex-wrap gap-2">
412
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">AWS (S3, EC2)</span>
413
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Railway</span>
414
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Vercel</span>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- Industrial Systems -->
419
+ <div class="bg-black bg-opacity-50 p-6 rounded-xl border border-2a2a2a">
420
+ <h3 class="text-xl font-bold mb-4 flex items-center">
421
+ <i class="fas fa-industry mr-3 text-7f5af0"></i> Industrial Systems
422
+ </h3>
423
+ <div class="flex flex-wrap gap-2">
424
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Modbus</span>
425
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Snap7</span>
426
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">SCADA</span>
427
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Siemens PLC</span>
428
+ <span class="skill-pill px-3 py-1 bg-2a2a2a rounded-full">Delta PLC</span>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- Resume Section -->
436
+ <section id="resume" class="section py-20 min-h-screen flex flex-col justify-center">
437
+ <div class="max-w-4xl mx-auto text-center">
438
+ <h2 class="text-3xl md:text-4xl font-bold mb-8 text-7f5af0">
439
+ <i class="fas fa-file-alt mr-3"></i> Resume
440
+ </h2>
441
+ <div class="bg-black bg-opacity-50 p-8 rounded-xl border border-2a2a2a">
442
+ <p class="text-lg mb-8">
443
+ Download my full resume to learn more about my experience, education, and professional journey.
444
+ </p>
445
+ <a href="https://drive.google.com/file/d/1HMFH04Ryef3d9ZoyZcuM6GCoFLN31Emd/view?usp=sharing" target="_blank" class="bg-7f5af0 hover:bg-opacity-80 text-white px-6 py-3 rounded-full transition-all duration-300 inline-block">
446
+ <i class="fas fa-download mr-2"></i> Download Resume (PDF)
447
+ </a>
448
+ </div>
449
+ </div>
450
+ </section>
451
+
452
+ <!-- Contact Section -->
453
+ <section id="contact" class="section py-20 min-h-screen flex flex-col justify-center">
454
+ <div class="max-w-4xl mx-auto">
455
+ <h2 class="text-3xl md:text-4xl font-bold mb-8 text-7f5af0">
456
+ <i class="fas fa-envelope mr-3"></i> Contact
457
+ </h2>
458
+
459
+ <div class="text-center">
460
+ <p class="text-lg mb-8">
461
+ Feel free to reach out to me via email or LinkedIn for any inquiries or opportunities.
462
+ </p>
463
+ <div class="flex justify-center flex-wrap gap-4">
464
+ <a href="https://github.com/karan2362001" target="_blank" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
465
+ <i class="fab fa-github mr-2"></i> GitHub
466
+ </a>
467
+ <a href="https://linkedin.com/in/karan-patani-37a8b0180" target="_blank" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
468
+ <i class="fab fa-linkedin mr-2"></i> LinkedIn
469
+ </a>
470
+ <a href="https://www.instagram.com/_karanpatani_?igsh=cW14bTEyd3pseHA2&utm_source=qr" target="_blank" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
471
+ <i class="fab fa-instagram mr-2"></i> Instagram
472
+ </a>
473
+ <a href="https://wa.me/918200901537" target="_blank" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
474
+ <i class="fab fa-whatsapp mr-2"></i> WhatsApp
475
+ </a>
476
+ <a href="mailto:patanikaran@gmail.com" class="bg-7f5af0 hover:bg-opacity-80 text-white px-4 py-2 rounded-full transition-all duration-300">
477
+ <i class="fas fa-envelope mr-2"></i> Email
478
+ </a>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </section>
483
+ </div>
484
+
485
+ <!-- Project Modals -->
486
+ <div id="projectModal" class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center hidden">
487
+ <div class="bg-black bg-opacity-90 border border-7f5af0 rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto p-8 relative">
488
+ <button onclick="closeModal()" class="absolute top-4 right-4 text-gray-400 hover:text-white text-2xl">
489
+ <i class="fas fa-times"></i>
490
+ </button>
491
+ <div id="modalContent">
492
+ <!-- Content will be inserted here by JavaScript -->
493
+ </div>
494
+ </div>
495
+ </div>
496
+
497
+ <script>
498
+ // Typewriter Effect
499
+ const typewriterTexts = [
500
+ "🚀 Building Future-Ready AI Systems",
501
+ "🔧 Python • LangChain • PLC • Django • Deep Learning",
502
+ "🌐 Automation meets Intelligence"
503
+ ];
504
+
505
+ let typewriterIndex = 0;
506
+ let charIndex = 0;
507
+ let isDeleting = false;
508
+ let typewriter = document.getElementById('typewriter');
509
+
510
+ function typeWriter() {
511
+ const currentText = typewriterTexts[typewriterIndex];
512
+
513
+ if (isDeleting) {
514
+ typewriter.textContent = currentText.substring(0, charIndex - 1);
515
+ charIndex--;
516
+ } else {
517
+ typewriter.textContent = currentText.substring(0, charIndex + 1);
518
+ charIndex++;
519
+ }
520
+
521
+ if (!isDeleting && charIndex === currentText.length) {
522
+ isDeleting = true;
523
+ setTimeout(typeWriter, 2000);
524
+ } else if (isDeleting && charIndex === 0) {
525
+ isDeleting = false;
526
+ typewriterIndex = (typewriterIndex + 1) % typewriterTexts.length;
527
+ setTimeout(typeWriter, 500);
528
+ } else {
529
+ const speed = isDeleting ? 50 : 100;
530
+ setTimeout(typeWriter, speed);
531
+ }
532
+ }
533
+
534
+ // Start the typewriter effect
535
+ setTimeout(typeWriter, 1000);
536
+
537
+ // Particles Background
538
+ function createParticles() {
539
+ const particlesContainer = document.getElementById('particles');
540
+ const particleCount = 50;
541
+
542
+ for (let i = 0; i < particleCount; i++) {
543
+ const particle = document.createElement('div');
544
+ particle.classList.add('particle');
545
+
546
+ // Random size between 1px and 3px
547
+ const size = Math.random() * 2 + 1;
548
+ particle.style.width = `${size}px`;
549
+ particle.style.height = `${size}px`;
550
+
551
+ // Random position
552
+ particle.style.left = `${Math.random() * 100}vw`;
553
+ particle.style.top = `${Math.random() * 100}vh`;
554
+
555
+ // Random animation
556
+ const duration = Math.random() * 20 + 10;
557
+ particle.style.animation = `float ${duration}s linear infinite`;
558
+
559
+ // Add to container
560
+ particlesContainer.appendChild(particle);
561
+ }
562
+ }
563
+
564
+ // Create particles on load
565
+ window.addEventListener('load', createParticles);
566
+
567
+ // Project Modals
568
+ const projects = {
569
+ project1: {
570
+ title: "AI Agent Workflow Platform",
571
+ description: "A comprehensive automation platform that integrates LangChain for AI agent orchestration, n8n for workflow automation, and WhatsApp API for communication. The system connects with QuickBooks/Xero for financial data processing and automates business workflows end-to-end.",
572
+ technologies: ["LangChain", "n8n", "WhatsApp API", "QuickBooks API", "Xero API", "Python"],
573
+ features: [
574
+ "AI-powered decision making for business workflows",
575
+ "Automated financial reporting and alerts",
576
+ "WhatsApp integration for customer communication",
577
+ "Customizable workflow builder",
578
+ "Real-time monitoring dashboard"
579
+ ]
580
+ },
581
+ project2: {
582
+ title: "GRC RAG Chatbot",
583
+ description: "A retrieval-augmented generation chatbot designed for Governance, Risk, and Compliance (GRC) documentation. The system uses LangChain for orchestration and vector databases for efficient document retrieval and context-aware responses.",
584
+ technologies: ["LangChain", "Vector DB", "RAG", "OpenAI", "Django"],
585
+ features: [
586
+ "Natural language understanding of GRC documents",
587
+ "Context-aware responses with citations",
588
+ "Document ingestion pipeline",
589
+ "User authentication and session management",
590
+ "Admin dashboard for content management"
591
+ ]
592
+ },
593
+ project3: {
594
+ title: "Grocery Delivery APIs",
595
+ description: "A complete backend system for a grocery delivery service built with Django REST Framework. Includes admin panel with role-based access control, inventory management, order processing, and delivery tracking.",
596
+ technologies: ["Django", "DRF", "PostgreSQL", "JWT", "Redis"],
597
+ features: [
598
+ "User authentication with JWT",
599
+ "Role-based access control (Admin, Staff, Customer)",
600
+ "Real-time inventory management",
601
+ "Order processing workflow",
602
+ "Delivery tracking system",
603
+ "Admin dashboard with analytics"
604
+ ]
605
+ },
606
+ project4: {
607
+ title: "Automated Trading System",
608
+ description: "An industrial-grade trading system that connects Delta PLC with Zerodha's trading API for automated execution of trading strategies. The system processes real-time market data and executes trades based on predefined algorithms.",
609
+ technologies: ["PLC", "Zerodha API", "Python", "Snap7", "Modbus"],
610
+ features: [
611
+ "Real-time market data processing",
612
+ "Algorithmic trading strategies",
613
+ "PLC integration for industrial deployment",
614
+ "Risk management controls",
615
+ "Performance analytics dashboard"
616
+ ]
617
+ },
618
+ project5: {
619
+ title: "Geo-Fenced Attendance System",
620
+ description: "A facial recognition attendance system with geo-fencing capabilities to ensure employees are physically present at designated locations. Combines computer vision with geolocation tracking for accurate attendance marking.",
621
+ technologies: ["OpenCV", "Geolocation", "Django", "PostgreSQL", "Face Recognition"],
622
+ features: [
623
+ "Facial recognition for identity verification",
624
+ "Geo-fencing for location validation",
625
+ "Real-time attendance tracking",
626
+ "Reporting and analytics dashboard",
627
+ "Mobile app for employee self-service"
628
+ ]
629
+ },
630
+ project6: {
631
+ title: "Mini SCADA",
632
+ description: "A Python-based SCADA system for monitoring and controlling industrial processes using Siemens PLCs. Implements Modbus and Snap7 protocols for communication with PLC hardware.",
633
+ technologies: ["SCADA", "Modbus", "Snap7", "Python", "Siemens PLC"],
634
+ features: [
635
+ "Real-time process monitoring",
636
+ "Historical data logging",
637
+ "Alarm and event management",
638
+ "Remote control capabilities",
639
+ "Customizable dashboard"
640
+ ]
641
+ }
642
+ };
643
+
644
+ function openModal(projectId) {
645
+ const project = projects[projectId];
646
+ const modal = document.getElementById('projectModal');
647
+ const modalContent = document.getElementById('modalContent');
648
+
649
+ let featuresHtml = '';
650
+ project.features.forEach(feature => {
651
+ featuresHtml += `<li class="flex items-start mb-2">
652
+ <i class="fas fa-check text-7f5af0 mr-2 mt-1"></i>
653
+ <span>${feature}</span>
654
+ </li>`;
655
+ });
656
+
657
+ let techHtml = '';
658
+ project.technologies.forEach(tech => {
659
+ techHtml += `<span class="inline-block bg-7f5af0 bg-opacity-20 text-xs px-2 py-1 rounded-full mr-2 mb-2">${tech}</span>`;
660
+ });
661
+
662
+ modalContent.innerHTML = `
663
+ <h2 class="text-2xl md:text-3xl font-bold mb-4 text-7f5af0">${project.title}</h2>
664
+ <p class="text-gray-300 mb-6">${project.description}</p>
665
+
666
+ <h3 class="text-xl font-bold mb-3">Features</h3>
667
+ <ul class="mb-8">
668
+ ${featuresHtml}
669
+ </ul>
670
+
671
+ <h3 class="text-xl font-bold mb-3">Technologies Used</h3>
672
+ <div class="flex flex-wrap mb-6">
673
+ ${techHtml}
674
+ </div>
675
+
676
+ <div class="flex space-x-4">
677
+ <button class="bg-7f5af0 hover:bg-opacity-80 text-white px-6 py-2 rounded-full transition-all duration-300">
678
+ <i class="fab fa-github mr-2"></i> View Code
679
+ </button>
680
+ <button class="bg-transparent border border-7f5af0 text-7f5af0 hover:bg-7f5af0 hover:text-white px-6 py-2 rounded-full transition-all duration-300">
681
+ <i class="fas fa-external-link-alt mr-2"></i> Live Demo
682
+ </button>
683
+ </div>
684
+ `;
685
+
686
+ modal.classList.remove('hidden');
687
+ document.body.style.overflow = 'hidden';
688
+ }
689
+
690
+ function closeModal() {
691
+ const modal = document.getElementById('projectModal');
692
+ modal.classList.add('hidden');
693
+ document.body.style.overflow = 'auto';
694
+ }
695
+
696
+ // Close modal when clicking outside content
697
+ document.getElementById('projectModal').addEventListener('click', function(e) {
698
+ if (e.target === this) {
699
+ closeModal();
700
+ }
701
+ });
702
+
703
+ // Smooth scrolling for anchor links
704
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
705
+ anchor.addEventListener('click', function(e) {
706
+ e.preventDefault();
707
+
708
+ const targetId = this.getAttribute('href');
709
+ const targetElement = document.querySelector(targetId);
710
+
711
+ if (targetElement) {
712
+ window.scrollTo({
713
+ top: targetElement.offsetTop - 80,
714
+ behavior: 'smooth'
715
+ });
716
+ }
717
+ });
718
+ });
719
+ </script>
720
+ <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=Karan236/karanpatani" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
721
+ </html>