Spaces:

LPX55
/

anycoder-79ed7d11

Running

App Files Files Community

LPX55 commited on Mar 14

Commit

d6ca73d

verified ·

1 Parent(s): 513d599

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +189 -855

index.html CHANGED Viewed

@@ -1,694 +1,12 @@
-<!DOCTYPE html>
-<html lang="en" class="antialiased">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Han Yoon - Resume</title>
-  <!-- Tailwind CSS -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Lucide Icons -->
-  <script src="https://unpkg.com/lucide@latest"></script>
-  <!-- Google Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"
-    rel="stylesheet">
-  <script>
-    tailwind.config = {
-            theme: {
-                extend: {
-                    fontFamily: {
-                        sans: ['Inter', 'sans-serif'],
-                    },
-                }
-            }
-        }
-  </script>
-  <style>
-    /* Print Styles to ensure it looks perfect when saved as PDF */
-    @media print {
-      body {
-        background-color: white !important;
-      }
-      .no-print {
-        display: none !important;
-      }
-      .print-break-inside-avoid {
-        break-inside: avoid;
-      }
-      @page {
-        margin: 1cm;
-      }
-      #lightbox,
-      #lightbox-overlay {
-        display: none !important;
-      }
-    }
-    /* Custom scrollbar for a sleek feel */
-    ::-webkit-scrollbar {
-      width: 6px;
-    }
-    ::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    ::-webkit-scrollbar-thumb {
-      background: #d4d4d8;
-      border-radius: 10px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: #a1a1aa;
-    }
-    /* Editable element hover & focus styles */
-    .editable {
-      transition: all 0.2s ease;
-      outline: 1px solid transparent;
-    }
-    .editable[contenteditable="true"]:hover {
-      outline: 1px dashed #a1a1aa;
-      background-color: #f4f4f5;
-      border-radius: 4px;
-      cursor: text;
-      box-shadow: 0 0 0 2px #f4f4f5;
-    }
-    .editable[contenteditable="true"]:focus {
-      outline: 2px solid #3b82f6;
-      background-color: #ffffff;
-      border-radius: 4px;
-      cursor: text;
-      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
-    }
-    /* Hide UI additions and edit states during print */
-    @media print {
-      .editable[contenteditable="true"] {
-        outline: none !important;
-        background: transparent !important;
-        box-shadow: none !important;
-      }
-    }
-    /* Enhanced Project Link Styles */
-    .project-link {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.375rem 0.875rem;
-      font-size: 0.75rem;
-      font-weight: 500;
-      border-radius: 0.5rem;
-      transition: all 0.2s ease;
-      text-decoration: none;
-      border: 1px solid transparent;
-    }
-    .project-link-primary {
-      background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
-      color: #fafafa;
-      border-color: #3f3f46;
-    }
-    .project-link-primary:hover {
-      background: linear-gradient(135deg, #27272a 0%, #3f3f46 100%);
-      transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-    .project-link-secondary {
-      background: #f4f4f5;
-      color: #52525b;
-      border-color: #e4e4e7;
-    }
-    .project-link-secondary:hover {
-      background: #e4e4e7;
-      color: #3f3f46;
-      transform: translateY(-1px);
-    }
-    .project-link-accent {
-      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-      color: #0369a1;
-      border-color: #7dd3fc;
-    }
-    .project-link-accent:hover {
-      background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
-      transform: translateY(-1px);
-      box-shadow: 0 4px 12px rgba(3, 105, 161, 0.15);
-    }
-    /* Project Card Style */
-    .project-card {
-      background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
-      border: 1px solid #e4e4e7;
-      border-radius: 0.75rem;
-      padding: 1rem;
-      transition: all 0.2s ease;
-    }
-    .project-card:hover {
-      border-color: #d4d4d8;
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
-    }
-    /* Impact Badge */
-    .impact-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.375rem;
-      padding: 0.25rem 0.625rem;
-      font-size: 0.6875rem;
-      font-weight: 600;
-      border-radius: 9999px;
-      background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
-      color: #047857;
-      border: 1px solid #6ee7b7;
-    }
-    /* Gallery Image Enhancement */
-    .gallery-item {
-      position: relative;
-      overflow: hidden;
-      border-radius: 0.625rem;
-      border: 1px solid #e4e4e7;
-      transition: all 0.3s ease;
-      cursor: pointer;
-    }
-    .gallery-item:hover {
-      border-color: #a1a1aa;
-      transform: scale(1.02);
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-    }
-    .gallery-item::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-    .gallery-item:hover::after {
-      opacity: 1;
-    }
-    .gallery-item .view-icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.5);
-      opacity: 0;
-      transition: all 0.3s ease;
-      z-index: 10;
-    }
-    .gallery-item:hover .view-icon {
-      transform: translate(-50%, -50%) scale(1);
-      opacity: 1;
-    }
-    /* Timeline dot pulse for current role */
-    .timeline-current {
-      position: relative;
-    }
-    .timeline-current::before {
-      content: '';
-      position: absolute;
-      left: -0.75rem;
-      top: 0.375rem;
-      width: 0.75rem;
-      height: 0.75rem;
-      border-radius: 50%;
-      background: #18181b;
-      animation: pulse 2s infinite;
-    }
-    @keyframes pulse {
-      0% {
-        box-shadow: 0 0 0 0 rgba(24, 24, 27, 0.4);
-      }
-      70% {
-        box-shadow: 0 0 0 8px rgba(24, 24, 27, 0);
-      }
-      100% {
-        box-shadow: 0 0 0 0 rgba(24, 24, 27, 0);
-      }
-    }
-    /* Lightbox Styles */
-    #lightbox-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.85);
-      backdrop-filter: blur(8px);
-      z-index: 1000;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-    }
-    #lightbox-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-    #lightbox {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) scale(0.95);
-      width: 90%;
-      max-width: 800px;
-      max-height: 90vh;
-      background: white;
-      border-radius: 1rem;
-      overflow: hidden;
-      z-index: 1001;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
-      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    }
-    #lightbox.active {
-      opacity: 1;
-      visibility: visible;
-      transform: translate(-50%, -50%) scale(1);
-    }
-    .lightbox-content {
-      display: flex;
-      flex-direction: column;
-      max-height: 90vh;
-    }
-    .lightbox-image-container {
-      position: relative;
-      background: #18181b;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      min-height: 300px;
-      max-height: 400px;
-    }
-    .lightbox-image {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      max-height: 400px;
-    }
-    .lightbox-nav {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 48px;
-      height: 48px;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      color: white;
-    }
-    .lightbox-nav:hover {
-      background: rgba(255, 255, 255, 0.2);
-      transform: translateY(-50%) scale(1.1);
-    }
-    .lightbox-nav.prev {
-      left: 1rem;
-    }
-    .lightbox-nav.next {
-      right: 1rem;
-    }
-    .lightbox-info {
-      padding: 1.5rem;
-      overflow-y: auto;
-      flex: 1;
-    }
-    .lightbox-close {
-      position: absolute;
-      top: 1rem;
-      right: 1rem;
-      width: 40px;
-      height: 40px;
-      background: rgba(0, 0, 0, 0.5);
-      border: none;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      color: white;
-      z-index: 10;
-    }
-    .lightbox-close:hover {
-      background: rgba(0, 0, 0, 0.7);
-      transform: scale(1.1);
-    }
-    .lightbox-dots {
-      display: flex;
-      justify-content: center;
-      gap: 0.5rem;
-      padding: 1rem;
-      background: #f4f4f5;
-    }
-    .lightbox-dot {
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: #d4d4d8;
-      cursor: pointer;
-      transition: all 0.2s ease;
-    }
-    .lightbox-dot.active {
-      background: #18181b;
-      width: 24px;
-      border-radius: 4px;
-    }
-    .lightbox-dot:hover:not(.active) {
-      background: #a1a1aa;
-    }
-  </style>
-</head>
-<body class="bg-zinc-50 text-zinc-900 font-sans selection:bg-zinc-200 selection:text-zinc-900">
-  <!-- Floating Print Button -->
-  <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">
-        <i data-lucide="printer" class="w-5 h-5"></i>
-    </button>
-  <!-- Lightbox Overlay -->
-  <div id="lightbox-overlay" onclick="closeLightbox()"></div>
-  <!-- Lightbox Modal -->
-  <div id="lightbox">
-    <button class="lightbox-close" onclick="closeLightbox()">
-      <i data-lucide="x" class="w-5 h-5"></i>
-    </button>
-    <div class="lightbox-content">
-      <div class="lightbox-image-container">
-        <button class="lightbox-nav prev" onclick="navigateLightbox(-1)">
-          <i data-lucide="chevron-left" class="w-6 h-6"></i>
-        </button>
-        <img id="lightbox-img" class="lightbox-image" src="" alt="Project detail">
-        <button class="lightbox-nav next" onclick="navigateLightbox(1)">
-          <i data-lucide="chevron-right" class="w-6 h-6"></i>
-        </button>
-      </div>
-      <div class="lightbox-dots" id="lightbox-dots"></div>
-      <div class="lightbox-info">
-        <div class="flex items-center gap-2 mb-3">
-          <span id="lightbox-badge" class="px-3 py-1 rounded-full text-xs font-semibold"></span>
-        </div>
-        <h3 id="lightbox-title" class="text-xl font-bold text-zinc-900 mb-2"></h3>
-        <p id="lightbox-subtitle" class="text-sm text-zinc-500 mb-4"></p>
-        <div class="prose prose-sm max-w-none">
-          <p id="lightbox-description" class="text-zinc-600 leading-relaxed"></p>
-        </div>
-        <div id="lightbox-technologies" class="mt-4 flex flex-wrap gap-2"></div>
-        <div id="lightbox-links" class="mt-6 flex flex-wrap gap-3"></div>
-      </div>
-    </div>
-  </div>
-  <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">
-    <!-- Header Section -->
-    <header class="px-8 md:px-16 pt-16 pb-10 border-b border-zinc-100 bg-white">
-      <h1 class="text-4xl md:text-5xl font-extrabold tracking-tight text-zinc-900 editable" contenteditable="true">Han
-        Yoon</h1>
-      <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>
-      <div class="flex flex-wrap gap-4 md:gap-6 mt-6 text-sm text-zinc-600 font-medium">
-        <div class="flex items-center gap-1.5">
-          <i data-lucide="map-pin" class="w-4 h-4 text-zinc-400"></i>
-          <span class="editable" contenteditable="true">South Korea</span>
-        </div>
-        <div class="flex items-center gap-1.5 hover:text-zinc-900 transition-colors">
-          <i data-lucide="mail" class="w-4 h-4 text-zinc-400"></i>
-          <span class="editable" contenteditable="true">hansup.yoon@gmail.com</span>
-        </div>
-        <div class="flex items-center gap-1.5 hover:text-zinc-900 transition-colors">
-          <i data-lucide="linkedin" class="w-4 h-4 text-zinc-400"></i>
-          <span class="editable" contenteditable="true">linkedin.com/in/hanyoon1</span>
-        </div>
-        <div class="flex items-center gap-1.5 hover:text-zinc-900 transition-colors">
-          <i data-lucide="link" class="w-4 h-4 text-zinc-400"></i>
-          <span class="editable" contenteditable="true">Crunchbase</span>
-        </div>
-      </div>
-    </header>
-    <!-- Cover Letter Section -->
-    <section class="px-8 md:px-16 py-10 border-b border-zinc-100 bg-zinc-50/50 print:bg-white">
-      <div class="flex items-center gap-2 mb-6">
-        <div class="w-8 h-8 bg-zinc-900 rounded-lg flex items-center justify-center">
-          <i data-lucide="file-text" class="w-4 h-4 text-white"></i>
-        </div>
-        <h3 class="text-sm font-bold uppercase tracking-widest text-zinc-900 editable" contenteditable="true">Cover
-          Letter</h3>
-      </div>
-      <div class="space-y-4 text-sm text-zinc-700 leading-relaxed">
-        <p class="editable" contenteditable="true">
-          <span class="font-semibold text-zinc-900">Dear Hiring Manager,</span>
-        </p>
-        <p class="editable" contenteditable="true">
-          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.
-        </p>
-        <p class="editable" contenteditable="true">
-          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.
-        </p>
-        <p class="editable" contenteditable="true">
-          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.
-        </p>
-        <p class="editable" contenteditable="true">
-          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.
-        </p>
-        <p class="editable mt-6" contenteditable="true">
-          <span class="font-semibold text-zinc-900">Sincerely,</span><br>
-          <span class="text-zinc-900">Han Yoon</span>
-        </p>
-      </div>
-    </section>
-    <!-- Main Content Layout -->
-    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 p-8 md:px-16 md:py-12 bg-white">
-      <!-- Left Sidebar (Skills, Summary, Ed, etc.) -->
-      <aside class="lg:col-span-4 space-y-10">
-        <!-- Summary -->
-        <section>
-          <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">
-            About</h3>
-          <p class="text-zinc-600 leading-relaxed text-sm editable" contenteditable="true">
-            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.
-          </p>
-        </section>
-        <!-- Skills -->
-        <section>
-          <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">Top
-            Skills</h3>
-          <div class="flex flex-wrap gap-2">
-            <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>
-            <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>
-            <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>
-          </div>
-        </section>
-        <!-- Languages -->
-        <section>
-          <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">
-            Languages</h3>
-          <ul class="space-y-3">
-            <li class="flex justify-between items-center text-sm">
-              <span class="font-medium text-zinc-800 editable" contenteditable="true">English</span>
-              <span class="text-zinc-500 text-xs editable" contenteditable="true">Full Professional</span>
-            </li>
-            <li class="flex justify-between items-center text-sm">
-              <span class="font-medium text-zinc-800 editable" contenteditable="true">Korean</span>
-              <span class="text-zinc-500 text-xs editable" contenteditable="true">Limited Working</span>
-            </li>
-          </ul>
-        </section>
-        <!-- Certifications -->
-        <section>
-          <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">
-            Certifications</h3>
-          <ul class="space-y-3">
-            <li class="text-sm">
-              <span class="block font-medium text-zinc-800 editable" contenteditable="true">AWS Machine Learning</span>
-              <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">Amazon Web Services</span>
-            </li>
-            <li class="text-sm">
-              <span class="block font-medium text-zinc-800 editable" contenteditable="true">Gradio Agents & MCP Hackathon</span>
-              <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">2025</span>
-            </li>
-          </ul>
-        </section>
-        <!-- Honors & Awards -->
-        <section>
-          <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">
-            Honors & Awards</h3>
-          <ul class="space-y-3">
-            <li class="text-sm">
-              <span class="block font-medium text-zinc-800 editable" contenteditable="true">Website Development (CA)</span>
-              <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">2nd Place</span>
-            </li>
-            <li class="text-sm">
-              <span class="block font-medium text-zinc-800 editable" contenteditable="true">Internet App Programming (CA)</span>
-              <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">5th Place</span>
-            </li>
-            <li class="text-sm">
-              <span class="block font-medium text-zinc-800 editable" contenteditable="true">Top Visionaries & Entrepreneurs</span>
-              <span class="block text-zinc-500 text-xs mt-0.5 editable" contenteditable="true">Ranked #11 • 2018</span>
-            </li>
-          </ul>
-        </section>
-        <!-- Education -->
-        <section class="print-break-inside-avoid">
-          <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-4 editable" contenteditable="true">
-            Education</h3>
-          <div class="space-y-5">
-            <div class="relative">
-              <h4 class="text-sm font-semibold text-zinc-900 editable" contenteditable="true">University of California,
-                Irvine</h4>
-              <p class="text-xs text-zinc-500 mt-1 editable" contenteditable="true">2011 - 2019</p>
-              <p class="text-xs text-zinc-600 mt-1 editable" contenteditable="true">Senior Year Dropout, Business
-                Information Management & Computer Science</p>
-            </div>
-            <div class="relative">
-              <h4 class="text-sm font-semibold text-zinc-900 editable" contenteditable="true">Kennedy High</h4>
-              <p class="text-xs text-zinc-500 mt-1 editable" contenteditable="true">2009 - 2011</p>
-            </div>
-            <div class="relative">
-              <h4 class="text-sm font-semibold text-zinc-900 editable" contenteditable="true">Troy High</h4>
-              <p class="text-xs text-zinc-500 mt-1 editable" contenteditable="true">2008 - 2009</p>
-            </div>
-          </div>
-        </section>
-      </aside>
-      <!-- Right Main Content (Experience) -->
-      <main class="lg:col-span-8">
-        <h3 class="text-xs font-bold uppercase tracking-widest text-zinc-400 mb-6 editable" contenteditable="true">
-          Professional Experience</h3>
-        <!-- Timeline container -->
-        <div class="space-y-8 border-l-2 border-zinc-100 pl-5 ml-2">
-          <!-- Experience Item -->
-          <div class="relative print-break-inside-avoid timeline-current">
-            <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-800 rounded-full ring-4 ring-white"></div>
-            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
-              <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>
-              <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Jun 2024 - Present</span>
-            </div>
-            <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>
-            <p class="text-sm text-zinc-600 leading-relaxed editable" contenteditable="true">
-              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.
-            </p>
-            <!-- Enhanced Projects & Links Section -->
-            <div class="no-print mt-5">
-              <!-- Impact Metrics -->
-              <div class="flex flex-wrap gap-2 mb-4">
-                <span class="impact-badge">
-                  <i data-lucide="bar-chart-3" class="w-3 h-3"></i>
-                  <span class="editable" contenteditable="true">4M+ Inferences</span>
-                </span>
-                <span class="impact-badge">
-                  <i data-lucide="globe" class="w-3 h-3"></i>
-                  <span class="editable" contenteditable="true">Low-Resource Languages</span>
-                </span>
-              </div>
-              <!-- Project Links -->
-              <div class="bg-zinc-50 rounded-xl p-4 border border-zinc-200">
-                <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3 editable"
-                  contenteditable="true">Projects & Resources</p>
-                <div class="flex flex-wrap gap-2">
-                  <a href="#" class="project-link project-link-primary">
-                    <i data-lucide="external-link" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Live Project</span>
                   </a>
                   <a href="#" class="project-link project-link-secondary">
