portfolio-timeline-lightbox-skilllisted

# Portfolio Timeline & Lightbox Skill Engineering patterns for constructing high-trust technical portfolios, career milestones, certification showcases, and interactive high-resolution image viewers without heavy frontend dependencies (Fancybox, LightGallery, or React Modal bloat). Battle-tested in the **Megapass Intra Solusindo** technician showcase (`megapass.web.id/teknisi/`). --- ## 1. Vertical Milestone Roadmap Pattern ### The Layout Architecture A continuous vertical timeline linking multiple career phases. Uses a background gradient line (`tl-line`) and glowing circular milestone markers (`tl-dot-lg`) with pulsing cyan highlights: ```html <div class="max-w-4xl mx-auto px-4"> <div class="relative"> <!-- Continuous Vertical Gradient Line --> <div class="tl-line absolute left-4 sm:left-6 top-0 bottom-0 w-px bg-gradient-to-b from-cyan-400/40 via-cyan-400/20 to-transparent"></div> <div class="space-y-8"> <!-- Standard Career Phase --> <div class="relative pl-12 sm:pl-16"> <!-- Connecting Dot --> <div class="tl-dot absolute left-2 sm:left-4 top-3 w-4 h-4 rounded-full bg-slate-900 border-2 border-cyan-400/50"></div> <!-- Content Card --> <div class="bg-slate-900/80 rounded-2xl p-5 border border-white/5"> <div class="flex items-center gap-2 mb-1"> <span class="px-2 py-0.5 rounded bg-cyan-400/10 text-cyan-400 text-[10px] font-bold uppercase tracking-wider">Fase 1</span> <