Hugging Face's logo

Spaces:
ArsParadox
/
my-resume
Running

App Files Community
ArsParadox commited on
Commit
c251b5b
·
verified ·
1 Parent(s): 39b0888

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +659 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: My Resume
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: pink
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-resume
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,659 @@
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>Pandu Dhaulagiri | Ars Paradox</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: #0f172a;
15
+ color: #e2e8f0;
16
+ }
17
+
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #38bdf8, #818cf8, #c084fc);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+
25
+ .card-gradient {
26
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
27
+ }
28
+
29
+ .timeline-item::before {
30
+ content: '';
31
+ position: absolute;
32
+ left: -32px;
33
+ top: 0;
34
+ height: 100%;
35
+ width: 2px;
36
+ background: #3b82f6;
37
+ }
38
+
39
+ .section-divider {
40
+ position: relative;
41
+ height: 1px;
42
+ background: linear-gradient(90deg, transparent, #3b82f6, transparent);
43
+ margin: 3rem 0;
44
+ }
45
+
46
+ .glow-effect {
47
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
48
+ }
49
+
50
+ .social-icon {
51
+ transition: all 0.3s ease;
52
+ }
53
+
54
+ .social-icon:hover {
55
+ transform: scale(1.1);
56
+ filter: drop-shadow(0 0 8px rgba(129, 140, 248, 0.7));
57
+ }
58
+
59
+ .section-title {
60
+ position: relative;
61
+ display: inline-block;
62
+ }
63
+
64
+ .section-title::after {
65
+ content: '';
66
+ position: absolute;
67
+ bottom: -8px;
68
+ left: 0;
69
+ width: 100%;
70
+ height: 3px;
71
+ background: linear-gradient(90deg, #38bdf8, #818cf8);
72
+ border-radius: 3px;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="min-h-screen">
77
+ <!-- Navigation -->
78
+ <nav class="sticky top-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800/50">
79
+ <div class="container mx-auto px-6 py-4">
80
+ <div class="flex items-center justify-between">
81
+ <a href="#" class="text-2xl font-bold gradient-text">Ars Paradox</a>
82
+ <div class="hidden md:flex space-x-8">
83
+ <a href="#about" class="text-slate-300 hover:text-white transition">About</a>
84
+ <a href="#projects" class="text-slate-300 hover:text-white transition">Projects</a>
85
+ <a href="#experience" class="text-slate-300 hover:text-white transition">Experience</a>
86
+ <a href="#skills" class="text-slate-300 hover:text-white transition">Skills</a>
87
+ <a href="#contact" class="text-slate-300 hover:text-white transition">Contact</a>
88
+ </div>
89
+ <button class="md:hidden text-slate-300 focus:outline-none">
90
+ <i class="fas fa-bars text-xl"></i>
91
+ </button>
92
+ </div>
93
+ </div>
94
+ </nav>
95
+
96
+ <!-- Hero Section -->
97
+ <section class="relative py-20 px-6">
98
+ <div class="absolute inset-0 -z-10">
99
+ <div class="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-10"></div>
100
+ <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-slate-900 to-purple-900/20"></div>
101
+ </div>
102
+ <div class="container mx-auto flex flex-col lg:flex-row items-center justify-between">
103
+ <div class="lg:w-1/2 mb-10 lg:mb-0">
104
+ <h1 class="text-5xl md:text-6xl font-bold mb-6">
105
+ <span class="gradient-text">Pandu Dhaulagiri</span>
106
+ </h1>
107
+ <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-slate-300">AI Engineer & Creative Technologist</h2>
108
+ <p class="text-lg text-slate-300 mb-8 leading-relaxed">
109
+ Building unconventional systems at the intersection of AI, gaming, and interactive storytelling.
110
+ Passionate about reverse engineering, local AI systems, and creating unique digital experiences.
111
+ </p>
112
+ <div class="flex space-x-6 mb-8">
113
+ <a href="mailto:[email protected]" class="social-icon text-blue-400 text-2xl">
114
+ <i class="fas fa-envelope"></i>
115
+ </a>
116
+ <a href="https://github.com/Iteranya" target="_blank" class="social-icon text-slate-200 text-2xl">
117
+ <i class="fab fa-github"></i>
118
+ </a>
119
+ <a href="https://linkedin.com/in/pandu-dhaulagiri" target="_blank" class="social-icon text-blue-500 text-2xl">
120
+ <i class="fab fa-linkedin"></i>
121
+ </a>
122
+ <a href="https://discordapp.com/users/pandu.paradox" target="_blank" class="social-icon text-indigo-400 text-2xl">
123
+ <i class="fab fa-discord"></i>
124
+ </a>
125
+ </div>
126
+ <a href="#contact" class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-3 rounded-full font-medium hover:shadow-lg transition-all hover:translate-y-[-2px] inline-flex items-center">
127
+ Get in touch <i class="fas fa-arrow-right ml-2"></i>
128
+ </a>
129
+ </div>
130
+ <div class="lg:w-1/2 flex justify-center">
131
+ <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96">
132
+ <div class="absolute inset-0 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 opacity-20 blur-xl"></div>
133
+ <div class="absolute inset-0 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 opacity-10 blur-lg"></div>
134
+ <div class="relative w-full h-full bg-slate-800/50 border border-slate-700 rounded-xl overflow-hidden flex items-center justify-center">
135
+ <div class="text-center p-6">
136
+ <i class="fas fa-robot text-7xl md:text-8xl text-indigo-400 mb-4"></i>
137
+ <h3 class="text-xl font-bold gradient-text">Ars Paradox</h3>
138
+ <p class="text-slate-400">"Engineered Serendipity"</p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </section>
145
+
146
+ <!-- About Section -->
147
+ <section id="about" class="py-16 px-6">
148
+ <div class="container mx-auto">
149
+ <h2 class="text-3xl font-bold mb-12 text-center section-title">
150
+ <span class="gradient-text">About Me</span>
151
+ </h2>
152
+ <div class="grid md:grid-cols-2 gap-10 items-center">
153
+ <div>
154
+ <p class="text-lg text-slate-300 mb-6 leading-relaxed">
155
+ I'm an unconventional engineer with a passion for pushing boundaries. My work blends technical
156
+ expertise with creative problem-solving, often resulting in unique systems you won't find anywhere else.
157
+ </p>
158
+ <p class="text-lg text-slate-300 mb-6 leading-relaxed">
159
+ With a background in mentoring, reverse engineering, and AI system design, I thrive in environments
160
+ where standard solutions don't apply. Whether it's embedding a visual novel engine in Minecraft or
161
+ creating personality-infused AI models, I love the challenge of making the impossible work.
162
+ </p>
163
+ <div class="flex flex-wrap gap-4 mt-8">
164
+ <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium">
165
+ <i class="fas fa-microchip mr-2 text-blue-400"></i> AI Systems
166
+ </span>
167
+ <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium">
168
+ <i class="fas fa-gamepad mr-2 text-purple-400"></i> Game Engineering
169
+ </span>
170
+ <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium">
171
+ <i class="fas fa-brain mr-2 text-indigo-400"></i> LLM Fine-tuning
172
+ </span>
173
+ <span class="bg-slate-800/50 border border-slate-700 px-4 py-2 rounded-full text-sm font-medium">
174
+ <i class="fas fa-book mr-2 text-pink-400"></i> Interactive Storytelling
175
+ </span>
176
+ </div>
177
+ </div>
178
+ <div class="bg-slate-800/30 border border-slate-700 rounded-xl p-8 card-gradient glow-effect">
179
+ <h3 class="text-xl font-bold text-white mb-4">Contact Information</h3>
180
+ <ul class="space-y-4">
181
+ <li class="flex items-start">
182
+ <i class="fas fa-envelope mr-3 mt-1 text-blue-400"></i>
183
+ <span>[email protected]</span>
184
+ </li>
185
+ <li class="flex items-start">
186
+ <i class="fas fa-phone-alt mr-3 mt-1 text-green-400"></i>
187
+ <span>(+62) 859-6597-5929</span>
188
+ </li>
189
+ <li class="flex items-start">
190
+ <i class="fab fa-discord mr-3 mt-1 text-indigo-400"></i>
191
+ <span>@pandu.paradox</span>
192
+ </li>
193
+ <li class="flex items-start">
194
+ <i class="fab fa-github mr-3 mt-1 text-slate-200"></i>
195
+ <span>@Iteranya</span>
196
+ </li>
197
+ <li class="flex items-start">
198
+ <i class="fab fa-linkedin mr-3 mt-1 text-blue-500"></i>
199
+ <span>linkedin.com/in/pandu-dhaulagiri</span>
200
+ </li>
201
+ </ul>
202
+ <div class="mt-6">
203
+ <h4 class="font-medium text-slate-300 mb-2">Interests Beyond Tech</h4>
204
+ <div class="flex flex-wrap gap-2">
205
+ <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Psychology</span>
206
+ <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Philosophy</span>
207
+ <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Creative Writing</span>
208
+ <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Economy</span>
209
+ <span class="bg-slate-700/50 px-3 py-1 rounded-full text-xs">Cooking</span>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </section>
216
+
217
+ <div class="section-divider container mx-auto"></div>
218
+
219
+ <!-- Projects Section -->
220
+ <section id="projects" class="py-16 px-6">
221
+ <div class="container mx-auto">
222
+ <h2 class="text-3xl font-bold mb-12 text-center section-title">
223
+ <span class="gradient-text">Featured Projects</span>
224
+ </h2>
225
+
226
+ <div class="space-y-12">
227
+ <!-- Project 1 -->
228
+ <div class="card-gradient rounded-xl overflow-hidden border border-slate-700 glow-effect">
229
+ <div class="md:flex">
230
+ <div class="md:w-1/3 bg-slate-800 p-6 flex items-center justify-center">
231
+ <div class="text-center">
232
+ <i class="fas fa-book-open text-6xl mb-4 text-purple-400"></i>
233
+ <h3 class="text-xl font-bold">MobTalkerRedux</h3>
234
+ <div class="flex justify-center space-x-2 mt-4">
235
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Python</span>
236
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Java</span>
237
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Minecraft</span>
238
+ </div>
239
+ <a href="https://github.com/Iteranya/MobTalkerRedux" target="_blank" class="inline-block mt-4 text-blue-400 hover:text-blue-300">
240
+ View on GitHub <i class="fas fa-external-link-alt ml-1"></i>
241
+ </a>
242
+ </div>
243
+ </div>
244
+ <div class="md:w-2/3 p-8">
245
+ <h3 class="text-2xl font-bold mb-4">Embedded Visual Novel Engine</h3>
246
+ <p class="text-slate-300 mb-4">
247
+ Created an entire Visual Novel Game Engine from scratch that runs within Minecraft, featuring:
248
+ </p>
249
+ <ul class="space-y-2 mb-6">
250
+ <li class="flex items-start">
251
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
252
+ <span>A pseudo-DSL (domain-specific language) for creating scripts</span>
253
+ </li>
254
+ <li class="flex items-start">
255
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
256
+ <span>Python compiler that transforms readable scripts into JSON Finite State Machines</span>
257
+ </li>
258
+ <li class="flex items-start">
259
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
260
+ <span>Deep understanding of working with obfuscated codebases (Minecraft)</span>
261
+ </li>
262
+ </ul>
263
+ <div class="flex flex-wrap gap-2">
264
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Game Engine</span>
265
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">DSL Creation</span>
266
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Reverse Engineering</span>
267
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Finite State Machines</span>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Project 2 -->
274
+ <div class="card-gradient rounded-xl overflow-hidden border border-slate-700 glow-effect">
275
+ <div class="md:flex">
276
+ <div class="md:w-1/3 bg-slate-800 p-6 flex items-center justify-center">
277
+ <div class="text-center">
278
+ <i class="fas fa-robot text-6xl mb-4 text-blue-400"></i>
279
+ <h3 class="text-xl font-bold">Aktiva AI</h3>
280
+ <div class="flex justify-center space-x-2 mt-4">
281
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Python</span>
282
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">LLM</span>
283
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Discord</span>
284
+ </div>
285
+ <a href="https://github.com/Iteranya/AktivaAI" target="_blank" class="inline-block mt-4 text-blue-400 hover:text-blue-300">
286
+ View on GitHub <i class="fas fa-external-link-alt ml-1"></i>
287
+ </a>
288
+ </div>
289
+ </div>
290
+ <div class="md:w-2/3 p-8">
291
+ <h3 class="text-2xl font-bold mb-4">Multi-Agent Character AI Discord Bot</h3>
292
+ <p class="text-slate-300 mb-4">
293
+ Developed an AI wrapper in a Discord bot for multi-character AI implementation with local AI capabilities:
294
+ </p>
295
+ <ul class="space-y-2 mb-6">
296
+ <li class="flex items-start">
297
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
298
+ <span>Deep understanding of Large Language Model operations</span>
299
+ </li>
300
+ <li class="flex items-start">
301
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
302
+ <span>Expertise in Python asynchronous task development</span>
303
+ </li>
304
+ <li class="flex items-start">
305
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
306
+ <span>Running local AI on consumer hardware with 3rd party service integration</span>
307
+ </li>
308
+ <li class="flex items-start">
309
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
310
+ <span>Advanced prompt engineering and AI context manipulation</span>
311
+ </li>
312
+ </ul>
313
+ <div class="flex flex-wrap gap-2">
314
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Local AI Deployment</span>
315
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Multi-Agent Systems</span>
316
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Discord API</span>
317
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">AI Interaction Design</span>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Project 3 -->
324
+ <div class="card-gradient rounded-xl overflow-hidden border border-slate-700 glow-effect">
325
+ <div class="md:flex">
326
+ <div class="md:w-1/3 bg-slate-800 p-6 flex items-center justify-center">
327
+ <div class="text-center">
328
+ <i class="fas fa-brain text-6xl mb-4 text-indigo-400"></i>
329
+ <h3 class="text-xl font-bold">Viel-Mistral</h3>
330
+ <div class="flex justify-center space-x-2 mt-4">
331
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">Python</span>
332
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">LLM</span>
333
+ <span class="bg-slate-700 px-2 py-1 rounded-full text-xs">LoRA</span>
334
+ </div>
335
+ <a href="https://huggingface.co/ArsParadox/Viel-Mistral-v3" target="_blank" class="inline-block mt-4 text-blue-400 hover:text-blue-300">
336
+ View on HuggingFace <i class="fas fa-external-link-alt ml-1"></i>
337
+ </a>
338
+ </div>
339
+ </div>
340
+ <div class="md:w-2/3 p-8">
341
+ <h3 class="text-2xl font-bold mb-4">Personality-Embedded LLM</h3>
342
+ <p class="text-slate-300 mb-4">
343
+ Created a customized large language model with built-in personality traits through dataset modification and fine-tuning:
344
+ </p>
345
+ <ul class="space-y-2 mb-6">
346
+ <li class="flex items-start">
347
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
348
+ <span>Modified 52k Alpaca training dataset with unique personality characteristics</span>
349
+ </li>
350
+ <li class="flex items-start">
351
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
352
+ <span>Developed automated scripts for large dataset manipulation using Kluster Batch format</span>
353
+ </li>
354
+ <li class="flex items-start">
355
+ <i class="fas fa-check mr-2 mt-1 text-green-400"></i>
356
+ <span>Fine-tuned Mistral 7B using Low-Rank Adaptation (LoRA) on limited hardware</span>
357
+ </li>
358
+ </ul>
359
+ <div class="flex flex-wrap gap-2">
360
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">LLM Fine-tuning</span>
361
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Dataset Engineering</span>
362
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">Personality AI</span>
363
+ <span class="bg-slate-800/70 border border-slate-700 px-3 py-1 rounded-full text-xs">LoRA</span>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </div>
370
+ </section>
371
+
372
+ <div class="section-divider container mx-auto"></div>
373
+
374
+ <!-- Experience Section -->
375
+ <section id="experience" class="py-16 px-6">
376
+ <div class="container mx-auto">
377
+ <h2 class="text-3xl font-bold mb-12 text-center section-title">
378
+ <span class="gradient-text">Professional Experience</span>
379
+ </h2>
380
+
381
+ <div class="max-w-3xl mx-auto">
382
+ <!-- Experience 1 -->
383
+ <div class="relative pl-10 mb-12 timeline-item">
384
+ <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-500 border-4 border-slate-900"></div>
385
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 glow-effect">
386
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
387
+ <h3 class="text-xl font-bold">Bangkit Academy</h3>
388
+ <span class="text-sm bg-blue-900/30 text-blue-300 px-3 py-1 rounded-full">Nov 2022 - Nov 2023</span>
389
+ </div>
390
+ <h4 class="text-lg text-blue-300 mb-4">Mentor & Discord Moderator</h4>
391
+ <div class="space-y-4">
392
+ <div class="flex items-start">
393
+ <i class="fas fa-graduation-cap mr-3 mt-1 text-blue-400"></i>
394
+ <p>Android Developer Mentor with the highest graduation rate in class, helping 40+ students with various backgrounds and skill levels</p>
395
+ </div>
396
+ <div class="flex items-start">
397
+ <i class="fas fa-users mr-3 mt-1 text-blue-400"></i>
398
+ <p>Mentored 3 student groups in startup building from ideation through to securing investment funding</p>
399
+ </div>
400
+ <div class="flex items-start">
401
+ <i class="fas fa-comments mr-3 mt-1 text-blue-400"></i>
402
+ <p>Provided life advice and soft skills training during weekly meetings through storytelling and guided discussions</p>
403
+ </div>
404
+ <div class="flex items-start">
405
+ <i class="fas fa-shield-alt mr-3 mt-1 text-blue-400"></i>
406
+ <p>Discord Moderator for multiple cohorts, managing server activities, conflict resolution, online events, and community upkeep</p>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- Experience 2 -->
413
+ <div class="relative pl-10 mb-12 timeline-item">
414
+ <div class="absolute left-0 top-1 w-4 h-4 rounded-full bg-blue-500 border-4 border-slate-900"></div>
415
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-6 glow-effect">
416
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
417
+ <h3 class="text-xl font-bold">PT. Vimayo</h3>
418
+ <span class="text-sm bg-blue-900/30 text-blue-300 px-3 py-1 rounded-full">Oct 2020 - Present</span>
419
+ </div>
420
+ <h4 class="text-lg text-blue-300 mb-4">On-Site Technician</h4>
421
+ <div class="space-y-4">
422
+ <div class="flex items-start">
423
+ <i class="fas fa-file-excel mr-3 mt-1 text-blue-400"></i>
424
+ <p>Created Excel automation solutions using VBA to streamline company workflows</p>
425
+ </div>
426
+ <div class="flex items-start">
427
+ <i class="fas fa-tools mr-3 mt-1 text-blue-400"></i>
428
+ <p>Solved miscellaneous technical and hardware issues as the primary on-site support technician</p>
429
+ </div>
430
+ <div class="flex items-start">
431
+ <i class="fas fa-globe mr-3 mt-1 text-blue-400"></i>
432
+ <p>Developed and managed company websites, handling both frontend and backend requirements</p>
433
+ </div>
434
+ <div class="flex items-start">
435
+ <i class="fas fa-file-invoice-dollar mr-3 mt-1 text-blue-400"></i>
436
+ <p>Compiled and organized tax reports, ensuring compliance with financial regulations</p>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+ </div>
443
+ </section>
444
+
445
+ <div class="section-divider container mx-auto"></div>
446
+
447
+ <!-- Skills Section -->
448
+ <section id="skills" class="py-16 px-6">
449
+ <div class="container mx-auto">
450
+ <h2 class="text-3xl font-bold mb-12 text-center section-title">
451
+ <span class="gradient-text">Skills & Certifications</span>
452
+ </h2>
453
+
454
+ <div class="grid md:grid-cols-2 gap-10 max-w-4xl mx-auto">
455
+ <!-- Technical Skills -->
456
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect">
457
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
458
+ <i class="fas fa-code mr-3 text-blue-400"></i>
459
+ <span>Technical Skills</span>
460
+ </h3>
461
+ <div class="space-y-6">
462
+ <div>
463
+ <h4 class="text-lg font-medium mb-3">Core Competencies</h4>
464
+ <div class="flex flex-wrap gap-2">
465
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Rapid System Integration</span>
466
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Reverse Engineering</span>
467
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Multi-Stage AI Design</span>
468
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Local AI Optimization</span>
469
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Cross-Platform Architecture</span>
470
+ </div>
471
+ </div>
472
+ <div>
473
+ <h4 class="text-lg font-medium mb-3">Programming Languages</h4>
474
+ <div class="flex flex-wrap gap-2">
475
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Python (Expert)</span>
476
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Java</span>
477
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">VBA</span>
478
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">JavaScript</span>
479
+ </div>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <!-- Certifications -->
485
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect">
486
+ <h3 class="text-2xl font-bold mb-6 flex items-center">
487
+ <i class="fas fa-certificate mr-3 text-blue-400"></i>
488
+ <span>Certifications</span>
489
+ </h3>
490
+ <div class="space-y-4">
491
+ <div class="flex items-start">
492
+ <div class="bg-blue-900/50 rounded-md p-2 mr-4">
493
+ <i class="fas fa-mobile-alt text-lg text-blue-300"></i>
494
+ </div>
495
+ <div>
496
+ <h4 class="font-bold">Associate Android Developer</h4>
497
+ <p class="text-sm text-slate-300">Bangkit Academy</p>
498
+ </div>
499
+ </div>
500
+ <div class="flex items-start">
501
+ <div class="bg-blue-900/50 rounded-md p-2 mr-4">
502
+ <i class="fas fa-trophy text-lg text-blue-300"></i>
503
+ </div>
504
+ <div>
505
+ <h4 class="font-bold">Distinction Graduate</h4>
506
+ <p class="text-sm text-slate-300">Bangkit Academy</p>
507
+ </div>
508
+ </div>
509
+ </div>
510
+
511
+ <h3 class="text-2xl font-bold mt-10 mb-6 flex items-center">
512
+ <i class="fas fa-star mr-3 text-blue-400"></i>
513
+ <span>Interests</span>
514
+ </h3>
515
+ <div class="flex flex-wrap gap-2">
516
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">AI Research</span>
517
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">DIY Projects</span>
518
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Fanfiction Writing</span>
519
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Psychology</span>
520
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Economic Systems</span>
521
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Philosophy</span>
522
+ <span class="bg-slate-700/70 px-3 py-1 rounded-full text-sm">Culinary Arts</span>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ </section>
528
+
529
+ <div class="section-divider container mx-auto"></div>
530
+
531
+ <!-- Contact Section -->
532
+ <section id="contact" class="py-16 px-6">
533
+ <div class="container mx-auto max-w-4xl">
534
+ <h2 class="text-3xl font-bold mb-12 text-center section-title">
535
+ <span class="gradient-text">Get In Touch</span>
536
+ </h2>
537
+
538
+ <div class="grid md:grid-cols-2 gap-10">
539
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect">
540
+ <h3 class="text-xl font-bold mb-6">Contact Information</h3>
541
+ <ul class="space-y-4">
542
+ <li class="flex items-start">
543
+ <div class="bg-blue-900/30 p-2 rounded-lg mr-4">
544
+ <i class="fas fa-envelope text-blue-300"></i>
545
+ </div>
546
+ <div>
547
+ <h4 class="font-medium">Email</h4>
548
+ <p class="text-slate-300">[email protected]</p>
549
+ </div>
550
+ </li>
551
+ <li class="flex items-start">
552
+ <div class="bg-blue-900/30 p-2 rounded-lg mr-4">
553
+ <i class="fas fa-phone-alt text-blue-300"></i>
554
+ </div>
555
+ <div>
556
+ <h4 class="font-medium">Phone</h4>
557
+ <p class="text-slate-300">(+62) 859-6597-5929</p>
558
+ </div>
559
+ </li>
560
+ <li class="flex items-start">
561
+ <div class="bg-blue-900/30 p-2 rounded-lg mr-4">
562
+ <i class="fab fa-discord text-blue-300"></i>
563
+ </div>
564
+ <div>
565
+ <h4 class="font-medium">Discord</h4>
566
+ <p class="text-slate-300">@pandu.paradox</p>
567
+ </div>
568
+ </li>
569
+ <li class="flex items-start">
570
+ <div class="bg-blue-900/30 p-2 rounded-lg mr-4">
571
+ <i class="fab fa-github text-blue-300"></i>
572
+ </div>
573
+ <div>
574
+ <h4 class="font-medium">GitHub</h4>
575
+ <p class="text-slate-300">@Iteranya</p>
576
+ </div>
577
+ </li>
578
+ <li class="flex items-start">
579
+ <div class="bg-blue-900/30 p-2 rounded-lg mr-4">
580
+ <i class="fab fa-linkedin-in text-blue-300"></i>
581
+ </div>
582
+ <div>
583
+ <h4 class="font-medium">LinkedIn</h4>
584
+ <p class="text-slate-300">linkedin.com/in/pandu-dhaulagiri</p>
585
+ </div>
586
+ </li>
587
+ </ul>
588
+ </div>
589
+
590
+ <div class="bg-slate-800/50 border border-slate-700 rounded-xl p-8 glow-effect">
591
+ <h3 class="text-xl font-bold mb-6">Send Me a Message</h3>
592
+ <form class="space-y-4">
593
+ <div>
594
+ <label for="name" class="block mb-2 text-sm font-medium">Your Name</label>
595
+ <input type="text" id="name" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
596
+ </div>
597
+ <div>
598
+ <label for="email" class="block mb-2 text-sm font-medium">Your Email</label>
599
+ <input type="email" id="email" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
600
+ </div>
601
+ <div>
602
+ <label for="message" class="block mb-2 text-sm font-medium">Message</label>
603
+ <textarea id="message" rows="4" class="w-full bg-slate-800/50 border border-slate-700 rounded-lg p-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
604
+ </div>
605
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all">
606
+ Send Message <i class="fas fa-paper-plane ml-2"></i>
607
+ </button>
608
+ </form>
609
+ </div>
610
+ </div>
611
+ </div>
612
+ </section>
613
+
614
+ <!-- Footer -->
615
+ <footer class="bg-slate-900/70 border-t border-slate-800/50 py-8">
616
+ <div class="container mx-auto px-6">
617
+ <div class="flex flex-col md:flex-row justify-between items-center">
618
+ <div class="mb-6 md:mb-0">
619
+ <a href="#" class="text-xl font-bold gradient-text">Ars Paradox</a>
620
+ <p class="text-sm text-slate-400 mt-2">Engineered Serendipity</p>
621
+ </div>
622
+ <div class="flex space-x-6">
623
+ <a href="mailto:[email protected]" class="text-slate-400 hover:text-blue-400">
624
+ <i class="fab fa-google text-xl"></i>
625
+ </a>
626
+ <a href="https://github.com/Iteranya" class="text-slate-400 hover:text-slate-200">
627
+ <i class="fab fa-github text-xl"></i>
628
+ </a>
629
+ <a href="https://linkedin.com/in/pandu-dhaulagiri" class="text-slate-400 hover:text-blue-500">
630
+ <i class="fab fa-linkedin-in text-xl"></i>
631
+ </a>
632
+ <a href="https://discordapp.com/users/pandu.paradox" class="text-slate-400 hover:text-indigo-400">
633
+ <i class="fab fa-discord text-xl"></i>
634
+ </a>
635
+ </div>
636
+ </div>
637
+ <hr class="border-slate-800/50 my-6">
638
+ <p class="text-sm text-center text-slate-500">&copy; 2025 Pandu Dhaulagiri. All rights reserved.</p>
639
+ </div>
640
+ </footer>
641
+
642
+ <script>
643
+ // Simple smooth scrolling for anchor links
644
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
645
+ anchor.addEventListener('click', function (e) {
646
+ e.preventDefault();
647
+
648
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
649
+ behavior: 'smooth'
650
+ });
651
+ });
652
+ });
653
+
654
+ // Mobile menu toggle (would need implementation)
655
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
656
+ // You would add click handler here for a mobile menu
657
+ </script>
658
+ <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=ArsParadox/my-resume" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
659
+ </html>