-                    <i data-lucide="github" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">GitHub Repo</span>
                   </a>
                   <a href="#" class="project-link project-link-accent">
-                    <i data-lucide="book-open" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Documentation</span>
                   </a>
                 </div>
               </div>
@@ -697,63 +15,38 @@
           <!-- Experience Item -->
           <div class="relative print-break-inside-avoid">
-            <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-800 rounded-full ring-4 ring-white"></div>
             <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
               <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>
-              <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>
             </div>
             <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>
             <ul class="text-sm text-zinc-600 leading-relaxed list-disc list-outside ml-4 space-y-1.5 editable"
               contenteditable="true">
-              <li>Established and led community governance for a prominent chain in the Cosmos / IBC ecosystem.</li>
-              <li>Successfully proposed and passed dozens of on-chain proposals (94% success rate, $7M+) for both
-                governance and project funding.</li>
-              <li>Secured funding for half a dozen IRL and online hackathons.</li>
-              <li>Developed community-owned public goods for network sustainability.</li>
-              <li>Deployed and maintained the first Uniswap v3-based DEX in IBC and integrated early AI products for
-                team efficiency in late 2022.</li>
             </ul>
             <!-- Enhanced Projects & Links Section -->
             <div class="no-print mt-4">
-              <!-- Impact Metrics -->
-              <div class="flex flex-wrap gap-2 mb-4">
-                <span class="impact-badge">
-                  <i data-lucide="check-circle" class="w-3 h-3"></i>
-                  <span class="editable" contenteditable="true">94% Success Rate</span>
-                </span>
-                <span class="impact-badge">
-                  <i data-lucide="dollar-sign" class="w-3 h-3"></i>
-                  <span class="editable" contenteditable="true">$7M+ Funded</span>
-                </span>
-                <span class="impact-badge">
-                  <i data-lucide="trophy" class="w-3 h-3"></i>
-                  <span class="editable" contenteditable="true">6+ Hackathons</span>
-                </span>
-              </div>
-              <!-- Project Links -->
               <div class="bg-zinc-50 rounded-xl p-4 border border-zinc-200">
                 <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3 editable"
