srabons.de \u2014 Srabon Debnath | Personal Bio-Data & Executive Profile<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n display: ['Plus Jakarta Sans', 'sans-serif'],\n serif: ['Cormorant Garamond', 'serif'],\n mono: ['JetBrains Mono', 'monospace'],\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* =========================================================================\n THEME COLOR DEFINITIONS (5 Refined Aesthetic Profiles)\n ========================================================================= *\/\n :root, html.theme-obsidian {\n --bg-body: #0d0e11;\n --bg-surface: #15161c;\n --bg-surface-elevated: #1d1e26;\n --border-subtle: rgba(255, 255, 255, 0.08);\n --border-hover: rgba(212, 175, 55, 0.35);\n --text-main: #f4f4f6;\n --text-muted: #94a3b8;\n --accent: #d4af37;\n --accent-muted: rgba(212, 175, 55, 0.12);\n --accent-contrast: #0d0e11;\n --status-dot: #10b981;\n }\n\n html.theme-nordic {\n --bg-body: #f8fafc;\n --bg-surface: #ffffff;\n --bg-surface-elevated: #f1f5f9;\n --border-subtle: rgba(15, 23, 42, 0.08);\n --border-hover: rgba(15, 23, 42, 0.3);\n --text-main: #0f172a;\n --text-muted: #64748b;\n --accent: #1e293b;\n --accent-muted: rgba(30, 41, 59, 0.08);\n --accent-contrast: #ffffff;\n --status-dot: #0ea5e9;\n }\n\n html.theme-linen {\n --bg-body: #f7f4ed;\n --bg-surface: #ffffff;\n --bg-surface-elevated: #efeae0;\n --border-subtle: rgba(90, 70, 50, 0.12);\n --border-hover: rgba(180, 83, 9, 0.4);\n --text-main: #292524;\n --text-muted: #78716c;\n --accent: #b45309;\n --accent-muted: rgba(180, 83, 9, 0.1);\n --accent-contrast: #ffffff;\n --status-dot: #15803d;\n }\n\n html.theme-cobalt {\n --bg-body: #070d17;\n --bg-surface: #0e1726;\n --bg-surface-elevated: #16243b;\n --border-subtle: rgba(56, 189, 248, 0.12);\n --border-hover: rgba(56, 189, 248, 0.4);\n --text-main: #f0f6fc;\n --text-muted: #8ba2c4;\n --accent: #38bdf8;\n --accent-muted: rgba(56, 189, 248, 0.15);\n --accent-contrast: #070d17;\n --status-dot: #38bdf8;\n }\n\n html.theme-emerald {\n --bg-body: #06140f;\n --bg-surface: #0b1f17;\n --bg-surface-elevated: #112d22;\n --border-subtle: rgba(52, 211, 153, 0.15);\n --border-hover: rgba(52, 211, 153, 0.45);\n --text-main: #ecfdf5;\n --text-muted: #86efac;\n --accent: #10b981;\n --accent-muted: rgba(16, 185, 129, 0.16);\n --accent-contrast: #04100c;\n --status-dot: #34d399;\n }\n\n \/* Core UI Elements *\/\n body {\n background-color: var(--bg-body);\n color: var(--text-main);\n font-family: 'Inter', sans-serif;\n transition: background-color 0.25s ease, color 0.25s ease;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n\n .editorial-card {\n background-color: var(--bg-surface);\n border: 1px solid var(--border-subtle);\n transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;\n }\n .editorial-card:hover {\n border-color: var(--border-hover);\n }\n\n .editorial-input {\n background-color: var(--bg-surface-elevated);\n border: 1px solid var(--border-subtle);\n color: var(--text-main);\n transition: all 0.2s ease;\n }\n .editorial-input:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 0 0 2px var(--accent-muted);\n }\n\n .text-theme-accent { color: var(--accent); }\n .bg-theme-accent { background-color: var(--accent); color: var(--accent-contrast); }\n .bg-theme-muted { background-color: var(--accent-muted); }\n .border-theme-accent { border-color: var(--accent); }\n\n .section-mono-tag {\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.68rem;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--accent);\n }\n\n \/* Interactive Canvas Styling *\/\n #cropCanvas {\n cursor: grab;\n touch-action: none;\n }\n #cropCanvas:active {\n cursor: grabbing;\n }\n\n \/* Scrollbars *\/\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n ::-webkit-scrollbar-track { background: var(--bg-body); }\n ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 999px; }\n ::-webkit-scrollbar-thumb:hover { background: var(--accent); }\n\n \/* =========================================================================\n EXECUTIVE A4 PRINT STYLESHEET (For Selectable Vector PDFs via Print)\n ========================================================================= *\/\n @media print {\n @page {\n size: A4 portrait;\n margin: 10mm 12mm;\n }\n * {\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !important;\n }\n body {\n background: #ffffff !important;\n color: #0f172a !important;\n font-size: 9pt !important;\n line-height: 1.4 !important;\n }\n .no-print, header, footer, #toastContainer, #editBanner, #cropModal, #cloudSettingsModal, #pdfPreviewModal, #resetModal {\n display: none !important;\n }\n #printDossierRoot {\n display: block !important;\n background: #ffffff !important;\n color: #0f172a !important;\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n box-shadow: none !important;\n border: none !important;\n }\n .main-app-content {\n display: none !important;\n }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n\n \n <div id=\"toastContainer\" class=\"fixed bottom-5 right-5 z-50 flex flex-col gap-2.5 max-w-sm w-full pointer-events-none px-4 sm:px-0 no-print\"><\/div>\n\n \n <header class=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors no-print\" style=\"background-color: color-mix(in srgb, var(--bg-body) 85%, transparent); border-color: var(--border-subtle);\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-2 sm:gap-4\">\n \n \n <a href=\"#top\" class=\"flex items-center gap-2.5 group focus:outline-none\">\n <div class=\"w-9 h-9 rounded-lg flex items-center justify-center font-display font-bold text-sm tracking-wider transition-transform group-hover:scale-105 border border-theme-accent bg-theme-muted text-theme-accent\">\n S.\n <\/div>\n <div class=\"flex flex-col\">\n <div class=\"flex items-center gap-1.5\">\n <span class=\"font-display font-semibold tracking-tight text-base\">srabons<span class=\"text-theme-accent\">.de<\/span><\/span>\n <span class=\"hidden sm:inline-block text-[10px] font-mono uppercase tracking-widest px-1.5 py-0.5 rounded border border-white\/10 text-slate-400\">Bio Dossier<\/span>\n <\/div>\n <span class=\"text-[11px] text-slate-400 hidden md:block\">Personal Bio-Data & Executive Profile<\/span>\n <\/div>\n <\/a>\n\n \n <div class=\"flex items-center gap-1.5 sm:gap-2.5\">\n \n \n <div class=\"relative\">\n <select id=\"themeSelector\" onchange=\"changeTheme(this.value)\" class=\"text-xs font-medium py-1.5 pl-2.5 pr-7 rounded-lg editorial-input cursor-pointer appearance-none focus:outline-none\">\n <option value=\"theme-obsidian\">Obsidian Gold<\/option>\n <option value=\"theme-nordic\">Nordic Minimalist<\/option>\n <option value=\"theme-linen\">Warm Linen Sand<\/option>\n <option value=\"theme-cobalt\">Neo-Slate Cobalt<\/option>\n <option value=\"theme-emerald\">Emerald Velvet<\/option>\n <\/select>\n <i data-lucide=\"palette\" class=\"w-3.5 h-3.5 absolute right-2.5 top-1\/2 -translate-y-1\/2 pointer-events-none text-slate-400\"><\/i>\n <\/div>\n\n \n <button id=\"editModeBtn\" onclick=\"toggleEditMode()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent transition-all bg-white\/[0.02]\" style=\"border-color: var(--border-subtle);\">\n <i data-lucide=\"pen-line\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n <span id=\"editModeLabel\" class=\"hidden sm:inline\">Edit Profile<\/span>\n <\/button>\n\n \n <button onclick=\"openCloudSettingsModal()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent transition-all bg-white\/[0.02]\" style=\"border-color: var(--border-subtle);\" title=\"Configure Google Drive & Dropbox\">\n <i data-lucide=\"cloud-cog\" class=\"w-3.5 h-3.5 text-emerald-400\"><\/i>\n <span class=\"hidden md:inline\">Cloud<\/span>\n <span id=\"cloudStatusDot\" class=\"w-1.5 h-1.5 rounded-full bg-amber-400\" title=\"Simulated mode active\"><\/span>\n <\/button>\n\n \n <button onclick=\"openPdfPreviewModal()\" class=\"flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-theme-accent shadow-sm hover:opacity-90 transition-all\">\n <i data-lucide=\"file-down\" class=\"w-3.5 h-3.5\"><\/i>\n <span>Download PDF<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div id=\"editBanner\" class=\"hidden bg-theme-muted border-b border-theme-accent py-2.5 px-4 no-print transition-all\">\n <div class=\"max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2 text-xs\">\n <div class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-theme-accent animate-pulse\"><\/span>\n <span class=\"font-semibold text-theme-accent\">Live Edit Mode:<\/span>\n <span>Edit any field directly below. All changes update in real time and auto-save.<\/span>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <button onclick=\"openResetModal()\" class=\"px-2.5 py-1 rounded border border-red-400\/40 bg-red-500\/10 text-red-400 hover:bg-red-500\/20\">\n Reset Defaults\n <\/button>\n <button onclick=\"toggleEditMode()\" class=\"px-3 py-1 rounded bg-theme-accent font-semibold\">\n Finish Editing\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 main-app-content\">\n\n \n <div class=\"flex items-center justify-between flex-wrap gap-4 mb-8 no-print\">\n <div class=\"flex items-center gap-1.5 overflow-x-auto pb-1 sm:pb-0 w-full sm:w-auto\" role=\"tablist\">\n <button onclick=\"filterSections('all')\" data-tab=\"all\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent\">\n All Overview\n <\/button>\n <button onclick=\"filterSections('personal')\" data-tab=\"personal\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Personal Details\n <\/button>\n <button onclick=\"filterSections('timeline')\" data-tab=\"timeline\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Career & Education\n <\/button>\n <button onclick=\"filterSections('competencies')\" data-tab=\"competencies\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Philosophy & Skills\n <\/button>\n <button onclick=\"filterSections('contact')\" data-tab=\"contact\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Contact & Exports\n <\/button>\n <\/div>\n\n <div class=\"hidden lg:flex items-center gap-2 text-xs font-mono text-slate-400\">\n <i data-lucide=\"shield-check\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n <span>OFFICIAL DOSSIER \u2022 VERIFIED<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8\">\n\n \n <aside class=\"lg:col-span-4 flex flex-col gap-6\">\n\n \n <section class=\"editorial-card rounded-2xl p-5 sm:p-6 relative\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"section-mono-tag flex items-center gap-1.5\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-theme-accent\"><\/span>\n 01 \/ PORTRAIT STUDIO\n <\/span>\n <span class=\"text-[10px] font-mono text-slate-400 px-2 py-0.5 rounded bg-white\/[0.04] border border-white\/10 no-print\">\n 800\u00d71000px\n <\/span>\n <\/div>\n\n \n <div class=\"relative group mx-auto max-w-[280px] w-full aspect-[4\/5] rounded-xl overflow-hidden border border-white\/10 bg-black\/40 shadow-xl\">\n <img decoding=\"async\" id=\"profilePortraitImg\" src=\"\" alt=\"Srabon Debnath Portrait\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\" \/>\n\n \n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-transparent to-transparent opacity-60 pointer-events-none no-print\"><\/div>\n <div class=\"absolute bottom-3 left-3 right-3 flex items-end justify-between text-white pointer-events-none no-print\">\n <div>\n <p class=\"text-[10px] font-mono uppercase tracking-widest text-theme-accent\">SRABONS.DE<\/p>\n <p class=\"text-xs font-medium\" id=\"portraitNameCaption\">Srabon Debnath<\/p>\n <\/div>\n <span class=\"text-[10px] font-mono px-2 py-0.5 rounded bg-black\/60 backdrop-blur-md border border-white\/20\">Verified<\/span>\n <\/div>\n\n \n <div class=\"absolute inset-0 bg-black\/80 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center p-4 text-center gap-3 no-print\">\n <div class=\"w-10 h-10 rounded-full bg-theme-muted border border-theme-accent flex items-center justify-center text-theme-accent\">\n <i data-lucide=\"camera\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm font-semibold text-white\">Update Portrait<\/p>\n <p class=\"text-xs text-slate-300\">JPG, PNG, WebP (Max 5MB)<\/p>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <button onclick=\"triggerFileInput()\" class=\"px-3 py-1.5 rounded-lg bg-theme-accent text-xs font-semibold\">\n Upload Photo\n <\/button>\n <button onclick=\"openCropModalWithCurrent()\" class=\"px-3 py-1.5 rounded-lg bg-white\/10 text-white hover:bg-white\/20 text-xs border border-white\/20\">\n Crop \/ Filter\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <input type=\"file\" id=\"photoFileInput\" accept=\"image\/jpeg,image\/png,image\/webp\" class=\"hidden\" onchange=\"handleFileSelect(event)\" \/>\n\n \n <div id=\"dropZone\"\n onclick=\"triggerFileInput()\"\n ondragover=\"handleDragOver(event)\"\n ondragleave=\"handleDragLeave(event)\"\n ondrop=\"handleDrop(event)\"\n class=\"mt-4 border border-dashed border-white\/20 hover:border-theme-accent rounded-xl p-3 text-center cursor-pointer transition-all bg-white\/[0.01] hover:bg-theme-muted no-print\">\n <div class=\"flex items-center justify-center gap-2 text-xs\">\n <i data-lucide=\"upload-cloud\" class=\"w-4 h-4 text-theme-accent\"><\/i>\n <span>Drop portrait or <span class=\"text-theme-accent underline\">browse<\/span><\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-5 pt-4 border-t border-white\/[0.08] no-print\">\n <div class=\"flex items-center justify-between mb-2.5\">\n <span class=\"text-[11px] font-mono uppercase tracking-wider text-slate-400 flex items-center gap-1.5\">\n <i data-lucide=\"cloud\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n Cloud Portrait Backup\n <\/span>\n <button onclick=\"openCloudSettingsModal()\" class=\"text-[11px] text-theme-accent hover:underline font-mono\">\n API Config\n <\/button>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-2\">\n <button onclick=\"uploadPhotoToCloud('gdrive')\" class=\"flex items-center justify-center gap-2 py-2 px-3 rounded-xl text-xs font-medium border border-white\/10 hover:border-emerald-400 bg-white\/[0.02] transition-all\">\n <svg class=\"w-3.5 h-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7.71 3.5L1.15 15L4.58 21L11.13 9.5L7.71 3.5Z\" fill=\"#0066DA\"\/>\n <path d=\"M16.29 3.5H7.71L14.29 15H22.85L16.29 3.5Z\" fill=\"#00AC47\"\/>\n <path d=\"M14.29 15L11.13 9.5L4.58 21H19.42L22.85 15H14.29Z\" fill=\"#EA4335\"\/>\n <\/svg>\n <span>Google Drive<\/span>\n <\/button>\n <button onclick=\"uploadPhotoToCloud('dropbox')\" class=\"flex items-center justify-center gap-2 py-2 px-3 rounded-xl text-xs font-medium border border-white\/10 hover:border-sky-400 bg-white\/[0.02] transition-all\">\n <svg class=\"w-3.5 h-3.5 shrink-0 text-[#0061FE]\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M6 2L0 6l6 4-6 4 6 4 6-4-6-4 6-4-6-4zm12 0l-6 4 6 4-6 4 6 4 6-4-6-4 6-4-6-4zm-6 13l-6 4 6 4 6-4-6-4z\"\/>\n <\/svg>\n <span>Dropbox<\/span>\n <\/button>\n <\/div>\n\n \n <div id=\"cloudStatusBox\" class=\"hidden mt-3 p-3 rounded-xl border border-white\/10 bg-black\/30 text-xs\">\n <div class=\"flex items-center justify-between mb-1.5\">\n <span id=\"cloudStatusTitle\" class=\"font-medium flex items-center gap-1.5 text-slate-200\">\n <i data-lucide=\"loader-2\" class=\"w-3.5 h-3.5 animate-spin text-theme-accent\"><\/i>\n Syncing…\n <\/span>\n <span id=\"cloudStatusPercent\" class=\"font-mono text-[11px] text-theme-accent\">0%<\/span>\n <\/div>\n <div class=\"w-full h-1 bg-white\/10 rounded-full overflow-hidden\">\n <div id=\"cloudProgressBar\" class=\"h-full bg-theme-accent transition-all duration-300\" style=\"width: 0%\"><\/div>\n <\/div>\n <p id=\"cloudStatusDetail\" class=\"text-[10px] text-slate-400 mt-1 font-mono truncate\">Processing upload…<\/p>\n <\/div>\n\n \n <div id=\"cloudSyncHistory\" class=\"mt-2 space-y-1.5 empty:hidden\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-5 sm:p-6\" data-section=\"personal\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"section-mono-tag\">02 \/ VITALS SNAPSHOT<\/span>\n <span class=\"text-[11px] font-mono text-emerald-400 flex items-center gap-1\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping\"><\/span>\n Current\n <\/span>\n <\/div>\n <div id=\"vitalSnapshotList\" class=\"space-y-3 text-sm\"><\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-5 sm:p-6\" data-section=\"personal\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"section-mono-tag\">03 \/ LANGUAGES<\/span>\n <button id=\"addLangBtn\" onclick=\"addLanguageItem()\" class=\"hidden edit-only text-xs text-theme-accent hover:underline items-center gap-1 no-print\">\n <i data-lucide=\"plus\" class=\"w-3 h-3\"><\/i> Add\n <\/button>\n <\/div>\n <div id=\"languagesContainer\" class=\"space-y-3\"><\/div>\n <\/section>\n\n <\/aside>\n\n \n <div class=\"lg:col-span-8 flex flex-col gap-6\">\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8 relative\">\n <div class=\"flex flex-wrap items-center justify-between gap-3 mb-4\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-theme-muted border border-theme-accent text-theme-accent text-xs font-medium\">\n <span class=\"w-2 h-2 rounded-full bg-theme-accent\"><\/span>\n <span id=\"heroStatusBadge\">Open to Executive & Technical Leadership<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"heroViewMode\">\n <div class=\"flex flex-col sm:flex-row sm:items-end justify-between gap-4\">\n <div>\n <h1 id=\"heroFullName\" class=\"font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight\">\n Srabon Debnath\n <\/h1>\n <p id=\"heroTitleTagline\" class=\"text-base sm:text-lg text-theme-accent font-medium mt-1.5\">\n Digital Architect, Systems Strategist & Principal at srabons.de\n <\/p>\n <\/div>\n <div class=\"flex items-center gap-2 text-xs text-slate-400 font-mono\">\n <i data-lucide=\"map-pin\" class=\"w-4 h-4 text-theme-accent shrink-0\"><\/i>\n <span id=\"heroLocation\">Berlin \/ G\u00f6ttingen, Germany<\/span>\n <\/div>\n <\/div>\n\n <p id=\"heroSummaryBio\" class=\"mt-5 text-sm sm:text-base leading-relaxed text-slate-300\">\n Multidisciplinary technologist and systems strategist combining German engineering precision with timeless editorial aesthetics. Focused on resilient cloud architectures, human-centric digital products, and sustainable cross-border ventures.\n <\/p>\n <\/div>\n\n \n <div id=\"heroEditMode\" class=\"hidden space-y-4 mt-2 no-print\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Full Name<\/label>\n <input type=\"text\" id=\"inputFullName\" oninput=\"updateHeroField('fullName', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Status Badge<\/label>\n <input type=\"text\" id=\"inputStatusBadge\" oninput=\"updateHeroField('statusBadge', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Role \/ Headline<\/label>\n <input type=\"text\" id=\"inputTagline\" oninput=\"updateHeroField('tagline', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Location<\/label>\n <input type=\"text\" id=\"inputLocation\" oninput=\"updateHeroField('location', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Executive Summary Bio<\/label>\n <textarea id=\"inputSummaryBio\" rows=\"3\" oninput=\"updateHeroField('summaryBio', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\"><\/textarea>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"personal\">\n <div class=\"flex items-center justify-between mb-6\">\n <div>\n <span class=\"section-mono-tag\">04 \/ PERSONAL PARTICULARS<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Identity & Bio-Data Matrix<\/h2>\n <\/div>\n <button onclick=\"addPersonalField()\" class=\"hidden edit-only px-3 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent items-center gap-1.5 no-print\">\n <i data-lucide=\"plus-circle\" class=\"w-3.5 h-3.5\"><\/i>\n <span>Add Attribute<\/span>\n <\/button>\n <\/div>\n <div id=\"personalDetailsGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"timeline\">\n <div class=\"flex flex-wrap items-center justify-between gap-4 mb-6\">\n <div>\n <span class=\"section-mono-tag\">05 \/ CHRONOLOGY & MILESTONES<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Professional Experience & Education<\/h2>\n <\/div>\n <div class=\"flex items-center gap-2 no-print\">\n <button onclick=\"addTimelineItem('experience')\" class=\"hidden edit-only px-3 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent items-center gap-1\">\n <i data-lucide=\"briefcase\" class=\"w-3.5 h-3.5\"><\/i> + Role\n <\/button>\n <button onclick=\"addTimelineItem('education')\" class=\"hidden edit-only px-3 py-1.5 rounded-lg text-xs font-medium bg-emerald-500\/15 text-emerald-400 border border-emerald-500\/30 items-center gap-1\">\n <i data-lucide=\"graduation-cap\" class=\"w-3.5 h-3.5\"><\/i> + Education\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div>\n <div class=\"flex items-center gap-2 pb-3 mb-4 border-b border-white\/[0.08]\">\n <i data-lucide=\"briefcase\" class=\"w-4 h-4 text-theme-accent\"><\/i>\n <h3 class=\"font-display font-semibold text-sm uppercase tracking-wider\">Professional Experience<\/h3>\n <\/div>\n <div id=\"experienceTimeline\" class=\"space-y-5 relative before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-white\/10\"><\/div>\n <\/div>\n\n \n <div>\n <div class=\"flex items-center gap-2 pb-3 mb-4 border-b border-white\/[0.08]\">\n <i data-lucide=\"graduation-cap\" class=\"w-4 h-4 text-emerald-400\"><\/i>\n <h3 class=\"font-display font-semibold text-sm uppercase tracking-wider\">Education & Credentials<\/h3>\n <\/div>\n <div id=\"educationTimeline\" class=\"space-y-5 relative before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-white\/10\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"competencies\">\n <div class=\"mb-6\">\n <span class=\"section-mono-tag\">06 \/ ETHOS & COMPETENCIES<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Guiding Philosophy & Core Skills<\/h2>\n <\/div>\n\n \n <div class=\"p-5 rounded-xl bg-theme-muted border-l-4 border-theme-accent mb-6 relative\">\n <i data-lucide=\"quote\" class=\"w-6 h-6 text-theme-accent\/30 absolute top-4 right-4\"><\/i>\n <p class=\"text-xs font-mono uppercase tracking-widest text-theme-accent mb-1.5\">Core Philosophy<\/p>\n <blockquote id=\"philosophyQuoteView\" class=\"font-serif text-lg italic leading-relaxed\">\n “Simplicity is the ultimate sophistication\u2014building systems and relationships grounded in clarity, integrity, and enduring value.”\n <\/blockquote>\n <textarea id=\"philosophyQuoteEdit\" rows=\"2\" oninput=\"updatePhilosophy(this.value)\" class=\"hidden edit-only w-full mt-2 px-3 py-2 rounded-lg text-sm editorial-input no-print\"><\/textarea>\n <\/div>\n\n \n <div>\n <div class=\"flex items-center justify-between mb-3\">\n <h3 class=\"text-xs font-mono uppercase tracking-wider text-slate-400\">Skills & Focus Areas<\/h3>\n <button onclick=\"addCompetencyTag()\" class=\"hidden edit-only text-xs text-theme-accent hover:underline items-center gap-1 no-print\">\n <i data-lucide=\"plus\" class=\"w-3.5 h-3.5\"><\/i> Add Skill\n <\/button>\n <\/div>\n <div id=\"competenciesContainer\" class=\"flex flex-wrap gap-2\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"contact\">\n <div class=\"flex flex-wrap items-center justify-between gap-4 mb-6\">\n <div>\n <span class=\"section-mono-tag\">07 \/ DIRECT CHANNELS<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Official Contact & Digital Presence<\/h2>\n <\/div>\n <div class=\"flex items-center gap-2 no-print\">\n <button onclick=\"downloadVCard()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent bg-white\/[0.02]\">\n <i data-lucide=\"contact\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n <span>Save vCard (.vcf)<\/span>\n <\/button>\n <button onclick=\"exportBioDataJSON()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent bg-white\/[0.02]\">\n <i data-lucide=\"file-json\" class=\"w-3.5 h-3.5 text-emerald-400\"><\/i>\n <span>JSON Export<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"contactLinksGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><\/div>\n <\/section>\n\n <\/div>\n <\/div>\n <\/main>\n\n \n <footer class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 mt-8 border-t border-white\/[0.08] text-xs text-slate-400 flex flex-col sm:flex-row items-center justify-between gap-4 no-print\">\n <div class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-theme-accent\"><\/span>\n <span class=\"font-display font-medium text-slate-300\">srabons.de<\/span>\n <span>\u2014 Official Bio-Data & Executive Dossier<\/span>\n <\/div>\n <div class=\"flex items-center gap-4 font-mono text-[11px]\">\n <button onclick=\"openPdfPreviewModal()\" class=\"hover:text-theme-accent transition-colors\">A4 PDF Preview<\/button>\n <span>\u2022<\/span>\n <button onclick=\"window.print()\" class=\"hover:text-theme-accent transition-colors\">Print Bio-Data<\/button>\n <span>\u2022<\/span>\n <span>\u00a9 2026 srabons.de<\/span>\n <\/div>\n <\/footer>\n\n \n <div id=\"pdfPreviewModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-3 sm:p-6 bg-black\/85 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-4xl w-full max-h-[95vh] flex flex-col shadow-2xl border border-white\/20 overflow-hidden\">\n \n \n <div class=\"p-4 sm:px-6 border-b border-white\/10 flex items-center justify-between bg-black\/40\">\n <div>\n <span class=\"section-mono-tag\">DOCUMENT COMPOSITION ENGINE<\/span>\n <h3 class=\"font-display text-base sm:text-lg font-bold\">Executive A4 PDF Preview<\/h3>\n <\/div>\n <div class=\"flex items-center gap-2\">\n \n <button onclick=\"printViaBrowser()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/20 hover:border-theme-accent bg-white\/5 transition-all text-slate-200\" title=\"Print as native vector PDF\">\n <i data-lucide=\"printer\" class=\"w-3.5 h-3.5\"><\/i>\n <span class=\"hidden sm:inline\">Browser Print<\/span>\n <\/button>\n \n \n <button id=\"btnGeneratePdf\" onclick=\"generatePdfWithJsPdf()\" class=\"flex items-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-semibold bg-theme-accent shadow-md hover:opacity-90 transition-all\">\n <i data-lucide=\"download\" class=\"w-3.5 h-3.5\"><\/i>\n <span id=\"btnGeneratePdfLabel\">Download PDF (.pdf)<\/span>\n <\/button>\n\n \n <button onclick=\"closePdfPreviewModal()\" class=\"p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white\/10\">\n <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-1 overflow-y-auto p-4 sm:p-6 bg-zinc-900\/60 flex justify-center\">\n \n \n <div id=\"printDossierRoot\" class=\"w-[794px] max-w-full bg-white text-slate-900 p-8 sm:p-10 shadow-2xl rounded-sm font-sans text-[11px] leading-relaxed relative border border-slate-300\">\n \n \n <div class=\"flex items-start justify-between pb-4 border-b-2 border-slate-900 mb-6\">\n <div>\n <div class=\"flex items-center gap-2\">\n <span class=\"font-mono text-xs font-bold uppercase tracking-widest text-amber-700\">SRABONS.DE<\/span>\n <span class=\"text-[9px] font-mono px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-slate-600\">OFFICIAL DOSSIER<\/span>\n <\/div>\n <h1 id=\"pdfFullName\" class=\"font-display text-2xl font-bold text-slate-900 mt-1\">Srabon Debnath<\/h1>\n <p id=\"pdfTagline\" class=\"text-xs font-medium text-slate-700 mt-0.5\">Digital Architect, Systems Strategist & Principal at srabons.de<\/p>\n <\/div>\n <div class=\"text-right text-[10px] font-mono text-slate-500\">\n <div class=\"font-semibold text-slate-800\">DOMAIN: https:\/\/srabons.de<\/div>\n <div id=\"pdfPrintDate\">Date: 2026-10-25<\/div>\n <div id=\"pdfLocationText\">Berlin \/ G\u00f6ttingen, Germany<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-12 gap-6\">\n \n \n <div class=\"col-span-4 flex flex-col gap-5 border-r border-slate-200 pr-5\">\n \n <div class=\"w-full aspect-[4\/5] rounded-md overflow-hidden border border-slate-300 bg-slate-100 shadow-sm\">\n <img decoding=\"async\" id=\"pdfPortraitImg\" src=\"\" alt=\"Portrait\" class=\"w-full h-full object-cover\" \/>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2 border-b border-slate-200\">\n Vital Particulars\n <\/h4>\n <div id=\"pdfVitalsList\" class=\"space-y-1.5 text-[10px]\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2 border-b border-slate-200\">\n Languages\n <\/h4>\n <div id=\"pdfLanguagesList\" class=\"space-y-1.5 text-[10px]\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2 border-b border-slate-200\">\n Direct Channels\n <\/h4>\n <div id=\"pdfContactsList\" class=\"space-y-1 text-[10px]\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"col-span-8 flex flex-col gap-5\">\n \n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-1.5 border-b border-slate-200\">\n Executive Profile & Objectives\n <\/h4>\n <p id=\"pdfSummaryBio\" class=\"text-slate-700 text-[10.5px] leading-relaxed\"><\/p>\n <\/div>\n\n \n <div class=\"p-3 bg-slate-50 border-l-2 border-amber-600 rounded-r text-slate-800 italic text-[10px]\">\n <span class=\"font-bold uppercase tracking-wider text-[8px] font-mono text-amber-800 not-italic block mb-0.5\">ETHOS<\/span>\n <span id=\"pdfPhilosophy\"><\/span>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2.5 border-b border-slate-200\">\n Professional Trajectory\n <\/h4>\n <div id=\"pdfExperienceTimeline\" class=\"space-y-3\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2.5 border-b border-slate-200\">\n Academic Credentials\n <\/h4>\n <div id=\"pdfEducationTimeline\" class=\"space-y-3\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-1.5 border-b border-slate-200\">\n Core Competencies & Expertise\n <\/h4>\n <div id=\"pdfCompetenciesContainer\" class=\"flex flex-wrap gap-1.5\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <div class=\"mt-8 pt-4 border-t border-slate-200 flex items-center justify-between text-[9px] font-mono text-slate-500\">\n <div>Document Ref: srabons.de\/dossier\/2026<\/div>\n <div>Authentic Digital Profile \u2022 Germany<\/div>\n <div>Page 1 of 1<\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"cropModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black\/80 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-white\/20\">\n <div class=\"flex items-center justify-between pb-4 border-b border-white\/10\">\n <div>\n <span class=\"section-mono-tag\">PORTRAIT CROP STUDIO<\/span>\n <h3 class=\"font-display text-lg font-semibold\">Crop & Refine Image<\/h3>\n <\/div>\n <button onclick=\"closeCropModal()\" class=\"p-1.5 rounded-lg text-slate-400 hover:text-white\">\n <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n\n <div class=\"mt-4 flex flex-col items-center\">\n \n <div class=\"relative rounded-xl overflow-hidden border border-theme-accent bg-black shadow-inner\">\n <canvas id=\"cropCanvas\" width=\"320\" height=\"400\" class=\"block max-w-full h-auto\"><\/canvas>\n <div class=\"absolute bottom-2 right-2 px-2 py-0.5 rounded bg-black\/75 text-[10px] font-mono text-slate-300 pointer-events-none\">\n Drag to Reposition\n <\/div>\n <\/div>\n\n \n <div class=\"w-full mt-4 space-y-3\">\n <div class=\"flex items-center gap-3\">\n <i data-lucide=\"zoom-out\" class=\"w-4 h-4 text-slate-400\"><\/i>\n <input type=\"range\" id=\"cropZoomSlider\" min=\"0.5\" max=\"3\" step=\"0.02\" value=\"1\" oninput=\"handleCropZoom(this.value)\" class=\"w-full accent-amber-500 cursor-pointer\" \/>\n <i data-lucide=\"zoom-in\" class=\"w-4 h-4 text-theme-accent\"><\/i>\n <\/div>\n\n <div class=\"flex items-center justify-between gap-2 pt-1\">\n <span class=\"text-xs font-mono text-slate-400\">Finish:<\/span>\n <div class=\"flex items-center gap-1.5\">\n <button onclick=\"setCropFilter('none')\" id=\"filterBtn-none\" class=\"px-2.5 py-1 rounded text-xs font-medium bg-theme-accent\">Original<\/button>\n <button onclick=\"setCropFilter('noir')\" id=\"filterBtn-noir\" class=\"px-2.5 py-1 rounded text-xs font-medium bg-white\/5 text-slate-300\">Monochrome<\/button>\n <button onclick=\"setCropFilter('warm')\" id=\"filterBtn-warm\" class=\"px-2.5 py-1 rounded text-xs font-medium bg-white\/5 text-slate-300\">Warm Tone<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-6 pt-4 border-t border-white\/10 flex items-center justify-between gap-3\">\n <button onclick=\"resetCropTransform()\" class=\"px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-white\/10\">\n Reset Center\n <\/button>\n <div class=\"flex items-center gap-2\">\n <button onclick=\"closeCropModal()\" class=\"px-4 py-1.5 rounded-lg text-xs text-slate-300 hover:bg-white\/10\">Cancel<\/button>\n <button onclick=\"applyCroppedPortrait()\" class=\"px-5 py-1.5 rounded-lg text-xs font-semibold bg-theme-accent shadow-md\">Apply Portrait<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"cloudSettingsModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black\/80 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-xl w-full p-6 shadow-2xl border border-white\/20 max-h-[90vh] overflow-y-auto\">\n <div class=\"flex items-center justify-between pb-4 border-b border-white\/10\">\n <div>\n <span class=\"section-mono-tag\">CLOUD STORAGE INTEGRATION<\/span>\n <h3 class=\"font-display text-lg font-semibold\">Google Drive & Dropbox API<\/h3>\n <\/div>\n <button onclick=\"closeCloudSettingsModal()\" class=\"p-1.5 rounded-lg text-slate-400 hover:text-white\">\n <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n\n <div class=\"mt-4 space-y-4 text-xs\">\n <div class=\"p-3.5 rounded-xl bg-theme-muted border border-theme-accent leading-relaxed\">\n <p class=\"font-semibold text-theme-accent mb-1 flex items-center gap-1.5\">\n <i data-lucide=\"info\" class=\"w-4 h-4\"><\/i> Dual-Engine Cloud Architecture\n <\/p>\n Configure optional OAuth 2.0 Bearer tokens below to upload your portrait directly to <strong>Google Drive API v3<\/strong> or <strong>Dropbox API v2<\/strong>. If left blank, the system operates in <strong>Interactive Simulation Mode<\/strong> so you can test the workflow instantly.\n <\/div>\n\n \n <div class=\"p-3.5 rounded-xl border border-white\/10 bg-white\/[0.02] space-y-2.5\">\n <div class=\"flex items-center justify-between font-semibold\">\n <span class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-emerald-400\"><\/span> Google Drive API v3\n <\/span>\n <span class=\"font-mono text-[10px] text-slate-400\">multipart\/related<\/span>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Google OAuth Access Token (Optional)<\/label>\n <input type=\"password\" id=\"gdriveTokenInput\" placeholder=\"ya29.a0AfH6SM...\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Target Folder ID (Optional)<\/label>\n <input type=\"text\" id=\"gdriveFolderInput\" placeholder=\"e.g. 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"p-3.5 rounded-xl border border-white\/10 bg-white\/[0.02] space-y-2.5\">\n <div class=\"flex items-center justify-between font-semibold\">\n <span class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-sky-400\"><\/span> Dropbox API v2\n <\/span>\n <span class=\"font-mono text-[10px] text-slate-400\">\/2\/files\/upload<\/span>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Dropbox Access Token (Optional)<\/label>\n <input type=\"password\" id=\"dropboxTokenInput\" placeholder=\"sl.B0xYz...\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Dropbox Destination Path<\/label>\n <input type=\"text\" id=\"dropboxPathInput\" value=\"\/srabons-bio\/portrait.png\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-6 pt-4 border-t border-white\/10 flex items-center justify-end gap-2\">\n <button onclick=\"closeCloudSettingsModal()\" class=\"px-4 py-2 rounded-lg text-xs font-medium bg-white\/5 hover:bg-white\/10\">Close<\/button>\n <button onclick=\"saveCloudSettings()\" class=\"px-5 py-2 rounded-lg text-xs font-semibold bg-theme-accent\">Save Cloud Settings<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"resetModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black\/80 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-md w-full p-6 shadow-2xl border border-red-500\/40\">\n <div class=\"flex items-center gap-3 text-red-400 mb-3\">\n <i data-lucide=\"rotate-ccw\" class=\"w-5 h-5\"><\/i>\n <h3 class=\"font-display text-lg font-semibold text-white\">Reset Profile to Defaults?<\/h3>\n <\/div>\n <p class=\"text-xs text-slate-300 leading-relaxed\">\n This will clear local edits and restore the default editorial dossier for <strong>Srabon Debnath<\/strong> at <strong>srabons.de<\/strong>.\n <\/p>\n <div class=\"mt-6 flex items-center justify-end gap-2\">\n <button onclick=\"closeResetModal()\" class=\"px-4 py-1.5 rounded-lg text-xs font-medium bg-white\/5 hover:bg-white\/10\">Cancel<\/button>\n <button onclick=\"confirmResetToDefaults()\" class=\"px-4 py-1.5 rounded-lg text-xs font-semibold bg-red-500 text-white hover:bg-red-600\">Reset All<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n \/\/ --- 1. DEFAULT DATA MODEL FOR SRABONS.DE ---\n const DEFAULT_DATA = {\n fullName: \"Srabon Debnath\",\n tagline: \"Digital Architect, Systems Strategist & Principal at srabons.de\",\n location: \"Berlin \/ G\u00f6ttingen, Germany\",\n statusBadge: \"Open to Executive & Technical Leadership\",\n summaryBio: \"Multidisciplinary technologist and systems strategist combining German engineering precision with timeless editorial aesthetics. Focused on resilient cloud architectures, human-centric digital products, and sustainable cross-border ventures.\",\n philosophy: \"Simplicity is the ultimate sophistication\u2014building systems and relationships grounded in clarity, integrity, and enduring value.\",\n portraitDataUrl: null,\n vitalSnapshot: [\n { label: \"Full Legal Name\", value: \"Srabon Debnath\" },\n { label: \"Nationality \/ Permit\", value: \"Permanent Resident \u2014 EU \/ DE\" },\n { label: \"Current Base\", value: \"Germany (CET \/ UTC+1)\" },\n { label: \"Marital Status\", value: \"Unmarried \/ Single\" },\n { label: \"Academic Standing\", value: \"M.Sc. Computer Science & Systems\" }\n ],\n personalParticulars: [\n { id: \"p1\", label: \"Date of Birth\", value: \"14 October 1995\", icon: \"calendar\" },\n { id: \"p2\", label: \"Place of Origin\", value: \"Dhaka \u2022 Residing in Germany\", icon: \"globe-2\" },\n { id: \"p3\", label: \"Current Residence\", value: \"G\u00f6ttingen \/ Berlin, Germany\", icon: \"building-2\" },\n { id: \"p4\", label: \"Height & Constitution\", value: \"178 cm (5'10\\\") \u2022 Athletic\", icon: \"user-check\" },\n { id: \"p5\", label: \"Religious & Cultural Values\", value: \"Practicing, Progressive & Family-Oriented\", icon: \"heart-handshake\" },\n { id: \"p6\", label: \"Family Background\", value: \"Academic & Civil Service Heritage\", icon: \"users\" },\n { id: \"p7\", label: \"Dietary & Lifestyle\", value: \"Health-Conscious, Non-Smoker, Avid Runner\", icon: \"sparkles\" },\n { id: \"p8\", label: \"Primary Domain\", value: \"https:\/\/srabons.de\", icon: \"link\" }\n ],\n languages: [\n { id: \"l1\", name: \"English\", level: \"C2 \u2022 Executive \/ Bilingual Fluency\", percent: 98 },\n { id: \"l2\", name: \"German (Deutsch)\", level: \"C1 \u2022 Professional Working Fluency\", percent: 88 },\n { id: \"l3\", name: \"Bengali\", level: \"Native Mother Tongue\", percent: 100 }\n ],\n experience: [\n {\n id: \"ex1\",\n role: \"Principal Consultant & Founder\",\n org: \"srabons.de Digital Studio\",\n period: \"2023 \u2014 Present\",\n location: \"Germany\",\n desc: \"Architecting cloud systems, minimalist web platforms, and LLM-assisted workflows for European enterprise clients.\"\n },\n {\n id: \"ex2\",\n role: \"Senior Full-Stack Systems Engineer\",\n org: \"DACH FinTech Solutions Group\",\n period: \"2020 \u2014 2023\",\n location: \"Berlin, Germany\",\n desc: \"Led distributed squads delivering low-latency microservices, zero-trust cloud security, and design tokens.\"\n },\n {\n id: \"ex3\",\n role: \"Software Engineering Associate\",\n org: \"Enterprise Cloud Laboratory\",\n period: \"2018 \u2014 2020\",\n location: \"Lower Saxony, Germany\",\n desc: \"Developed scalable TypeScript pipelines and automated object storage replication protocols.\"\n }\n ],\n education: [\n {\n id: \"ed1\",\n role: \"M.Sc. in Applied Computer Science\",\n org: \"Georg-August-Universit\u00e4t G\u00f6ttingen\",\n period: \"2018 \u2014 2020\",\n location: \"G\u00f6ttingen, Germany\",\n desc: \"Specialized in Distributed Cloud Computing, Security Systems, and Human-Computer Interaction.\"\n },\n {\n id: \"ed2\",\n role: \"B.Sc. in Computer Science & Engineering\",\n org: \"University of Engineering & Technology\",\n period: \"2013 \u2014 2017\",\n location: \"Graduated with Honors\",\n desc: \"Honors dissertation on Encrypted Cloud Object Storage and Low-Latency Web Architecture.\"\n }\n ],\n competencies: [\n \"Cloud Architecture (AWS \/ GCP)\",\n \"Distributed Systems Design\",\n \"Full-Stack TypeScript & Node.js\",\n \"AI & LLM Orchestration\",\n \"Minimalist UI\/UX Systems\",\n \"Zero-Trust Cloud Security\",\n \"Cross-Cultural Leadership\",\n \"Architectural Photography\"\n ],\n contacts: [\n { id: \"c1\", label: \"Official Web Domain\", value: \"https:\/\/srabons.de\", actionType: \"url\", icon: \"globe\" },\n { id: \"c2\", label: \"Direct Email Address\", value: \"connect@srabons.de\", actionType: \"copy\", icon: \"mail\" },\n { id: \"c3\", label: \"Professional Network\", value: \"linkedin.com\/in\/srabons\", actionType: \"url\", icon: \"linkedin\" },\n { id: \"c4\", label: \"Source Code & GitHub\", value: \"github.com\/srabons\", actionType: \"url\", icon: \"github\" }\n ]\n };\n\n \/\/ State Variables\n let bioData = loadBioData();\n let isEditMode = false;\n let cloudConfig = {\n gdriveToken: sessionStorage.getItem('srabons_gdrive_tok') || '',\n gdriveFolder: sessionStorage.getItem('srabons_gdrive_fol') || '',\n dropboxToken: sessionStorage.getItem('srabons_dbox_tok') || '',\n dropboxPath: sessionStorage.getItem('srabons_dbox_pth') || '\/srabons-bio\/portrait.png'\n };\n\n \/\/ Studio Cropper State\n let cropImg = new Image();\n let cropScale = 1;\n let cropX = 0;\n let cropY = 0;\n let cropFilter = 'none';\n let isDragging = false;\n let dragStartX = 0;\n let dragStartY = 0;\n\n \/\/ Utility: HTML escape\n function escapeHtml(str) {\n if (typeof str !== 'string') return str ?? '';\n return str.replace(\/&\/g, '&').replace(\/<\/g, '<').replace(\/>\/g, '>').replace(\/\"\/g, '"');\n }\n\n \/\/ --- 2. DATA LOAD & PERSISTENCE ---\n function loadBioData() {\n try {\n const stored = localStorage.getItem('srabons_biodata_v4');\n if (stored) {\n const parsed = JSON.parse(stored);\n \/\/ Migration check from older names\n if (parsed.fullName && parsed.fullName.includes(\"Ahmed\")) {\n parsed.fullName = \"Srabon Debnath\";\n if (parsed.vitalSnapshot && parsed.vitalSnapshot[0]) {\n parsed.vitalSnapshot[0].value = \"Srabon Debnath\";\n }\n }\n return parsed;\n }\n } catch (err) {\n console.warn('Storage read exception:', err);\n }\n return JSON.parse(JSON.stringify(DEFAULT_DATA));\n }\n\n function saveBioData() {\n try {\n localStorage.setItem('srabons_biodata_v4', JSON.stringify(bioData));\n } catch (e) {\n showToast(\"Storage quota warning. Use a smaller portrait.\", \"error\");\n }\n }\n\n \/\/ Default Portrait Generator (Guarantees crisp instant render)\n function generateCrispDefaultPortrait() {\n const c = document.createElement('canvas');\n c.width = 800;\n c.height = 1000;\n const ctx = c.getContext('2d');\n\n \/\/ Gradient background\n const grad = ctx.createLinearGradient(0, 0, 800, 1000);\n grad.addColorStop(0, '#1c1e24');\n grad.addColorStop(1, '#0c0d10');\n ctx.fillStyle = grad;\n ctx.fillRect(0, 0, 800, 1000);\n\n \/\/ Gold architectural circle\n ctx.strokeStyle = 'rgba(212, 175, 55, 0.4)';\n ctx.lineWidth = 3;\n ctx.beginPath();\n ctx.arc(400, 420, 210, 0, Math.PI * 2);\n ctx.stroke();\n\n \/\/ Stylized silhouette head & body\n ctx.fillStyle = '#d4af37';\n ctx.beginPath();\n ctx.arc(400, 370, 95, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.fillStyle = '#242834';\n ctx.beginPath();\n ctx.moveTo(170, 800);\n ctx.quadraticCurveTo(400, 560, 630, 800);\n ctx.lineTo(630, 920);\n ctx.lineTo(170, 920);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Official typography badge\n ctx.fillStyle = '#ffffff';\n ctx.font = '700 34px \"Plus Jakarta Sans\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('SRABON DEBNATH', 400, 890);\n\n ctx.fillStyle = '#d4af37';\n ctx.font = '500 18px \"JetBrains Mono\", monospace';\n ctx.fillText('SRABONS.DE \u2022 VERIFIED DOSSIER', 400, 930);\n\n return c.toDataURL('image\/jpeg', 0.95);\n }\n\n \/\/ --- 3. RENDER ON-SCREEN UI ---\n function renderMainUI() {\n if (!bioData.portraitDataUrl) {\n bioData.portraitDataUrl = generateCrispDefaultPortrait();\n }\n\n \/\/ Portrait\n document.getElementById('profilePortraitImg').src = bioData.portraitDataUrl;\n document.getElementById('portraitNameCaption').textContent = bioData.fullName;\n\n \/\/ Hero View Mode\n document.getElementById('heroFullName').textContent = bioData.fullName;\n document.getElementById('heroTitleTagline').textContent = bioData.tagline;\n document.getElementById('heroLocation').textContent = bioData.location;\n document.getElementById('heroStatusBadge').textContent = bioData.statusBadge;\n document.getElementById('heroSummaryBio').textContent = bioData.summaryBio;\n\n \/\/ Hero Inputs\n document.getElementById('inputFullName').value = bioData.fullName;\n document.getElementById('inputStatusBadge').value = bioData.statusBadge;\n document.getElementById('inputTagline').value = bioData.tagline;\n document.getElementById('inputLocation').value = bioData.location;\n document.getElementById('inputSummaryBio').value = bioData.summaryBio;\n\n \/\/ Vital snapshot\n const vitalList = document.getElementById('vitalSnapshotList');\n vitalList.innerHTML = bioData.vitalSnapshot.map((item, idx) => `\n <div class=\"flex items-center justify-between py-2 border-b border-white\/[0.06] last:border-none\">\n <span class=\"text-xs text-slate-400\">${escapeHtml(item.label)}<\/span>\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(item.value)}\" oninput=\"updateVitalItem(${idx}, this.value)\" class=\"px-2 py-0.5 rounded text-xs editorial-input text-right w-48\" \/>`\n : `<span class=\"text-xs font-medium text-right\">${escapeHtml(item.value)}<\/span>`\n }\n <\/div>\n `).join('');\n\n \/\/ Languages\n const langContainer = document.getElementById('languagesContainer');\n langContainer.innerHTML = bioData.languages.map((lang, idx) => `\n <div class=\"p-3 rounded-xl bg-white\/[0.02] border border-white\/[0.06]\">\n <div class=\"flex items-center justify-between text-xs mb-1.5\">\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(lang.name)}\" oninput=\"updateLang(${idx}, 'name', this.value)\" class=\"px-2 py-0.5 rounded editorial-input w-28 font-semibold\" \/>`\n : `<span class=\"font-semibold\">${escapeHtml(lang.name)}<\/span>`\n }\n <div class=\"flex items-center gap-1.5\">\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(lang.level)}\" oninput=\"updateLang(${idx}, 'level', this.value)\" class=\"px-2 py-0.5 rounded editorial-input w-40 text-[11px]\" \/>\n <button onclick=\"removeLang(${idx})\" class=\"text-red-400 hover:text-red-300 p-1\"><i data-lucide=\"trash-2\" class=\"w-3.5 h-3.5\"><\/i><\/button>`\n : `<span class=\"text-[11px] font-mono text-theme-accent\">${escapeHtml(lang.level)}<\/span>`\n }\n <\/div>\n <\/div>\n <div class=\"w-full h-1.5 rounded-full bg-white\/10 overflow-hidden\">\n <div class=\"h-full bg-theme-accent rounded-full\" style=\"width: ${lang.percent || 90}%\"><\/div>\n <\/div>\n <\/div>\n `).join('');\n\n \/\/ Personal Matrix\n const personalGrid = document.getElementById('personalDetailsGrid');\n personalGrid.innerHTML = bioData.personalParticulars.map((item, idx) => `\n <div class=\"p-4 rounded-xl bg-white\/[0.02] border border-white\/[0.06] flex items-start gap-3.5\">\n <div class=\"w-9 h-9 rounded-lg bg-theme-muted border border-theme-accent flex items-center justify-center text-theme-accent shrink-0 mt-0.5\">\n <i data-lucide=\"${item.icon || 'bookmark'}\" class=\"w-4 h-4\"><\/i>\n <\/div>\n <div class=\"flex-1 min-w-0\">\n ${isEditMode\n ? `<div class=\"space-y-1.5\">\n <div class=\"flex items-center justify-between\">\n <input type=\"text\" value=\"${escapeHtml(item.label)}\" oninput=\"updatePersonalItem(${idx}, 'label', this.value)\" class=\"px-2 py-0.5 rounded text-[11px] font-mono uppercase editorial-input w-full mr-2\" \/>\n <button onclick=\"removePersonalItem(${idx})\" class=\"text-red-400 hover:text-red-300 p-1\"><i data-lucide=\"x\" class=\"w-3.5 h-3.5\"><\/i><\/button>\n <\/div>\n <input type=\"text\" value=\"${escapeHtml(item.value)}\" oninput=\"updatePersonalItem(${idx}, 'value', this.value)\" class=\"px-2 py-1 rounded text-xs editorial-input w-full font-medium\" \/>\n <\/div>`\n : `<p class=\"text-[11px] font-mono uppercase tracking-wider text-slate-400\">${escapeHtml(item.label)}<\/p>\n <p class=\"text-sm font-medium mt-0.5 break-words\">${escapeHtml(item.value)}<\/p>`\n }\n <\/div>\n <\/div>\n `).join('');\n\n \/\/ Timelines\n renderTimelineSection('experienceTimeline', bioData.experience, 'experience', 'bg-theme-accent');\n renderTimelineSection('educationTimeline', bioData.education, 'education', 'bg-emerald-400');\n\n \/\/ Philosophy & Skills\n document.getElementById('philosophyQuoteView').textContent = `\"${bioData.philosophy}\"`;\n document.getElementById('philosophyQuoteEdit').value = bioData.philosophy;\n\n const compContainer = document.getElementById('competenciesContainer');\n compContainer.innerHTML = bioData.competencies.map((tag, idx) => `\n <span class=\"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium bg-white\/[0.03] border border-white\/10 hover:border-theme-accent transition-all\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-theme-accent\"><\/span>\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(tag)}\" oninput=\"updateCompetency(${idx}, this.value)\" class=\"bg-transparent border-b border-theme-accent text-xs w-36 focus:outline-none\" \/>\n <button onclick=\"removeCompetency(${idx})\" class=\"text-red-400 ml-1 p-0.5\"><i data-lucide=\"x\" class=\"w-3 h-3\"><\/i><\/button>`\n : `<span>${escapeHtml(tag)}<\/span>`\n }\n <\/span>\n `).join('');\n\n \/\/ Contact Links\n const contactGrid = document.getElementById('contactLinksGrid');\n contactGrid.innerHTML = bioData.contacts.map((c, idx) => `\n <div class=\"p-4 rounded-xl bg-white\/[0.02] border border-white\/[0.06] flex items-center justify-between gap-3 hover:border-theme-accent transition-all\">\n <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n <div class=\"w-9 h-9 rounded-lg bg-white\/[0.04] border border-white\/10 flex items-center justify-center text-theme-accent shrink-0\">\n <i data-lucide=\"${c.icon || 'globe'}\" class=\"w-4 h-4\"><\/i>\n <\/div>\n <div class=\"min-w-0 flex-1\">\n <p class=\"text-[11px] font-mono uppercase tracking-wider text-slate-400\">${escapeHtml(c.label)}<\/p>\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(c.value)}\" oninput=\"updateContactField(${idx}, this.value)\" class=\"mt-1 px-2 py-1 rounded text-xs editorial-input w-full\" \/>`\n : `<p class=\"text-sm font-medium truncate\">${escapeHtml(c.value)}<\/p>`\n }\n <\/div>\n <\/div>\n <button onclick=\"handleContactAction('${escapeHtml(c.actionType)}', '${escapeHtml(c.value)}')\" class=\"p-2 rounded-lg bg-white\/[0.04] hover:bg-theme-accent hover:text-black transition-all shrink-0 no-print\" title=\"Action\">\n <i data-lucide=\"${c.actionType === 'copy' ? 'copy' : 'arrow-up-right'}\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n `).join('');\n\n lucide.createIcons();\n }\n\n function renderTimelineSection(containerId, list, type, dotColorClass) {\n const container = document.getElementById(containerId);\n container.innerHTML = list.map((item, idx) => `\n <div class=\"relative pl-6 group\">\n <span class=\"absolute left-0 top-1.5 w-3.5 h-3.5 rounded-full border-2 border-black ${dotColorClass}\"><\/span>\n <div class=\"p-4 rounded-xl bg-white\/[0.02] border border-white\/[0.06]\">\n ${isEditMode\n ? `<div class=\"space-y-2\">\n <div class=\"flex items-center justify-between gap-2\">\n <input type=\"text\" value=\"${escapeHtml(item.period)}\" oninput=\"updateTimelineItem('${type}', ${idx}, 'period', this.value)\" class=\"px-2 py-0.5 rounded text-[11px] font-mono editorial-input w-36\" \/>\n <button onclick=\"removeTimelineItem('${type}', ${idx})\" class=\"text-red-400 text-xs p-1\"><i data-lucide=\"trash-2\" class=\"w-3.5 h-3.5\"><\/i><\/button>\n <\/div>\n <input type=\"text\" value=\"${escapeHtml(item.role)}\" oninput=\"updateTimelineItem('${type}', ${idx}, 'role', this.value)\" class=\"px-2 py-1 rounded text-xs font-semibold editorial-input w-full\" \/>\n <input type=\"text\" value=\"${escapeHtml(item.org)}\" oninput=\"updateTimelineItem('${type}', ${idx}, 'org', this.value)\" class=\"px-2 py-1 rounded text-xs editorial-input w-full\" \/>\n <textarea rows=\"2\" oninput=\"updateTimelineItem('${type}', ${idx}, 'desc', this.value)\" class=\"px-2 py-1 rounded text-xs editorial-input w-full\">${escapeHtml(item.desc)}<\/textarea>\n <\/div>`\n : `<div class=\"flex flex-wrap items-center justify-between gap-1 mb-1\">\n <span class=\"text-[11px] font-mono text-theme-accent\">${escapeHtml(item.period)}<\/span>\n <span class=\"text-[11px] text-slate-400\">${escapeHtml(item.location || '')}<\/span>\n <\/div>\n <h4 class=\"font-display font-semibold text-sm\">${escapeHtml(item.role)}<\/h4>\n <p class=\"text-xs text-slate-300 font-medium mt-0.5\">${escapeHtml(item.org)}<\/p>\n <p class=\"text-xs text-slate-400 mt-2 leading-relaxed\">${escapeHtml(item.desc)}<\/p>`\n }\n <\/div>\n <\/div>\n `).join('');\n }\n\n \/\/ --- 4. LIVE CHANGING WITHOUT INPUT FOCUS BLURRING ---\n function updateHeroField(key, val) {\n bioData[key] = val;\n if (key === 'fullName') {\n document.getElementById('heroFullName').textContent = val;\n document.getElementById('portraitNameCaption').textContent = val;\n } else if (key === 'tagline') {\n document.getElementById('heroTitleTagline').textContent = val;\n } else if (key === 'location') {\n document.getElementById('heroLocation').textContent = val;\n } else if (key === 'statusBadge') {\n document.getElementById('heroStatusBadge').textContent = val;\n } else if (key === 'summaryBio') {\n document.getElementById('heroSummaryBio').textContent = val;\n }\n saveBioData();\n }\n\n function updateVitalItem(idx, val) {\n if (bioData.vitalSnapshot[idx]) {\n bioData.vitalSnapshot[idx].value = val;\n saveBioData();\n }\n }\n\n function updateLang(idx, key, val) {\n if (bioData.languages[idx]) {\n bioData.languages[idx][key] = val;\n saveBioData();\n }\n }\n\n function addLanguageItem() {\n bioData.languages.push({ id: 'l_' + Date.now(), name: \"New Language\", level: \"Professional\", percent: 85 });\n saveBioData();\n renderMainUI();\n }\n\n function removeLang(idx) {\n bioData.languages.splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updatePersonalItem(idx, key, val) {\n if (bioData.personalParticulars[idx]) {\n bioData.personalParticulars[idx][key] = val;\n saveBioData();\n }\n }\n\n function addPersonalField() {\n bioData.personalParticulars.push({ id: 'p_' + Date.now(), label: \"Attribute\", value: \"Custom Value\", icon: \"check-circle\" });\n saveBioData();\n renderMainUI();\n }\n\n function removePersonalItem(idx) {\n bioData.personalParticulars.splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updateTimelineItem(type, idx, key, val) {\n if (bioData[type] && bioData[type][idx]) {\n bioData[type][idx][key] = val;\n saveBioData();\n }\n }\n\n function addTimelineItem(type) {\n bioData[type].unshift({\n id: type + '_' + Date.now(),\n role: type === 'experience' ? \"Executive Position\" : \"Degree \/ Certification\",\n org: \"Organization Name\",\n period: \"2025 \u2014 Present\",\n location: \"Germany\",\n desc: \"Key impact and milestones achieved.\"\n });\n saveBioData();\n renderMainUI();\n }\n\n function removeTimelineItem(type, idx) {\n bioData[type].splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updatePhilosophy(val) {\n bioData.philosophy = val;\n document.getElementById('philosophyQuoteView').textContent = `\"${val}\"`;\n saveBioData();\n }\n\n function updateCompetency(idx, val) {\n bioData.competencies[idx] = val;\n saveBioData();\n }\n\n function addCompetencyTag() {\n bioData.competencies.push(\"New Focus Skill\");\n saveBioData();\n renderMainUI();\n }\n\n function removeCompetency(idx) {\n bioData.competencies.splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updateContactField(idx, val) {\n if (bioData.contacts[idx]) {\n bioData.contacts[idx].value = val;\n saveBioData();\n }\n }\n\n \/\/ --- 5. RENDER A4 PDF STAGING DATA ---\n function syncPdfStagingData() {\n document.getElementById('pdfFullName').textContent = bioData.fullName;\n document.getElementById('pdfTagline').textContent = bioData.tagline;\n document.getElementById('pdfLocationText').textContent = bioData.location;\n document.getElementById('pdfSummaryBio').textContent = bioData.summaryBio;\n document.getElementById('pdfPhilosophy').textContent = bioData.philosophy;\n document.getElementById('pdfPrintDate').textContent = `Generated: ${new Date().toISOString().slice(0, 10)}`;\n\n \/\/ Sync portrait img\n const pdfPortrait = document.getElementById('pdfPortraitImg');\n pdfPortrait.src = bioData.portraitDataUrl;\n\n \/\/ Sync Vitals\n document.getElementById('pdfVitalsList').innerHTML = bioData.vitalSnapshot.map(v => `\n <div class=\"flex items-center justify-between border-b border-slate-100 py-0.5\">\n <span class=\"text-slate-500 font-medium\">${escapeHtml(v.label)}<\/span>\n <span class=\"font-semibold text-slate-900\">${escapeHtml(v.value)}<\/span>\n <\/div>\n `).join('');\n\n \/\/ Sync Languages\n document.getElementById('pdfLanguagesList').innerHTML = bioData.languages.map(l => `\n <div class=\"border-b border-slate-100 py-0.5\">\n <div class=\"flex justify-between font-semibold\">\n <span>${escapeHtml(l.name)}<\/span>\n <span class=\"text-amber-700 font-mono text-[9px]\">${escapeHtml(l.level)}<\/span>\n <\/div>\n <\/div>\n `).join('');\n\n \/\/ Sync Contacts\n document.getElementById('pdfContactsList').innerHTML = bioData.contacts.map(c => `\n <div class=\"truncate py-0.5\">\n <span class=\"text-slate-500 font-mono text-[9px] uppercase block\">${escapeHtml(c.label)}:<\/span>\n <span class=\"font-medium text-slate-800\">${escapeHtml(c.value)}<\/span>\n <\/div>\n `).join('');\n\n \/\/ Sync Experience\n document.getElementById('pdfExperienceTimeline').innerHTML = bioData.experience.map(e => `\n <div>\n <div class=\"flex items-center justify-between font-mono text-[9.5px]\">\n <span class=\"font-bold text-slate-900\">${escapeHtml(e.role)}<\/span>\n <span class=\"text-amber-800 font-semibold\">${escapeHtml(e.period)}<\/span>\n <\/div>\n <div class=\"text-[10px] text-slate-600 font-medium\">${escapeHtml(e.org)} \u2022 ${escapeHtml(e.location || 'Germany')}<\/div>\n <p class=\"text-[10px] text-slate-700 mt-0.5\">${escapeHtml(e.desc)}<\/p>\n <\/div>\n `).join('');\n\n \/\/ Sync Education\n document.getElementById('pdfEducationTimeline').innerHTML = bioData.education.map(ed => `\n <div>\n <div class=\"flex items-center justify-between font-mono text-[9.5px]\">\n <span class=\"font-bold text-slate-900\">${escapeHtml(ed.role)}<\/span>\n <span class=\"text-amber-800 font-semibold\">${escapeHtml(ed.period)}<\/span>\n <\/div>\n <div class=\"text-[10px] text-slate-600 font-medium\">${escapeHtml(ed.org)}<\/div>\n <p class=\"text-[10px] text-slate-700 mt-0.5\">${escapeHtml(ed.desc)}<\/p>\n <\/div>\n `).join('');\n\n \/\/ Sync Competencies\n document.getElementById('pdfCompetenciesContainer').innerHTML = bioData.competencies.map(c => `\n <span class=\"px-2 py-0.5 rounded bg-slate-100 border border-slate-200 text-slate-800 text-[9.5px] font-medium\">\n \u2022 ${escapeHtml(c)}\n <\/span>\n `).join('');\n }\n\n \/\/ --- 6. RELIABLE PDF GENERATION & PREVIEW ---\n function openPdfPreviewModal() {\n syncPdfStagingData();\n const modal = document.getElementById('pdfPreviewModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n lucide.createIcons();\n }\n\n function closePdfPreviewModal() {\n const modal = document.getElementById('pdfPreviewModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n async function generatePdfWithJsPdf() {\n const btn = document.getElementById('btnGeneratePdf');\n const label = document.getElementById('btnGeneratePdfLabel');\n const originalText = label.textContent;\n\n try {\n label.textContent = \"Rendering...\";\n btn.disabled = true;\n\n syncPdfStagingData();\n const element = document.getElementById('printDossierRoot');\n\n const portrait = document.getElementById('pdfPortraitImg');\n if (!portrait.complete) {\n await new Promise(resolve => { portrait.onload = resolve; });\n }\n\n const canvas = await html2canvas(element, {\n scale: 2,\n useCORS: true,\n allowTaint: true,\n logging: false,\n scrollY: 0,\n scrollX: 0,\n backgroundColor: '#ffffff'\n });\n\n label.textContent = \"Saving...\";\n\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF('p', 'mm', 'a4');\n const pdfWidth = pdf.internal.pageSize.getWidth();\n const pdfHeight = (canvas.height * pdfWidth) \/ canvas.width;\n\n const imgData = canvas.toDataURL('image\/jpeg', 0.98);\n pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);\n\n pdf.save('srabons-de-biodata.pdf');\n showToast(\"PDF downloaded successfully!\", \"success\");\n } catch (err) {\n console.error(\"PDF generation failure:\", err);\n showToast(\"Direct render failed. Switching to browser print...\", \"error\");\n setTimeout(window.print, 500);\n } finally {\n label.textContent = originalText;\n btn.disabled = false;\n }\n }\n\n function printViaBrowser() {\n syncPdfStagingData();\n window.print();\n }\n\n \/\/ --- 7. THEME SWITCHING ENGINE ---\n function changeTheme(themeClass) {\n if (!themeClass) return;\n const html = document.documentElement;\n html.classList.remove('theme-obsidian', 'theme-nordic', 'theme-linen', 'theme-cobalt', 'theme-emerald');\n html.classList.add(themeClass);\n localStorage.setItem('srabons_theme_choice', themeClass);\n const sel = document.getElementById('themeSelector');\n if (sel) sel.value = themeClass;\n showToast(`Theme switched to ${themeClass.replace('theme-', '').toUpperCase()}`, \"info\");\n }\n window.changeTheme = changeTheme;\n\n \/\/ --- 8. INLINE LIVE PROFILE EDITOR TOGGLE ---\n function toggleEditMode() {\n isEditMode = !isEditMode;\n const banner = document.getElementById('editBanner');\n const label = document.getElementById('editModeLabel');\n const heroView = document.getElementById('heroViewMode');\n const heroEdit = document.getElementById('heroEditMode');\n const editOnlyBtns = document.querySelectorAll('.edit-only');\n\n if (isEditMode) {\n banner.classList.remove('hidden');\n label.textContent = 'Finish Editing';\n heroView.classList.add('hidden');\n heroEdit.classList.remove('hidden');\n editOnlyBtns.forEach(b => { b.classList.remove('hidden'); b.classList.add('inline-flex'); });\n showToast(\"Live Edit Mode active.\", \"info\");\n } else {\n banner.classList.add('hidden');\n label.textContent = 'Edit Profile';\n heroView.classList.remove('hidden');\n heroEdit.classList.add('hidden');\n editOnlyBtns.forEach(b => { b.classList.add('hidden'); b.classList.remove('inline-flex'); });\n saveBioData();\n showToast(\"All profile changes saved.\", \"success\");\n }\n renderMainUI();\n }\n\n \/\/ --- 9. PHOTO STUDIO & CROP ENGINE ---\n function triggerFileInput() {\n document.getElementById('photoFileInput').click();\n }\n\n function handleFileSelect(e) {\n const file = e.target.files[0];\n if (!file) return;\n loadCropFile(file);\n }\n\n function handleDragOver(e) {\n e.preventDefault();\n document.getElementById('dropZone').classList.add('border-theme-accent', 'bg-theme-muted');\n }\n\n function handleDragLeave(e) {\n e.preventDefault();\n document.getElementById('dropZone').classList.remove('border-theme-accent', 'bg-theme-muted');\n }\n\n function handleDrop(e) {\n e.preventDefault();\n document.getElementById('dropZone').classList.remove('border-theme-accent', 'bg-theme-muted');\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n loadCropFile(e.dataTransfer.files[0]);\n }\n }\n\n function loadCropFile(file) {\n if (!file.type.startsWith('image\/')) {\n showToast(\"Please upload an image file (JPG, PNG, WebP).\", \"error\");\n return;\n }\n if (file.size > 5 * 1024 * 1024) {\n showToast(\"File size exceeds 5MB limit.\", \"error\");\n return;\n }\n const reader = new FileReader();\n reader.onload = function(evt) {\n cropImg = new Image();\n cropImg.onload = function() {\n openCropModal();\n };\n cropImg.src = evt.target.result;\n };\n reader.readAsDataURL(file);\n }\n\n function openCropModalWithCurrent() {\n cropImg = new Image();\n cropImg.onload = function() {\n openCropModal();\n };\n cropImg.src = bioData.portraitDataUrl;\n }\n\n function openCropModal() {\n cropScale = 1;\n cropX = 0;\n cropY = 0;\n cropFilter = 'none';\n document.getElementById('cropZoomSlider').value = 1;\n setCropFilter('none');\n const modal = document.getElementById('cropModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n setupCropCanvasEvents();\n drawCropCanvas();\n lucide.createIcons();\n }\n\n function closeCropModal() {\n const modal = document.getElementById('cropModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n function handleCropZoom(val) {\n cropScale = parseFloat(val);\n drawCropCanvas();\n }\n\n function setCropFilter(filter) {\n cropFilter = filter;\n ['none', 'noir', 'warm'].forEach(f => {\n const btn = document.getElementById('filterBtn-' + f);\n if (btn) {\n if (f === filter) {\n btn.className = \"px-2.5 py-1 rounded text-xs font-medium bg-theme-accent\";\n } else {\n btn.className = \"px-2.5 py-1 rounded text-xs font-medium bg-white\/5 text-slate-300\";\n }\n }\n });\n drawCropCanvas();\n }\n\n function resetCropTransform() {\n cropScale = 1;\n cropX = 0;\n cropY = 0;\n document.getElementById('cropZoomSlider').value = 1;\n drawCropCanvas();\n }\n\n function setupCropCanvasEvents() {\n const canvas = document.getElementById('cropCanvas');\n canvas.onmousedown = (e) => {\n isDragging = true;\n dragStartX = e.clientX - cropX;\n dragStartY = e.clientY - cropY;\n };\n window.onmousemove = (e) => {\n if (!isDragging) return;\n cropX = e.clientX - dragStartX;\n cropY = e.clientY - dragStartY;\n drawCropCanvas();\n };\n window.onmouseup = () => { isDragging = false; };\n\n \/\/ Touch events for mobile\n canvas.ontouchstart = (e) => {\n if (e.touches.length === 1) {\n isDragging = true;\n dragStartX = e.touches[0].clientX - cropX;\n dragStartY = e.touches[0].clientY - cropY;\n }\n };\n canvas.ontouchmove = (e) => {\n if (!isDragging || e.touches.length !== 1) return;\n e.preventDefault();\n cropX = e.touches[0].clientX - dragStartX;\n cropY = e.touches[0].clientY - dragStartY;\n drawCropCanvas();\n };\n canvas.ontouchend = () => { isDragging = false; };\n }\n\n function drawCropCanvas() {\n const canvas = document.getElementById('cropCanvas');\n const ctx = canvas.getContext('2d');\n const w = canvas.width;\n const h = canvas.height;\n\n ctx.clearRect(0, 0, w, h);\n ctx.fillStyle = '#0a0a0c';\n ctx.fillRect(0, 0, w, h);\n\n if (cropImg && cropImg.complete) {\n ctx.save();\n if (cropFilter === 'noir') {\n ctx.filter = 'grayscale(100%) contrast(110%)';\n } else if (cropFilter === 'warm') {\n ctx.filter = 'sepia(25%) contrast(105%) brightness(102%)';\n } else {\n ctx.filter = 'none';\n }\n\n const imgRatio = cropImg.width \/ cropImg.height;\n const targetRatio = w \/ h;\n let drawW, drawH;\n\n if (imgRatio > targetRatio) {\n drawH = h * cropScale;\n drawW = drawH * imgRatio;\n } else {\n drawW = w * cropScale;\n drawH = drawW \/ imgRatio;\n }\n\n const cx = (w - drawW) \/ 2 + cropX;\n const cy = (h - drawH) \/ 2 + cropY;\n ctx.drawImage(cropImg, cx, cy, drawW, drawH);\n ctx.restore();\n\n \/\/ Rule of thirds overlay\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(w \/ 3, 0); ctx.lineTo(w \/ 3, h);\n ctx.moveTo((w \/ 3) * 2, 0); ctx.lineTo((w \/ 3) * 2, h);\n ctx.moveTo(0, h \/ 3); ctx.lineTo(w, h \/ 3);\n ctx.moveTo(0, (h \/ 3) * 2); ctx.lineTo(w, (h \/ 3) * 2);\n ctx.stroke();\n }\n }\n\n function applyCroppedPortrait() {\n const canvas = document.getElementById('cropCanvas');\n \/\/ Produce high-res version for bioData\n const finalCanvas = document.createElement('canvas');\n finalCanvas.width = 640;\n finalCanvas.height = 800;\n const fCtx = finalCanvas.getContext('2d');\n\n fCtx.drawImage(canvas, 0, 0, 640, 800);\n const dataUrl = finalCanvas.toDataURL('image\/jpeg', 0.92);\n\n bioData.portraitDataUrl = dataUrl;\n saveBioData();\n renderMainUI();\n closeCropModal();\n showToast(\"Portrait updated successfully!\", \"success\");\n }\n\n \/\/ --- 10. CLOUD INTEGRATION (GDRIVE & DROPBOX) ---\n function openCloudSettingsModal() {\n document.getElementById('gdriveTokenInput').value = cloudConfig.gdriveToken;\n document.getElementById('gdriveFolderInput').value = cloudConfig.gdriveFolder;\n document.getElementById('dropboxTokenInput').value = cloudConfig.dropboxToken;\n document.getElementById('dropboxPathInput').value = cloudConfig.dropboxPath;\n const modal = document.getElementById('cloudSettingsModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n }\n\n function closeCloudSettingsModal() {\n const modal = document.getElementById('cloudSettingsModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n function saveCloudSettings() {\n cloudConfig.gdriveToken = document.getElementById('gdriveTokenInput').value.trim();\n cloudConfig.gdriveFolder = document.getElementById('gdriveFolderInput').value.trim();\n cloudConfig.dropboxToken = document.getElementById('dropboxTokenInput').value.trim();\n cloudConfig.dropboxPath = document.getElementById('dropboxPathInput').value.trim();\n\n sessionStorage.setItem('srabons_gdrive_tok', cloudConfig.gdriveToken);\n sessionStorage.setItem('srabons_gdrive_fol', cloudConfig.gdriveFolder);\n sessionStorage.setItem('srabons_dbox_tok', cloudConfig.dropboxToken);\n sessionStorage.setItem('srabons_dbox_pth', cloudConfig.dropboxPath);\n\n const dot = document.getElementById('cloudStatusDot');\n if (cloudConfig.gdriveToken || cloudConfig.dropboxToken) {\n dot.className = \"w-1.5 h-1.5 rounded-full bg-emerald-400\";\n dot.title = \"Live token configured\";\n } else {\n dot.className = \"w-1.5 h-1.5 rounded-full bg-amber-400\";\n dot.title = \"Simulated mode active\";\n }\n\n closeCloudSettingsModal();\n showToast(\"Cloud settings saved for session.\", \"success\");\n }\n\n async function uploadPhotoToCloud(provider) {\n const box = document.getElementById('cloudStatusBox');\n const title = document.getElementById('cloudStatusTitle');\n const pct = document.getElementById('cloudStatusPercent');\n const bar = document.getElementById('cloudProgressBar');\n const detail = document.getElementById('cloudStatusDetail');\n\n box.classList.remove('hidden');\n const provName = provider === 'gdrive' ? 'Google Drive' : 'Dropbox';\n title.innerHTML = `<i data-lucide=\"loader-2\" class=\"w-3.5 h-3.5 animate-spin text-theme-accent\"><\/i> Uploading to ${provName}...`;\n lucide.createIcons();\n\n \/\/ Convert dataUrl to blob\n const res = await fetch(bioData.portraitDataUrl);\n const blob = await res.blob();\n\n \/\/ Simulation with progress steps\n for (let p = 15; p <= 90; p += 25) {\n pct.textContent = p + '%';\n bar.style.width = p + '%';\n detail.textContent = `Streaming chunks (${(blob.size \/ 1024).toFixed(1)} KB)...`;\n await new Promise(r => setTimeout(r, 220));\n }\n\n \/\/ Check for live token or simulate\n if (provider === 'dropbox' && cloudConfig.dropboxToken) {\n try {\n const resp = await fetch('https:\/\/content.dropboxapi.com\/2\/files\/upload', {\n method: 'POST',\n headers: {\n 'Authorization': 'Bearer ' + cloudConfig.dropboxToken,\n 'Dropbox-API-Arg': JSON.stringify({\n path: cloudConfig.dropboxPath || '\/srabons-bio\/portrait.png',\n mode: 'overwrite',\n autorename: true,\n mute: false\n }),\n 'Content-Type': 'application\/octet-stream'\n },\n body: blob\n });\n if (!resp.ok) throw new Error(\"Dropbox API Error: \" + resp.statusText);\n } catch (err) {\n showToast(\"Live Dropbox upload error. Ensure token has files.content.write scope.\", \"error\");\n }\n }\n\n pct.textContent = '100%';\n bar.style.width = '100%';\n detail.textContent = 'Synced successfully at ' + new Date().toLocaleTimeString();\n title.innerHTML = `<i data-lucide=\"check-circle\" class=\"w-3.5 h-3.5 text-emerald-400\"><\/i> Uploaded to ${provName}`;\n lucide.createIcons();\n showToast(`Portrait backed up to ${provName}!`, \"success\");\n\n setTimeout(() => {\n box.classList.add('hidden');\n bar.style.width = '0%';\n }, 4000);\n }\n\n \/\/ --- 11. EXPORTS & DIRECT ACTIONS ---\n function handleContactAction(type, val) {\n if (type === 'copy') {\n const temp = document.createElement('textarea');\n temp.value = val;\n document.body.appendChild(temp);\n temp.select();\n document.execCommand('copy');\n document.body.removeChild(temp);\n showToast(`Copied \"${val}\" to clipboard!`, \"success\");\n } else if (type === 'url') {\n const url = val.startsWith('http') ? val : 'https:\/\/' + val;\n window.open(url, '_blank');\n }\n }\n\n function downloadVCard() {\n const vcard = [\n \"BEGIN:VCARD\",\n \"VERSION:3.0\",\n `FN:${bioData.fullName}`,\n `TITLE:${bioData.tagline}`,\n \"EMAIL;TYPE=INTERNET:connect@srabons.de\",\n \"URL:https:\/\/srabons.de\",\n \"ADR;TYPE=HOME:;;G\u00f6ttingen;Lower Saxony;;Germany\",\n `NOTE:${bioData.summaryBio.replace(\/\\n\/g, ' ')}`,\n \"END:VCARD\"\n ].join(\"\\r\\n\");\n\n const blob = new Blob([vcard], { type: 'text\/vcard;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute('download', 'srabon-debnath.vcf');\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n showToast(\"vCard downloaded!\", \"success\");\n }\n\n function exportBioDataJSON() {\n const jsonStr = JSON.stringify(bioData, null, 2);\n const blob = new Blob([jsonStr], { type: 'application\/json' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute('download', 'srabon-debnath-biodata.json');\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n showToast(\"Bio-data JSON exported!\", \"success\");\n }\n\n \/\/ --- 12. TAB FILTERS ---\n function filterSections(category) {\n document.querySelectorAll('.tab-btn').forEach(btn => {\n if (btn.dataset.tab === category) {\n btn.className = \"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent\";\n } else {\n btn.className = \"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\";\n }\n });\n\n const sections = document.querySelectorAll('[data-section]');\n sections.forEach(sec => {\n if (category === 'all' || sec.dataset.section === category) {\n sec.classList.remove('hidden');\n } else {\n sec.classList.add('hidden');\n }\n });\n }\n\n \/\/ --- 13. RESET DEFAULTS ---\n function openResetModal() {\n const modal = document.getElementById('resetModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n }\n\n function closeResetModal() {\n const modal = document.getElementById('resetModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n function confirmResetToDefaults() {\n localStorage.removeItem('srabons_biodata_v4');\n localStorage.removeItem('srabons_biodata_v3');\n bioData = JSON.parse(JSON.stringify(DEFAULT_DATA));\n renderMainUI();\n closeResetModal();\n showToast(\"Profile reset to original defaults.\", \"info\");\n }\n\n \/\/ --- 14. TOAST NOTIFICATION UTILITY ---\n function showToast(msg, type = \"info\") {\n const container = document.getElementById('toastContainer');\n const toast = document.createElement('div');\n const icon = type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info';\n const borderColor = type === 'success' ? 'border-emerald-500\/40 text-emerald-300' : type === 'error' ? 'border-red-500\/40 text-red-300' : 'border-theme-accent text-slate-200';\n\n toast.className = `p-3 rounded-xl border ${borderColor} bg-black\/90 backdrop-blur-md shadow-2xl flex items-center gap-2.5 text-xs transition-all duration-300 translate-y-3 opacity-0`;\n toast.innerHTML = `<i data-lucide=\"${icon}\" class=\"w-4 h-4 shrink-0\"><\/i><span>${escapeHtml(msg)}<\/span>`;\n container.appendChild(toast);\n lucide.createIcons();\n\n setTimeout(() => {\n toast.classList.remove('translate-y-3', 'opacity-0');\n }, 20);\n\n setTimeout(() => {\n toast.classList.add('opacity-0', 'translate-x-4');\n setTimeout(() => toast.remove(), 300);\n }, 3500);\n }\n\n \/\/ --- 15. INITIALIZATION ---\n window.onload = function() {\n \/\/ Restore saved theme\n const savedTheme = localStorage.getItem('srabons_theme_choice') || 'theme-obsidian';\n changeTheme(savedTheme);\n\n \/\/ Render UI\n renderMainUI();\n\n \/\/ Setup drag-and-drop\n const dropZone = document.getElementById('dropZone');\n if (dropZone) {\n dropZone.addEventListener('dragover', handleDragOver);\n dropZone.addEventListener('dragleave', handleDragLeave);\n dropZone.addEventListener('drop', handleDrop);\n }\n };\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>srabons.de \u2014 Srabon Debnath | Personal Bio-Data & Executive Profile S. srabons.de Bio Dossier Personal Bio-Data & Executive Profile Obsidian GoldNordic MinimalistWarm Linen SandNeo-Slate CobaltEmerald Velvet Edit Profile Cloud Download PDF Live Edit Mode: Edit any field directly below. All changes update in real time and auto-save. Reset Defaults Finish Editing All Overview Personal Details […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kb_optimizer_status":1,"footnotes":""},"class_list":["post-1014","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/comments?post=1014"}],"version-history":[{"count":2,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1014\/revisions"}],"predecessor-version":[{"id":1017,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1014\/revisions\/1017"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=1014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1014,"date":"2026-10-25T19:04:22","date_gmt":"2026-10-25T19:04:22","guid":{"rendered":"https:\/\/srabons.de\/?page_id=1014"},"modified":"2026-10-25T19:40:15","modified_gmt":"2026-10-25T19:40:15","slug":"bio-data","status":"publish","type":"page","link":"https:\/\/srabons.de\/en\/bio-data\/","title":{"rendered":"Bio-Data"},"content":{"rendered":"\n\n\n\n \n \n srabons.de \u2014 Srabon Debnath | Personal Bio-Data & Executive Profile<\/title>\n\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n\n \n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\n\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n display: ['Plus Jakarta Sans', 'sans-serif'],\n serif: ['Cormorant Garamond', 'serif'],\n mono: ['JetBrains Mono', 'monospace'],\n }\n }\n }\n }\n <\/script>\n\n <style>\n \/* =========================================================================\n THEME COLOR DEFINITIONS (5 Refined Aesthetic Profiles)\n ========================================================================= *\/\n :root, html.theme-obsidian {\n --bg-body: #0d0e11;\n --bg-surface: #15161c;\n --bg-surface-elevated: #1d1e26;\n --border-subtle: rgba(255, 255, 255, 0.08);\n --border-hover: rgba(212, 175, 55, 0.35);\n --text-main: #f4f4f6;\n --text-muted: #94a3b8;\n --accent: #d4af37;\n --accent-muted: rgba(212, 175, 55, 0.12);\n --accent-contrast: #0d0e11;\n --status-dot: #10b981;\n }\n\n html.theme-nordic {\n --bg-body: #f8fafc;\n --bg-surface: #ffffff;\n --bg-surface-elevated: #f1f5f9;\n --border-subtle: rgba(15, 23, 42, 0.08);\n --border-hover: rgba(15, 23, 42, 0.3);\n --text-main: #0f172a;\n --text-muted: #64748b;\n --accent: #1e293b;\n --accent-muted: rgba(30, 41, 59, 0.08);\n --accent-contrast: #ffffff;\n --status-dot: #0ea5e9;\n }\n\n html.theme-linen {\n --bg-body: #f7f4ed;\n --bg-surface: #ffffff;\n --bg-surface-elevated: #efeae0;\n --border-subtle: rgba(90, 70, 50, 0.12);\n --border-hover: rgba(180, 83, 9, 0.4);\n --text-main: #292524;\n --text-muted: #78716c;\n --accent: #b45309;\n --accent-muted: rgba(180, 83, 9, 0.1);\n --accent-contrast: #ffffff;\n --status-dot: #15803d;\n }\n\n html.theme-cobalt {\n --bg-body: #070d17;\n --bg-surface: #0e1726;\n --bg-surface-elevated: #16243b;\n --border-subtle: rgba(56, 189, 248, 0.12);\n --border-hover: rgba(56, 189, 248, 0.4);\n --text-main: #f0f6fc;\n --text-muted: #8ba2c4;\n --accent: #38bdf8;\n --accent-muted: rgba(56, 189, 248, 0.15);\n --accent-contrast: #070d17;\n --status-dot: #38bdf8;\n }\n\n html.theme-emerald {\n --bg-body: #06140f;\n --bg-surface: #0b1f17;\n --bg-surface-elevated: #112d22;\n --border-subtle: rgba(52, 211, 153, 0.15);\n --border-hover: rgba(52, 211, 153, 0.45);\n --text-main: #ecfdf5;\n --text-muted: #86efac;\n --accent: #10b981;\n --accent-muted: rgba(16, 185, 129, 0.16);\n --accent-contrast: #04100c;\n --status-dot: #34d399;\n }\n\n \/* Core UI Elements *\/\n body {\n background-color: var(--bg-body);\n color: var(--text-main);\n font-family: 'Inter', sans-serif;\n transition: background-color 0.25s ease, color 0.25s ease;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n }\n\n .editorial-card {\n background-color: var(--bg-surface);\n border: 1px solid var(--border-subtle);\n transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;\n }\n .editorial-card:hover {\n border-color: var(--border-hover);\n }\n\n .editorial-input {\n background-color: var(--bg-surface-elevated);\n border: 1px solid var(--border-subtle);\n color: var(--text-main);\n transition: all 0.2s ease;\n }\n .editorial-input:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 0 0 2px var(--accent-muted);\n }\n\n .text-theme-accent { color: var(--accent); }\n .bg-theme-accent { background-color: var(--accent); color: var(--accent-contrast); }\n .bg-theme-muted { background-color: var(--accent-muted); }\n .border-theme-accent { border-color: var(--accent); }\n\n .section-mono-tag {\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.68rem;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--accent);\n }\n\n \/* Interactive Canvas Styling *\/\n #cropCanvas {\n cursor: grab;\n touch-action: none;\n }\n #cropCanvas:active {\n cursor: grabbing;\n }\n\n \/* Scrollbars *\/\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n ::-webkit-scrollbar-track { background: var(--bg-body); }\n ::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.25); border-radius: 999px; }\n ::-webkit-scrollbar-thumb:hover { background: var(--accent); }\n\n \/* =========================================================================\n EXECUTIVE A4 PRINT STYLESHEET (For Selectable Vector PDFs via Print)\n ========================================================================= *\/\n @media print {\n @page {\n size: A4 portrait;\n margin: 10mm 12mm;\n }\n * {\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !important;\n }\n body {\n background: #ffffff !important;\n color: #0f172a !important;\n font-size: 9pt !important;\n line-height: 1.4 !important;\n }\n .no-print, header, footer, #toastContainer, #editBanner, #cropModal, #cloudSettingsModal, #pdfPreviewModal, #resetModal {\n display: none !important;\n }\n #printDossierRoot {\n display: block !important;\n background: #ffffff !important;\n color: #0f172a !important;\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n box-shadow: none !important;\n border: none !important;\n }\n .main-app-content {\n display: none !important;\n }\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen\">\n\n \n <div id=\"toastContainer\" class=\"fixed bottom-5 right-5 z-50 flex flex-col gap-2.5 max-w-sm w-full pointer-events-none px-4 sm:px-0 no-print\"><\/div>\n\n \n <header class=\"sticky top-0 z-30 backdrop-blur-xl border-b transition-colors no-print\" style=\"background-color: color-mix(in srgb, var(--bg-body) 85%, transparent); border-color: var(--border-subtle);\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between gap-2 sm:gap-4\">\n \n \n <a href=\"#top\" class=\"flex items-center gap-2.5 group focus:outline-none\">\n <div class=\"w-9 h-9 rounded-lg flex items-center justify-center font-display font-bold text-sm tracking-wider transition-transform group-hover:scale-105 border border-theme-accent bg-theme-muted text-theme-accent\">\n S.\n <\/div>\n <div class=\"flex flex-col\">\n <div class=\"flex items-center gap-1.5\">\n <span class=\"font-display font-semibold tracking-tight text-base\">srabons<span class=\"text-theme-accent\">.de<\/span><\/span>\n <span class=\"hidden sm:inline-block text-[10px] font-mono uppercase tracking-widest px-1.5 py-0.5 rounded border border-white\/10 text-slate-400\">Bio Dossier<\/span>\n <\/div>\n <span class=\"text-[11px] text-slate-400 hidden md:block\">Personal Bio-Data & Executive Profile<\/span>\n <\/div>\n <\/a>\n\n \n <div class=\"flex items-center gap-1.5 sm:gap-2.5\">\n \n \n <div class=\"relative\">\n <select id=\"themeSelector\" onchange=\"changeTheme(this.value)\" class=\"text-xs font-medium py-1.5 pl-2.5 pr-7 rounded-lg editorial-input cursor-pointer appearance-none focus:outline-none\">\n <option value=\"theme-obsidian\">Obsidian Gold<\/option>\n <option value=\"theme-nordic\">Nordic Minimalist<\/option>\n <option value=\"theme-linen\">Warm Linen Sand<\/option>\n <option value=\"theme-cobalt\">Neo-Slate Cobalt<\/option>\n <option value=\"theme-emerald\">Emerald Velvet<\/option>\n <\/select>\n <i data-lucide=\"palette\" class=\"w-3.5 h-3.5 absolute right-2.5 top-1\/2 -translate-y-1\/2 pointer-events-none text-slate-400\"><\/i>\n <\/div>\n\n \n <button id=\"editModeBtn\" onclick=\"toggleEditMode()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent transition-all bg-white\/[0.02]\" style=\"border-color: var(--border-subtle);\">\n <i data-lucide=\"pen-line\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n <span id=\"editModeLabel\" class=\"hidden sm:inline\">Edit Profile<\/span>\n <\/button>\n\n \n <button onclick=\"openCloudSettingsModal()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent transition-all bg-white\/[0.02]\" style=\"border-color: var(--border-subtle);\" title=\"Configure Google Drive & Dropbox\">\n <i data-lucide=\"cloud-cog\" class=\"w-3.5 h-3.5 text-emerald-400\"><\/i>\n <span class=\"hidden md:inline\">Cloud<\/span>\n <span id=\"cloudStatusDot\" class=\"w-1.5 h-1.5 rounded-full bg-amber-400\" title=\"Simulated mode active\"><\/span>\n <\/button>\n\n \n <button onclick=\"openPdfPreviewModal()\" class=\"flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg text-xs font-semibold bg-theme-accent shadow-sm hover:opacity-90 transition-all\">\n <i data-lucide=\"file-down\" class=\"w-3.5 h-3.5\"><\/i>\n <span>Download PDF<\/span>\n <\/button>\n <\/div>\n <\/div>\n <\/header>\n\n \n <div id=\"editBanner\" class=\"hidden bg-theme-muted border-b border-theme-accent py-2.5 px-4 no-print transition-all\">\n <div class=\"max-w-7xl mx-auto flex flex-wrap items-center justify-between gap-2 text-xs\">\n <div class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-theme-accent animate-pulse\"><\/span>\n <span class=\"font-semibold text-theme-accent\">Live Edit Mode:<\/span>\n <span>Edit any field directly below. All changes update in real time and auto-save.<\/span>\n <\/div>\n <div class=\"flex items-center gap-2\">\n <button onclick=\"openResetModal()\" class=\"px-2.5 py-1 rounded border border-red-400\/40 bg-red-500\/10 text-red-400 hover:bg-red-500\/20\">\n Reset Defaults\n <\/button>\n <button onclick=\"toggleEditMode()\" class=\"px-3 py-1 rounded bg-theme-accent font-semibold\">\n Finish Editing\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 main-app-content\">\n\n \n <div class=\"flex items-center justify-between flex-wrap gap-4 mb-8 no-print\">\n <div class=\"flex items-center gap-1.5 overflow-x-auto pb-1 sm:pb-0 w-full sm:w-auto\" role=\"tablist\">\n <button onclick=\"filterSections('all')\" data-tab=\"all\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent\">\n All Overview\n <\/button>\n <button onclick=\"filterSections('personal')\" data-tab=\"personal\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Personal Details\n <\/button>\n <button onclick=\"filterSections('timeline')\" data-tab=\"timeline\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Career & Education\n <\/button>\n <button onclick=\"filterSections('competencies')\" data-tab=\"competencies\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Philosophy & Skills\n <\/button>\n <button onclick=\"filterSections('contact')\" data-tab=\"contact\" class=\"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\">\n Contact & Exports\n <\/button>\n <\/div>\n\n <div class=\"hidden lg:flex items-center gap-2 text-xs font-mono text-slate-400\">\n <i data-lucide=\"shield-check\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n <span>OFFICIAL DOSSIER \u2022 VERIFIED<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8\">\n\n \n <aside class=\"lg:col-span-4 flex flex-col gap-6\">\n\n \n <section class=\"editorial-card rounded-2xl p-5 sm:p-6 relative\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"section-mono-tag flex items-center gap-1.5\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-theme-accent\"><\/span>\n 01 \/ PORTRAIT STUDIO\n <\/span>\n <span class=\"text-[10px] font-mono text-slate-400 px-2 py-0.5 rounded bg-white\/[0.04] border border-white\/10 no-print\">\n 800\u00d71000px\n <\/span>\n <\/div>\n\n \n <div class=\"relative group mx-auto max-w-[280px] w-full aspect-[4\/5] rounded-xl overflow-hidden border border-white\/10 bg-black\/40 shadow-xl\">\n <img decoding=\"async\" id=\"profilePortraitImg\" src=\"\" alt=\"Srabon Debnath Portrait\" class=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\" \/>\n\n \n <div class=\"absolute inset-0 bg-gradient-to-t from-black\/80 via-transparent to-transparent opacity-60 pointer-events-none no-print\"><\/div>\n <div class=\"absolute bottom-3 left-3 right-3 flex items-end justify-between text-white pointer-events-none no-print\">\n <div>\n <p class=\"text-[10px] font-mono uppercase tracking-widest text-theme-accent\">SRABONS.DE<\/p>\n <p class=\"text-xs font-medium\" id=\"portraitNameCaption\">Srabon Debnath<\/p>\n <\/div>\n <span class=\"text-[10px] font-mono px-2 py-0.5 rounded bg-black\/60 backdrop-blur-md border border-white\/20\">Verified<\/span>\n <\/div>\n\n \n <div class=\"absolute inset-0 bg-black\/80 backdrop-blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col items-center justify-center p-4 text-center gap-3 no-print\">\n <div class=\"w-10 h-10 rounded-full bg-theme-muted border border-theme-accent flex items-center justify-center text-theme-accent\">\n <i data-lucide=\"camera\" class=\"w-5 h-5\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm font-semibold text-white\">Update Portrait<\/p>\n <p class=\"text-xs text-slate-300\">JPG, PNG, WebP (Max 5MB)<\/p>\n <\/div>\n <div class=\"flex items-center gap-2 mt-1\">\n <button onclick=\"triggerFileInput()\" class=\"px-3 py-1.5 rounded-lg bg-theme-accent text-xs font-semibold\">\n Upload Photo\n <\/button>\n <button onclick=\"openCropModalWithCurrent()\" class=\"px-3 py-1.5 rounded-lg bg-white\/10 text-white hover:bg-white\/20 text-xs border border-white\/20\">\n Crop \/ Filter\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <input type=\"file\" id=\"photoFileInput\" accept=\"image\/jpeg,image\/png,image\/webp\" class=\"hidden\" onchange=\"handleFileSelect(event)\" \/>\n\n \n <div id=\"dropZone\"\n onclick=\"triggerFileInput()\"\n ondragover=\"handleDragOver(event)\"\n ondragleave=\"handleDragLeave(event)\"\n ondrop=\"handleDrop(event)\"\n class=\"mt-4 border border-dashed border-white\/20 hover:border-theme-accent rounded-xl p-3 text-center cursor-pointer transition-all bg-white\/[0.01] hover:bg-theme-muted no-print\">\n <div class=\"flex items-center justify-center gap-2 text-xs\">\n <i data-lucide=\"upload-cloud\" class=\"w-4 h-4 text-theme-accent\"><\/i>\n <span>Drop portrait or <span class=\"text-theme-accent underline\">browse<\/span><\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"mt-5 pt-4 border-t border-white\/[0.08] no-print\">\n <div class=\"flex items-center justify-between mb-2.5\">\n <span class=\"text-[11px] font-mono uppercase tracking-wider text-slate-400 flex items-center gap-1.5\">\n <i data-lucide=\"cloud\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n Cloud Portrait Backup\n <\/span>\n <button onclick=\"openCloudSettingsModal()\" class=\"text-[11px] text-theme-accent hover:underline font-mono\">\n API Config\n <\/button>\n <\/div>\n\n \n <div class=\"grid grid-cols-2 gap-2\">\n <button onclick=\"uploadPhotoToCloud('gdrive')\" class=\"flex items-center justify-center gap-2 py-2 px-3 rounded-xl text-xs font-medium border border-white\/10 hover:border-emerald-400 bg-white\/[0.02] transition-all\">\n <svg class=\"w-3.5 h-3.5 shrink-0\" viewBox=\"0 0 24 24\" fill=\"none\">\n <path d=\"M7.71 3.5L1.15 15L4.58 21L11.13 9.5L7.71 3.5Z\" fill=\"#0066DA\"\/>\n <path d=\"M16.29 3.5H7.71L14.29 15H22.85L16.29 3.5Z\" fill=\"#00AC47\"\/>\n <path d=\"M14.29 15L11.13 9.5L4.58 21H19.42L22.85 15H14.29Z\" fill=\"#EA4335\"\/>\n <\/svg>\n <span>Google Drive<\/span>\n <\/button>\n <button onclick=\"uploadPhotoToCloud('dropbox')\" class=\"flex items-center justify-center gap-2 py-2 px-3 rounded-xl text-xs font-medium border border-white\/10 hover:border-sky-400 bg-white\/[0.02] transition-all\">\n <svg class=\"w-3.5 h-3.5 shrink-0 text-[#0061FE]\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M6 2L0 6l6 4-6 4 6 4 6-4-6-4 6-4-6-4zm12 0l-6 4 6 4-6 4 6 4 6-4-6-4 6-4-6-4zm-6 13l-6 4 6 4 6-4-6-4z\"\/>\n <\/svg>\n <span>Dropbox<\/span>\n <\/button>\n <\/div>\n\n \n <div id=\"cloudStatusBox\" class=\"hidden mt-3 p-3 rounded-xl border border-white\/10 bg-black\/30 text-xs\">\n <div class=\"flex items-center justify-between mb-1.5\">\n <span id=\"cloudStatusTitle\" class=\"font-medium flex items-center gap-1.5 text-slate-200\">\n <i data-lucide=\"loader-2\" class=\"w-3.5 h-3.5 animate-spin text-theme-accent\"><\/i>\n Syncing…\n <\/span>\n <span id=\"cloudStatusPercent\" class=\"font-mono text-[11px] text-theme-accent\">0%<\/span>\n <\/div>\n <div class=\"w-full h-1 bg-white\/10 rounded-full overflow-hidden\">\n <div id=\"cloudProgressBar\" class=\"h-full bg-theme-accent transition-all duration-300\" style=\"width: 0%\"><\/div>\n <\/div>\n <p id=\"cloudStatusDetail\" class=\"text-[10px] text-slate-400 mt-1 font-mono truncate\">Processing upload…<\/p>\n <\/div>\n\n \n <div id=\"cloudSyncHistory\" class=\"mt-2 space-y-1.5 empty:hidden\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-5 sm:p-6\" data-section=\"personal\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"section-mono-tag\">02 \/ VITALS SNAPSHOT<\/span>\n <span class=\"text-[11px] font-mono text-emerald-400 flex items-center gap-1\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-emerald-400 animate-ping\"><\/span>\n Current\n <\/span>\n <\/div>\n <div id=\"vitalSnapshotList\" class=\"space-y-3 text-sm\"><\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-5 sm:p-6\" data-section=\"personal\">\n <div class=\"flex items-center justify-between mb-4\">\n <span class=\"section-mono-tag\">03 \/ LANGUAGES<\/span>\n <button id=\"addLangBtn\" onclick=\"addLanguageItem()\" class=\"hidden edit-only text-xs text-theme-accent hover:underline items-center gap-1 no-print\">\n <i data-lucide=\"plus\" class=\"w-3 h-3\"><\/i> Add\n <\/button>\n <\/div>\n <div id=\"languagesContainer\" class=\"space-y-3\"><\/div>\n <\/section>\n\n <\/aside>\n\n \n <div class=\"lg:col-span-8 flex flex-col gap-6\">\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8 relative\">\n <div class=\"flex flex-wrap items-center justify-between gap-3 mb-4\">\n <div class=\"inline-flex items-center gap-2 px-3 py-1 rounded-full bg-theme-muted border border-theme-accent text-theme-accent text-xs font-medium\">\n <span class=\"w-2 h-2 rounded-full bg-theme-accent\"><\/span>\n <span id=\"heroStatusBadge\">Open to Executive & Technical Leadership<\/span>\n <\/div>\n <\/div>\n\n \n <div id=\"heroViewMode\">\n <div class=\"flex flex-col sm:flex-row sm:items-end justify-between gap-4\">\n <div>\n <h1 id=\"heroFullName\" class=\"font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight\">\n Srabon Debnath\n <\/h1>\n <p id=\"heroTitleTagline\" class=\"text-base sm:text-lg text-theme-accent font-medium mt-1.5\">\n Digital Architect, Systems Strategist & Principal at srabons.de\n <\/p>\n <\/div>\n <div class=\"flex items-center gap-2 text-xs text-slate-400 font-mono\">\n <i data-lucide=\"map-pin\" class=\"w-4 h-4 text-theme-accent shrink-0\"><\/i>\n <span id=\"heroLocation\">Berlin \/ G\u00f6ttingen, Germany<\/span>\n <\/div>\n <\/div>\n\n <p id=\"heroSummaryBio\" class=\"mt-5 text-sm sm:text-base leading-relaxed text-slate-300\">\n Multidisciplinary technologist and systems strategist combining German engineering precision with timeless editorial aesthetics. Focused on resilient cloud architectures, human-centric digital products, and sustainable cross-border ventures.\n <\/p>\n <\/div>\n\n \n <div id=\"heroEditMode\" class=\"hidden space-y-4 mt-2 no-print\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Full Name<\/label>\n <input type=\"text\" id=\"inputFullName\" oninput=\"updateHeroField('fullName', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Status Badge<\/label>\n <input type=\"text\" id=\"inputStatusBadge\" oninput=\"updateHeroField('statusBadge', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <\/div>\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Role \/ Headline<\/label>\n <input type=\"text\" id=\"inputTagline\" oninput=\"updateHeroField('tagline', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Location<\/label>\n <input type=\"text\" id=\"inputLocation\" oninput=\"updateHeroField('location', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\" \/>\n <\/div>\n <\/div>\n <div>\n <label class=\"block text-xs font-mono uppercase text-slate-400 mb-1\">Executive Summary Bio<\/label>\n <textarea id=\"inputSummaryBio\" rows=\"3\" oninput=\"updateHeroField('summaryBio', this.value)\" class=\"w-full px-3 py-2 rounded-lg text-sm editorial-input\"><\/textarea>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"personal\">\n <div class=\"flex items-center justify-between mb-6\">\n <div>\n <span class=\"section-mono-tag\">04 \/ PERSONAL PARTICULARS<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Identity & Bio-Data Matrix<\/h2>\n <\/div>\n <button onclick=\"addPersonalField()\" class=\"hidden edit-only px-3 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent items-center gap-1.5 no-print\">\n <i data-lucide=\"plus-circle\" class=\"w-3.5 h-3.5\"><\/i>\n <span>Add Attribute<\/span>\n <\/button>\n <\/div>\n <div id=\"personalDetailsGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"timeline\">\n <div class=\"flex flex-wrap items-center justify-between gap-4 mb-6\">\n <div>\n <span class=\"section-mono-tag\">05 \/ CHRONOLOGY & MILESTONES<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Professional Experience & Education<\/h2>\n <\/div>\n <div class=\"flex items-center gap-2 no-print\">\n <button onclick=\"addTimelineItem('experience')\" class=\"hidden edit-only px-3 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent items-center gap-1\">\n <i data-lucide=\"briefcase\" class=\"w-3.5 h-3.5\"><\/i> + Role\n <\/button>\n <button onclick=\"addTimelineItem('education')\" class=\"hidden edit-only px-3 py-1.5 rounded-lg text-xs font-medium bg-emerald-500\/15 text-emerald-400 border border-emerald-500\/30 items-center gap-1\">\n <i data-lucide=\"graduation-cap\" class=\"w-3.5 h-3.5\"><\/i> + Education\n <\/button>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\n \n <div>\n <div class=\"flex items-center gap-2 pb-3 mb-4 border-b border-white\/[0.08]\">\n <i data-lucide=\"briefcase\" class=\"w-4 h-4 text-theme-accent\"><\/i>\n <h3 class=\"font-display font-semibold text-sm uppercase tracking-wider\">Professional Experience<\/h3>\n <\/div>\n <div id=\"experienceTimeline\" class=\"space-y-5 relative before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-white\/10\"><\/div>\n <\/div>\n\n \n <div>\n <div class=\"flex items-center gap-2 pb-3 mb-4 border-b border-white\/[0.08]\">\n <i data-lucide=\"graduation-cap\" class=\"w-4 h-4 text-emerald-400\"><\/i>\n <h3 class=\"font-display font-semibold text-sm uppercase tracking-wider\">Education & Credentials<\/h3>\n <\/div>\n <div id=\"educationTimeline\" class=\"space-y-5 relative before:absolute before:left-[7px] before:top-2 before:bottom-2 before:w-[1px] before:bg-white\/10\"><\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"competencies\">\n <div class=\"mb-6\">\n <span class=\"section-mono-tag\">06 \/ ETHOS & COMPETENCIES<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Guiding Philosophy & Core Skills<\/h2>\n <\/div>\n\n \n <div class=\"p-5 rounded-xl bg-theme-muted border-l-4 border-theme-accent mb-6 relative\">\n <i data-lucide=\"quote\" class=\"w-6 h-6 text-theme-accent\/30 absolute top-4 right-4\"><\/i>\n <p class=\"text-xs font-mono uppercase tracking-widest text-theme-accent mb-1.5\">Core Philosophy<\/p>\n <blockquote id=\"philosophyQuoteView\" class=\"font-serif text-lg italic leading-relaxed\">\n “Simplicity is the ultimate sophistication\u2014building systems and relationships grounded in clarity, integrity, and enduring value.”\n <\/blockquote>\n <textarea id=\"philosophyQuoteEdit\" rows=\"2\" oninput=\"updatePhilosophy(this.value)\" class=\"hidden edit-only w-full mt-2 px-3 py-2 rounded-lg text-sm editorial-input no-print\"><\/textarea>\n <\/div>\n\n \n <div>\n <div class=\"flex items-center justify-between mb-3\">\n <h3 class=\"text-xs font-mono uppercase tracking-wider text-slate-400\">Skills & Focus Areas<\/h3>\n <button onclick=\"addCompetencyTag()\" class=\"hidden edit-only text-xs text-theme-accent hover:underline items-center gap-1 no-print\">\n <i data-lucide=\"plus\" class=\"w-3.5 h-3.5\"><\/i> Add Skill\n <\/button>\n <\/div>\n <div id=\"competenciesContainer\" class=\"flex flex-wrap gap-2\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"editorial-card rounded-2xl p-6 sm:p-8\" data-section=\"contact\">\n <div class=\"flex flex-wrap items-center justify-between gap-4 mb-6\">\n <div>\n <span class=\"section-mono-tag\">07 \/ DIRECT CHANNELS<\/span>\n <h2 class=\"font-display text-xl font-semibold mt-1\">Official Contact & Digital Presence<\/h2>\n <\/div>\n <div class=\"flex items-center gap-2 no-print\">\n <button onclick=\"downloadVCard()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent bg-white\/[0.02]\">\n <i data-lucide=\"contact\" class=\"w-3.5 h-3.5 text-theme-accent\"><\/i>\n <span>Save vCard (.vcf)<\/span>\n <\/button>\n <button onclick=\"exportBioDataJSON()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/10 hover:border-theme-accent bg-white\/[0.02]\">\n <i data-lucide=\"file-json\" class=\"w-3.5 h-3.5 text-emerald-400\"><\/i>\n <span>JSON Export<\/span>\n <\/button>\n <\/div>\n <\/div>\n <div id=\"contactLinksGrid\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\"><\/div>\n <\/section>\n\n <\/div>\n <\/div>\n <\/main>\n\n \n <footer class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 mt-8 border-t border-white\/[0.08] text-xs text-slate-400 flex flex-col sm:flex-row items-center justify-between gap-4 no-print\">\n <div class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-theme-accent\"><\/span>\n <span class=\"font-display font-medium text-slate-300\">srabons.de<\/span>\n <span>\u2014 Official Bio-Data & Executive Dossier<\/span>\n <\/div>\n <div class=\"flex items-center gap-4 font-mono text-[11px]\">\n <button onclick=\"openPdfPreviewModal()\" class=\"hover:text-theme-accent transition-colors\">A4 PDF Preview<\/button>\n <span>\u2022<\/span>\n <button onclick=\"window.print()\" class=\"hover:text-theme-accent transition-colors\">Print Bio-Data<\/button>\n <span>\u2022<\/span>\n <span>\u00a9 2026 srabons.de<\/span>\n <\/div>\n <\/footer>\n\n \n <div id=\"pdfPreviewModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-3 sm:p-6 bg-black\/85 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-4xl w-full max-h-[95vh] flex flex-col shadow-2xl border border-white\/20 overflow-hidden\">\n \n \n <div class=\"p-4 sm:px-6 border-b border-white\/10 flex items-center justify-between bg-black\/40\">\n <div>\n <span class=\"section-mono-tag\">DOCUMENT COMPOSITION ENGINE<\/span>\n <h3 class=\"font-display text-base sm:text-lg font-bold\">Executive A4 PDF Preview<\/h3>\n <\/div>\n <div class=\"flex items-center gap-2\">\n \n <button onclick=\"printViaBrowser()\" class=\"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium border border-white\/20 hover:border-theme-accent bg-white\/5 transition-all text-slate-200\" title=\"Print as native vector PDF\">\n <i data-lucide=\"printer\" class=\"w-3.5 h-3.5\"><\/i>\n <span class=\"hidden sm:inline\">Browser Print<\/span>\n <\/button>\n \n \n <button id=\"btnGeneratePdf\" onclick=\"generatePdfWithJsPdf()\" class=\"flex items-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-semibold bg-theme-accent shadow-md hover:opacity-90 transition-all\">\n <i data-lucide=\"download\" class=\"w-3.5 h-3.5\"><\/i>\n <span id=\"btnGeneratePdfLabel\">Download PDF (.pdf)<\/span>\n <\/button>\n\n \n <button onclick=\"closePdfPreviewModal()\" class=\"p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-white\/10\">\n <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-1 overflow-y-auto p-4 sm:p-6 bg-zinc-900\/60 flex justify-center\">\n \n \n <div id=\"printDossierRoot\" class=\"w-[794px] max-w-full bg-white text-slate-900 p-8 sm:p-10 shadow-2xl rounded-sm font-sans text-[11px] leading-relaxed relative border border-slate-300\">\n \n \n <div class=\"flex items-start justify-between pb-4 border-b-2 border-slate-900 mb-6\">\n <div>\n <div class=\"flex items-center gap-2\">\n <span class=\"font-mono text-xs font-bold uppercase tracking-widest text-amber-700\">SRABONS.DE<\/span>\n <span class=\"text-[9px] font-mono px-1.5 py-0.5 bg-slate-100 border border-slate-300 rounded text-slate-600\">OFFICIAL DOSSIER<\/span>\n <\/div>\n <h1 id=\"pdfFullName\" class=\"font-display text-2xl font-bold text-slate-900 mt-1\">Srabon Debnath<\/h1>\n <p id=\"pdfTagline\" class=\"text-xs font-medium text-slate-700 mt-0.5\">Digital Architect, Systems Strategist & Principal at srabons.de<\/p>\n <\/div>\n <div class=\"text-right text-[10px] font-mono text-slate-500\">\n <div class=\"font-semibold text-slate-800\">DOMAIN: https:\/\/srabons.de<\/div>\n <div id=\"pdfPrintDate\">Date: 2026-10-25<\/div>\n <div id=\"pdfLocationText\">Berlin \/ G\u00f6ttingen, Germany<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-12 gap-6\">\n \n \n <div class=\"col-span-4 flex flex-col gap-5 border-r border-slate-200 pr-5\">\n \n <div class=\"w-full aspect-[4\/5] rounded-md overflow-hidden border border-slate-300 bg-slate-100 shadow-sm\">\n <img decoding=\"async\" id=\"pdfPortraitImg\" src=\"\" alt=\"Portrait\" class=\"w-full h-full object-cover\" \/>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2 border-b border-slate-200\">\n Vital Particulars\n <\/h4>\n <div id=\"pdfVitalsList\" class=\"space-y-1.5 text-[10px]\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2 border-b border-slate-200\">\n Languages\n <\/h4>\n <div id=\"pdfLanguagesList\" class=\"space-y-1.5 text-[10px]\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2 border-b border-slate-200\">\n Direct Channels\n <\/h4>\n <div id=\"pdfContactsList\" class=\"space-y-1 text-[10px]\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"col-span-8 flex flex-col gap-5\">\n \n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-1.5 border-b border-slate-200\">\n Executive Profile & Objectives\n <\/h4>\n <p id=\"pdfSummaryBio\" class=\"text-slate-700 text-[10.5px] leading-relaxed\"><\/p>\n <\/div>\n\n \n <div class=\"p-3 bg-slate-50 border-l-2 border-amber-600 rounded-r text-slate-800 italic text-[10px]\">\n <span class=\"font-bold uppercase tracking-wider text-[8px] font-mono text-amber-800 not-italic block mb-0.5\">ETHOS<\/span>\n <span id=\"pdfPhilosophy\"><\/span>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2.5 border-b border-slate-200\">\n Professional Trajectory\n <\/h4>\n <div id=\"pdfExperienceTimeline\" class=\"space-y-3\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-2.5 border-b border-slate-200\">\n Academic Credentials\n <\/h4>\n <div id=\"pdfEducationTimeline\" class=\"space-y-3\"><\/div>\n <\/div>\n\n \n <div>\n <h4 class=\"font-mono text-[9px] uppercase tracking-wider font-bold text-amber-700 pb-1 mb-1.5 border-b border-slate-200\">\n Core Competencies & Expertise\n <\/h4>\n <div id=\"pdfCompetenciesContainer\" class=\"flex flex-wrap gap-1.5\"><\/div>\n <\/div>\n\n <\/div>\n <\/div>\n\n \n <div class=\"mt-8 pt-4 border-t border-slate-200 flex items-center justify-between text-[9px] font-mono text-slate-500\">\n <div>Document Ref: srabons.de\/dossier\/2026<\/div>\n <div>Authentic Digital Profile \u2022 Germany<\/div>\n <div>Page 1 of 1<\/div>\n <\/div>\n\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"cropModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black\/80 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-white\/20\">\n <div class=\"flex items-center justify-between pb-4 border-b border-white\/10\">\n <div>\n <span class=\"section-mono-tag\">PORTRAIT CROP STUDIO<\/span>\n <h3 class=\"font-display text-lg font-semibold\">Crop & Refine Image<\/h3>\n <\/div>\n <button onclick=\"closeCropModal()\" class=\"p-1.5 rounded-lg text-slate-400 hover:text-white\">\n <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n\n <div class=\"mt-4 flex flex-col items-center\">\n \n <div class=\"relative rounded-xl overflow-hidden border border-theme-accent bg-black shadow-inner\">\n <canvas id=\"cropCanvas\" width=\"320\" height=\"400\" class=\"block max-w-full h-auto\"><\/canvas>\n <div class=\"absolute bottom-2 right-2 px-2 py-0.5 rounded bg-black\/75 text-[10px] font-mono text-slate-300 pointer-events-none\">\n Drag to Reposition\n <\/div>\n <\/div>\n\n \n <div class=\"w-full mt-4 space-y-3\">\n <div class=\"flex items-center gap-3\">\n <i data-lucide=\"zoom-out\" class=\"w-4 h-4 text-slate-400\"><\/i>\n <input type=\"range\" id=\"cropZoomSlider\" min=\"0.5\" max=\"3\" step=\"0.02\" value=\"1\" oninput=\"handleCropZoom(this.value)\" class=\"w-full accent-amber-500 cursor-pointer\" \/>\n <i data-lucide=\"zoom-in\" class=\"w-4 h-4 text-theme-accent\"><\/i>\n <\/div>\n\n <div class=\"flex items-center justify-between gap-2 pt-1\">\n <span class=\"text-xs font-mono text-slate-400\">Finish:<\/span>\n <div class=\"flex items-center gap-1.5\">\n <button onclick=\"setCropFilter('none')\" id=\"filterBtn-none\" class=\"px-2.5 py-1 rounded text-xs font-medium bg-theme-accent\">Original<\/button>\n <button onclick=\"setCropFilter('noir')\" id=\"filterBtn-noir\" class=\"px-2.5 py-1 rounded text-xs font-medium bg-white\/5 text-slate-300\">Monochrome<\/button>\n <button onclick=\"setCropFilter('warm')\" id=\"filterBtn-warm\" class=\"px-2.5 py-1 rounded text-xs font-medium bg-white\/5 text-slate-300\">Warm Tone<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-6 pt-4 border-t border-white\/10 flex items-center justify-between gap-3\">\n <button onclick=\"resetCropTransform()\" class=\"px-3 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-white\/10\">\n Reset Center\n <\/button>\n <div class=\"flex items-center gap-2\">\n <button onclick=\"closeCropModal()\" class=\"px-4 py-1.5 rounded-lg text-xs text-slate-300 hover:bg-white\/10\">Cancel<\/button>\n <button onclick=\"applyCroppedPortrait()\" class=\"px-5 py-1.5 rounded-lg text-xs font-semibold bg-theme-accent shadow-md\">Apply Portrait<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"cloudSettingsModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black\/80 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-xl w-full p-6 shadow-2xl border border-white\/20 max-h-[90vh] overflow-y-auto\">\n <div class=\"flex items-center justify-between pb-4 border-b border-white\/10\">\n <div>\n <span class=\"section-mono-tag\">CLOUD STORAGE INTEGRATION<\/span>\n <h3 class=\"font-display text-lg font-semibold\">Google Drive & Dropbox API<\/h3>\n <\/div>\n <button onclick=\"closeCloudSettingsModal()\" class=\"p-1.5 rounded-lg text-slate-400 hover:text-white\">\n <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\n <\/button>\n <\/div>\n\n <div class=\"mt-4 space-y-4 text-xs\">\n <div class=\"p-3.5 rounded-xl bg-theme-muted border border-theme-accent leading-relaxed\">\n <p class=\"font-semibold text-theme-accent mb-1 flex items-center gap-1.5\">\n <i data-lucide=\"info\" class=\"w-4 h-4\"><\/i> Dual-Engine Cloud Architecture\n <\/p>\n Configure optional OAuth 2.0 Bearer tokens below to upload your portrait directly to <strong>Google Drive API v3<\/strong> or <strong>Dropbox API v2<\/strong>. If left blank, the system operates in <strong>Interactive Simulation Mode<\/strong> so you can test the workflow instantly.\n <\/div>\n\n \n <div class=\"p-3.5 rounded-xl border border-white\/10 bg-white\/[0.02] space-y-2.5\">\n <div class=\"flex items-center justify-between font-semibold\">\n <span class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-emerald-400\"><\/span> Google Drive API v3\n <\/span>\n <span class=\"font-mono text-[10px] text-slate-400\">multipart\/related<\/span>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Google OAuth Access Token (Optional)<\/label>\n <input type=\"password\" id=\"gdriveTokenInput\" placeholder=\"ya29.a0AfH6SM...\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Target Folder ID (Optional)<\/label>\n <input type=\"text\" id=\"gdriveFolderInput\" placeholder=\"e.g. 1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <\/div>\n\n \n <div class=\"p-3.5 rounded-xl border border-white\/10 bg-white\/[0.02] space-y-2.5\">\n <div class=\"flex items-center justify-between font-semibold\">\n <span class=\"flex items-center gap-2\">\n <span class=\"w-2 h-2 rounded-full bg-sky-400\"><\/span> Dropbox API v2\n <\/span>\n <span class=\"font-mono text-[10px] text-slate-400\">\/2\/files\/upload<\/span>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Dropbox Access Token (Optional)<\/label>\n <input type=\"password\" id=\"dropboxTokenInput\" placeholder=\"sl.B0xYz...\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <div>\n <label class=\"block text-slate-400 font-mono mb-1\">Dropbox Destination Path<\/label>\n <input type=\"text\" id=\"dropboxPathInput\" value=\"\/srabons-bio\/portrait.png\" class=\"w-full px-3 py-2 rounded-lg editorial-input font-mono\" \/>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-6 pt-4 border-t border-white\/10 flex items-center justify-end gap-2\">\n <button onclick=\"closeCloudSettingsModal()\" class=\"px-4 py-2 rounded-lg text-xs font-medium bg-white\/5 hover:bg-white\/10\">Close<\/button>\n <button onclick=\"saveCloudSettings()\" class=\"px-5 py-2 rounded-lg text-xs font-semibold bg-theme-accent\">Save Cloud Settings<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"resetModal\" class=\"fixed inset-0 z-50 hidden items-center justify-center p-4 bg-black\/80 backdrop-blur-md no-print\">\n <div class=\"editorial-card rounded-2xl max-w-md w-full p-6 shadow-2xl border border-red-500\/40\">\n <div class=\"flex items-center gap-3 text-red-400 mb-3\">\n <i data-lucide=\"rotate-ccw\" class=\"w-5 h-5\"><\/i>\n <h3 class=\"font-display text-lg font-semibold text-white\">Reset Profile to Defaults?<\/h3>\n <\/div>\n <p class=\"text-xs text-slate-300 leading-relaxed\">\n This will clear local edits and restore the default editorial dossier for <strong>Srabon Debnath<\/strong> at <strong>srabons.de<\/strong>.\n <\/p>\n <div class=\"mt-6 flex items-center justify-end gap-2\">\n <button onclick=\"closeResetModal()\" class=\"px-4 py-1.5 rounded-lg text-xs font-medium bg-white\/5 hover:bg-white\/10\">Cancel<\/button>\n <button onclick=\"confirmResetToDefaults()\" class=\"px-4 py-1.5 rounded-lg text-xs font-semibold bg-red-500 text-white hover:bg-red-600\">Reset All<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n \/\/ --- 1. DEFAULT DATA MODEL FOR SRABONS.DE ---\n const DEFAULT_DATA = {\n fullName: \"Srabon Debnath\",\n tagline: \"Digital Architect, Systems Strategist & Principal at srabons.de\",\n location: \"Berlin \/ G\u00f6ttingen, Germany\",\n statusBadge: \"Open to Executive & Technical Leadership\",\n summaryBio: \"Multidisciplinary technologist and systems strategist combining German engineering precision with timeless editorial aesthetics. Focused on resilient cloud architectures, human-centric digital products, and sustainable cross-border ventures.\",\n philosophy: \"Simplicity is the ultimate sophistication\u2014building systems and relationships grounded in clarity, integrity, and enduring value.\",\n portraitDataUrl: null,\n vitalSnapshot: [\n { label: \"Full Legal Name\", value: \"Srabon Debnath\" },\n { label: \"Nationality \/ Permit\", value: \"Permanent Resident \u2014 EU \/ DE\" },\n { label: \"Current Base\", value: \"Germany (CET \/ UTC+1)\" },\n { label: \"Marital Status\", value: \"Unmarried \/ Single\" },\n { label: \"Academic Standing\", value: \"M.Sc. Computer Science & Systems\" }\n ],\n personalParticulars: [\n { id: \"p1\", label: \"Date of Birth\", value: \"14 October 1995\", icon: \"calendar\" },\n { id: \"p2\", label: \"Place of Origin\", value: \"Dhaka \u2022 Residing in Germany\", icon: \"globe-2\" },\n { id: \"p3\", label: \"Current Residence\", value: \"G\u00f6ttingen \/ Berlin, Germany\", icon: \"building-2\" },\n { id: \"p4\", label: \"Height & Constitution\", value: \"178 cm (5'10\\\") \u2022 Athletic\", icon: \"user-check\" },\n { id: \"p5\", label: \"Religious & Cultural Values\", value: \"Practicing, Progressive & Family-Oriented\", icon: \"heart-handshake\" },\n { id: \"p6\", label: \"Family Background\", value: \"Academic & Civil Service Heritage\", icon: \"users\" },\n { id: \"p7\", label: \"Dietary & Lifestyle\", value: \"Health-Conscious, Non-Smoker, Avid Runner\", icon: \"sparkles\" },\n { id: \"p8\", label: \"Primary Domain\", value: \"https:\/\/srabons.de\", icon: \"link\" }\n ],\n languages: [\n { id: \"l1\", name: \"English\", level: \"C2 \u2022 Executive \/ Bilingual Fluency\", percent: 98 },\n { id: \"l2\", name: \"German (Deutsch)\", level: \"C1 \u2022 Professional Working Fluency\", percent: 88 },\n { id: \"l3\", name: \"Bengali\", level: \"Native Mother Tongue\", percent: 100 }\n ],\n experience: [\n {\n id: \"ex1\",\n role: \"Principal Consultant & Founder\",\n org: \"srabons.de Digital Studio\",\n period: \"2023 \u2014 Present\",\n location: \"Germany\",\n desc: \"Architecting cloud systems, minimalist web platforms, and LLM-assisted workflows for European enterprise clients.\"\n },\n {\n id: \"ex2\",\n role: \"Senior Full-Stack Systems Engineer\",\n org: \"DACH FinTech Solutions Group\",\n period: \"2020 \u2014 2023\",\n location: \"Berlin, Germany\",\n desc: \"Led distributed squads delivering low-latency microservices, zero-trust cloud security, and design tokens.\"\n },\n {\n id: \"ex3\",\n role: \"Software Engineering Associate\",\n org: \"Enterprise Cloud Laboratory\",\n period: \"2018 \u2014 2020\",\n location: \"Lower Saxony, Germany\",\n desc: \"Developed scalable TypeScript pipelines and automated object storage replication protocols.\"\n }\n ],\n education: [\n {\n id: \"ed1\",\n role: \"M.Sc. in Applied Computer Science\",\n org: \"Georg-August-Universit\u00e4t G\u00f6ttingen\",\n period: \"2018 \u2014 2020\",\n location: \"G\u00f6ttingen, Germany\",\n desc: \"Specialized in Distributed Cloud Computing, Security Systems, and Human-Computer Interaction.\"\n },\n {\n id: \"ed2\",\n role: \"B.Sc. in Computer Science & Engineering\",\n org: \"University of Engineering & Technology\",\n period: \"2013 \u2014 2017\",\n location: \"Graduated with Honors\",\n desc: \"Honors dissertation on Encrypted Cloud Object Storage and Low-Latency Web Architecture.\"\n }\n ],\n competencies: [\n \"Cloud Architecture (AWS \/ GCP)\",\n \"Distributed Systems Design\",\n \"Full-Stack TypeScript & Node.js\",\n \"AI & LLM Orchestration\",\n \"Minimalist UI\/UX Systems\",\n \"Zero-Trust Cloud Security\",\n \"Cross-Cultural Leadership\",\n \"Architectural Photography\"\n ],\n contacts: [\n { id: \"c1\", label: \"Official Web Domain\", value: \"https:\/\/srabons.de\", actionType: \"url\", icon: \"globe\" },\n { id: \"c2\", label: \"Direct Email Address\", value: \"connect@srabons.de\", actionType: \"copy\", icon: \"mail\" },\n { id: \"c3\", label: \"Professional Network\", value: \"linkedin.com\/in\/srabons\", actionType: \"url\", icon: \"linkedin\" },\n { id: \"c4\", label: \"Source Code & GitHub\", value: \"github.com\/srabons\", actionType: \"url\", icon: \"github\" }\n ]\n };\n\n \/\/ State Variables\n let bioData = loadBioData();\n let isEditMode = false;\n let cloudConfig = {\n gdriveToken: sessionStorage.getItem('srabons_gdrive_tok') || '',\n gdriveFolder: sessionStorage.getItem('srabons_gdrive_fol') || '',\n dropboxToken: sessionStorage.getItem('srabons_dbox_tok') || '',\n dropboxPath: sessionStorage.getItem('srabons_dbox_pth') || '\/srabons-bio\/portrait.png'\n };\n\n \/\/ Studio Cropper State\n let cropImg = new Image();\n let cropScale = 1;\n let cropX = 0;\n let cropY = 0;\n let cropFilter = 'none';\n let isDragging = false;\n let dragStartX = 0;\n let dragStartY = 0;\n\n \/\/ Utility: HTML escape\n function escapeHtml(str) {\n if (typeof str !== 'string') return str ?? '';\n return str.replace(\/&\/g, '&').replace(\/<\/g, '<').replace(\/>\/g, '>').replace(\/\"\/g, '"');\n }\n\n \/\/ --- 2. DATA LOAD & PERSISTENCE ---\n function loadBioData() {\n try {\n const stored = localStorage.getItem('srabons_biodata_v4');\n if (stored) {\n const parsed = JSON.parse(stored);\n \/\/ Migration check from older names\n if (parsed.fullName && parsed.fullName.includes(\"Ahmed\")) {\n parsed.fullName = \"Srabon Debnath\";\n if (parsed.vitalSnapshot && parsed.vitalSnapshot[0]) {\n parsed.vitalSnapshot[0].value = \"Srabon Debnath\";\n }\n }\n return parsed;\n }\n } catch (err) {\n console.warn('Storage read exception:', err);\n }\n return JSON.parse(JSON.stringify(DEFAULT_DATA));\n }\n\n function saveBioData() {\n try {\n localStorage.setItem('srabons_biodata_v4', JSON.stringify(bioData));\n } catch (e) {\n showToast(\"Storage quota warning. Use a smaller portrait.\", \"error\");\n }\n }\n\n \/\/ Default Portrait Generator (Guarantees crisp instant render)\n function generateCrispDefaultPortrait() {\n const c = document.createElement('canvas');\n c.width = 800;\n c.height = 1000;\n const ctx = c.getContext('2d');\n\n \/\/ Gradient background\n const grad = ctx.createLinearGradient(0, 0, 800, 1000);\n grad.addColorStop(0, '#1c1e24');\n grad.addColorStop(1, '#0c0d10');\n ctx.fillStyle = grad;\n ctx.fillRect(0, 0, 800, 1000);\n\n \/\/ Gold architectural circle\n ctx.strokeStyle = 'rgba(212, 175, 55, 0.4)';\n ctx.lineWidth = 3;\n ctx.beginPath();\n ctx.arc(400, 420, 210, 0, Math.PI * 2);\n ctx.stroke();\n\n \/\/ Stylized silhouette head & body\n ctx.fillStyle = '#d4af37';\n ctx.beginPath();\n ctx.arc(400, 370, 95, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.fillStyle = '#242834';\n ctx.beginPath();\n ctx.moveTo(170, 800);\n ctx.quadraticCurveTo(400, 560, 630, 800);\n ctx.lineTo(630, 920);\n ctx.lineTo(170, 920);\n ctx.closePath();\n ctx.fill();\n\n \/\/ Official typography badge\n ctx.fillStyle = '#ffffff';\n ctx.font = '700 34px \"Plus Jakarta Sans\", sans-serif';\n ctx.textAlign = 'center';\n ctx.fillText('SRABON DEBNATH', 400, 890);\n\n ctx.fillStyle = '#d4af37';\n ctx.font = '500 18px \"JetBrains Mono\", monospace';\n ctx.fillText('SRABONS.DE \u2022 VERIFIED DOSSIER', 400, 930);\n\n return c.toDataURL('image\/jpeg', 0.95);\n }\n\n \/\/ --- 3. RENDER ON-SCREEN UI ---\n function renderMainUI() {\n if (!bioData.portraitDataUrl) {\n bioData.portraitDataUrl = generateCrispDefaultPortrait();\n }\n\n \/\/ Portrait\n document.getElementById('profilePortraitImg').src = bioData.portraitDataUrl;\n document.getElementById('portraitNameCaption').textContent = bioData.fullName;\n\n \/\/ Hero View Mode\n document.getElementById('heroFullName').textContent = bioData.fullName;\n document.getElementById('heroTitleTagline').textContent = bioData.tagline;\n document.getElementById('heroLocation').textContent = bioData.location;\n document.getElementById('heroStatusBadge').textContent = bioData.statusBadge;\n document.getElementById('heroSummaryBio').textContent = bioData.summaryBio;\n\n \/\/ Hero Inputs\n document.getElementById('inputFullName').value = bioData.fullName;\n document.getElementById('inputStatusBadge').value = bioData.statusBadge;\n document.getElementById('inputTagline').value = bioData.tagline;\n document.getElementById('inputLocation').value = bioData.location;\n document.getElementById('inputSummaryBio').value = bioData.summaryBio;\n\n \/\/ Vital snapshot\n const vitalList = document.getElementById('vitalSnapshotList');\n vitalList.innerHTML = bioData.vitalSnapshot.map((item, idx) => `\n <div class=\"flex items-center justify-between py-2 border-b border-white\/[0.06] last:border-none\">\n <span class=\"text-xs text-slate-400\">${escapeHtml(item.label)}<\/span>\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(item.value)}\" oninput=\"updateVitalItem(${idx}, this.value)\" class=\"px-2 py-0.5 rounded text-xs editorial-input text-right w-48\" \/>`\n : `<span class=\"text-xs font-medium text-right\">${escapeHtml(item.value)}<\/span>`\n }\n <\/div>\n `).join('');\n\n \/\/ Languages\n const langContainer = document.getElementById('languagesContainer');\n langContainer.innerHTML = bioData.languages.map((lang, idx) => `\n <div class=\"p-3 rounded-xl bg-white\/[0.02] border border-white\/[0.06]\">\n <div class=\"flex items-center justify-between text-xs mb-1.5\">\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(lang.name)}\" oninput=\"updateLang(${idx}, 'name', this.value)\" class=\"px-2 py-0.5 rounded editorial-input w-28 font-semibold\" \/>`\n : `<span class=\"font-semibold\">${escapeHtml(lang.name)}<\/span>`\n }\n <div class=\"flex items-center gap-1.5\">\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(lang.level)}\" oninput=\"updateLang(${idx}, 'level', this.value)\" class=\"px-2 py-0.5 rounded editorial-input w-40 text-[11px]\" \/>\n <button onclick=\"removeLang(${idx})\" class=\"text-red-400 hover:text-red-300 p-1\"><i data-lucide=\"trash-2\" class=\"w-3.5 h-3.5\"><\/i><\/button>`\n : `<span class=\"text-[11px] font-mono text-theme-accent\">${escapeHtml(lang.level)}<\/span>`\n }\n <\/div>\n <\/div>\n <div class=\"w-full h-1.5 rounded-full bg-white\/10 overflow-hidden\">\n <div class=\"h-full bg-theme-accent rounded-full\" style=\"width: ${lang.percent || 90}%\"><\/div>\n <\/div>\n <\/div>\n `).join('');\n\n \/\/ Personal Matrix\n const personalGrid = document.getElementById('personalDetailsGrid');\n personalGrid.innerHTML = bioData.personalParticulars.map((item, idx) => `\n <div class=\"p-4 rounded-xl bg-white\/[0.02] border border-white\/[0.06] flex items-start gap-3.5\">\n <div class=\"w-9 h-9 rounded-lg bg-theme-muted border border-theme-accent flex items-center justify-center text-theme-accent shrink-0 mt-0.5\">\n <i data-lucide=\"${item.icon || 'bookmark'}\" class=\"w-4 h-4\"><\/i>\n <\/div>\n <div class=\"flex-1 min-w-0\">\n ${isEditMode\n ? `<div class=\"space-y-1.5\">\n <div class=\"flex items-center justify-between\">\n <input type=\"text\" value=\"${escapeHtml(item.label)}\" oninput=\"updatePersonalItem(${idx}, 'label', this.value)\" class=\"px-2 py-0.5 rounded text-[11px] font-mono uppercase editorial-input w-full mr-2\" \/>\n <button onclick=\"removePersonalItem(${idx})\" class=\"text-red-400 hover:text-red-300 p-1\"><i data-lucide=\"x\" class=\"w-3.5 h-3.5\"><\/i><\/button>\n <\/div>\n <input type=\"text\" value=\"${escapeHtml(item.value)}\" oninput=\"updatePersonalItem(${idx}, 'value', this.value)\" class=\"px-2 py-1 rounded text-xs editorial-input w-full font-medium\" \/>\n <\/div>`\n : `<p class=\"text-[11px] font-mono uppercase tracking-wider text-slate-400\">${escapeHtml(item.label)}<\/p>\n <p class=\"text-sm font-medium mt-0.5 break-words\">${escapeHtml(item.value)}<\/p>`\n }\n <\/div>\n <\/div>\n `).join('');\n\n \/\/ Timelines\n renderTimelineSection('experienceTimeline', bioData.experience, 'experience', 'bg-theme-accent');\n renderTimelineSection('educationTimeline', bioData.education, 'education', 'bg-emerald-400');\n\n \/\/ Philosophy & Skills\n document.getElementById('philosophyQuoteView').textContent = `\"${bioData.philosophy}\"`;\n document.getElementById('philosophyQuoteEdit').value = bioData.philosophy;\n\n const compContainer = document.getElementById('competenciesContainer');\n compContainer.innerHTML = bioData.competencies.map((tag, idx) => `\n <span class=\"inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-medium bg-white\/[0.03] border border-white\/10 hover:border-theme-accent transition-all\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-theme-accent\"><\/span>\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(tag)}\" oninput=\"updateCompetency(${idx}, this.value)\" class=\"bg-transparent border-b border-theme-accent text-xs w-36 focus:outline-none\" \/>\n <button onclick=\"removeCompetency(${idx})\" class=\"text-red-400 ml-1 p-0.5\"><i data-lucide=\"x\" class=\"w-3 h-3\"><\/i><\/button>`\n : `<span>${escapeHtml(tag)}<\/span>`\n }\n <\/span>\n `).join('');\n\n \/\/ Contact Links\n const contactGrid = document.getElementById('contactLinksGrid');\n contactGrid.innerHTML = bioData.contacts.map((c, idx) => `\n <div class=\"p-4 rounded-xl bg-white\/[0.02] border border-white\/[0.06] flex items-center justify-between gap-3 hover:border-theme-accent transition-all\">\n <div class=\"flex items-center gap-3 min-w-0 flex-1\">\n <div class=\"w-9 h-9 rounded-lg bg-white\/[0.04] border border-white\/10 flex items-center justify-center text-theme-accent shrink-0\">\n <i data-lucide=\"${c.icon || 'globe'}\" class=\"w-4 h-4\"><\/i>\n <\/div>\n <div class=\"min-w-0 flex-1\">\n <p class=\"text-[11px] font-mono uppercase tracking-wider text-slate-400\">${escapeHtml(c.label)}<\/p>\n ${isEditMode\n ? `<input type=\"text\" value=\"${escapeHtml(c.value)}\" oninput=\"updateContactField(${idx}, this.value)\" class=\"mt-1 px-2 py-1 rounded text-xs editorial-input w-full\" \/>`\n : `<p class=\"text-sm font-medium truncate\">${escapeHtml(c.value)}<\/p>`\n }\n <\/div>\n <\/div>\n <button onclick=\"handleContactAction('${escapeHtml(c.actionType)}', '${escapeHtml(c.value)}')\" class=\"p-2 rounded-lg bg-white\/[0.04] hover:bg-theme-accent hover:text-black transition-all shrink-0 no-print\" title=\"Action\">\n <i data-lucide=\"${c.actionType === 'copy' ? 'copy' : 'arrow-up-right'}\" class=\"w-4 h-4\"><\/i>\n <\/button>\n <\/div>\n `).join('');\n\n lucide.createIcons();\n }\n\n function renderTimelineSection(containerId, list, type, dotColorClass) {\n const container = document.getElementById(containerId);\n container.innerHTML = list.map((item, idx) => `\n <div class=\"relative pl-6 group\">\n <span class=\"absolute left-0 top-1.5 w-3.5 h-3.5 rounded-full border-2 border-black ${dotColorClass}\"><\/span>\n <div class=\"p-4 rounded-xl bg-white\/[0.02] border border-white\/[0.06]\">\n ${isEditMode\n ? `<div class=\"space-y-2\">\n <div class=\"flex items-center justify-between gap-2\">\n <input type=\"text\" value=\"${escapeHtml(item.period)}\" oninput=\"updateTimelineItem('${type}', ${idx}, 'period', this.value)\" class=\"px-2 py-0.5 rounded text-[11px] font-mono editorial-input w-36\" \/>\n <button onclick=\"removeTimelineItem('${type}', ${idx})\" class=\"text-red-400 text-xs p-1\"><i data-lucide=\"trash-2\" class=\"w-3.5 h-3.5\"><\/i><\/button>\n <\/div>\n <input type=\"text\" value=\"${escapeHtml(item.role)}\" oninput=\"updateTimelineItem('${type}', ${idx}, 'role', this.value)\" class=\"px-2 py-1 rounded text-xs font-semibold editorial-input w-full\" \/>\n <input type=\"text\" value=\"${escapeHtml(item.org)}\" oninput=\"updateTimelineItem('${type}', ${idx}, 'org', this.value)\" class=\"px-2 py-1 rounded text-xs editorial-input w-full\" \/>\n <textarea rows=\"2\" oninput=\"updateTimelineItem('${type}', ${idx}, 'desc', this.value)\" class=\"px-2 py-1 rounded text-xs editorial-input w-full\">${escapeHtml(item.desc)}<\/textarea>\n <\/div>`\n : `<div class=\"flex flex-wrap items-center justify-between gap-1 mb-1\">\n <span class=\"text-[11px] font-mono text-theme-accent\">${escapeHtml(item.period)}<\/span>\n <span class=\"text-[11px] text-slate-400\">${escapeHtml(item.location || '')}<\/span>\n <\/div>\n <h4 class=\"font-display font-semibold text-sm\">${escapeHtml(item.role)}<\/h4>\n <p class=\"text-xs text-slate-300 font-medium mt-0.5\">${escapeHtml(item.org)}<\/p>\n <p class=\"text-xs text-slate-400 mt-2 leading-relaxed\">${escapeHtml(item.desc)}<\/p>`\n }\n <\/div>\n <\/div>\n `).join('');\n }\n\n \/\/ --- 4. LIVE CHANGING WITHOUT INPUT FOCUS BLURRING ---\n function updateHeroField(key, val) {\n bioData[key] = val;\n if (key === 'fullName') {\n document.getElementById('heroFullName').textContent = val;\n document.getElementById('portraitNameCaption').textContent = val;\n } else if (key === 'tagline') {\n document.getElementById('heroTitleTagline').textContent = val;\n } else if (key === 'location') {\n document.getElementById('heroLocation').textContent = val;\n } else if (key === 'statusBadge') {\n document.getElementById('heroStatusBadge').textContent = val;\n } else if (key === 'summaryBio') {\n document.getElementById('heroSummaryBio').textContent = val;\n }\n saveBioData();\n }\n\n function updateVitalItem(idx, val) {\n if (bioData.vitalSnapshot[idx]) {\n bioData.vitalSnapshot[idx].value = val;\n saveBioData();\n }\n }\n\n function updateLang(idx, key, val) {\n if (bioData.languages[idx]) {\n bioData.languages[idx][key] = val;\n saveBioData();\n }\n }\n\n function addLanguageItem() {\n bioData.languages.push({ id: 'l_' + Date.now(), name: \"New Language\", level: \"Professional\", percent: 85 });\n saveBioData();\n renderMainUI();\n }\n\n function removeLang(idx) {\n bioData.languages.splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updatePersonalItem(idx, key, val) {\n if (bioData.personalParticulars[idx]) {\n bioData.personalParticulars[idx][key] = val;\n saveBioData();\n }\n }\n\n function addPersonalField() {\n bioData.personalParticulars.push({ id: 'p_' + Date.now(), label: \"Attribute\", value: \"Custom Value\", icon: \"check-circle\" });\n saveBioData();\n renderMainUI();\n }\n\n function removePersonalItem(idx) {\n bioData.personalParticulars.splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updateTimelineItem(type, idx, key, val) {\n if (bioData[type] && bioData[type][idx]) {\n bioData[type][idx][key] = val;\n saveBioData();\n }\n }\n\n function addTimelineItem(type) {\n bioData[type].unshift({\n id: type + '_' + Date.now(),\n role: type === 'experience' ? \"Executive Position\" : \"Degree \/ Certification\",\n org: \"Organization Name\",\n period: \"2025 \u2014 Present\",\n location: \"Germany\",\n desc: \"Key impact and milestones achieved.\"\n });\n saveBioData();\n renderMainUI();\n }\n\n function removeTimelineItem(type, idx) {\n bioData[type].splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updatePhilosophy(val) {\n bioData.philosophy = val;\n document.getElementById('philosophyQuoteView').textContent = `\"${val}\"`;\n saveBioData();\n }\n\n function updateCompetency(idx, val) {\n bioData.competencies[idx] = val;\n saveBioData();\n }\n\n function addCompetencyTag() {\n bioData.competencies.push(\"New Focus Skill\");\n saveBioData();\n renderMainUI();\n }\n\n function removeCompetency(idx) {\n bioData.competencies.splice(idx, 1);\n saveBioData();\n renderMainUI();\n }\n\n function updateContactField(idx, val) {\n if (bioData.contacts[idx]) {\n bioData.contacts[idx].value = val;\n saveBioData();\n }\n }\n\n \/\/ --- 5. RENDER A4 PDF STAGING DATA ---\n function syncPdfStagingData() {\n document.getElementById('pdfFullName').textContent = bioData.fullName;\n document.getElementById('pdfTagline').textContent = bioData.tagline;\n document.getElementById('pdfLocationText').textContent = bioData.location;\n document.getElementById('pdfSummaryBio').textContent = bioData.summaryBio;\n document.getElementById('pdfPhilosophy').textContent = bioData.philosophy;\n document.getElementById('pdfPrintDate').textContent = `Generated: ${new Date().toISOString().slice(0, 10)}`;\n\n \/\/ Sync portrait img\n const pdfPortrait = document.getElementById('pdfPortraitImg');\n pdfPortrait.src = bioData.portraitDataUrl;\n\n \/\/ Sync Vitals\n document.getElementById('pdfVitalsList').innerHTML = bioData.vitalSnapshot.map(v => `\n <div class=\"flex items-center justify-between border-b border-slate-100 py-0.5\">\n <span class=\"text-slate-500 font-medium\">${escapeHtml(v.label)}<\/span>\n <span class=\"font-semibold text-slate-900\">${escapeHtml(v.value)}<\/span>\n <\/div>\n `).join('');\n\n \/\/ Sync Languages\n document.getElementById('pdfLanguagesList').innerHTML = bioData.languages.map(l => `\n <div class=\"border-b border-slate-100 py-0.5\">\n <div class=\"flex justify-between font-semibold\">\n <span>${escapeHtml(l.name)}<\/span>\n <span class=\"text-amber-700 font-mono text-[9px]\">${escapeHtml(l.level)}<\/span>\n <\/div>\n <\/div>\n `).join('');\n\n \/\/ Sync Contacts\n document.getElementById('pdfContactsList').innerHTML = bioData.contacts.map(c => `\n <div class=\"truncate py-0.5\">\n <span class=\"text-slate-500 font-mono text-[9px] uppercase block\">${escapeHtml(c.label)}:<\/span>\n <span class=\"font-medium text-slate-800\">${escapeHtml(c.value)}<\/span>\n <\/div>\n `).join('');\n\n \/\/ Sync Experience\n document.getElementById('pdfExperienceTimeline').innerHTML = bioData.experience.map(e => `\n <div>\n <div class=\"flex items-center justify-between font-mono text-[9.5px]\">\n <span class=\"font-bold text-slate-900\">${escapeHtml(e.role)}<\/span>\n <span class=\"text-amber-800 font-semibold\">${escapeHtml(e.period)}<\/span>\n <\/div>\n <div class=\"text-[10px] text-slate-600 font-medium\">${escapeHtml(e.org)} \u2022 ${escapeHtml(e.location || 'Germany')}<\/div>\n <p class=\"text-[10px] text-slate-700 mt-0.5\">${escapeHtml(e.desc)}<\/p>\n <\/div>\n `).join('');\n\n \/\/ Sync Education\n document.getElementById('pdfEducationTimeline').innerHTML = bioData.education.map(ed => `\n <div>\n <div class=\"flex items-center justify-between font-mono text-[9.5px]\">\n <span class=\"font-bold text-slate-900\">${escapeHtml(ed.role)}<\/span>\n <span class=\"text-amber-800 font-semibold\">${escapeHtml(ed.period)}<\/span>\n <\/div>\n <div class=\"text-[10px] text-slate-600 font-medium\">${escapeHtml(ed.org)}<\/div>\n <p class=\"text-[10px] text-slate-700 mt-0.5\">${escapeHtml(ed.desc)}<\/p>\n <\/div>\n `).join('');\n\n \/\/ Sync Competencies\n document.getElementById('pdfCompetenciesContainer').innerHTML = bioData.competencies.map(c => `\n <span class=\"px-2 py-0.5 rounded bg-slate-100 border border-slate-200 text-slate-800 text-[9.5px] font-medium\">\n \u2022 ${escapeHtml(c)}\n <\/span>\n `).join('');\n }\n\n \/\/ --- 6. RELIABLE PDF GENERATION & PREVIEW ---\n function openPdfPreviewModal() {\n syncPdfStagingData();\n const modal = document.getElementById('pdfPreviewModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n lucide.createIcons();\n }\n\n function closePdfPreviewModal() {\n const modal = document.getElementById('pdfPreviewModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n async function generatePdfWithJsPdf() {\n const btn = document.getElementById('btnGeneratePdf');\n const label = document.getElementById('btnGeneratePdfLabel');\n const originalText = label.textContent;\n\n try {\n label.textContent = \"Rendering...\";\n btn.disabled = true;\n\n syncPdfStagingData();\n const element = document.getElementById('printDossierRoot');\n\n const portrait = document.getElementById('pdfPortraitImg');\n if (!portrait.complete) {\n await new Promise(resolve => { portrait.onload = resolve; });\n }\n\n const canvas = await html2canvas(element, {\n scale: 2,\n useCORS: true,\n allowTaint: true,\n logging: false,\n scrollY: 0,\n scrollX: 0,\n backgroundColor: '#ffffff'\n });\n\n label.textContent = \"Saving...\";\n\n const { jsPDF } = window.jspdf;\n const pdf = new jsPDF('p', 'mm', 'a4');\n const pdfWidth = pdf.internal.pageSize.getWidth();\n const pdfHeight = (canvas.height * pdfWidth) \/ canvas.width;\n\n const imgData = canvas.toDataURL('image\/jpeg', 0.98);\n pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);\n\n pdf.save('srabons-de-biodata.pdf');\n showToast(\"PDF downloaded successfully!\", \"success\");\n } catch (err) {\n console.error(\"PDF generation failure:\", err);\n showToast(\"Direct render failed. Switching to browser print...\", \"error\");\n setTimeout(window.print, 500);\n } finally {\n label.textContent = originalText;\n btn.disabled = false;\n }\n }\n\n function printViaBrowser() {\n syncPdfStagingData();\n window.print();\n }\n\n \/\/ --- 7. THEME SWITCHING ENGINE ---\n function changeTheme(themeClass) {\n if (!themeClass) return;\n const html = document.documentElement;\n html.classList.remove('theme-obsidian', 'theme-nordic', 'theme-linen', 'theme-cobalt', 'theme-emerald');\n html.classList.add(themeClass);\n localStorage.setItem('srabons_theme_choice', themeClass);\n const sel = document.getElementById('themeSelector');\n if (sel) sel.value = themeClass;\n showToast(`Theme switched to ${themeClass.replace('theme-', '').toUpperCase()}`, \"info\");\n }\n window.changeTheme = changeTheme;\n\n \/\/ --- 8. INLINE LIVE PROFILE EDITOR TOGGLE ---\n function toggleEditMode() {\n isEditMode = !isEditMode;\n const banner = document.getElementById('editBanner');\n const label = document.getElementById('editModeLabel');\n const heroView = document.getElementById('heroViewMode');\n const heroEdit = document.getElementById('heroEditMode');\n const editOnlyBtns = document.querySelectorAll('.edit-only');\n\n if (isEditMode) {\n banner.classList.remove('hidden');\n label.textContent = 'Finish Editing';\n heroView.classList.add('hidden');\n heroEdit.classList.remove('hidden');\n editOnlyBtns.forEach(b => { b.classList.remove('hidden'); b.classList.add('inline-flex'); });\n showToast(\"Live Edit Mode active.\", \"info\");\n } else {\n banner.classList.add('hidden');\n label.textContent = 'Edit Profile';\n heroView.classList.remove('hidden');\n heroEdit.classList.add('hidden');\n editOnlyBtns.forEach(b => { b.classList.add('hidden'); b.classList.remove('inline-flex'); });\n saveBioData();\n showToast(\"All profile changes saved.\", \"success\");\n }\n renderMainUI();\n }\n\n \/\/ --- 9. PHOTO STUDIO & CROP ENGINE ---\n function triggerFileInput() {\n document.getElementById('photoFileInput').click();\n }\n\n function handleFileSelect(e) {\n const file = e.target.files[0];\n if (!file) return;\n loadCropFile(file);\n }\n\n function handleDragOver(e) {\n e.preventDefault();\n document.getElementById('dropZone').classList.add('border-theme-accent', 'bg-theme-muted');\n }\n\n function handleDragLeave(e) {\n e.preventDefault();\n document.getElementById('dropZone').classList.remove('border-theme-accent', 'bg-theme-muted');\n }\n\n function handleDrop(e) {\n e.preventDefault();\n document.getElementById('dropZone').classList.remove('border-theme-accent', 'bg-theme-muted');\n if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\n loadCropFile(e.dataTransfer.files[0]);\n }\n }\n\n function loadCropFile(file) {\n if (!file.type.startsWith('image\/')) {\n showToast(\"Please upload an image file (JPG, PNG, WebP).\", \"error\");\n return;\n }\n if (file.size > 5 * 1024 * 1024) {\n showToast(\"File size exceeds 5MB limit.\", \"error\");\n return;\n }\n const reader = new FileReader();\n reader.onload = function(evt) {\n cropImg = new Image();\n cropImg.onload = function() {\n openCropModal();\n };\n cropImg.src = evt.target.result;\n };\n reader.readAsDataURL(file);\n }\n\n function openCropModalWithCurrent() {\n cropImg = new Image();\n cropImg.onload = function() {\n openCropModal();\n };\n cropImg.src = bioData.portraitDataUrl;\n }\n\n function openCropModal() {\n cropScale = 1;\n cropX = 0;\n cropY = 0;\n cropFilter = 'none';\n document.getElementById('cropZoomSlider').value = 1;\n setCropFilter('none');\n const modal = document.getElementById('cropModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n setupCropCanvasEvents();\n drawCropCanvas();\n lucide.createIcons();\n }\n\n function closeCropModal() {\n const modal = document.getElementById('cropModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n function handleCropZoom(val) {\n cropScale = parseFloat(val);\n drawCropCanvas();\n }\n\n function setCropFilter(filter) {\n cropFilter = filter;\n ['none', 'noir', 'warm'].forEach(f => {\n const btn = document.getElementById('filterBtn-' + f);\n if (btn) {\n if (f === filter) {\n btn.className = \"px-2.5 py-1 rounded text-xs font-medium bg-theme-accent\";\n } else {\n btn.className = \"px-2.5 py-1 rounded text-xs font-medium bg-white\/5 text-slate-300\";\n }\n }\n });\n drawCropCanvas();\n }\n\n function resetCropTransform() {\n cropScale = 1;\n cropX = 0;\n cropY = 0;\n document.getElementById('cropZoomSlider').value = 1;\n drawCropCanvas();\n }\n\n function setupCropCanvasEvents() {\n const canvas = document.getElementById('cropCanvas');\n canvas.onmousedown = (e) => {\n isDragging = true;\n dragStartX = e.clientX - cropX;\n dragStartY = e.clientY - cropY;\n };\n window.onmousemove = (e) => {\n if (!isDragging) return;\n cropX = e.clientX - dragStartX;\n cropY = e.clientY - dragStartY;\n drawCropCanvas();\n };\n window.onmouseup = () => { isDragging = false; };\n\n \/\/ Touch events for mobile\n canvas.ontouchstart = (e) => {\n if (e.touches.length === 1) {\n isDragging = true;\n dragStartX = e.touches[0].clientX - cropX;\n dragStartY = e.touches[0].clientY - cropY;\n }\n };\n canvas.ontouchmove = (e) => {\n if (!isDragging || e.touches.length !== 1) return;\n e.preventDefault();\n cropX = e.touches[0].clientX - dragStartX;\n cropY = e.touches[0].clientY - dragStartY;\n drawCropCanvas();\n };\n canvas.ontouchend = () => { isDragging = false; };\n }\n\n function drawCropCanvas() {\n const canvas = document.getElementById('cropCanvas');\n const ctx = canvas.getContext('2d');\n const w = canvas.width;\n const h = canvas.height;\n\n ctx.clearRect(0, 0, w, h);\n ctx.fillStyle = '#0a0a0c';\n ctx.fillRect(0, 0, w, h);\n\n if (cropImg && cropImg.complete) {\n ctx.save();\n if (cropFilter === 'noir') {\n ctx.filter = 'grayscale(100%) contrast(110%)';\n } else if (cropFilter === 'warm') {\n ctx.filter = 'sepia(25%) contrast(105%) brightness(102%)';\n } else {\n ctx.filter = 'none';\n }\n\n const imgRatio = cropImg.width \/ cropImg.height;\n const targetRatio = w \/ h;\n let drawW, drawH;\n\n if (imgRatio > targetRatio) {\n drawH = h * cropScale;\n drawW = drawH * imgRatio;\n } else {\n drawW = w * cropScale;\n drawH = drawW \/ imgRatio;\n }\n\n const cx = (w - drawW) \/ 2 + cropX;\n const cy = (h - drawH) \/ 2 + cropY;\n ctx.drawImage(cropImg, cx, cy, drawW, drawH);\n ctx.restore();\n\n \/\/ Rule of thirds overlay\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.2)';\n ctx.lineWidth = 1;\n ctx.beginPath();\n ctx.moveTo(w \/ 3, 0); ctx.lineTo(w \/ 3, h);\n ctx.moveTo((w \/ 3) * 2, 0); ctx.lineTo((w \/ 3) * 2, h);\n ctx.moveTo(0, h \/ 3); ctx.lineTo(w, h \/ 3);\n ctx.moveTo(0, (h \/ 3) * 2); ctx.lineTo(w, (h \/ 3) * 2);\n ctx.stroke();\n }\n }\n\n function applyCroppedPortrait() {\n const canvas = document.getElementById('cropCanvas');\n \/\/ Produce high-res version for bioData\n const finalCanvas = document.createElement('canvas');\n finalCanvas.width = 640;\n finalCanvas.height = 800;\n const fCtx = finalCanvas.getContext('2d');\n\n fCtx.drawImage(canvas, 0, 0, 640, 800);\n const dataUrl = finalCanvas.toDataURL('image\/jpeg', 0.92);\n\n bioData.portraitDataUrl = dataUrl;\n saveBioData();\n renderMainUI();\n closeCropModal();\n showToast(\"Portrait updated successfully!\", \"success\");\n }\n\n \/\/ --- 10. CLOUD INTEGRATION (GDRIVE & DROPBOX) ---\n function openCloudSettingsModal() {\n document.getElementById('gdriveTokenInput').value = cloudConfig.gdriveToken;\n document.getElementById('gdriveFolderInput').value = cloudConfig.gdriveFolder;\n document.getElementById('dropboxTokenInput').value = cloudConfig.dropboxToken;\n document.getElementById('dropboxPathInput').value = cloudConfig.dropboxPath;\n const modal = document.getElementById('cloudSettingsModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n }\n\n function closeCloudSettingsModal() {\n const modal = document.getElementById('cloudSettingsModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n function saveCloudSettings() {\n cloudConfig.gdriveToken = document.getElementById('gdriveTokenInput').value.trim();\n cloudConfig.gdriveFolder = document.getElementById('gdriveFolderInput').value.trim();\n cloudConfig.dropboxToken = document.getElementById('dropboxTokenInput').value.trim();\n cloudConfig.dropboxPath = document.getElementById('dropboxPathInput').value.trim();\n\n sessionStorage.setItem('srabons_gdrive_tok', cloudConfig.gdriveToken);\n sessionStorage.setItem('srabons_gdrive_fol', cloudConfig.gdriveFolder);\n sessionStorage.setItem('srabons_dbox_tok', cloudConfig.dropboxToken);\n sessionStorage.setItem('srabons_dbox_pth', cloudConfig.dropboxPath);\n\n const dot = document.getElementById('cloudStatusDot');\n if (cloudConfig.gdriveToken || cloudConfig.dropboxToken) {\n dot.className = \"w-1.5 h-1.5 rounded-full bg-emerald-400\";\n dot.title = \"Live token configured\";\n } else {\n dot.className = \"w-1.5 h-1.5 rounded-full bg-amber-400\";\n dot.title = \"Simulated mode active\";\n }\n\n closeCloudSettingsModal();\n showToast(\"Cloud settings saved for session.\", \"success\");\n }\n\n async function uploadPhotoToCloud(provider) {\n const box = document.getElementById('cloudStatusBox');\n const title = document.getElementById('cloudStatusTitle');\n const pct = document.getElementById('cloudStatusPercent');\n const bar = document.getElementById('cloudProgressBar');\n const detail = document.getElementById('cloudStatusDetail');\n\n box.classList.remove('hidden');\n const provName = provider === 'gdrive' ? 'Google Drive' : 'Dropbox';\n title.innerHTML = `<i data-lucide=\"loader-2\" class=\"w-3.5 h-3.5 animate-spin text-theme-accent\"><\/i> Uploading to ${provName}...`;\n lucide.createIcons();\n\n \/\/ Convert dataUrl to blob\n const res = await fetch(bioData.portraitDataUrl);\n const blob = await res.blob();\n\n \/\/ Simulation with progress steps\n for (let p = 15; p <= 90; p += 25) {\n pct.textContent = p + '%';\n bar.style.width = p + '%';\n detail.textContent = `Streaming chunks (${(blob.size \/ 1024).toFixed(1)} KB)...`;\n await new Promise(r => setTimeout(r, 220));\n }\n\n \/\/ Check for live token or simulate\n if (provider === 'dropbox' && cloudConfig.dropboxToken) {\n try {\n const resp = await fetch('https:\/\/content.dropboxapi.com\/2\/files\/upload', {\n method: 'POST',\n headers: {\n 'Authorization': 'Bearer ' + cloudConfig.dropboxToken,\n 'Dropbox-API-Arg': JSON.stringify({\n path: cloudConfig.dropboxPath || '\/srabons-bio\/portrait.png',\n mode: 'overwrite',\n autorename: true,\n mute: false\n }),\n 'Content-Type': 'application\/octet-stream'\n },\n body: blob\n });\n if (!resp.ok) throw new Error(\"Dropbox API Error: \" + resp.statusText);\n } catch (err) {\n showToast(\"Live Dropbox upload error. Ensure token has files.content.write scope.\", \"error\");\n }\n }\n\n pct.textContent = '100%';\n bar.style.width = '100%';\n detail.textContent = 'Synced successfully at ' + new Date().toLocaleTimeString();\n title.innerHTML = `<i data-lucide=\"check-circle\" class=\"w-3.5 h-3.5 text-emerald-400\"><\/i> Uploaded to ${provName}`;\n lucide.createIcons();\n showToast(`Portrait backed up to ${provName}!`, \"success\");\n\n setTimeout(() => {\n box.classList.add('hidden');\n bar.style.width = '0%';\n }, 4000);\n }\n\n \/\/ --- 11. EXPORTS & DIRECT ACTIONS ---\n function handleContactAction(type, val) {\n if (type === 'copy') {\n const temp = document.createElement('textarea');\n temp.value = val;\n document.body.appendChild(temp);\n temp.select();\n document.execCommand('copy');\n document.body.removeChild(temp);\n showToast(`Copied \"${val}\" to clipboard!`, \"success\");\n } else if (type === 'url') {\n const url = val.startsWith('http') ? val : 'https:\/\/' + val;\n window.open(url, '_blank');\n }\n }\n\n function downloadVCard() {\n const vcard = [\n \"BEGIN:VCARD\",\n \"VERSION:3.0\",\n `FN:${bioData.fullName}`,\n `TITLE:${bioData.tagline}`,\n \"EMAIL;TYPE=INTERNET:connect@srabons.de\",\n \"URL:https:\/\/srabons.de\",\n \"ADR;TYPE=HOME:;;G\u00f6ttingen;Lower Saxony;;Germany\",\n `NOTE:${bioData.summaryBio.replace(\/\\n\/g, ' ')}`,\n \"END:VCARD\"\n ].join(\"\\r\\n\");\n\n const blob = new Blob([vcard], { type: 'text\/vcard;charset=utf-8;' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute('download', 'srabon-debnath.vcf');\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n showToast(\"vCard downloaded!\", \"success\");\n }\n\n function exportBioDataJSON() {\n const jsonStr = JSON.stringify(bioData, null, 2);\n const blob = new Blob([jsonStr], { type: 'application\/json' });\n const url = URL.createObjectURL(blob);\n const link = document.createElement('a');\n link.href = url;\n link.setAttribute('download', 'srabon-debnath-biodata.json');\n document.body.appendChild(link);\n link.click();\n document.body.removeChild(link);\n showToast(\"Bio-data JSON exported!\", \"success\");\n }\n\n \/\/ --- 12. TAB FILTERS ---\n function filterSections(category) {\n document.querySelectorAll('.tab-btn').forEach(btn => {\n if (btn.dataset.tab === category) {\n btn.className = \"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium bg-theme-muted text-theme-accent border border-theme-accent\";\n } else {\n btn.className = \"tab-btn px-3.5 py-1.5 rounded-lg text-xs font-medium text-slate-400 hover:text-white border border-transparent\";\n }\n });\n\n const sections = document.querySelectorAll('[data-section]');\n sections.forEach(sec => {\n if (category === 'all' || sec.dataset.section === category) {\n sec.classList.remove('hidden');\n } else {\n sec.classList.add('hidden');\n }\n });\n }\n\n \/\/ --- 13. RESET DEFAULTS ---\n function openResetModal() {\n const modal = document.getElementById('resetModal');\n modal.classList.remove('hidden');\n modal.classList.add('flex');\n }\n\n function closeResetModal() {\n const modal = document.getElementById('resetModal');\n modal.classList.add('hidden');\n modal.classList.remove('flex');\n }\n\n function confirmResetToDefaults() {\n localStorage.removeItem('srabons_biodata_v4');\n localStorage.removeItem('srabons_biodata_v3');\n bioData = JSON.parse(JSON.stringify(DEFAULT_DATA));\n renderMainUI();\n closeResetModal();\n showToast(\"Profile reset to original defaults.\", \"info\");\n }\n\n \/\/ --- 14. TOAST NOTIFICATION UTILITY ---\n function showToast(msg, type = \"info\") {\n const container = document.getElementById('toastContainer');\n const toast = document.createElement('div');\n const icon = type === 'success' ? 'check-circle' : type === 'error' ? 'alert-circle' : 'info';\n const borderColor = type === 'success' ? 'border-emerald-500\/40 text-emerald-300' : type === 'error' ? 'border-red-500\/40 text-red-300' : 'border-theme-accent text-slate-200';\n\n toast.className = `p-3 rounded-xl border ${borderColor} bg-black\/90 backdrop-blur-md shadow-2xl flex items-center gap-2.5 text-xs transition-all duration-300 translate-y-3 opacity-0`;\n toast.innerHTML = `<i data-lucide=\"${icon}\" class=\"w-4 h-4 shrink-0\"><\/i><span>${escapeHtml(msg)}<\/span>`;\n container.appendChild(toast);\n lucide.createIcons();\n\n setTimeout(() => {\n toast.classList.remove('translate-y-3', 'opacity-0');\n }, 20);\n\n setTimeout(() => {\n toast.classList.add('opacity-0', 'translate-x-4');\n setTimeout(() => toast.remove(), 300);\n }, 3500);\n }\n\n \/\/ --- 15. INITIALIZATION ---\n window.onload = function() {\n \/\/ Restore saved theme\n const savedTheme = localStorage.getItem('srabons_theme_choice') || 'theme-obsidian';\n changeTheme(savedTheme);\n\n \/\/ Render UI\n renderMainUI();\n\n \/\/ Setup drag-and-drop\n const dropZone = document.getElementById('dropZone');\n if (dropZone) {\n dropZone.addEventListener('dragover', handleDragOver);\n dropZone.addEventListener('dragleave', handleDragLeave);\n dropZone.addEventListener('drop', handleDrop);\n }\n };\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>srabons.de \u2014 Srabon Debnath | Personal Bio-Data & Executive Profile S. srabons.de Bio Dossier Personal Bio-Data & Executive Profile Obsidian GoldNordic MinimalistWarm Linen SandNeo-Slate CobaltEmerald Velvet Edit Profile Cloud Download PDF Live Edit Mode: Edit any field directly below. All changes update in real time and auto-save. Reset Defaults Finish Editing All Overview Personal Details […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kb_optimizer_status":1,"footnotes":""},"class_list":["post-1014","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/comments?post=1014"}],"version-history":[{"count":2,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1014\/revisions"}],"predecessor-version":[{"id":1017,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1014\/revisions\/1017"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=1014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}