{"id":975,"date":"2026-10-23T22:44:45","date_gmt":"2026-10-23T22:44:45","guid":{"rendered":"https:\/\/srabons.de\/?page_id=975"},"modified":"2026-10-23T22:44:49","modified_gmt":"2026-10-23T22:44:49","slug":"cv-builder","status":"publish","type":"page","link":"https:\/\/srabons.de\/en\/cv-builder\/","title":{"rendered":"CV Builder"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>srabons.de \u2014 Professional WordPress &#038; Modern CV Builder<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <script>\n        tailwind.config = {\n            darkMode: 'class',\n            theme: {\n                extend: {\n                    colors: {\n                        brand: {\n                            50: '#f0fdf4',\n                            100: '#dcfce7',\n                            500: '#22c55e',\n                            600: '#16a34a',\n                            700: '#15803d',\n                            900: '#14532d',\n                            dark: '#0a0f0d'\n                        }\n                    }\n                }\n            }\n        }\n    <\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n    <style>\n        body { font-family: 'Inter', sans-serif; }\n        \/* Custom scrollbar for dark theme *\/\n        ::-webkit-scrollbar { width: 8px; height: 8px; }\n        ::-webkit-scrollbar-track { background: #111827; }\n        ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }\n        ::-webkit-scrollbar-thumb:hover { background: #4b5563; }\n        @media print {\n            body * { visibility: hidden; }\n            #printable-cv, #printable-cv * { visibility: visible; }\n            #printable-cv { position: absolute; left: 0; top: 0; width: 100%; margin: 0; padding: 20px; background: white !important; color: black !important; }\n        }\n    <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-100 min-h-screen selection:bg-brand-500 selection:text-white\">\n\n    <!-- Notification Message Box (replaces alert) -->\n    <div id=\"toast\" class=\"fixed bottom-6 right-6 z-50 transform translate-y-20 opacity-0 transition-all duration-300 bg-slate-900 border border-slate-700 shadow-2xl rounded-xl px-5 py-4 flex items-center space-x-3 text-sm\">\n        <div id=\"toast-icon\" class=\"text-brand-500 font-bold text-lg\">\u2713<\/div>\n        <div id=\"toast-msg\" class=\"text-slate-200\">Action completed successfully!<\/div>\n    <\/div>\n\n    <!-- Header \/ Navbar -->\n    <header class=\"sticky top-0 z-40 backdrop-blur-xl bg-slate-950\/80 border-b border-slate-800\/80\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between\">\n            <div class=\"flex items-center space-x-3\">\n                <div class=\"w-10 h-10 rounded-xl bg-gradient-to-br from-brand-500 to-emerald-700 flex items-center justify-center shadow-lg shadow-brand-500\/20\">\n                    <span class=\"text-white font-black text-xl tracking-tighter\">S<\/span>\n                <\/div>\n                <div>\n                    <span class=\"text-xl font-extrabold tracking-tight bg-gradient-to-r from-white via-slate-200 to-brand-400 bg-clip-text text-transparent\">srabons.de<\/span>\n                    <span class=\"block text-[10px] uppercase tracking-widest text-brand-500 font-semibold\">WordPress CV Suite<\/span>\n                <\/div>\n            <\/div>\n            <nav class=\"hidden md:flex items-center space-x-8 text-sm font-medium text-slate-300\">\n                <a href=\"#features\" class=\"hover:text-brand-400 transition-colors\">Features<\/a>\n                <a href=\"#templates\" class=\"hover:text-brand-400 transition-colors\">Templates<\/a>\n                <a href=\"#builder\" class=\"hover:text-brand-400 transition-colors\">Live Builder<\/a>\n                <a href=\"#wordpress\" class=\"hover:text-brand-400 transition-colors\">WP Plugin<\/a>\n            <\/nav>\n            <div class=\"flex items-center space-x-4\">\n                <a href=\"#builder\" class=\"bg-brand-600 hover:bg-brand-500 text-white text-sm font-semibold px-5 py-2.5 rounded-xl shadow-lg shadow-brand-600\/20 transition-all transform hover:-translate-y-0.5\">\n                    Launch Builder\n                <\/a>\n            <\/div>\n        <\/div>\n    <\/header>\n\n    <!-- Hero Section with Minimalist Geometry -->\n    <section class=\"relative overflow-hidden pt-20 pb-28 border-b border-slate-800\/50\">\n        <div class=\"absolute inset-0 pointer-events-none opacity-20\">\n            <div class=\"absolute top-1\/4 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 w-[600px] h-[600px] bg-brand-500 rounded-full blur-[140px]\"><\/div>\n            <div class=\"absolute top-2\/3 right-10 w-96 h-96 bg-emerald-700 rounded-full blur-[120px]\"><\/div>\n        <\/div>\n        <!-- Minimalist grid lines -->\n        <div class=\"absolute inset-0 bg-[linear-gradient(to_right,#1e293b15_1px,transparent_1px),linear-gradient(to_bottom,#1e293b15_1px,transparent_1px)] bg-[size:4rem_4rem]\"><\/div>\n\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center\">\n            <div class=\"inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-slate-900 border border-slate-800 text-xs text-brand-400 font-medium mb-8 shadow-inner\">\n                <span class=\"w-2 h-2 rounded-full bg-brand-500 animate-pulse\"><\/span>\n                <span>Powered by WordPress &#038; Modern Web Tech<\/span>\n            <\/div>\n            <h1 class=\"text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-white max-w-4xl mx-auto leading-[1.15]\">\n                Craft Professional CVs with <span class=\"bg-gradient-to-r from-brand-400 to-emerald-300 bg-clip-text text-transparent\">srabons.de<\/span>\n            <\/h1>\n            <p class=\"mt-6 text-lg sm:text-xl text-slate-400 max-w-2xl mx-auto font-normal leading-relaxed\">\n                The ultimate WordPress-backed resume builder designed for professionals, developers, and creatives. Build, customize, and export stunning CVs in minutes.\n            <\/p>\n            <div class=\"mt-10 flex flex-col sm:flex-row items-center justify-center gap-4\">\n                <a href=\"#builder\" class=\"w-full sm:w-auto bg-brand-600 hover:bg-brand-500 text-white font-semibold px-8 py-4 rounded-xl shadow-xl shadow-brand-600\/30 transition-all flex items-center justify-center space-x-3 text-base\">\n                    <span>Create Your CV Now<\/span>\n                    <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\/><\/svg>\n                <\/a>\n                <a href=\"#templates\" class=\"w-full sm:w-auto bg-slate-900 hover:bg-slate-800 text-slate-300 hover:text-white font-semibold px-8 py-4 rounded-xl border border-slate-700 transition-all text-base\">\n                    Explore Templates\n                <\/a>\n            <\/div>\n\n            <!-- Stats Bar -->\n            <div class=\"mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 max-w-5xl mx-auto pt-10 border-t border-slate-800\/80\">\n                <div class=\"p-4 rounded-2xl bg-slate-900\/50 border border-slate-800\/60\">\n                    <div class=\"text-3xl font-black text-white\">100%<\/div>\n                    <div class=\"text-xs text-slate-400 mt-1 uppercase tracking-wider\">WordPress Native<\/div>\n                <\/div>\n                <div class=\"p-4 rounded-2xl bg-slate-900\/50 border border-slate-800\/60\">\n                    <div class=\"text-3xl font-black text-brand-400\">4+<\/div>\n                    <div class=\"text-xs text-slate-400 mt-1 uppercase tracking-wider\">Pro Layouts<\/div>\n                <\/div>\n                <div class=\"p-4 rounded-2xl bg-slate-900\/50 border border-slate-800\/60\">\n                    <div class=\"text-3xl font-black text-white\">&lt; 5 min<\/div>\n                    <div class=\"text-xs text-slate-400 mt-1 uppercase tracking-wider\">Creation Time<\/div>\n                <\/div>\n                <div class=\"p-4 rounded-2xl bg-slate-900\/50 border border-slate-800\/60\">\n                    <div class=\"text-3xl font-black text-brand-400\">PDF \/ HTML<\/div>\n                    <div class=\"text-xs text-slate-400 mt-1 uppercase tracking-wider\">Instant Export<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Templates Showcase Section -->\n    <section id=\"templates\" class=\"py-24 bg-slate-900\/40 border-b border-slate-800\/50\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"text-center max-w-3xl mx-auto mb-16\">\n                <h2 class=\"text-xs uppercase tracking-widest text-brand-400 font-bold mb-3\">Curated Designs<\/h2>\n                <h3 class=\"text-3xl sm:text-4xl font-extrabold text-white\">Choose Your Professional Template<\/h3>\n                <p class=\"text-slate-400 mt-4 text-base\">Each template is optimized for ATS (Applicant Tracking Systems) and modern typography standards.<\/p>\n            <\/div>\n\n            <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n                <!-- Template 1: Executive Modern -->\n                <div class=\"group bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-brand-500\/50 transition-all duration-300 shadow-xl flex flex-col\">\n                    <div class=\"h-48 bg-gradient-to-br from-slate-800 to-slate-950 p-6 flex flex-col justify-between relative overflow-hidden\">\n                        <div class=\"absolute inset-0 bg-brand-500\/5 opacity-0 group-hover:opacity-100 transition-opacity\"><\/div>\n                        <div class=\"flex justify-between items-start\">\n                            <span class=\"px-2.5 py-1 rounded-md bg-brand-500\/20 text-brand-400 text-xs font-semibold\">Most Popular<\/span>\n                            <span class=\"text-xs text-slate-400 font-mono\">EXEC-01<\/span>\n                        <\/div>\n                        <div class=\"space-y-2\">\n                            <div class=\"w-24 h-3 bg-white rounded-full\"><\/div>\n                            <div class=\"w-36 h-2 bg-slate-600 rounded-full\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"p-6 flex-1 flex flex-col justify-between\">\n                        <div>\n                            <h4 class=\"text-xl font-bold text-white mb-2\">Executive Modern<\/h4>\n                            <p class=\"text-slate-400 text-sm leading-relaxed\">Clean two-column layout with bold header accents. Ideal for senior managers and tech professionals.<\/p>\n                        <\/div>\n                        <button onclick=\"selectTemplate('modern')\" class=\"mt-6 w-full py-2.5 rounded-xl bg-slate-800 hover:bg-brand-600 text-slate-200 hover:text-white font-medium text-sm transition-colors flex items-center justify-center space-x-2\">\n                            <span>Use Template<\/span>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Template 2: Minimalist Clean -->\n                <div class=\"group bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-brand-500\/50 transition-all duration-300 shadow-xl flex flex-col\">\n                    <div class=\"h-48 bg-gradient-to-br from-slate-900 to-slate-950 p-6 flex flex-col justify-between relative overflow-hidden\">\n                        <div class=\"absolute inset-0 bg-brand-500\/5 opacity-0 group-hover:opacity-100 transition-opacity\"><\/div>\n                        <div class=\"flex justify-between items-start\">\n                            <span class=\"px-2.5 py-1 rounded-md bg-slate-800 text-slate-300 text-xs font-semibold\">Clean &#038; Simple<\/span>\n                            <span class=\"text-xs text-slate-400 font-mono\">MIN-02<\/span>\n                        <\/div>\n                        <div class=\"space-y-2 border-l-2 border-brand-500 pl-3\">\n                            <div class=\"w-20 h-3 bg-white rounded-full\"><\/div>\n                            <div class=\"w-28 h-2 bg-slate-600 rounded-full\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"p-6 flex-1 flex flex-col justify-between\">\n                        <div>\n                            <h4 class=\"text-xl font-bold text-white mb-2\">Minimalist Minimal<\/h4>\n                            <p class=\"text-slate-400 text-sm leading-relaxed\">Single column focused on high readability and ample whitespace. Perfect for creatives and writers.<\/p>\n                        <\/div>\n                        <button onclick=\"selectTemplate('minimal')\" class=\"mt-6 w-full py-2.5 rounded-xl bg-slate-800 hover:bg-brand-600 text-slate-200 hover:text-white font-medium text-sm transition-colors flex items-center justify-center space-x-2\">\n                            <span>Use Template<\/span>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Template 3: Tech \/ Developer -->\n                <div class=\"group bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-brand-500\/50 transition-all duration-300 shadow-xl flex flex-col\">\n                    <div class=\"h-48 bg-gradient-to-br from-slate-900 to-emerald-950\/40 p-6 flex flex-col justify-between relative overflow-hidden\">\n                        <div class=\"absolute inset-0 bg-brand-500\/5 opacity-0 group-hover:opacity-100 transition-opacity\"><\/div>\n                        <div class=\"flex justify-between items-start\">\n                            <span class=\"px-2.5 py-1 rounded-md bg-emerald-500\/20 text-emerald-400 text-xs font-semibold\">Developer Choice<\/span>\n                            <span class=\"text-xs text-slate-400 font-mono\">DEV-03<\/span>\n                        <\/div>\n                        <div class=\"space-y-2\">\n                            <div class=\"w-28 h-3 bg-emerald-400 rounded-full\"><\/div>\n                            <div class=\"w-32 h-2 bg-slate-600 rounded-full\"><\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"p-6 flex-1 flex flex-col justify-between\">\n                        <div>\n                            <h4 class=\"text-xl font-bold text-white mb-2\">Tech Specialist<\/h4>\n                            <p class=\"text-slate-400 text-sm leading-relaxed\">Tailored specifically for engineers with dedicated skills matrices, GitHub references, and stack highlights.<\/p>\n                        <\/div>\n                        <button onclick=\"selectTemplate('tech')\" class=\"mt-6 w-full py-2.5 rounded-xl bg-slate-800 hover:bg-brand-600 text-slate-200 hover:text-white font-medium text-sm transition-colors flex items-center justify-center space-x-2\">\n                            <span>Use Template<\/span>\n                        <\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Interactive Live Builder Section -->\n    <section id=\"builder\" class=\"py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div class=\"text-center max-w-3xl mx-auto mb-14\">\n            <h2 class=\"text-xs uppercase tracking-widest text-brand-400 font-bold mb-3\">Interactive Workspace<\/h2>\n            <h3 class=\"text-3xl sm:text-4xl font-extrabold text-white\">Live CV Builder Studio<\/h3>\n            <p class=\"text-slate-400 mt-2 text-base\">Fill out your details on the left and watch your professional resume update in real-time on the right.<\/p>\n        <\/div>\n\n        <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-8 items-start\">\n            <!-- Left Panel: Form Inputs -->\n            <div class=\"lg:col-span-5 bg-slate-900 border border-slate-800 rounded-3xl p-6 sm:p-8 shadow-2xl space-y-8\">\n                <!-- Section Tabs -->\n                <div class=\"flex border-b border-slate-800 space-x-2 pb-3 overflow-x-auto\">\n                    <button onclick=\"switchTab('personal')\" id=\"tab-btn-personal\" class=\"px-4 py-2 rounded-xl text-sm font-semibold bg-brand-600 text-white transition-all whitespace-nowrap\">Personal<\/button>\n                    <button onclick=\"switchTab('experience')\" id=\"tab-btn-experience\" class=\"px-4 py-2 rounded-xl text-sm font-semibold bg-slate-800 text-slate-400 hover:text-white transition-all whitespace-nowrap\">Experience<\/button>\n                    <button onclick=\"switchTab('education')\" id=\"tab-btn-education\" class=\"px-4 py-2 rounded-xl text-sm font-semibold bg-slate-800 text-slate-400 hover:text-white transition-all whitespace-nowrap\">Education<\/button>\n                    <button onclick=\"switchTab('skills')\" id=\"tab-btn-skills\" class=\"px-4 py-2 rounded-xl text-sm font-semibold bg-slate-800 text-slate-400 hover:text-white transition-all whitespace-nowrap\">Skills<\/button>\n                <\/div>\n\n                <!-- Tab 1: Personal Info -->\n                <div id=\"tab-personal\" class=\"space-y-4\">\n                    <h4 class=\"text-base font-bold text-white flex items-center justify-between\">\n                        <span>Personal Information<\/span>\n                        <span class=\"text-xs text-brand-400 font-normal\">Step 1 of 4<\/span>\n                    <\/h4>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Full Name<\/label>\n                        <input type=\"text\" id=\"input-name\" value=\"Alexander Vance\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Professional Title<\/label>\n                        <input type=\"text\" id=\"input-title\" value=\"Senior Full-Stack WordPress Engineer\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                    <\/div>\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                        <div>\n                            <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Email<\/label>\n                            <input type=\"email\" id=\"input-email\" value=\"alexander.vance@srabons.de\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                        <\/div>\n                        <div>\n                            <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Phone<\/label>\n                            <input type=\"text\" id=\"input-phone\" value=\"+49 151 23456789\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Location<\/label>\n                        <input type=\"text\" id=\"input-location\" value=\"Berlin, Germany\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                    <\/div>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Professional Summary<\/label>\n                        <textarea id=\"input-summary\" rows=\"3\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">Passionate WordPress architect and software engineer with 8+ years of experience building scalable web applications, custom themes, and enterprise plugins.<\/textarea>\n                    <\/div>\n                    <div class=\"pt-2 flex justify-end\">\n                        <button onclick=\"switchTab('experience')\" class=\"px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-medium text-sm transition-all\">Next: Experience \u2192<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Tab 2: Experience -->\n                <div id=\"tab-experience\" class=\"space-y-4 hidden\">\n                    <h4 class=\"text-base font-bold text-white flex items-center justify-between\">\n                        <span>Work Experience<\/span>\n                        <span class=\"text-xs text-brand-400 font-normal\">Step 2 of 4<\/span>\n                    <\/h4>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Company Name<\/label>\n                        <input type=\"text\" id=\"input-exp-company\" value=\"Srabons Tech GmbH\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                    <\/div>\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                        <div>\n                            <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Role \/ Position<\/label>\n                            <input type=\"text\" id=\"input-exp-role\" value=\"Lead WordPress Developer\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                        <\/div>\n                        <div>\n                            <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Duration<\/label>\n                            <input type=\"text\" id=\"input-exp-date\" value=\"2021 - Present\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                        <\/div>\n                    <\/div>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Key Achievements \/ Description<\/label>\n                        <textarea id=\"input-exp-desc\" rows=\"3\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">Engineered high-performance WordPress themes and custom plugins. Improved site loading speed by 45% across enterprise client portals.<\/textarea>\n                    <\/div>\n                    <div class=\"pt-2 flex justify-between\">\n                        <button onclick=\"switchTab('personal')\" class=\"px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 font-medium text-sm transition-all\">\u2190 Back<\/button>\n                        <button onclick=\"switchTab('education')\" class=\"px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-medium text-sm transition-all\">Next: Education \u2192<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Tab 3: Education -->\n                <div id=\"tab-education\" class=\"space-y-4 hidden\">\n                    <h4 class=\"text-base font-bold text-white flex items-center justify-between\">\n                        <span>Education<\/span>\n                        <span class=\"text-xs text-brand-400 font-normal\">Step 3 of 4<\/span>\n                    <\/h4>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Institution \/ University<\/label>\n                        <input type=\"text\" id=\"input-edu-school\" value=\"Technical University of Berlin\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                    <\/div>\n                    <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                        <div>\n                            <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Degree \/ Major<\/label>\n                            <input type=\"text\" id=\"input-edu-degree\" value=\"B.Sc. in Computer Science\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                        <\/div>\n                        <div>\n                            <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Graduation Year<\/label>\n                            <input type=\"text\" id=\"input-edu-year\" value=\"2020\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                        <\/div>\n                    <\/div>\n                    <div class=\"pt-2 flex justify-between\">\n                        <button onclick=\"switchTab('experience')\" class=\"px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 font-medium text-sm transition-all\">\u2190 Back<\/button>\n                        <button onclick=\"switchTab('skills')\" class=\"px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-medium text-sm transition-all\">Next: Skills \u2192<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Tab 4: Skills -->\n                <div id=\"tab-skills\" class=\"space-y-4 hidden\">\n                    <h4 class=\"text-base font-bold text-white flex items-center justify-between\">\n                        <span>Skills &#038; Expertise<\/span>\n                        <span class=\"text-xs text-brand-400 font-normal\">Step 4 of 4<\/span>\n                    <\/h4>\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-1.5\">Skills (comma separated)<\/label>\n                        <input type=\"text\" id=\"input-skills\" value=\"WordPress, PHP, JavaScript, React, Tailwind CSS, MySQL, Git, REST APIs, Docker\" oninput=\"updateCV()\" class=\"w-full bg-slate-950 border border-slate-800 rounded-xl px-4 py-3 text-slate-200 focus:outline-none focus:border-brand-500 text-sm\">\n                    <\/div>\n                    <div class=\"pt-2 flex justify-between\">\n                        <button onclick=\"switchTab('education')\" class=\"px-5 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 font-medium text-sm transition-all\">\u2190 Back<\/button>\n                        <button onclick=\"showToast('CV data synchronized successfully!')\" class=\"px-5 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-medium text-sm transition-all shadow-lg shadow-emerald-600\/30\">Save Changes<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Template Selector inside Builder -->\n                <div class=\"pt-6 border-t border-slate-800\">\n                    <label class=\"block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3\">Active Style Layout<\/label>\n                    <div class=\"grid grid-cols-3 gap-3\">\n                        <button onclick=\"selectTemplate('modern')\" id=\"tpl-btn-modern\" class=\"py-2 px-3 rounded-xl border border-brand-500 bg-brand-500\/10 text-brand-400 font-medium text-xs text-center transition-all\">Modern<\/button>\n                        <button onclick=\"selectTemplate('minimal')\" id=\"tpl-btn-minimal\" class=\"py-2 px-3 rounded-xl border border-slate-800 bg-slate-950 text-slate-400 font-medium text-xs text-center hover:border-slate-700 transition-all\">Minimal<\/button>\n                        <button onclick=\"selectTemplate('tech')\" id=\"tpl-btn-tech\" class=\"py-2 px-3 rounded-xl border border-slate-800 bg-slate-950 text-slate-400 font-medium text-xs text-center hover:border-slate-700 transition-all\">Tech<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right Panel: Live CV Preview -->\n            <div class=\"lg:col-span-7 sticky top-28\">\n                <div class=\"bg-slate-900 border border-slate-800 rounded-3xl p-4 sm:p-6 shadow-2xl\">\n                    <div class=\"flex items-center justify-between pb-4 mb-4 border-b border-slate-800\">\n                        <div class=\"flex items-center space-x-2\">\n                            <span class=\"w-3 h-3 rounded-full bg-red-500\/80\"><\/span>\n                            <span class=\"w-3 h-3 rounded-full bg-yellow-500\/80\"><\/span>\n                            <span class=\"w-3 h-3 rounded-full bg-green-500\/80\"><\/span>\n                            <span class=\"ml-2 text-xs font-mono text-slate-400\">srabons-cv-preview.html<\/span>\n                        <\/div>\n                        <div class=\"flex items-center space-x-2\">\n                            <button onclick=\"triggerPrint()\" class=\"px-3 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs font-medium transition-colors flex items-center space-x-1.5\">\n                                <svg class=\"w-3.5 h-3.5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"\/><\/svg>\n                                <span>Export PDF<\/span>\n                            <\/button>\n                            <button onclick=\"copyHTMLCode()\" class=\"px-3 py-1.5 rounded-lg bg-brand-600 hover:bg-brand-500 text-white text-xs font-medium transition-colors\">\n                                Copy HTML\n                            <\/button>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Printable CV Container -->\n                    <div id=\"printable-cv\" class=\"bg-white text-slate-900 rounded-2xl p-8 shadow-inner min-h-[580px] transition-all font-sans\">\n                        <!-- Dynamic Header -->\n                        <div id=\"cv-header-area\" class=\"border-b border-slate-200 pb-6 mb-6\">\n                            <h2 id=\"prev-name\" class=\"text-3xl font-extrabold text-slate-900 tracking-tight\">Alexander Vance<\/h2>\n                            <p id=\"prev-title\" class=\"text-brand-700 font-semibold text-base mt-1\">Senior Full-Stack WordPress Engineer<\/p>\n                            <div id=\"prev-contact\" class=\"flex flex-wrap items-center gap-y-1 gap-x-4 text-xs text-slate-600 mt-3 font-medium\">\n                                <span id=\"prev-email\">alexander.vance@srabons.de<\/span>\n                                <span>\u2022<\/span>\n                                <span id=\"prev-phone\">+49 151 23456789<\/span>\n                                <span>\u2022<\/span>\n                                <span id=\"prev-location\">Berlin, Germany<\/span>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Summary -->\n                        <div class=\"mb-6\">\n                            <h3 class=\"text-xs uppercase tracking-wider font-bold text-slate-500 mb-2\">Professional Summary<\/h3>\n                            <p id=\"prev-summary\" class=\"text-sm text-slate-700 leading-relaxed\">Passionate WordPress architect and software engineer with 8+ years of experience building scalable web applications, custom themes, and enterprise plugins.<\/p>\n                        <\/div>\n\n                        <!-- Experience -->\n                        <div class=\"mb-6\">\n                            <h3 class=\"text-xs uppercase tracking-wider font-bold text-slate-500 mb-3\">Work Experience<\/h3>\n                            <div>\n                                <div class=\"flex justify-between items-baseline mb-1\">\n                                    <h4 id=\"prev-exp-role\" class=\"font-bold text-sm text-slate-900\">Lead WordPress Developer<\/h4>\n                                    <span id=\"prev-exp-date\" class=\"text-xs font-semibold text-brand-700\">2021 &#8211; Present<\/span>\n                                <\/div>\n                                <div id=\"prev-exp-company\" class=\"text-xs font-medium text-slate-600 mb-2\">Srabons Tech GmbH<\/div>\n                                <p id=\"prev-exp-desc\" class=\"text-sm text-slate-700 leading-relaxed\">Engineered high-performance WordPress themes and custom plugins. Improved site loading speed by 45% across enterprise client portals.<\/p>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Education -->\n                        <div class=\"mb-6\">\n                            <h3 class=\"text-xs uppercase tracking-wider font-bold text-slate-500 mb-3\">Education<\/h3>\n                            <div>\n                                <div class=\"flex justify-between items-baseline mb-1\">\n                                    <h4 id=\"prev-edu-degree\" class=\"font-bold text-sm text-slate-900\">B.Sc. in Computer Science<\/h4>\n                                    <span id=\"prev-edu-year\" class=\"text-xs font-semibold text-brand-700\">2020<\/span>\n                                <\/div>\n                                <div id=\"prev-edu-school\" class=\"text-xs font-medium text-slate-600\">Technical University of Berlin<\/div>\n                            <\/div>\n                        <\/div>\n\n                        <!-- Skills -->\n                        <div>\n                            <h3 class=\"text-xs uppercase tracking-wider font-bold text-slate-500 mb-2\">Skills &#038; Expertise<\/h3>\n                            <div id=\"prev-skills-container\" class=\"flex flex-wrap gap-1.5\">\n                                <span class=\"px-2.5 py-1 rounded-md bg-slate-100 text-slate-800 text-xs font-medium\">WordPress<\/span>\n                                <span class=\"px-2.5 py-1 rounded-md bg-slate-100 text-slate-800 text-xs font-medium\">PHP<\/span>\n                                <span class=\"px-2.5 py-1 rounded-md bg-slate-100 text-slate-800 text-xs font-medium\">JavaScript<\/span>\n                                <span class=\"px-2.5 py-1 rounded-md bg-slate-100 text-slate-800 text-xs font-medium\">React<\/span>\n                                <span class=\"px-2.5 py-1 rounded-md bg-slate-100 text-slate-800 text-xs font-medium\">Tailwind CSS<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- WordPress Integration Section -->\n    <section id=\"wordpress\" class=\"py-24 bg-slate-900\/60 border-t border-slate-800\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n            <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center\">\n                <div>\n                    <div class=\"inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-brand-500\/10 text-brand-400 text-xs font-semibold mb-6\">\n                        <span>Seamless WordPress Ecosystem<\/span>\n                    <\/div>\n                    <h3 class=\"text-3xl sm:text-4xl font-extrabold text-white tracking-tight\">Built Specifically for srabons.de WordPress Architecture<\/h3>\n                    <p class=\"text-slate-400 mt-4 text-base leading-relaxed\">\n                        Integrate our advanced CV builder directly into your WordPress dashboard as a custom shortcode or widget. Allow your site visitors or members to generate professional CVs on the fly, stored securely in your database.\n                    <\/p>\n                    <ul class=\"mt-8 space-y-4 text-slate-300 text-sm\">\n                        <li class=\"flex items-center space-x-3\">\n                            <div class=\"w-5 h-5 rounded-full bg-brand-500\/20 text-brand-400 flex items-center justify-center font-bold text-xs\">\u2713<\/div>\n                            <span>Custom WordPress Plugin &#038; Gutenberg Block Support<\/span>\n                        <\/li>\n                        <li class=\"flex items-center space-x-3\">\n                            <div class=\"w-5 h-5 rounded-full bg-brand-500\/20 text-brand-400 flex items-center justify-center font-bold text-xs\">\u2713<\/div>\n                            <span>User account synchronization and draft storage<\/span>\n                        <\/li>\n                        <li class=\"flex items-center space-x-3\">\n                            <div class=\"w-5 h-5 rounded-full bg-brand-500\/20 text-brand-400 flex items-center justify-center font-bold text-xs\">\u2713<\/div>\n                            <span>Export direct to PDF with custom branding watermarks<\/span>\n                        <\/li>\n                    <\/ul>\n                <\/div>\n                <div class=\"bg-slate-950 border border-slate-800 rounded-3xl p-8 shadow-2xl font-mono text-xs text-slate-300 space-y-4\">\n                    <div class=\"flex items-center justify-between pb-3 border-b border-slate-800 text-slate-500\">\n                        <span>srabons-plugin-init.php<\/span>\n                        <span class=\"text-brand-400\">PHP 8.2<\/span>\n                    <\/div>\n                    <pre class=\"overflow-x-auto text-emerald-400\"><code>&lt;?php\n\/**\n * Plugin Name: Srabons.de CV Engine\n * Description: Dynamic WordPress CV Builder shortcode.\n * Version: 2.4.0\n *\/\n\nclass Srabons_CV_Builder {\n    public function __construct() {\n        add_shortcode('srabons_cv', [$this, 'render_studio']);\n    }\n    \n    public function render_studio($atts) {\n        ob_start();\n        include plugin_dir_path(__FILE__) . 'templates\/studio.php';\n        return ob_get_clean();\n    }\n}\nnew Srabons_CV_Builder();\n?&gt;<\/code><\/pre>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Footer -->\n    <footer class=\"bg-slate-950 border-t border-slate-800 py-12\">\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-6\">\n            <div class=\"flex items-center space-x-3\">\n                <div class=\"w-8 h-8 rounded-lg bg-brand-500 flex items-center justify-center text-white font-bold\">S<\/div>\n                <span class=\"text-white font-bold text-lg\">srabons.de<\/span>\n            <\/div>\n            <p class=\"text-xs text-slate-500\">\u00a9 2026 srabons.de. All rights reserved. Built for professional WordPress resume generation.<\/p>\n            <div class=\"flex space-x-6 text-xs text-slate-400\">\n                <a href=\"#\" class=\"hover:text-brand-400\">Privacy Policy<\/a>\n                <a href=\"#\" class=\"hover:text-brand-400\">Terms of Service<\/a>\n                <a href=\"#\" class=\"hover:text-brand-400\">Support<\/a>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <!-- JavaScript for Interactivity -->\n    <script>\n        \/\/ State and Tab Management\n        let currentTemplate = 'modern';\n\n        function switchTab(tabId) {\n            ['personal', 'experience', 'education', 'skills'].forEach(t => {\n                document.getElementById(`tab-${t}`).classList.add('hidden');\n                document.getElementById(`tab-btn-${t}`).className = \"px-4 py-2 rounded-xl text-sm font-semibold bg-slate-800 text-slate-400 hover:text-white transition-all whitespace-nowrap\";\n            });\n            document.getElementById(`tab-${tabId}`).classList.remove('hidden');\n            document.getElementById(`tab-btn-${tabId}`).className = \"px-4 py-2 rounded-xl text-sm font-semibold bg-brand-600 text-white transition-all whitespace-nowrap\";\n        }\n\n        \/\/ Live CV Update Logic\n        function updateCV() {\n            document.getElementById('prev-name').innerText = document.getElementById('input-name').value || 'Your Name';\n            document.getElementById('prev-title').innerText = document.getElementById('input-title').value || 'Professional Title';\n            document.getElementById('prev-email').innerText = document.getElementById('input-email').value || 'email@example.com';\n            document.getElementById('prev-phone').innerText = document.getElementById('input-phone').value || '+49 ...';\n            document.getElementById('prev-location').innerText = document.getElementById('input-location').value || 'City, Country';\n            document.getElementById('prev-summary').innerText = document.getElementById('input-summary').value || '';\n\n            document.getElementById('prev-exp-company').innerText = document.getElementById('input-exp-company').value || '';\n            document.getElementById('prev-exp-role').innerText = document.getElementById('input-exp-role').value || '';\n            document.getElementById('prev-exp-date').innerText = document.getElementById('input-exp-date').value || '';\n            document.getElementById('prev-exp-desc').innerText = document.getElementById('input-exp-desc').value || '';\n\n            document.getElementById('prev-edu-school').innerText = document.getElementById('input-edu-school').value || '';\n            document.getElementById('prev-edu-degree').innerText = document.getElementById('input-edu-degree').value || '';\n            document.getElementById('prev-edu-year').innerText = document.getElementById('input-edu-year').value || '';\n\n            \/\/ Skills parser\n            const skillsRaw = document.getElementById('input-skills').value;\n            const skillsContainer = document.getElementById('prev-skills-container');\n            skillsContainer.innerHTML = '';\n            skillsRaw.split(',').forEach(skill => {\n                const s = skill.trim();\n                if(s) {\n                    const span = document.createElement('span');\n                    span.className = currentTemplate === 'tech' \n                        ? 'px-2.5 py-1 rounded-md bg-emerald-50 text-emerald-800 border border-emerald-200 text-xs font-mono font-medium'\n                        : 'px-2.5 py-1 rounded-md bg-slate-100 text-slate-800 text-xs font-medium';\n                    span.innerText = s;\n                    skillsContainer.appendChild(span);\n                }\n            });\n        }\n\n        \/\/ Template Selector\n        function selectTemplate(tpl) {\n            currentTemplate = tpl;\n            ['modern', 'minimal', 'tech'].forEach(t => {\n                const btn = document.getElementById(`tpl-btn-${t}`);\n                if(btn) {\n                    btn.className = t === tpl \n                        ? \"py-2 px-3 rounded-xl border border-brand-500 bg-brand-500\/10 text-brand-400 font-medium text-xs text-center transition-all\"\n                        : \"py-2 px-3 rounded-xl border border-slate-800 bg-slate-950 text-slate-400 font-medium text-xs text-center hover:border-slate-700 transition-all\";\n                }\n            });\n\n            const preview = document.getElementById('printable-cv');\n            if(tpl === 'modern') {\n                preview.className = \"bg-white text-slate-900 rounded-2xl p-8 shadow-inner min-h-[580px] transition-all font-sans border-t-4 border-brand-600\";\n            } else if(tpl === 'minimal') {\n                preview.className = \"bg-slate-50 text-slate-900 rounded-2xl p-8 shadow-inner min-h-[580px] transition-all font-serif border-l-4 border-slate-800\";\n            } else if(tpl === 'tech') {\n                preview.className = \"bg-slate-950 text-slate-100 rounded-2xl p-8 shadow-inner min-h-[580px] transition-all font-mono border border-emerald-500\/30\";\n                \/\/ Adjust colors for tech dark CV theme\n                preview.classList.remove('bg-white', 'text-slate-900');\n                preview.classList.add('bg-slate-950', 'text-slate-100');\n            } else {\n                preview.className = \"bg-white text-slate-900 rounded-2xl p-8 shadow-inner min-h-[580px] transition-all font-sans\";\n            }\n            updateCV();\n            showToast(`Applied ${tpl.toUpperCase()} template style!`);\n        }\n\n        \/\/ Notification Toast (replaces alert)\n        function showToast(msg) {\n            const toast = document.getElementById('toast');\n            document.getElementById('toast-msg').innerText = msg;\n            toast.classList.remove('translate-y-20', 'opacity-0');\n            setTimeout(() => {\n                toast.classList.add('translate-y-20', 'opacity-0');\n            }, 3000);\n        }\n\n        \/\/ Print \/ Export PDF\n        function triggerPrint() {\n            window.print();\n        }\n\n        \/\/ Copy HTML Code fallback\n        function copyHTMLCode() {\n            const htmlContent = document.getElementById('printable-cv').outerHTML;\n            const textarea = document.createElement('textarea');\n            textarea.value = htmlContent;\n            document.body.appendChild(textarea);\n            textarea.select();\n            try {\n                document.execCommand('copy');\n                showToast('CV HTML copied to clipboard successfully!');\n            } catch (err) {\n                showToast('Failed to copy code.');\n            }\n            document.body.removeChild(textarea);\n        }\n    <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>srabons.de \u2014 Professional WordPress &#038; Modern CV Builder \u2713 Action completed successfully! S srabons.de WordPress CV Suite Features Templates Live Builder WP Plugin Launch Builder Powered by WordPress &#038; Modern Web Tech Craft Professional CVs with srabons.de The ultimate WordPress-backed resume builder designed for professionals, developers, and creatives. Build, customize, and export stunning CVs in [&hellip;]<\/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-975","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/975","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=975"}],"version-history":[{"count":1,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/975\/revisions"}],"predecessor-version":[{"id":976,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/975\/revisions\/976"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}