Spaces:

LPX55
/

anycoder-79ed7d11

Running

App Files Files Community

LPX55 commited on Mar 14

Commit

6a3a726

verified ·

1 Parent(s): d6ca73d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +1002 -71

index.html CHANGED Viewed

@@ -1,97 +1,1030 @@
-<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>
             </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>
             </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: [
         {
@@ -152,7 +1085,7 @@
       // 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
@@ -174,13 +1107,11 @@
       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 = '';
     }
@@ -190,7 +1121,7 @@
       openLightbox(currentLightboxProject, currentLightboxIndex);
     }
-    // Close lightbox on escape key
     document.addEventListener('keydown', function(e) {
       if (e.key === 'Escape') {
         closeLightbox();
@@ -211,6 +1142,7 @@
         content[`element_${index}`] = el.innerHTML;
       });
       localStorage.setItem('resumeContent', JSON.stringify(content));
     }
     function loadContent() {
@@ -237,5 +1169,4 @@
     window.addEventListener('load', loadContent);
   </script>
 </body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Resume - Professional Profile</title>
+  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
+  <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@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --primary: #18181b;
+      --primary-light: #27272a;
+      --secondary: #3f3f46;
+      --accent: #0ea5e9;
+      --accent-light: #e0f2fe;
+      --border: #e4e4e7;
+      --bg: #fafafa;
+      --bg-card: #ffffff;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--primary);
+      line-height: 1.6;
+      -webkit-font-smoothing: antialiased;
+    }
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+      background: var(--bg-card);
+      min-height: 100vh;
+      box-shadow: 0 0 0 1px var(--border);
+    }
+    /* Header */
+    .header {
+      padding: 48px 48px 32px;
+      border-bottom: 1px solid var(--border);
+      background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
+    }
+    .header-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      margin-bottom: 24px;
+    }
+    .profile-section {
+      display: flex;
+      gap: 24px;
+      align-items: center;
+    }
+    .avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 16px;
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: 700;
+      font-size: 28px;
+    }
+    .name-section h1 {
+      font-size: 32px;
+      font-weight: 700;
+      letter-spacing: -0.5px;
+      margin-bottom: 4px;
+    }
+    .name-section .title {
+      font-size: 18px;
+      color: var(--secondary);
+      font-weight: 500;
+    }
+    .header-actions {
+      display: flex;
+      gap: 8px;
+    }
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      border-radius: 8px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      border: 1px solid var(--border);
+      background: white;
+      color: var(--primary);
+      transition: all 0.2s;
+    }
+    .btn:hover {
+      background: var(--bg);
+      border-color: var(--secondary);
+    }
+    .btn-primary {
+      background: var(--primary);
+      color: white;
+      border-color: var(--primary);
+    }
+    .btn-primary:hover {
+      background: var(--primary-light);
+    }
+    .header-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      margin-top: 20px;
+    }
+    .header-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 14px;
+      color: var(--secondary);
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+    .header-link:hover {
+      color: var(--primary);
+    }
+    .header-link i {
+      width: 16px;
+      height: 16px;
+    }
+    /* Summary */
+    .summary {
+      padding: 32px 48px;
+      border-bottom: 1px solid var(--border);
+    }
+    .summary p {
+      font-size: 15px;
+      color: var(--secondary);
+      line-height: 1.8;
+    }
+    /* Main Content */
+    .main-content {
+      padding: 32px 48px;
+    }
+    .section {
+      margin-bottom: 40px;
+    }
+    .section:last-child {
+      margin-bottom: 0;
+    }
+    .section-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 24px;
+    }
+    .section-icon {
+      width: 32px;
+      height: 32px;
+      background: var(--primary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+    }
+    .section-icon i {
+      width: 18px;
+      height: 18px;
+    }
+    .section-title {
+      font-size: 14px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--secondary);
+    }
+    /* Experience Items */
+    .experience-item {
+      position: relative;
+      padding-left: 36px;
+      margin-bottom: 32px;
+      padding-top: 4px;
+    }
+    .experience-item:last-child {
+      margin-bottom: 0;
+    }
+    .timeline-dot {
+      position: absolute;
+      left: 0;
+      top: 6px;
+      width: 12px;
+      height: 12px;
+      background: #d4d4d8;
+      border-radius: 50%;
+      border: 3px solid white;
+      box-shadow: 0 0 0 1px var(--border);
+    }
+    .experience-header {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      align-items: baseline;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+    .experience-title {
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--primary);
+    }
+    .experience-company {
+      font-weight: 400;
+      color: #71717a;
+    }
+    .experience-date {
+      font-size: 12px;
+      font-weight: 600;
+      color: #a1a1aa;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .experience-location {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      color: #a1a1aa;
+      margin-bottom: 12px;
+    }
+    .experience-location i {
+      width: 14px;
+      height: 14px;
+    }
+    .experience-description {
+      font-size: 14px;
+      color: #52525b;
+      line-height: 1.7;
+    }
+    .experience-description ul {
+      margin-left: 16px;
+      margin-top: 8px;
+    }
+    .experience-description li {
+      margin-bottom: 6px;
+    }
+    /* Skills */
+    .skills-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    .skill-tag {
+      padding: 6px 14px;
+      background: #f4f4f5;
+      border: 1px solid #e4e4e7;
+      border-radius: 20px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--primary);
+      transition: all 0.2s;
+    }
+    .skill-tag:hover {
+      background: var(--primary);
+      color: white;
+      border-color: var(--primary);
+    }
+    /* Projects */
+    .project-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      text-decoration: none;
+      transition: all 0.2s;
+    }
+    .project-link i {
+      width: 14px;
+      height: 14px;
+    }
+    .project-link-primary {
+      background: var(--primary);
+      color: white;
+    }
+    .project-link-primary:hover {
+      background: var(--primary-light);
+    }
+    .project-link-secondary {
+      background: #f4f4f5;
+      color: var(--primary);
+      border: 1px solid var(--border);
+    }
+    .project-link-secondary:hover {
+      background: #e4e4e7;
+    }
+    .project-link-accent {
+      background: var(--accent-light);
+      color: #0284c7;
+      border: 1px solid #bae6fd;
+    }
+    .project-link-accent:hover {
+      background: #bae6fd;
+    }
+    /* Project Cards */
+    .project-cards {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 16px;
+    }
+    .project-card {
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.3s;
+    }
+    .project-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 24px rgba(0,0,0,0.1);
+    }
+    .project-card-image {
+      width: 100%;
+      height: 140px;
+      object-fit: cover;
+    }
+    .project-card-content {
+      padding: 16px;
+    }
+    .project-card-badge {
+      display: inline-block;
+      padding: 4px 8px;
+      background: var(--accent-light);
+      color: #0284c7;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+    .project-card-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--primary);
+      margin-bottom: 4px;
+    }
+    .project-card-subtitle {
+      font-size: 13px;
+      color: #a1a1aa;
+    }
+    /* Resources Section */
+    .resources-section {
+      margin-top: 16px;
+      padding: 16px;
+      background: #fafafa;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+    }
+    .resources-label {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: #a1a1aa;
+      margin-bottom: 10px;
+    }
+    .resources-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+    /* Footer */
+    .footer {
+      padding: 24px 48px;
+      border-top: 1px solid var(--border);
+      background: #fafafa;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 16px;
+    }
+    .footer-text {
+      font-size: 13px;
+      color: #a1a1aa;
+    }
+    .footer-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: #71717a;
+      text-decoration: none;
+      font-weight: 500;
+      transition: color 0.2s;
+    }
+    .footer-link:hover {
+      color: var(--primary);
+    }
+    /* Lightbox */
+    .lightbox-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.8);
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s;
+      z-index: 1000;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+    }
+    .lightbox-overlay.active {
+      opacity: 1;
+      visibility: visible;
+    }
+    .lightbox {
+      background: white;
+      border-radius: 16px;
+      max-width: 800px;
+      width: 100%;
+      max-height: 90vh;
+      overflow: hidden;
+      transform: scale(0.9) translateY(20px);
+      transition: transform 0.3s;
+    }
+    .lightbox-overlay.active .lightbox {
+      transform: scale(1) translateY(0);
+    }
+    .lightbox-image {
+      width: 100%;
+      height: 300px;
+      object-fit: cover;
+    }
+    .lightbox-content {
+      padding: 24px;
+      max-height: 50vh;
+      overflow-y: auto;
+    }
+    .lightbox-badge {
+      display: inline-block;
+      padding: 4px 10px;
+      background: var(--accent-light);
+      color: #0284c7;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-radius: 4px;
+      margin-bottom: 12px;
+    }
+    .lightbox-title {
+      font-size: 22px;
+      font-weight: 700;
+      color: var(--primary);
+      margin-bottom: 4px;
+    }
+    .lightbox-subtitle {
+      font-size: 14px;
+      color: #71717a;
+      margin-bottom: 16px;
+    }
+    .lightbox-description {
+      font-size: 14px;
+      color: #52525b;
+      line-height: 1.7;
+      margin-bottom: 20px;
+    }
+    .lightbox-technologies {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+    .lightbox-tech {
+      padding: 6px 12px;
+      background: #f4f4f5;
+      border: 1px solid #e4e4e7;
+      border-radius: 6px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--primary);
+    }
+    .lightbox-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+    .lightbox-close {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      width: 40px;
+      height: 40px;
+      background: white;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      transition: transform 0.2s;
+    }
+    .lightbox-close:hover {
+      transform: scale(1.1);
+    }
+    .lightbox-nav {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 48px;
+      height: 48px;
+      background: white;
+      border: none;
+      border-radius: 50%;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      transition: all 0.2s;
+    }
+    .lightbox-nav:hover {
+      transform: translateY(-50%) scale(1.1);
+    }
+    .lightbox-nav.prev {
+      left: 20px;
+    }
+    .lightbox-nav.next {
+      right: 20px;
+    }
+    .lightbox-dots {
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+      margin-top: 16px;
+    }
+    .lightbox-dot {
+      width: 8px;
+      height: 8px;
+      background: #d4d4d8;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+    .lightbox-dot.active {
+      background: var(--primary);
+      width: 24px;
+      border-radius: 4px;
+    }
+    /* Editable */
+    .editable {
+      outline: none;
+      border-radius: 2px;
+      transition: background 0.2s;
+      padding: 0 2px;
+    }
+    .editable:hover {
+      background: rgba(0,0,0,0.05);
+    }
+    .editable:focus {
+      background: rgba(14, 165, 233, 0.1);
+      outline: 2px solid var(--accent);
+    }
+    /* Print */
+    @media print {
+      .btn, .header-actions, .no-print {
+        display: none !important;
+      }
+      body {
+        background: white;
+      }
+      .container {
+        box-shadow: none;
+        max-width: 100%;
+      }
+    }
+    /* Responsive */
+    @media (max-width: 768px) {
+      .header, .summary, .main-content, .footer {
+        padding-left: 24px;
+        padding-right: 24px;
+      }
+      .header {
+        padding-top: 32px;
+      }
+      .profile-section {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+      }
+      .name-section h1 {
+        font-size: 24px;
+      }
+      .header-actions {
+        width: 100%;
+      }
+      .header-actions .btn {
+        flex: 1;
+        justify-content: center;
+      }
+      .experience-header {
+        flex-direction: column;
+        gap: 4px;
+      }
+      .lightbox-nav {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <!-- Header -->
+    <header class="header">
+      <div class="header-top">
+        <div class="profile-section">
+          <div class="avatar">JD</div>
+          <div class="name-section">
+            <h1><span class="editable" contenteditable="true">John Doe</span></h1>
+            <p class="title"><span class="editable" contenteditable="true">Full Stack Developer & Blockchain Enthusiast</span></p>
+          </div>
+        </div>
+        <div class="header-actions no-print">
+          <button class="btn" onclick="window.print()">
+            <i data-lucide="printer" class="w-4 h-4"></i>
+            <span>Print</span>
+          </button>
+          <button class="btn btn-primary" onclick="saveContent()">
+            <i data-lucide="save" class="w-4 h-4"></i>
+            <span>Save</span>
+          </button>
+        </div>
+      </div>
+      <div class="header-links">
+        <a href="#" class="header-link">
+          <i data-lucide="mail"></i>
+          <span class="editable" contenteditable="true">john.doe@email.com</span>
+        </a>
+        <a href="#" class="header-link">
+          <i data-lucide="phone"></i>
+          <span class="editable" contenteditable="true">+1 (555) 123-4567</span>
+        </a>
+        <a href="#" class="header-link">
+          <i data-lucide="map-pin"></i>
+          <span class="editable" contenteditable="true">San Francisco, CA</span>
+        </a>
+        <a href="#" class="header-link">
+          <i data-lucide="linkedin"></i>
+          <span class="editable" contenteditable="true">linkedin.com/in/johndoe</span>
+        </a>
+        <a href="#" class="header-link">
+          <i data-lucide="github"></i>
+          <span class="editable" contenteditable="true">github.com/johndoe</span>
+        </a>
+      </div>
+    </header>
+    <!-- Summary -->
+    <section class="summary">
+      <p class="editable" contenteditable="true">
+        Passionate developer with 8+ years of experience building scalable web applications and decentralized systems.
+        Led teams at major blockchain companies, focusing on globalization initiatives and community building.
+        Strong advocate for open-source and web3 technologies. Seeking to leverage expertise in full-stack development
+        and blockchain to drive innovation in the next generation of internet technologies.
+      </p>
+    </section>
+    <!-- Main Content -->
+    <main class="main-content">
+      <!-- Skills Section -->
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">
+            <i data-lucide="code-2"></i>
+          </div>
+          <h2 class="section-title">Skills</h2>
+        </div>
+        <div class="skills-grid">
+          <span class="skill-tag editable" contenteditable="true">JavaScript</span>
+          <span class="skill-tag editable" contenteditable="true">TypeScript</span>
+          <span class="skill-tag editable" contenteditable="true">React</span>
+          <span class="skill-tag editable" contenteditable="true">Node.js</span>
+          <span class="skill-tag editable" contenteditable="true">Solidity</span>
+          <span class="skill-tag editable" contenteditable="true">Web3</span>
+          <span class="skill-tag editable" contenteditable="true">Python</span>
+          <span class="skill-tag editable" contenteditable="true">GraphQL</span>
+          <span class="skill-tag editable" contenteditable="true">PostgreSQL</span>
+          <span class="skill-tag editable" contenteditable="true">Docker</span>
+          <span class="skill-tag editable" contenteditable="true">AWS</span>
+          <span class="skill-tag editable" contenteditable="true">i18n</span>
+        </div>
+      </section>
+      <!-- Experience Section -->
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">
+            <i data-lucide="briefcase"></i>
+          </div>
+          <h2 class="section-title">Experience</h2>
+        </div>
+        <!-- Experience Item -->
+        <div class="experience-item">
+          <div class="timeline-dot"></div>
+          <div class="experience-header">
+            <div>
+              <h4 class="experience-title">
+                <span class="editable" contenteditable="true">Senior Frontend Engineer</span>
+                <span class="experience-company">at</span>
+                <span class="editable" contenteditable="true">ShapeShift</span>
+              </h4>
             </div>
+            <span class="experience-date editable" contenteditable="true">2021 - Present</span>
+          </div>
+          <p class="experience-location">
+            <i data-lucide="map-pin" class="w-3 h-3"></i>
+            <span class="editable" contenteditable="true">Denver, Colorado</span>
+          </p>
+          <div class="experience-description editable" contenteditable="true">
+            <p>Leading the frontend team in building next-generation DeFi interfaces. Spearheaded the globalization initiative to make DeFi accessible to non-English speaking communities worldwide.</p>
+            <ul>
+              <li>Led a team of 5 engineers in rebuilding the core trading platform using React and TypeScript</li>
+              <li>Implemented multilingual support for 12+ languages, increasing international user base by 40%</li>
+              <li>Optimized frontend performance, reducing load times by 60%</li>
+              <li>Established design system used across all products</li>
+            </ul>
           </div>
+          <!-- Projects & Links -->
+          <div class="no-print resources-section">
+            <p class="resources-label editable" contenteditable="true">Projects</p>
+            <div class="resources-links">
+              <a href="#" class="project-link project-link-primary" onclick="event.preventDefault(); openLightbox('shapeshift', 0)">
+                <i data-lucide="layout-dashboard" class="w-3.5 h-3.5"></i>
+                <span class="editable" contenteditable="true">Dashboard</span>
+              </a>
+              <a href="#" class="project-link project-link-secondary" onclick="event.preventDefault(); openLightbox('shapeshift', 1)">
+                <i data-lucide="wallet" class="w-3.5 h-3.5"></i>
+                <span class="editable" contenteditable="true">DeFi Interface</span>
+              </a>
+              <a href="#" class="project-link project-link-accent" onclick="event.preventDefault(); openLightbox('shapeshift', 2)">
+                <i data-lucide="languages" class="w-3.5 h-3.5"></i>
+                <span class="editable" contenteditable="true">i18n Platform</span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <!-- Experience Item -->
+        <div class="experience-item">
+          <div class="timeline-dot"></div>
+          <div class="experience-header">
+            <div>
+              <h4 class="experience-title">
                 <span class="editable" contenteditable="true">Founder</span>
+                <span class="experience-company">at</span>
+                <span class="editable" contenteditable="true">Lunar Labs</span>
               </h4>
             </div>
+            <span class="experience-date editable" contenteditable="true">2017 - 2021</span>
+          </div>
+          <p class="experience-location">
+            <i data-lucide="map-pin" class="w-3 h-3"></i>
+            <span class="editable" contenteditable="true">Seoul, South Korea</span>
+          </p>
+          <div class="experience-description editable" contenteditable="true">
+            <p>Founded a blockchain consulting and development agency helping Korean companies enter the Web3 space.</p>
+            <ul>
+              <li>Consulted for 20+ companies on blockchain adoption and tokenomics</li>
+              <li>Built custom DeFi solutions and smart contracts for enterprise clients</li>
+              <li>Organized annual blockchain conferences with 1000+ attendees</li>
+              <li>Built community of 5000+ developers and enthusiasts</li>
             </ul>
+          </div>
+          <!-- Projects & Links -->
+          <div class="no-print resources-section">
+            <p class="resources-label editable" contenteditable="true">Resources</p>
+            <div class="resources-links">
+              <a href="#" class="project-link project-link-primary">
+                <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-secondary">
+                <i data-lucide="search" class="w-3.5 h-3.5"></i>
+                <span class="editable" contenteditable="true">Research</span>
+              </a>
+            </div>
+          </div>
+        </div>
+        <!-- Experience Item -->
+        <div class="experience-item">
+          <div class="timeline-dot"></div>
+          <div class="experience-header">
+            <div>
+              <h4 class="experience-title">
+                <span class="editable" contenteditable="true">Founder</span>
+                <span class="experience-company">at</span>
+                <span class="editable" contenteditable="true">Blockstack & Blockchain Korea</span>
+              </h4>
             </div>
+            <span class="experience-date editable" contenteditable="true">2015 - 2017</span>
           </div>
+          <p class="experience-location">
+            <i data-lucide="map-pin" class="w-3 h-3"></i>
+            <span class="editable" contenteditable="true">South Korea</span>
+          </p>
+          <div class="experience-description editable" contenteditable="true">
+            <ul>
+              <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>
+          </div>
+          <!-- Projects & Links -->
+          <div class="no-print resources-section">
+            <p class="resources-label editable" contenteditable="true">Resources</p>
+            <div class="resources-links">
+              <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>
+        </div>
+        <!-- Experience Item -->
+        <div class="experience-item">
+          <div class="timeline-dot"></div>
+          <div class="experience-header">
+            <div>
+              <h4 class="experience-title">
                 <span class="editable" contenteditable="true">Volunteer</span>
+                <span class="experience-company">at</span>
                 <span class="editable" contenteditable="true">Korean Community Center</span>
               </h4>
             </div>
+            <span class="experience-date editable" contenteditable="true">2009 - 2011</span>
+          </div>
+          <div class="experience-description editable" contenteditable="true">
+            <p>Mentored high school students in programming and computer science fundamentals as part of community outreach programs.</p>
           </div>
         </div>
+      </section>
+      <!-- Education Section -->
+      <section class="section">
+        <div class="section-header">
+          <div class="section-icon">
+            <i data-lucide="graduation-cap"></i>
+          </div>
+          <h2 class="section-title">Education</h2>
         </div>
+        <div class="experience-item">
+          <div class="timeline-dot"></div>
+          <div class="experience-header">
+            <div>
+              <h4 class="experience-title">
+                <span class="editable" contenteditable="true">Bachelor of Computer Science</span>
+              </h4>
+            </div>
+            <span class="experience-date editable" contenteditable="true">2009 - 2013</span>
+          </div>
+          <p class="experience-location">
+            <i data-lucide="map-pin" class="w-3 h-3"></i>
+            <span class="editable" contenteditable="true">Seoul National University, South Korea</span>
+          </p>
         </div>
+      </section>
+    </main>
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="footer-text">
+        <span class="editable" contenteditable="true">Last updated: January 2025</span>
+      </div>
+      <div class="footer-text">
+        <span class="editable" contenteditable="true">Built with</span>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link">
+          anycoder
+          <i data-lucide="external-link" class="w-3 h-3"></i>
+        </a>
       </div>
     </footer>
   </div>
+  <!-- Lightbox -->
+  <div class="lightbox-overlay" id="lightbox-overlay" onclick="closeLightbox()">
+    <div class="lightbox" onclick="event.stopPropagation()">
+      <img src="" alt="Project" class="lightbox-image" id="lightbox-img">
+      <button class="lightbox-close" onclick="closeLightbox()">
+        <i data-lucide="x" class="w-5 h-5"></i>
+      </button>
+      <button class="lightbox-nav prev" onclick="navigateLightbox(-1)">
+        <i data-lucide="chevron-left" class="w-5 h-5"></i>
+      </button>
+      <button class="lightbox-nav next" onclick="navigateLightbox(1)">
+        <i data-lucide="chevron-right" class="w-5 h-5"></i>
+      </button>
+      <div class="lightbox-content">
+        <span class="lightbox-badge" id="lightbox-badge"></span>
+        <h3 class="lightbox-title" id="lightbox-title"></h3>
+        <p class="lightbox-subtitle" id="lightbox-subtitle"></p>
+        <p class="lightbox-description" id="lightbox-description"></p>
+        <div class="lightbox-technologies" id="lightbox-technologies"></div>
+        <div class="lightbox-links" id="lightbox-links"></div>
+        <div class="lightbox-dots" id="lightbox-dots"></div>
+      </div>
+    </div>
+  </div>
   <script>
     // Initialize Lucide icons
     lucide.createIcons();
+    // Lightbox project data
     const projectData = {
       shapeshift: [
         {
       // Set technologies
       const techContainer = document.getElementById('lightbox-technologies');
       techContainer.innerHTML = item.technologies.map(tech =>
+        `<span class="lightbox-tech">${tech}</span>`
       ).join('');
       // Set links
       lucide.createIcons();
       document.getElementById('lightbox-overlay').classList.add('active');
       document.body.style.overflow = 'hidden';
     }
     function closeLightbox() {
       document.getElementById('lightbox-overlay').classList.remove('active');
       document.body.style.overflow = '';
     }
       openLightbox(currentLightboxProject, currentLightboxIndex);
     }
+    // Keyboard navigation
     document.addEventListener('keydown', function(e) {
       if (e.key === 'Escape') {
         closeLightbox();
         content[`element_${index}`] = el.innerHTML;
       });
       localStorage.setItem('resumeContent', JSON.stringify(content));
+      alert('Content saved successfully!');
     }
     function loadContent() {
     window.addEventListener('load', loadContent);
   </script>
 </body>
 </html>