-                  contenteditable="true">Governance Resources</p>
                 <div class="flex flex-wrap gap-2">
                   <a href="#" class="project-link project-link-primary">
-                    <i data-lucide="file-text" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Governance Proposals</span>
                   </a>
                   <a href="#" class="project-link project-link-secondary">
-                    <i data-lucide="link" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Explorer</span>
-                  </a>
-                  <a href="#" class="project-link project-link-accent">
-                    <i data-lucide="users" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Community Forum</span>
                   </a>
                 </div>
               </div>
@@ -762,146 +55,187 @@
           <!-- Experience Item -->
           <div class="relative print-break-inside-avoid">
-            <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-800 rounded-full ring-4 ring-white"></div>
             <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
               <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>
-              <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>
             </div>
-            <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>
-            <ul class="text-sm text-zinc-600 leading-relaxed list-disc list-outside ml-4 space-y-1.5 editable"
-              contenteditable="true">
-              <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>
-              <li>Led initiative to streamline information and provide an onboarding platform and workspace for
-                translations.</li>
-              <li>Built a global team of 12+ members to make DeFi more accessible to non-English speaking communities.
-              </li>
-            </ul>
-            <!-- Enhanced Projects & Links Section -->
-            <div class="no-print mt-5">
-              <!-- Impact Metrics -->
-              <div class="flex flex-wrap gap-2 mb-4">
-                <span class="impact-badge">
-                  <i data-lucide="users" class="w-3 h-3"></i>
-                  <span class="editable" contenteditable="true">12+ Team Members</span>
-                </span>
-                <span class="impact-badge">
-                  <i data-lucide="languages" class="w-3 h-3"></i>
-                  <span class="editable" contenteditable="true">Multi-language</span>
-                </span>
-              </div>
-              <!-- Project Links -->
-              <div class="bg-zinc-50 rounded-xl p-4 border border-zinc-200">
-                <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3 editable"
-                  contenteditable="true">Projects & Resources</p>
-                <div class="flex flex-wrap gap-2">
-                  <a href="#" class="project-link project-link-primary">
-                    <i data-lucide="vote" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">SCP-5 Proposal</span>
-                  </a>
-                  <a href="#" class="project-link project-link-secondary">
-                    <i data-lucide="globe" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Translation Platform</span>
-                  </a>
-                </div>
-              </div>
-              <!-- Project Gallery -->
-              <div class="mt-4">
-                <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3 editable"
-                  contenteditable="true">Project Gallery</p>
-                <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
-                  <div class="gallery-item aspect-video" onclick="openLightbox('shapeshift', 0)">
-                    <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=400&q=80" alt="Dashboard" class="w-full h-full object-cover">
-                    <div class="view-icon bg-white/90 rounded-full p-2">
-                      <i data-lucide="eye" class="w-4 h-4 text-zinc-700"></i>
-                    </div>
-                  </div>
-                  <div class="gallery-item aspect-video" onclick="openLightbox('shapeshift', 1)">
-                    <img src="https://images.unsplash.com/photo-1639762681485-074b7f4ec651?auto=format&fit=crop&w=400&q=80" alt="Crypto UI" class="w-full h-full object-cover">
-                    <div class="view-icon bg-white/90 rounded-full p-2">
-                      <i data-lucide="eye" class="w-4 h-4 text-zinc-700"></i>
-                    </div>
-                  </div>
-                  <div class="gallery-item aspect-video bg-zinc-100 flex items-center justify-center"
-                    onclick="openLightbox('shapeshift', 2)">
-                    <div class="text-center">
-                      <i data-lucide="plus" class="w-6 h-6 text-zinc-400 mx-auto mb-1"></i>
-                      <span class="text-xs text-zinc-400">View More</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- Experience Item -->
-          <div class="relative print-break-inside-avoid">
-            <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
-            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
-              <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>
-              <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>
-            </div>
-            <p class="text-sm text-zinc-600 leading-relaxed mt-2 editable" contenteditable="true">
-              Wrote extensively on cybersecurity, tokens and projects, tokenomics evaluation, and early-stage project
-              growth hacking.
-            </p>
-            <!-- Enhanced Projects & Links Section -->
-            <div class="no-print mt-4">
-              <div class="bg-zinc-50 rounded-xl p-4 border border-zinc-200">
-                <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3 editable"
-                  contenteditable="true">Publications</p>
-                <div class="flex flex-wrap gap-2">
-                  <a href="#" class="project-link project-link-secondary">
-                    <i data-lucide="book-open" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">View Articles</span>
-                  </a>
-                  <a href="#" class="project-link project-link-accent">
-                    <i data-lucide="award" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Award Details</span>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- Experience Item -->
-          <div class="relative print-break-inside-avoid">
-            <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
-            <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
-              <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>
-              <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>
-            </div>
-            <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>
-            <p class="text-sm text-zinc-600 leading-relaxed editable" contenteditable="true">
-              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.
-            </p>
-            <!-- Enhanced Projects & Links Section -->
-            <div class="no-print mt-4">
-              <div class="bg-zinc-50 rounded-xl p-4 border border-zinc-200">
-                <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3 editable"
-                  contenteditable="true">Divisions</p>
-                <div class="flex flex-wrap gap-2">
-                  <a href="#" class="project-link project-link-primary">
-                    <i data-lucide="flask-conical" class="w-3.5 h-3.5"></

