Hugging Face's logo

Spaces:
LPX55
/
anycoder-79ed7d11
Running

App Files Community
LPX55 commited on
Commit
f243d63
·
verified ·
1 Parent(s): 34edba9

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +416 -19
index.html CHANGED
@@ -1,19 +1,416 @@
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" class="antialiased">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Han Yoon - Resume</title>
7
+ <!-- Tailwind CSS -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <!-- Lucide Icons -->
10
+ <script src="https://unpkg.com/lucide@latest"></script>
11
+ <!-- Google Fonts -->
12
+ <link rel="preconnect" href="https://fonts.googleapis.com">
13
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
15
+
16
+ <script>
17
+ tailwind.config = {
18
+ theme: {
19
+ extend: {
20
+ fontFamily: {
21
+ sans: ['Inter', 'sans-serif'],
22
+ },
23
+ }
24
+ }
25
+ }
26
+ </script>
27
+ <style>
28
+ /* Print Styles to ensure it looks perfect when saved as PDF */
29
+ @media print {
30
+ body { background-color: white !important; }
31
+ .no-print { display: none !important; }
32
+ .print-break-inside-avoid { break-inside: avoid; }
33
+ @page { margin: 1cm; }
34
+ }
35
+ /* Custom scrollbar for a sleek feel */
36
+ ::-webkit-scrollbar { width: 6px; }
37
+ ::-webkit-scrollbar-track { background: transparent; }
38
+ ::-webkit-scrollbar-thumb { background: #d4d4d8; border-radius: 10px; }
39
+ ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
40
+
41
+ /* Editable element hover & focus styles */
42
+ .editable { transition: all 0.2s ease; outline: 1px solid transparent; }
43
+ .editable[contenteditable="true"]:hover {
44
+ outline: 1px dashed #a1a1aa;
45
+ background-color: #f4f4f5;
46
+ border-radius: 4px;
47
+ cursor: text;
48
+ box-shadow: 0 0 0 2px #f4f4f5;
49
+ }
50
+ .editable[contenteditable="true"]:focus {
51
+ outline: 2px solid #3b82f6;
52
+ background-color: #ffffff;
53
+ border-radius: 4px;
54
+ cursor: text;
55
+ box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
56
+ }
57
+ /* Hide UI additions and edit states during print */
58
+ @media print {
59
+ .editable[contenteditable="true"] { outline: none !important; background: transparent !important; box-shadow: none !important; }
60
+ }
61
+ </style>
62
+ </head>
63
+ <body class="bg-zinc-50 text-zinc-900 font-sans selection:bg-zinc-200 selection:text-zinc-900">
64
+
65
+ <!-- Floating Print Button -->
66
+ <button onclick="window.print()" class="no-print fixed bottom-8 right-8 bg-zinc-900 text-white p-3 rounded-full shadow-lg hover:bg-zinc-800 transition-transform hover:scale-105 flex items-center gap-2 z-50">
67
+ <i data-lucide="printer" class="w-5 h-5"></i>
68
+ </button>
69
+
70
+ <div class="max-w-[68rem] mx-auto my-0 md:my-10 bg-white md:shadow-xl md:rounded-2xl overflow-hidden print:shadow-none print:my-0">
71
+
72
+ <!-- Header Section -->
73
+ <header class="px-8 md:px-16 pt-16 pb-10 border-b border-zinc-100 bg-white">
74
+ <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-zinc-900 editable" contenteditable="true">Han Yoon</h1>
75
+ <h2 class="text-lg md:text-xl text-zinc-500 mt-3 font-medium tracking-wide editable" contenteditable="true">Development, Blockchain, AI, Cybersecurity, Community, & Governance</h2>
76
+
77
+ <div class="flex flex-wrap gap-4 md:gap-6 mt-6 text-sm text-zinc-600 font-medium">
78
+ <div class="flex items-center gap-1.5">
79
+ <i data-lucide="map-pin" class="w-4 h-4 text-zinc-400"></i>
80
+ <span class="editable" contenteditable="true">South Korea</span>
81
+ </div>
82
+ <div class="flex items-center gap-1.5 hover:text-zinc-900 transition-colors">
83
+ <i data-lucide="mail" class="w-4 h-4 text-zinc-400"></i>
84
+ <span class="editable" contenteditable="true">hansup.yoon@gmail.com</span>
85
+ </div>
86
+ <div class="flex items-center gap-1.5 hover:text-zinc-900 transition-colors">
87
+ <i data-lucide="linkedin" class="w-4 h-4 text-zinc-400"></i>
88
+ <span class="editable" contenteditable="true">linkedin.com/in/hanyoon1</span>
89
+ </div>
90
+ <div class="flex items-center gap-1.5 hover:text-zinc-900 transition-colors">
91
+ <i data-lucide="link" class="w-4 h-4 text-zinc-400"></i>
92
+ <span class="editable" contenteditable="true">Crunchbase</span>
93
+ </div>
94
+ </div>
95
+ </header>
96
+
97
+ <!-- Cover Letter Section -->
98
+ <section class="px-8 md:px-16 py-10 border-b border-zinc-100 bg-zinc-50/50 print:bg-white">
99
+ <div class="flex items-center gap-2 mb-6">
100
+ <div class="w-8 h-8 bg-zinc-900 rounded-lg flex items-center justify-center">
101
+ <i data-lucide="file-text" class="w-4 h-4 text-white"></i>
102
+ </div>
103
+ <h3 class="text-sm font-bold uppercase tracking-widest text-zinc-900 editable" contenteditable="true">Cover Letter</h3>
104
+ </div>
105
+
106
+ <div class="space-y-4 text-sm text-zinc-700 leading-relaxed">
107
+ <p class="editable" contenteditable="true">
108
+ <span class="font-semibold text-zinc-900">Dear Hiring Manager,</span>
109
+ </p>
110
+
111
+ <p class="editable" contenteditable="true">
112
+ I am writing to express my strong interest in joining your organization. With over two decades of experience spanning AI, blockchain technology, cybersecurity, and community governance, I bring a unique blend of technical expertise and leadership capabilities that can drive meaningful innovation within your team.
113
+ </p>
114
+
115
+ <p class="editable" contenteditable="true">
116
+ Throughout my career, I have demonstrated a passion for building and scaling ventures from the ground up. As Founding Human at Borderless AI, I lead research and development initiatives focused on low-resource languages, public goods models, and novel ensemble systems—achieving over 4 million inferences across our models. My background in DAO governance, including serving on the Cosmos Ecosystem Governance Council, has equipped me with the skills to navigate complex decision-making processes and drive consensus among diverse stakeholders.
117
+ </p>
118
+
119
+ <p class="editable" contenteditable="true">
120
+ I am particularly drawn to opportunities where I can leverage my expertise in Generative AI, educational leadership, and decentralized systems to create lasting impact. My experience at ShapeShift as Globalization Leader, where I built and managed a global team of 12+ members, further demonstrates my ability to bridge cultural gaps and make technology accessible to diverse communities.
121
+ </p>
122
+
123
+ <p class="editable" contenteditable="true">
124
+ I would welcome the opportunity to discuss how my background, skills, and enthusiasm can contribute to your organization's mission. Thank you for considering my application.
125
+ </p>
126
+
127
+ <p class="editable" contenteditable="true mt-6">
128
+ <span class="font-semibold text-zinc-900">Sincerely,</span><br>
129
+ <span class="text-zinc-900">Han Yoon</span>
130
+ </p>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Main Content Layout -->
135
+ <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 p-8 md:px-16 md:py-12 bg-white">
136
+
137
+ <!-- Left Sidebar (Skills, Summary, Ed, etc.) -->
138
+ <aside class="lg:col-span-4 space-y-10">
139
+
140
+ <!-- Summary -->
141
+ <section>
142
+ <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">About</h3>
143
+ <p class="text-zinc-600 leading-relaxed text-sm editable" contenteditable="true">
144
+ Early adopter, serial tinkerer, perpetual learner. Two decades in AI, blockchain, and cybersecurity — founding ventures, stewarding DAO governance, from framework development to organizing community grants programs.
145
+ </p>
146
+ </section>
147
+
148
+ <!-- Skills -->
149
+ <section>
150
+ <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">Top Skills</h3>
151
+ <div class="flex flex-wrap gap-2">
152
+ <span class="bg-zinc-100 border border-zinc-200 text-zinc-700 px-3 py-1.5 rounded-lg text-xs font-semibold editable" contenteditable="true">Generative AI</span>
153
+ <span class="bg-zinc-100 border border-zinc-200 text-zinc-700 px-3 py-1.5 rounded-lg text-xs font-semibold editable" contenteditable="true">Educational Leadership</span>
154
+ <span class="bg-zinc-100 border border-zinc-200 text-zinc-700 px-3 py-1.5 rounded-lg text-xs font-semibold editable" contenteditable="true">DAO Governance</span>
155
+ </div>
156
+ </section>
157
+
158
+ <!-- Languages -->
159
+ <section>
160
+ <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">Languages</h3>
161
+ <ul class="space-y-3">
162
+ <li class="flex justify-between items-center text-sm">
163
+ <span class="font-medium text-zinc-800 editable" contenteditable="true">English</span>
164
+ <span class="text-zinc-500 text-xs editable" contenteditable="true">Full Professional</span>
165
+ </li>
166
+ <li class="flex justify-between items-center text-sm">
167
+ <span class="font-medium text-zinc-800 editable" contenteditable="true">Korean</span>
168
+ <span class="text-zinc-500 text-xs editable" contenteditable="true">Limited Working</span>
169
+ </li>
170
+ </ul>
171
+ </section>
172
+
173
+ <!-- Certifications -->
174
+ <section>
175
+ <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">Certifications</h3>
176
+ <ul class="space-y-3">
177
+ <li class="text-sm">
178
+ <span class="block font-medium text-zinc-800 editable" contenteditable="true">AWS Machine Learning</span>
179
+ <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">Amazon Web Services</span>
180
+ </li>
181
+ <li class="text-sm">
182
+ <span class="block font-medium text-zinc-800 editable" contenteditable="true">Gradio Agents & MCP Hackathon</span>
183
+ <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">2025</span>
184
+ </li>
185
+ </ul>
186
+ </section>
187
+
188
+ <!-- Honors & Awards -->
189
+ <section>
190
+ <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">Honors & Awards</h3>
191
+ <ul class="space-y-3">
192
+ <li class="text-sm">
193
+ <span class="block font-medium text-zinc-800 editable" contenteditable="true">Website Development (CA)</span>
194
+ <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">2nd Place</span>
195
+ </li>
196
+ <li class="text-sm">
197
+ <span class="block font-medium text-zinc-800 editable" contenteditable="true">Internet App Programming (CA)</span>
198
+ <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">5th Place</span>
199
+ </li>
200
+ <li class="text-sm">
201
+ <span class="block font-medium text-zinc-800 editable" contenteditable="true">Top Visionaries & Entrepreneurs</span>
202
+ <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">Ranked #11 • 2018</span>
203
+ </li>
204
+ </ul>
205
+ </section>
206
+
207
+ <!-- Education -->
208
+ <section class="print-break-inside-avoid">
209
+ <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">Education</h3>
210
+ <div class="space-y-5">
211
+ <div class="relative">
212
+ <h4 class="text-sm font-semibold text-zinc-900 editable" contenteditable="true">University of California, Irvine</h4>
213
+ <p class="text-xs text-zinc-500 mt-1 editable" contenteditable="true">2011 - 2019</p>
214
+ <p class="text-xs text-zinc-600 mt-1 editable" contenteditable="true">Senior Year Dropout, Business Information Management & Computer Science</p>
215
+ </div>
216
+ <div class="relative">
217
+ <h4 class="text-sm font-semibold text-zinc-900 editable" contenteditable="true">Kennedy High</h4>
218
+ <p class="text-xs text-zinc-500 mt-1 editable" contenteditable="true">2009 - 2011</p>
219
+ </div>
220
+ <div class="relative">
221
+ <h4 class="text-sm font-semibold text-zinc-900 editable" contenteditable="true">Troy High</h4>
222
+ <p class="text-xs text-zinc-500 mt-1 editable" contenteditable="true">2008 - 2009</p>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ </aside>
228
+
229
+ <!-- Right Main Content (Experience) -->
230
+ <main class="lg:col-span-8">
231
+ <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-6 editable" contenteditable="true">Professional Experience</h3>
232
+
233
+ <!-- Timeline container -->
234
+ <div class="space-y-8 border-l-2 border-zinc-100 pl-5 ml-2">
235
+
236
+ <!-- Experience Item -->
237
+ <div class="relative print-break-inside-avoid">
238
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-800 rounded-full ring-4 ring-white"></div>
239
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
240
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">Founding Human</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">Borderless AI</span></h4>
241
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Jun 2024 - Present</span>
242
+ </div>
243
+ <p class="text-xs text-zinc-400 mb-3 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> <span class="editable" contenteditable="true">Seoul, South Korea</span></p>
244
+ <p class="text-sm text-zinc-600 leading-relaxed editable" contenteditable="true">
245
+ Research and development in various AI domains specifically for 1) low-resource languages and communities; 2) development of models as public goods; 3) novel ensemble and modular systems. 4 million and growing inferences across all our models.
246
+ </p>
247
+
248
+ <!-- IDEATION 1 & 2: Project Link Pills & Impact Metrics (Digital only, hidden on print) -->
249
+ <div class="no-print mt-4 space-y-3">
250
+ <div class="flex flex-wrap gap-2">
251
+ <a href="#" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-zinc-100 hover:bg-zinc-200 text-zinc-700 text-xs font-medium rounded-full transition-colors cursor-pointer border border-zinc-200"><i data-lucide="external-link" class="w-3.5 h-3.5"></i> <span class="editable" contenteditable="true">Live Project</span></a>
252
+ <a href="#" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-zinc-100 hover:bg-zinc-200 text-zinc-700 text-xs font-medium rounded-full transition-colors cursor-pointer border border-zinc-200"><i data-lucide="github" class="w-3.5 h-3.5"></i> <span class="editable" contenteditable="true">GitHub Repo</span></a>
253
+ </div>
254
+ <!-- Metric Badges -->
255
+ </div>
256
+ </div>
257
+
258
+ <!-- Experience Item -->
259
+ <div class="relative print-break-inside-avoid">
260
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
261
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
262
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">DAO Governance Council Member</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">Cosmos Ecosystem</span></h4>
263
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Apr 2022 - Feb 2024</span>
264
+ </div>
265
+ <p class="text-xs text-zinc-400 mb-3 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> <span class="editable" contenteditable="true">South Korea</span></p>
266
+ <ul class="text-sm text-zinc-600 leading-relaxed list-disc list-outside ml-4 space-y-1.5 editable" contenteditable="true">
267
+ <li>Established and led community governance for a prominent chain in the Cosmos / IBC ecosystem.</li>
268
+ <li>Successfully proposed and passed dozens of on-chain proposals (94% success rate, $7M+) for both governance and project funding.</li>
269
+ <li>Secured funding for half a dozen IRL and online hackathons.</li>
270
+ <li>Developed community-owned public goods for network sustainability.</li>
271
+ <li>Deployed and maintained the first Uniswap v3-based DEX in IBC and integrated early AI products for team efficiency in late 2022.</li>
272
+ </ul>
273
+
274
+ <!-- IDEATION 1: Project Link Pills -->
275
+ <div class="no-print mt-3">
276
+ <a href="#" class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-zinc-100 hover:bg-zinc-200 text-zinc-700 text-xs font-medium rounded-full transition-colors cursor-pointer border border-zinc-200"><i data-lucide="file-text" class="w-3.5 h-3.5"></i> <span class="editable" contenteditable="true">Read Governance Proposals</span></a>
277
+ </div>
278
+ </div>
279
+
280
+ <!-- Experience Item -->
281
+ <div class="relative print-break-inside-avoid">
282
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
283
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
284
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">Globalization Leader</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">ShapeShift</span></h4>
285
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Aug 2022 - Oct 2023</span>
286
+ </div>
287
+ <p class="text-xs text-zinc-400 mb-3 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> <span class="editable" contenteditable="true">Seoul, South Korea</span></p>
288
+ <ul class="text-sm text-zinc-600 leading-relaxed list-disc list-outside ml-4 space-y-1.5 editable" contenteditable="true">
289
+ <li>Passed the first funding proposal for the creation of a new working group during ShapeShift's transitory phase into a full DAO (SCP-5).</li>
290
+ <li>Led initiative to streamline information and provide an onboarding platform and workspace for translations.</li>
291
+ <li>Built a global team of 12+ members to make DeFi more accessible to non-English speaking communities.</li>
292
+ </ul>
293
+
294
+ <!-- IDEATION 3: Image/Media Grid -->
295
+ <div class="no-print mt-4">
296
+ <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-2 editable" contenteditable="true">Project Gallery</p>
297
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
298
+ <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=400&q=80" alt="Dashboard" class="rounded-lg aspect-video object-cover border border-zinc-200 hover:ring-2 hover:ring-zinc-400 hover:opacity-90 transition-all cursor-pointer">
299
+ <img src="https://images.unsplash.com/photo-1639762681485-074b7f4ec651?auto=format&fit=crop&w=400&q=80" alt="Crypto UI" class="rounded-lg aspect-video object-cover border border-zinc-200 hover:ring-2 hover:ring-zinc-400 hover:opacity-90 transition-all cursor-pointer">
300
+ <div class="rounded-lg aspect-video bg-zinc-100 border border-zinc-200 flex items-center justify-center hover:bg-zinc-200 transition-colors cursor-pointer text-zinc-400">
301
+ <i data-lucide="plus" class="w-6 h-6"></i>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Experience Item -->
308
+ <div class="relative print-break-inside-avoid">
309
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
310
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
311
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">Cybersecurity Writer of the Year</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">Hacker Noon</span></h4>
312
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Aug 2019 - Aug 2023</span>
313
+ </div>
314
+ <p class="text-sm text-zinc-600 leading-relaxed mt-2 editable" contenteditable="true">
315
+ Wrote extensively on cybersecurity, tokens and projects, tokenomics evaluation, and early-stage project growth hacking.
316
+ </p>
317
+ </div>
318
+
319
+ <!-- Experience Item -->
320
+ <div class="relative print-break-inside-avoid">
321
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
322
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
323
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">CEO / Co-Founder</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">Lunar Digital Assets</span></h4>
324
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Oct 2017 - Nov 2020</span>
325
+ </div>
326
+ <p class="text-xs text-zinc-400 mb-3 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> <span class="editable" contenteditable="true">Orange County, CA</span></p>
327
+ <p class="text-sm text-zinc-600 leading-relaxed editable" contenteditable="true">
328
+ Led a fast-growing company dedicated to the proliferation of blockchain technology and decentralization, overseeing three core divisions: Lunar Labs, Lunar Marketing & Consulting, and Lunar Research.
329
+ </p>
330
+ </div>
331
+
332
+ <!-- Compact Experience Items (Older History) -->
333
+ <div class="relative pt-4 print-break-inside-avoid">
334
+ <div class="absolute -left-[25px] top-[22px] w-2 h-2 bg-zinc-200 rounded-full"></div>
335
+ <h4 class="text-sm font-bold text-zinc-800"><span class="editable" contenteditable="true">ICOBench Expert</span> <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">ICObench</span></span></h4>
336
+ <p class="text-xs text-zinc-500 editable" contenteditable="true">Nov 2018 - Dec 2019</p>
337
+ </div>
338
+
339
+ <div class="relative print-break-inside-avoid">
340
+ <div class="absolute -left-[25px] top-[6px] w-2 h-2 bg-zinc-200 rounded-full"></div>
341
+ <h4 class="text-sm font-bold text-zinc-800"><span class="editable" contenteditable="true">Frontend Developer & Designer</span> <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">Incredible Marketing</span></span></h4>
342
+ <p class="text-xs text-zinc-500 editable" contenteditable="true">Aug 2017 - Feb 2018</p>
343
+ </div>
344
+
345
+ <div class="relative print-break-inside-avoid">
346
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
347
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
348
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">Founder & Lead Dev</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">RSI Hunter for Cryptocurrencies</span></h4>
349
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Sep 2017 - Dec 2017</span>
350
+ </div>
351
+ <p class="text-sm text-zinc-600 leading-relaxed mt-2 editable" contenteditable="true">
352
+ Developed a proof-of-concept automated market analysis tool utilized by thousands of users to find optimal trading entries. Acquired two months after launch.
353
+ </p>
354
+ </div>
355
+
356
+ <div class="relative print-break-inside-avoid">
357
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
358
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
359
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">Founder</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">Spuxy Studios</span></h4>
360
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Aug 2011 - Jan 2017</span>
361
+ </div>
362
+ <p class="text-xs text-zinc-400 mb-3 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> <span class="editable" contenteditable="true">Orange County, CA</span></p>
363
+ <p class="text-sm text-zinc-600 leading-relaxed editable" contenteditable="true">
364
+ Developed an extensive portfolio over five years, creating dozens of websites and social media marketing plans for a variety of clients ranging from small businesses to large corporations.
365
+ </p>
366
+ </div>
367
+
368
+ <div class="relative pt-4 print-break-inside-avoid">
369
+ <div class="absolute -left-[25px] top-[22px] w-2 h-2 bg-zinc-200 rounded-full"></div>
370
+ <h4 class="text-sm font-bold text-zinc-800"><span class="editable" contenteditable="true">Director of Media</span> <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">U.S. Business Enterprise Council</span></span></h4>
371
+ <p class="text-xs text-zinc-500 editable" contenteditable="true">May 2013 - May 2016 • Anaheim, CA</p>
372
+ </div>
373
+
374
+ <div class="relative print-break-inside-avoid">
375
+ <div class="absolute -left-[25px] top-[6px] w-2 h-2 bg-zinc-200 rounded-full"></div>
376
+ <h4 class="text-sm font-bold text-zinc-800"><span class="editable" contenteditable="true">President / Co-Founder</span> <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">Megasized Marketing, LLC</span></span></h4>
377
+ <p class="text-xs text-zinc-500 editable" contenteditable="true">Jul 2013 - Apr 2015 • Irvine, CA</p>
378
+ </div>
379
+
380
+ <div class="relative print-break-inside-avoid">
381
+ <div class="absolute -left-[25px] top-[6px] w-2 h-2 bg-zinc-200 rounded-full"></div>
382
+ <h4 class="text-sm font-bold text-zinc-800"><span class="editable" contenteditable="true">Director of Marketing & Dev</span> <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">MVIBO.com, Inc.</span></span></h4>
383
+ <p class="text-xs text-zinc-500 editable" contenteditable="true">Jan 2013 - Nov 2014 • Cerritos, CA</p>
384
+ </div>
385
+
386
+ <div class="relative print-break-inside-avoid">
387
+ <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
388
+ <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
389
+ <h4 class="text-base font-bold text-zinc-900"><span class="editable" contenteditable="true">Founder & Head Administrator</span> <span class="font-normal text-zinc-400 mx-1">at</span> <span class="editable" contenteditable="true">ZuneBoards</span></h4>
390
+ <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Jul 2006 - Jun 2008</span>
391
+ </div>
392
+ <p class="text-xs text-zinc-400 mb-3 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> <span class="editable" contenteditable="true">Fullerton, CA</span></p>
393
+ <p class="text-sm text-zinc-600 leading-relaxed editable" contenteditable="true">
394
+ Grew ZuneBoards to be the world's #1 community for the Microsoft Zune media player with over 60,000 registered members. Managed 20+ staff members and led global Zune games/hacks development.
395
+ </p>
396
+ </div>
397
+
398
+ </div>
399
+ </main>
400
+ </div>
401
+
402
+ <!-- Footer -->
403
+ <footer class="px-8 md:px-16 py-6 border-t border-zinc-100 bg-zinc-50/30">
404
+ <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
405
+ <p class="text-xs text-zinc-400 editable" contenteditable="true">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-zinc-500 hover:text-zinc-700 underline">anycoder</a></p>
406
+ <p class="text-xs text-zinc-400 editable" contenteditable="true">Last updated: <span contenteditable="true">January 2025</span></p>
407
+ </div>
408
+ </footer>
409
+ </div>
410
+
411
+ <!-- Initialize Lucide Icons -->
412
+ <script>
413
+ lucide.createIcons();
414
+ </script>
415
+ </body>
416
+ </html>