Upload folder using huggingface_hub

index.html

@@ -44,6 +44,10 @@
       @page {
         margin: 1cm;
       }
+
+      #lightbox, #lightbox-overlay {
+        display: none !important;
+      }
     }
 
     /* Custom scrollbar for a sleek feel */
@@ -181,6 +185,7 @@
       border-radius: 0.625rem;
       border: 1px solid #e4e4e7;
       transition: all 0.3s ease;
+      cursor: pointer;
     }
 
     .gallery-item:hover {
@@ -193,7 +198,7 @@
       content: '';
       position: absolute;
       inset: 0;
-      background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.4) 100%);
+      background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.4) 100%);
       opacity: 0;
       transition: opacity 0.3s ease;
     }
@@ -202,6 +207,21 @@
       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;
@@ -223,13 +243,165 @@
       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>
 
@@ -240,6 +412,40 @@
         <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">
 
@@ -465,10 +671,11 @@
                   <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>
+                <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>
@@ -532,7 +739,8 @@
 
               <!-- 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>
+                <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>
@@ -584,14 +792,15 @@
                   <span class="editable" contenteditable="true">12+ Team Members</span>
                 </span>
                 <span class="impact-badge">
-                  <i data-lucide=" Languages" class="w-3 h-3"></i>
+                  <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>
+                <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>
@@ -606,16 +815,26 @@
 
               <!-- 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>
+                <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">
+                  <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">
+                  <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">
-                    <i data-lucide="plus" class="w-6 h-6 text-zinc-400"></i>
+                  <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>
@@ -641,7 +860,8 @@
             <!-- 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>
+                <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>
@@ -678,107 +898,8 @@
             <!-- 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>
+                <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"></i>
-                    <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">Lunar Research</span>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Compact Experience Items (Older History) -->
-          <div class="relative pt-4 print-break-inside-avoid">
-            <div class="absolute -left-[25px] top-[22px] w-2 h-2 bg-zinc-200 rounded-full"></div>
-            <h4 class="text-sm font-bold text-zinc-800">
-              <span class="editable" contenteditable="true">ICOBench Expert</span>
-              <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">ICObench</span></span>
-            </h4>
-            <p class="text-xs text-zinc-500 editable" contenteditable="true">Nov 2018 - Dec 2019</p>
-          </div>
-
-          <div class="relative print-break-inside-avoid">
-            <div class="absolute -left-[25px] top-[6px] w-2 h-2 bg-zinc-200 rounded-full"></div>
-            <h4 class="text-sm font-bold text-zinc-800">
-              <span class="editable" contenteditable="true">Frontend Developer & Designer</span>
-              <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">Incredible Marketing</span></span>
-            </h4>
-            <p class="text-xs text-zinc-500 editable" contenteditable="true">Aug 2017 - Feb 2018</p>
-          </div>
-
-          <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 & Lead Dev</span>
-                <span class="font-normal text-zinc-400 mx-1">at</span>
-                <span class="editable" contenteditable="true">RSI Hunter for Cryptocurrencies</span>
-              </h4>
-              <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Sep 2017 - Dec 2017</span>
-            </div>
-            <p class="text-sm text-zinc-600 leading-relaxed mt-2 editable" contenteditable="true">
-              Developed a proof-of-concept automated market analysis tool utilized by thousands of users to find optimal
-              trading entries. Acquired two months after launch.
-            </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">Project Details</p>
-                <div class="flex flex-wrap gap-2">
-                  <a href="#" class="project-link project-link-primary">
-                    <i data-lucide="trending-up" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Live Tool</span>
-                  </a>
-                  <a href="#" class="project-link project-link-accent">
-                    <i data-lucide="archive" class="w-3.5 h-3.5"></i>
-                    <span class="editable" contenteditable="true">Acquisition Details</span>
-                  </a>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <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">Spuxy Studios</span>
-              </h4>
-              <span class="text-xs font-semibold text-zinc-500 mt-1 sm:mt-0 tracking-wide uppercase editable" contenteditable="true">Aug 2011 - Jan 2017</span>
-            </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">
-              Developed an extensive portfolio over five years, creating dozens of websites and social media marketing
-              plans for a variety of clients ranging from small businesses to large corporations.
-            </p>
-          </div>
-
-          <div class="relative pt-4 print-break-inside-avoid">
-            <div class="absolute -left-[25px] top-[22px] w-2 h-2 bg-zinc-200 rounded-full"></div>
-            <h4 class="text-sm font-bold text-zinc-800">
-              <span class="editable" contenteditable="true">Director of Media</span>
-              <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">U.S. Business Enterprise Council</span></span>
-            </h4>
-            <p class="text-xs text-zinc-500 editable" contenteditable="true">May 2013 - May 2016 • Anaheim, CA</p>
-          </div>
-
-          <div class="relative print-break-inside-avoid">
-            <div class="absolute -left-[25px] top-[6px] w-2 h-2 bg-zinc-200 rounded-full"></div>
-            <h4 class="text-sm font-bold text-zinc-800">
-              <span class="editable" contenteditable="true">President / Co-Founder</span>
-              <span class="font-normal text-zinc-400">at <span class="editable" contenteditable="true">Megasized Marketing, LLC</span></span>
-            </
+                    <