+<span class="editable" contenteditable="true">Lunar Labs</span>
                   </a>
                   <a href="#" class="project-link project-link-secondary">
+                    <i data-lucide="megaphone" class="w-3.5 h-3.5"></i>
+                    <span class="editable" contenteditable="true">Marketing & Consulting</span>
                   </a>
                   <a href="#" class="project-link project-link-accent">
+                    <i data-lucide="search" class="w-3.5 h-3.5"></i>
+                    <span class="editable" contenteditable="true">Research</span>
                   </a>
                 </div>
               </div>
           <!-- Experience Item -->
           <div class="relative print-break-inside-avoid">
+            <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
             <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
               <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">Blockstack & Blockchain Korea</span>
               </h4>
+              <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">2015 - 2017</span>
             </div>
             <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>
             <ul class="text-sm text-zinc-600 leading-relaxed list-disc list-outside ml-4 space-y-1.5 editable"
               contenteditable="true">
+              <li>Organized and hosted the first-ever Korean community for Blockstack (now Stacks) in 2015.</li>
+              <li>Organized the first Korean blockchain conference, bringing together key stakeholders and enthusiasts.</li>
+              <li>Established a community of 500+ members through regular meetups and educational sessions.</li>
             </ul>
             <!-- Enhanced Projects & Links Section -->
             <div class="no-print mt-4">
               <div class="bg-zinc-50 rounded-xl p-4 border border-zinc-200">
                 <p class="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3 editable"
