Spaces:
Running
Running
| <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 ; | |
| } | |
| 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: [ | |
| { | |
| 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="lightbox-tech">${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.body.style.overflow = 'hidden'; | |
| } | |
| function closeLightbox() { | |
| document.getElementById('lightbox-overlay').classList.remove('active'); | |
| document.body.style.overflow = ''; | |
| } | |
| function navigateLightbox(direction) { | |
| const data = projectData[currentLightboxProject]; | |
| currentLightboxIndex = (currentLightboxIndex + direction + data.length) % data.length; | |
| openLightbox(currentLightboxProject, currentLightboxIndex); | |
| } | |
| // Keyboard navigation | |
| 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)); | |
| alert('Content saved successfully!'); | |
| } | |
| 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> |