Hugging Face's logo

Spaces:
db69
/
db.portfolio
Running

App Files Community
db69 commited on
Commit
02ade7e
·
verified ·
1 Parent(s): f6d9e5e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +533 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Porfolio
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: green
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: my-porfolio
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
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,533 @@
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>Divyam Bansal - Alchemical CV</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=Comic+Neue:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Comic Neue', cursive;
14
+ background-color: #f0f9ff;
15
+ background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M30,10 Q50,5 70,10 Q95,15 90,40 Q85,65 70,80 Q50,95 30,80 Q15,65 10,40 Q5,15 30,10" fill="none" stroke="%23a5f3fc" stroke-width="0.5"/></svg>');
16
+ }
17
+
18
+ .flask {
19
+ position: relative;
20
+ width: 100px;
21
+ height: 150px;
22
+ background: linear-gradient(to bottom, #e0f2fe, #bae6fd);
23
+ border-radius: 30px 30px 5px 5px;
24
+ border: 3px solid #38bdf8;
25
+ overflow: hidden;
26
+ }
27
+
28
+ .flask:before {
29
+ content: '';
30
+ position: absolute;
31
+ top: -10px;
32
+ left: 10px;
33
+ width: 80px;
34
+ height: 20px;
35
+ background: #7dd3fc;
36
+ border-radius: 40px;
37
+ }
38
+
39
+ .flask:after {
40
+ content: '';
41
+ position: absolute;
42
+ bottom: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 50%;
46
+ background: linear-gradient(to bottom, rgba(56, 189, 248, 0.3), transparent);
47
+ border-radius: 0 0 30px 30px;
48
+ }
49
+
50
+ .bubble {
51
+ position: absolute;
52
+ background-color: rgba(255, 255, 255, 0.7);
53
+ border-radius: 50%;
54
+ animation: float 3s infinite ease-in-out;
55
+ }
56
+
57
+ @keyframes float {
58
+ 0%, 100% { transform: translateY(0) rotate(0deg); }
59
+ 50% { transform: translateY(-20px) rotate(5deg); }
60
+ }
61
+
62
+ .section-title {
63
+ position: relative;
64
+ display: inline-block;
65
+ background: linear-gradient(90deg, #f59e0b, #ef4444);
66
+ -webkit-background-clip: text;
67
+ background-clip: text;
68
+ color: transparent;
69
+ }
70
+
71
+ .section-title:after {
72
+ content: '⚗️';
73
+ position: absolute;
74
+ right: -30px;
75
+ top: -5px;
76
+ font-size: 1.5rem;
77
+ }
78
+
79
+ .timeline-item {
80
+ position: relative;
81
+ padding-left: 30px;
82
+ margin-bottom: 30px;
83
+ border-left: 3px dashed #f59e0b;
84
+ }
85
+
86
+ .timeline-item:before {
87
+ content: '🧪';
88
+ position: absolute;
89
+ left: -15px;
90
+ top: 0;
91
+ font-size: 1.5rem;
92
+ background: white;
93
+ border-radius: 50%;
94
+ padding: 2px;
95
+ }
96
+
97
+ .reaction {
98
+ background: white;
99
+ border-radius: 10px;
100
+ padding: 15px;
101
+ margin-bottom: 20px;
102
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
103
+ border-left: 5px solid #10b981;
104
+ position: relative;
105
+ overflow: hidden;
106
+ }
107
+
108
+ .reaction:before {
109
+ content: '';
110
+ position: absolute;
111
+ top: 0;
112
+ right: 0;
113
+ width: 30px;
114
+ height: 30px;
115
+ background: #a7f3d0;
116
+ border-radius: 0 0 0 30px;
117
+ }
118
+
119
+ .molecule {
120
+ display: inline-block;
121
+ position: relative;
122
+ margin-right: 5px;
123
+ }
124
+
125
+ .atom {
126
+ display: inline-block;
127
+ width: 20px;
128
+ height: 20px;
129
+ border-radius: 50%;
130
+ text-align: center;
131
+ line-height: 20px;
132
+ font-size: 10px;
133
+ color: white;
134
+ margin-right: 5px;
135
+ position: relative;
136
+ }
137
+
138
+ .bond {
139
+ display: inline-block;
140
+ width: 15px;
141
+ height: 2px;
142
+ background: #333;
143
+ margin-right: 5px;
144
+ vertical-align: middle;
145
+ }
146
+
147
+ .double-bond {
148
+ height: 4px;
149
+ background: repeating-linear-gradient(to right, #333, #333 2px, transparent 2px, transparent 4px);
150
+ }
151
+
152
+ .triple-bond {
153
+ height: 6px;
154
+ background: repeating-linear-gradient(to right, #333, #333 1px, transparent 1px, transparent 2px);
155
+ }
156
+ </style>
157
+ </head>
158
+ <body class="text-gray-800">
159
+ <div class="max-w-5xl mx-auto px-4 py-8 md:py-12">
160
+ <!-- Header Section -->
161
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8 border-4 border-dashed border-blue-300">
162
+ <div class="md:flex">
163
+ <div class="md:w-1/3 bg-gradient-to-br from-amber-200 to-pink-300 p-8 flex flex-col items-center justify-center text-gray-800 relative">
164
+ <!-- Animated flask -->
165
+ <div class="flask mb-6" id="flask">
166
+ <!-- Bubbles will be added by JS -->
167
+ </div>
168
+
169
+ <h1 class="text-3xl font-bold mb-1 text-center">
170
+ <span class="molecule">
171
+ <span class="atom bg-red-500">D</span>
172
+ <span class="double-bond"></span>
173
+ <span class="atom bg-blue-500">i</span>
174
+ <span class="bond"></span>
175
+ <span class="atom bg-green-500">v</span>
176
+ <span class="triple-bond"></span>
177
+ <span class="atom bg-yellow-500">y</span>
178
+ <span class="bond"></span>
179
+ <span class="atom bg-purple-500">a</span>
180
+ <span class="double-bond"></span>
181
+ <span class="atom bg-pink-500">m</span>
182
+ </span>
183
+ <span class="molecule ml-2">
184
+ <span class="atom bg-red-500">B</span>
185
+ <span class="triple-bond"></span>
186
+ <span class="atom bg-blue-500">a</span>
187
+ <span class="bond"></span>
188
+ <span class="atom bg-green-500">n</span>
189
+ <span class="double-bond"></span>
190
+ <span class="atom bg-yellow-500">s</span>
191
+ <span class="bond"></span>
192
+ <span class="atom bg-purple-500">a</span>
193
+ <span class="triple-bond"></span>
194
+ <span class="atom bg-pink-500">l</span>
195
+ </span>
196
+ </h1>
197
+ <p class="text-lg mb-4 text-center">Alchemical Engineer & Quantum Reaction Specialist</p>
198
+
199
+ <div class="w-full mt-6 space-y-4 text-sm">
200
+ <div class="flex items-center bg-white/50 p-2 rounded-lg">
201
+ <i class="fas fa-flask mr-3 text-amber-600"></i>
202
+ <span>B.Tech - Chemical Science & Technology</span>
203
+ </div>
204
+ <div class="flex items-center bg-white/50 p-2 rounded-lg">
205
+ <i class="fas fa-atom mr-3 text-blue-600"></i>
206
+ <span>IIT Guwahati</span>
207
+ </div>
208
+ <div class="flex items-center bg-white/50 p-2 rounded-lg">
209
+ <i class="fas fa-vial mr-3 text-purple-600"></i>
210
+ <span>db.mail.765@gmail.com</span>
211
+ </div>
212
+ <div class="flex items-center bg-white/50 p-2 rounded-lg">
213
+ <i class="fab fa-linkedin mr-3 text-blue-700"></i>
214
+ <a href="https://www.linkedin.com/in/the-outcast" target="_blank" class="hover:underline">LinkedIn Profile</a>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="absolute bottom-2 right-2 text-xs text-gray-600">
219
+ Warning: Contents may spontaneously combust
220
+ </div>
221
+ </div>
222
+
223
+ <div class="md:w-2/3 p-8 bg-white/90">
224
+ <h2 class="text-2xl font-bold mb-6 section-title">Alchemical Manifesto</h2>
225
+ <p class="text-gray-700 mb-6 italic">
226
+ "In a world where entropy reigns supreme, I specialize in creating ordered chaos through
227
+ controlled molecular mayhem. My solutions don't just break the mold—they dissolve it in
228
+ aqua regia and precipitate pure innovation."
229
+ </p>
230
+
231
+ <div class="grid grid-cols-2 gap-4 mb-6">
232
+ <div class="bg-amber-100 p-4 rounded-xl text-center border-2 border-dotted border-amber-300">
233
+ <h3 class="font-semibold text-amber-800 mb-2">Years of Experimentation</h3>
234
+ <p class="text-3xl font-bold">3+</p>
235
+ <p class="text-xs mt-1">(or 5 in dog years)</p>
236
+ </div>
237
+ <div class="bg-purple-100 p-4 rounded-xl text-center border-2 border-dotted border-purple-300">
238
+ <h3 class="font-semibold text-purple-800 mb-2">Global Alchemy Rank</h3>
239
+ <p class="text-3xl font-bold">#94</p>
240
+ <p class="text-xs mt-1">Creative Shock 2019</p>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="bg-blue-50 p-4 rounded-lg mb-6">
245
+ <h3 class="font-semibold text-blue-800 mb-2 flex items-center">
246
+ <i class="fas fa-radiation mr-2"></i>
247
+ Specializations
248
+ </h3>
249
+ <div class="flex flex-wrap gap-2">
250
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm border border-red-300">Quantum Alchemy</span>
251
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm border border-yellow-300">Molecular Jazz</span>
252
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm border border-green-300">Entropy Reversal</span>
253
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm border border-blue-300">Nanobubble Theory</span>
254
+ <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm border border-purple-300">Polymorphic Catalysis</span>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Main Content -->
262
+ <div class="grid md:grid-cols-3 gap-8">
263
+ <!-- Left Column -->
264
+ <div class="md:col-span-2 space-y-8">
265
+ <!-- Experience Section -->
266
+ <div class="bg-white rounded-xl shadow-lg p-6 border-2 border-dashed border-green-200">
267
+ <h2 class="text-2xl font-bold mb-6 section-title">Laboratory Chronicles</h2>
268
+
269
+ <div class="reaction">
270
+ <h3 class="text-xl font-semibold text-gray-800">Chief Mad Scientist</h3>
271
+ <p class="text-amber-600 font-medium mb-2">EXL Alchemical Solutions</p>
272
+ <div class="text-gray-500 text-sm mb-3">2022 - Present</div>
273
+
274
+ <ul class="list-disc pl-5 space-y-2 text-gray-700">
275
+ <li>Led team of 5 alchemists to develop <span class="font-semibold">Philosopher's Paste™</span>, reducing transmutation time from 72moons → 30minutes.</li>
276
+ <li>Pioneered <span class="font-semibold">Image-to-Elixir™</span> quantum conversion (Alchemical CDK), cutting potion brewing time by 50% across 50+ cauldrons.</li>
277
+ <li>Invented <span class="font-semibold">No-Spell Sorcery™</span> pipeline for extracting essence from chaotic scrolls, adopted by 20 covens.</li>
278
+ <li>Engineered <span class="font-semibold">Crystal Ball Analytics™</span> (Evidently Magic + CloudWatch), reducing apocalypse events by 42%.</li>
279
+ <li>Discovered method to <span class="font-semibold">bottle inspiration</span> in Dockerized alembics for apprentice training.</li>
280
+ </ul>
281
+
282
+ <div class="mt-4 text-xs text-gray-500 italic">
283
+ * Results may vary. Side effects include spontaneous levitation and temporary invisibility.
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Projects Section -->
289
+ <div class="bg-white rounded-xl shadow-lg p-6 border-2 border-dashed border-purple-200">
290
+ <h2 class="text-2xl font-bold mb-6 section-title">Eccentric Experiments</h2>
291
+
292
+ <div class="space-y-6">
293
+ <div class="reaction">
294
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
295
+ <i class="fas fa-fire mr-2 text-red-500"></i>
296
+ British Gas and OVO Energy Elemental Framework
297
+ </h3>
298
+ <div class="text-sm text-gray-500 mb-3">Ongoing | Anish Goswami</div>
299
+ <p class="text-gray-700">Trained fire elementals to handle customer complaints (billing disputes, cold tea), service visits, gold-to-lead conversions, and portal creation.</p>
300
+ </div>
301
+
302
+ <div class="reaction">
303
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
304
+ <i class="fas fa-seedling mr-2 text-green-500"></i>
305
+ JNJ Intelligent ALCHEMY Processing Pipeline
306
+ </h3>
307
+ <div class="text-sm text-gray-500 mb-3">Aug 2024 - Ongoing | Anish Goswami</div>
308
+ <p class="text-gray-700">Reduced philosopher's stone creation time from <span class="font-semibold">72moons → 30minutes</span> using Autopen Apparitions™ AI RAG.</p>
309
+ </div>
310
+
311
+ <div class="reaction">
312
+ <h3 class="text-lg font-semibold text-gray-800 flex items-center">
313
+ <i class="fas fa-eye mr-2 text-blue-500"></i>
314
+ EXL Elixir LLM Monitoring-Pipeline
315
+ </h3>
316
+ <div class="text-sm text-gray-500 mb-3">Apr 2024 - Aug 2024 | Vaibhav Mangla</div>
317
+ <p class="text-gray-700">Monitored metrics like toxicity (actual), hallucination (literal), viscosity, and pixie dust usage for anomaly detection.</p>
318
+ <a href="https://shorturl.at/gxEJq" target="_blank" class="text-blue-500 text-sm hover:underline mt-2 inline-block">
319
+ <i class="fas fa-scroll mr-1"></i> View Ancient Scroll
320
+ </a>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+
326
+ <!-- Right Column -->
327
+ <div class="space-y-8">
328
+ <!-- Education Section -->
329
+ <div class="bg-white rounded-xl shadow-lg p-6 border-2 border-dashed border-blue-200">
330
+ <h2 class="text-2xl font-bold mb-6 section-title">Arcane Academia</h2>
331
+
332
+ <div class="space-y-4">
333
+ <div class="border-l-4 border-amber-500 pl-4 py-1 bg-amber-50 rounded-r-lg">
334
+ <h3 class="font-semibold text-gray-800">B.Tech - Chemical Science & Technology</h3>
335
+ <p class="text-gray-600">Indian Institute of Technology Guwahati</p>
336
+ <div class="flex justify-between text-sm text-gray-500">
337
+ <span>2018 - 2022</span>
338
+ <span class="font-medium">CGPA: 7.51</span>
339
+ </div>
340
+ <div class="text-xs mt-1 text-amber-700">
341
+ <i class="fas fa-award mr-1"></i> Specialized in Quantum Potions
342
+ </div>
343
+ </div>
344
+
345
+ <div class="border-l-4 border-purple-500 pl-4 py-1 bg-purple-50 rounded-r-lg">
346
+ <h3 class="font-semibold text-gray-800">Senior Secondary (CBSE)</h3>
347
+ <p class="text-gray-600">CBSE Board</p>
348
+ <div class="flex justify-between text-sm text-gray-500">
349
+ <span>2015 - 2017</span>
350
+ <span class="font-medium">90.8%</span>
351
+ </div>
352
+ <div class="text-xs mt-1 text-purple-700">
353
+ <i class="fas fa-mortar-pestle mr-1"></i> Major in Alchemical Foundations
354
+ </div>
355
+ </div>
356
+
357
+ <div class="border-l-4 border-green-500 pl-4 py-1 bg-green-50 rounded-r-lg">
358
+ <h3 class="font-semibold text-gray-800">Secondary (CBSE)</h3>
359
+ <p class="text-gray-600">CBSE Board</p>
360
+ <div class="flex justify-between text-sm text-gray-500">
361
+ <span>2012</span>
362
+ <span class="font-medium">CGPA: 10.0</span>
363
+ </div>
364
+ <div class="text-xs mt-1 text-green-700">
365
+ <i class="fas fa-atom mr-1"></i> Discovered affinity for molecular mischief
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+
371
+ <!-- Skills Section -->
372
+ <div class="bg-white rounded-xl shadow-lg p-6 border-2 border-dashed border-red-200">
373
+ <h2 class="text-2xl font-bold mb-6 section-title">Sorcery Skills</h2>
374
+
375
+ <div class="space-y-4">
376
+ <div>
377
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
378
+ <i class="fas fa-hat-wizard mr-2 text-purple-500"></i>
379
+ Elemental Manipulation
380
+ </h3>
381
+ <div class="flex flex-wrap gap-2">
382
+ <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm border border-red-300">Fire</span>
383
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm border border-blue-300">Water</span>
384
+ <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm border border-yellow-300">Earth</span>
385
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm border border-green-300">Air</span>
386
+ <span class="px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm border border-gray-300">Ether</span>
387
+ </div>
388
+ </div>
389
+
390
+ <div>
391
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
392
+ <i class="fas fa-flask mr-2 text-blue-500"></i>
393
+ Laboratory Arts
394
+ </h3>
395
+ <div class="flex flex-wrap gap-2">
396
+ <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm border border-amber-300">Distillation</span>
397
+ <span class="px-3 py-1 bg-pink-100 text-pink-800 rounded-full text-sm border border-pink-300">Crystallomancy</span>
398
+ <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm border border-indigo-300">Quantum Decoction</span>
399
+ <span class="px-3 py-1 bg-teal-100 text-teal-800 rounded-full text-sm border border-teal-300">Entropy Reversal</span>
400
+ </div>
401
+ </div>
402
+
403
+ <div>
404
+ <h3 class="font-semibold text-gray-700 mb-2 flex items-center">
405
+ <i class="fas fa-cloud-moon mr-2 text-gray-500"></i>
406
+ Mystical Tools
407
+ </h3>
408
+ <div class="flex flex-wrap gap-2">
409
+ <span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm border border-orange-300">Alembic</span>
410
+ <span class="px-3 py-1 bg-cyan-100 text-cyan-800 rounded-full text-sm border border-cyan-300">Retort</span>
411
+ <span class="px-3 py-1 bg-lime-100 text-lime-800 rounded-full text-sm border border-lime-300">Mortar & Pestle</span>
412
+ <span class="px-3 py-1 bg-fuchsia-100 text-fuchsia-800 rounded-full text-sm border border-fuchsia-300">Crystal Ball</span>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </div>
417
+
418
+ <!-- Certifications Section -->
419
+ <div class="bg-white rounded-xl shadow-lg p-6 border-2 border-dashed border-yellow-200">
420
+ <h2 class="text-2xl font-bold mb-6 section-title">Scrolls of Validation</h2>
421
+
422
+ <div class="space-y-4">
423
+ <div class="flex items-start">
424
+ <div class="bg-red-100 p-2 rounded-lg mr-3">
425
+ <i class="fas fa-scroll text-red-600"></i>
426
+ </div>
427
+ <div>
428
+ <h3 class="font-semibold text-gray-800">Master Alchemist</h3>
429
+ <p class="text-gray-600 text-sm">Great Learning, 2022</p>
430
+ <p class="text-xs text-gray-500 mt-1">Certified to turn lead into existential dread</p>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="flex items-start">
435
+ <div class="bg-purple-100 p-2 rounded-lg mr-3">
436
+ <i class="fas fa-book-dead text-purple-600"></i>
437
+ </div>
438
+ <div>
439
+ <h3 class="font-semibold text-gray-800">Necronomicon Operator</h3>
440
+ <p class="text-gray-600 text-sm">2025 Mentors</p>
441
+ <p class="text-xs text-gray-500 mt-1">Qualified to summon eldritch entities for QA testing</p>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Achievements Section -->
448
+ <div class="bg-white rounded-xl shadow-lg p-6 border-2 border-dashed border-indigo-200">
449
+ <h2 class="text-2xl font-bold mb-6 section-title">Dubious Honors</h2>
450
+
451
+ <div class="flex items-start">
452
+ <div class="bg-yellow-100 p-2 rounded-lg mr-3">
453
+ <i class="fas fa-trophy text-yellow-600"></i>
454
+ </div>
455
+ <div>
456
+ <h3 class="font-semibold text-gray-800">Ranked 94th globally</h3>
457
+ <p class="text-gray-600 text-sm">Creative Shock 2019 (among 1800 teams)</p>
458
+ <p class="text-xs text-gray-500 mt-1">Award revoked after discovery of performance-enhancing pixie dust</p>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="flex items-start mt-4">
463
+ <div class="bg-green-100 p-2 rounded-lg mr-3">
464
+ <i class="fas fa-star text-green-600"></i>
465
+ </div>
466
+ <div>
467
+ <h3 class="font-semibold text-gray-800">Nobel Surprise Prize</h3>
468
+ <p class="text-gray-600 text-sm">2021 (Retroactive)</p>
469
+ <p class="text-xs text-gray-500 mt-1">For services to chaotic chemistry</p>
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <!-- Footer -->
477
+ <div class="mt-12 text-center text-sm text-gray-500 italic">
478
+ <p>This CV is 100% biodegradable and will dissolve in rainwater within 3-5 business days.</p>
479
+ <p class="mt-1">Results not typical. Your experience may vary. Consult your physician before attempting alchemy.</p>
480
+ </div>
481
+ </div>
482
+
483
+ <script>
484
+ // Create bubbles in the flask
485
+ const flask = document.getElementById('flask');
486
+ const colors = ['rgba(255,255,255,0.7)', 'rgba(239, 68, 68, 0.5)', 'rgba(59, 130, 246, 0.5)'];
487
+
488
+ for (let i = 0; i < 12; i++) {
489
+ const bubble = document.createElement('div');
490
+ bubble.className = 'bubble';
491
+
492
+ // Random properties
493
+ const size = Math.random() * 15 + 5;
494
+ const left = Math.random() * 70 + 15;
495
+ const delay = Math.random() * 5;
496
+ const duration = 3 + Math.random() * 4;
497
+ const color = colors[Math.floor(Math.random() * colors.length)];
498
+
499
+ bubble.style.width = `${size}px`;
500
+ bubble.style.height = `${size}px`;
501
+ bubble.style.left = `${left}px`;
502
+ bubble.style.bottom = '0';
503
+ bubble.style.animationDelay = `${delay}s`;
504
+ bubble.style.animationDuration = `${duration}s`;
505
+ bubble.style.backgroundColor = color;
506
+
507
+ flask.appendChild(bubble);
508
+ }
509
+
510
+ // Make molecules wiggle on hover
511
+ document.querySelectorAll('.molecule').forEach(mol => {
512
+ mol.addEventListener('mouseenter', () => {
513
+ mol.style.animation = 'wiggle 0.5s ease-in-out';
514
+ });
515
+ mol.addEventListener('mouseleave', () => {
516
+ mol.style.animation = '';
517
+ });
518
+ });
519
+
520
+ // Add explosion effect to reactions
521
+ document.querySelectorAll('.reaction').forEach(rxn => {
522
+ rxn.addEventListener('click', () => {
523
+ rxn.style.transform = 'scale(1.05)';
524
+ rxn.style.boxShadow = '0 0 20px rgba(239, 68, 68, 0.5)';
525
+ setTimeout(() => {
526
+ rxn.style.transform = '';
527
+ rxn.style.boxShadow = '';
528
+ }, 300);
529
+ });
530
+ });
531
+ </script>
532
+ <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=db69/my-porfolio" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
533
+ </html>