+                  contenteditable="true">Resources</p>
                 <div class="flex flex-wrap gap-2">
                   <a href="#" class="project-link project-link-primary">
+                    <i data-lucide="users" class="w-3.5 h-3.5"></i>
+                    <span class="editable" contenteditable="true">Community</span>
                   </a>
                   <a href="#" class="project-link project-link-secondary">
+                    <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
+                    <span class="editable" contenteditable="true">Events</span>
                   </a>
                 </div>
               </div>
           <!-- Experience Item -->
           <div class="relative print-break-inside-avoid">
+            <div class="absolute -left-[27px] top-1.5 w-3 h-3 bg-zinc-300 rounded-full ring-4 ring-white"></div>
             <div class="flex flex-col sm:flex-row sm:items-baseline sm:justify-between mb-1">
               <h4 class="text-base font-bold text-zinc-900">
+                <span class="editable" contenteditable="true">Volunteer</span>
                 <span class="font-normal text-zinc-400 mx-1">at</span>
+                <span class="editable" contenteditable="true">Korean Community Center</span>
               </h4>
+              <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">2009 - 2011</span>
             </div>
+            <p class="text-sm text-zinc-600 leading-relaxed editable" contenteditable="true">
+              Mentored high school students in programming and computer science fundamentals as part of community outreach programs.
             </p>
+          </div>
+        </div>
+      </main>
+    </div>
+    <!-- Footer -->
+    <footer class="px-8 md:px-16 py-8 border-t border-zinc-100 bg-zinc-50">
+      <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+        <div class="text-sm text-zinc-500">
+          <span class="editable" contenteditable="true">Last updated: January 2025</span>
+        </div>
+        <div class="flex items-center gap-2 text-sm text-zinc-400">
+          <span class="editable" contenteditable="true">Built with</span>
+          <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-zinc-600 hover:text-zinc-900 font-medium transition-colors">anycoder</a>
+        </div>
+      </div>
+    </footer>
+  </div>
+  <script>
+    // Initialize Lucide icons
+    lucide.createIcons();
+    // Lightbox functionality
+    const projectData = {
+      shapeshift: [
+        {
+          image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80",
+          badge: "Dashboard",
+          title: "ShapeShift Platform Dashboard",
+          subtitle: "Globalization Initiative",
+          description: "The main dashboard showing the ShapeShift platform with multilingual support. Led the initiative to streamline information and provide an onboarding platform for translations, making DeFi accessible to non-English speaking communities worldwide.",
+          technologies: ["React", "TypeScript", "i18n", "Web3"],
+          links: [
+            { text: "Platform", url: "#", icon: "external-link" },
+            { text: "Documentation", url: "#", icon: "book-open" }
+          ]
+        },
+        {
+          image: "https://images.unsplash.com/photo-1639762681485-074b7f4ec651?auto=format&fit=crop&w=800&q=80",
+          badge: "DeFi Interface",
+          title: "Decentralized Exchange Interface",
+          subtitle: "Multi-language Support",
+          description: "Built a global team of 12+ members to make DeFi more accessible. The interface supports multiple languages and provides a seamless experience for users worldwide to trade, stake, and manage their crypto assets.",
+          technologies: ["DeFi", "Wallet Integration", "Localization"],
+          links: [
+            { text: "Trade", url: "#", icon: "arrow-right-right" },
+            { text: "Learn More", url: "#", icon: "info" }
+          ]
+        },
+        {
+          image: "https://images.unsplash.com/photo-1620321023374-d1a68fbc720d?auto=format&fit=crop&w=800&q=80",
+          badge: "Translation Platform",
+          title: "Community Translation Workspace",
+          subtitle: "Onboarding Platform",
+          description: "Led initiative to streamline information and provide an onboarding platform and workspace for translations. Created tools and resources to help community members contribute translations in their native languages.",
+          technologies: ["Crowdin", "Community Management", "Localization"],
+          links: [
+            { text: "Join Community", url: "#", icon: "users" },
+            { text: "Translation Guide", url: "#", icon: "book" }
+          ]
+        }
+      ]
+    };
+    let currentLightboxIndex = 0;
+    let currentLightboxProject = '';
+    function openLightbox(project, index) {
+      currentLightboxProject = project;
+      currentLightboxIndex = index;
+      const data = projectData[project];
+      const item = data[index];
+      document.getElementById('lightbox-img').src = item.image;
+      document.getElementById('lightbox-badge').textContent = item.badge;
+      document.getElementById('lightbox-title').textContent = item.title;
+      document.getElementById('lightbox-subtitle').textContent = item.subtitle;
+      document.getElementById('lightbox-description').textContent = item.description;
+      // Set technologies
+      const techContainer = document.getElementById('lightbox-technologies');
+      techContainer.innerHTML = item.technologies.map(tech =>
+        `<span class="px-2 py-1 bg-zinc-100 text-zinc-600 text-xs rounded-md">${tech}</span>`
+      ).join('');
+      // Set links
+      const linksContainer = document.getElementById('lightbox-links');
+      linksContainer.innerHTML = item.links.map(link =>
+        `<a href="${link.url}" class="project-link project-link-primary">
+          <i data-lucide="${link.icon}" class="w-3.5 h-3.5"></i>
+          <span>${link.text}</span>
+        </a>`
+      ).join('');
+      // Set dots
+      const dotsContainer = document.getElementById('lightbox-dots');
+      dotsContainer.innerHTML = data.map((_, i) =>
+        `<div class="lightbox-dot ${i === index ? 'active' : ''}" onclick="event.stopPropagation(); openLightbox('${project}', ${i})"></div>`
+      ).join('');
+      // Reinitialize icons
+      lucide.createIcons();
+      document.getElementById('lightbox-overlay').classList.add('active');
+      document.getElementById('lightbox').classList.add('active');
+      document.body.style.overflow = 'hidden';
+    }
+    function closeLightbox() {
+      document.getElementById('lightbox-overlay').classList.remove('active');
+      document.getElementById('lightbox').classList.remove('active');
+      document.body.style.overflow = '';
+    }
+    function navigateLightbox(direction) {
+      const data = projectData[currentLightboxProject];
+      currentLightboxIndex = (currentLightboxIndex + direction + data.length) % data.length;
+      openLightbox(currentLightboxProject, currentLightboxIndex);
+    }
+    // Close lightbox on escape key
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') {
+        closeLightbox();
+      }
+      if (e.key === 'ArrowLeft') {
+        navigateLightbox(-1);
+      }
+      if (e.key === 'ArrowRight') {
+        navigateLightbox(1);
+      }
+    });
+    // Auto-save functionality (localStorage)
+    function saveContent() {
+      const editableElements = document.querySelectorAll('[contenteditable="true"]');
+      const content = {};
+      editableElements.forEach((el, index) => {
+        content[`element_${index}`] = el.innerHTML;
+      });
+      localStorage.setItem('resumeContent', JSON.stringify(content));
+    }
+    function loadContent() {
+      const saved = localStorage.getItem('resumeContent');
+      if (saved) {
+        const content = JSON.parse(saved);
+        const editableElements = document.querySelectorAll('[contenteditable="true"]');
+        editableElements.forEach((el, index) => {
+          if (content[`element_${index}`]) {
+            el.innerHTML = content[`element_${index}`];
+          }
+        });
+      }
+    }
+    // Save on blur (when user finishes editing a field)
+    document.addEventListener('blur', function(e) {
+      if (e.target.hasAttribute('contenteditable')) {
+        saveContent();
+      }
+    }, true);
+    // Load saved content on page load
+    window.addEventListener('load', loadContent);
+  </script>
+</body>
+</html>