{"id":115,"date":"2026-04-12T14:28:09","date_gmt":"2026-04-12T14:28:09","guid":{"rendered":"https:\/\/www.karlds.online\/?page_id=115"},"modified":"2026-04-12T14:31:19","modified_gmt":"2026-04-12T14:31:19","slug":"elementor-115","status":"publish","type":"page","link":"https:\/\/www.karlds.online\/?page_id=115","title":{"rendered":""},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Alex Chen | Cybersecurity Engineer<\/title>\n \n <!-- ============================================\n SECTION 1: CSS VARIABLES & BASE STYLES\n ============================================ -->\n <style>\n \/* 1.1 Color Palette & Variables *\/\n :root {\n \/* Background Colors *\/\n --bg-primary: #0f172a;\n --bg-secondary: #1e293b;\n --bg-card: #334155;\n --bg-hover: #1a2230;\n \n \/* Accent Colors *\/\n --accent-cyan: #06b6d4;\n --accent-purple: #8b5cf6;\n --accent-green: #10b981;\n --accent-pink: #ec4899;\n \n \/* Text Colors *\/\n --text-primary: #f8fafc;\n --text-secondary: #94a3b8;\n --text-muted: #64748b;\n \n \/* Border & Effects *\/\n --border: #475569;\n --glow-cyan: rgba(6, 182, 212, 0.3);\n --glow-purple: rgba(139, 92, 246, 0.3);\n }\n\n \/* 1.2 Reset & Base Styles *\/\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n html {\n scroll-behavior: smooth;\n font-size: 16px;\n }\n\n body {\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n line-height: 1.6;\n overflow-x: hidden;\n }\n <\/style>\n \n <!-- ============================================\n SECTION 2: BACKGROUND EFFECTS\n ============================================ -->\n <style>\n \/* 2.1 Grid Background Pattern *\/\n .bg-grid {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);\n background-size: 50px 50px;\n pointer-events: none;\n z-index: -2;\n }\n\n \/* 2.2 Radial Glow Effects *\/\n .bg-glow {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: -1;\n background: \n radial-gradient(ellipse at 0% 0%, rgba(6, 182, 212, 0.15) 0%, transparent 50%),\n radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);\n }\n <\/style>\n \n <!-- ============================================\n SECTION 3: NAVIGATION COMPONENTS\n ============================================ -->\n <style>\n \/* 3.1 Navigation Container *\/\n nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background: rgba(15, 23, 42, 0.95);\n backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border);\n z-index: 1000;\n height: 70px;\n display: flex;\n align-items: center;\n }\n\n .nav-container {\n width: 100%;\n max-width: 1400px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 30px;\n }\n\n \/* 3.2 Logo Styling *\/\n .logo {\n font-size: 1.5rem;\n font-weight: 800;\n color: var(--text-primary);\n text-decoration: none;\n }\n\n .logo span {\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n\n \/* 3.3 Navigation Links *\/\n .nav-links {\n display: flex;\n gap: 40px;\n list-style: none;\n }\n\n .nav-links a {\n color: var(--text-secondary);\n text-decoration: none;\n font-size: 0.9rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: all 0.3s;\n position: relative;\n }\n\n .nav-links a:hover {\n color: var(--accent-cyan);\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: -5px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--accent-cyan);\n transition: width 0.3s;\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n \/* 3.4 Mobile Menu Toggle *\/\n .menu-toggle {\n display: none;\n flex-direction: column;\n gap: 5px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 5px;\n }\n\n .menu-toggle span {\n width: 25px;\n height: 2px;\n background: var(--text-primary);\n transition: 0.3s;\n }\n <\/style>\n \n <!-- ============================================\n SECTION 4: HERO SECTION\n ============================================ -->\n <style>\n \/* 4.1 Hero Container *\/\n .hero {\n min-height: 100vh;\n padding-top: 70px;\n display: grid;\n grid-template-columns: 1fr 1fr;\n align-items: center;\n max-width: 1400px;\n margin: 0 auto;\n padding-left: 30px;\n padding-right: 30px;\n gap: 60px;\n }\n\n \/* 4.2 Hero Content Area *\/\n .hero-content {\n padding: 40px 0;\n }\n\n \/* 4.3 Status Badge *\/\n .status-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: rgba(16, 185, 129, 0.1);\n border: 1px solid var(--accent-green);\n border-radius: 50px;\n color: var(--accent-green);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 30px;\n }\n\n .status-badge::before {\n content: '';\n width: 8px;\n height: 8px;\n background: var(--accent-green);\n border-radius: 50%;\n animation: pulse 2s infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n \/* 4.4 Hero Typography *\/\n .hero h1 {\n font-size: clamp(2.5rem, 5vw, 4.5rem);\n font-weight: 800;\n line-height: 1.1;\n margin-bottom: 20px;\n }\n\n .gradient-text {\n background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-size: 200% 200%;\n animation: gradient 5s ease infinite;\n }\n\n @keyframes gradient {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n\n .hero-subtitle {\n font-size: 1.3rem;\n color: var(--text-secondary);\n margin-bottom: 20px;\n font-weight: 300;\n }\n\n .hero-desc {\n color: var(--text-secondary);\n font-size: 1.1rem;\n max-width: 500px;\n margin-bottom: 40px;\n line-height: 1.8;\n }\n\n \/* 4.5 Hero Buttons *\/\n .hero-buttons {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n }\n\n .btn {\n padding: 16px 32px;\n border-radius: 8px;\n font-weight: 600;\n text-decoration: none;\n font-size: 0.95rem;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n transition: all 0.3s;\n border: none;\n cursor: pointer;\n }\n\n .btn-primary {\n background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));\n color: white;\n box-shadow: 0 10px 40px var(--glow-cyan);\n }\n\n .btn-primary:hover {\n transform: translateY(-3px);\n box-shadow: 0 15px 50px var(--glow-cyan);\n }\n\n .btn-secondary {\n background: transparent;\n color: var(--text-primary);\n border: 1px solid var(--border);\n }\n\n .btn-secondary:hover {\n border-color: var(--accent-cyan);\n color: var(--accent-cyan);\n }\n <\/style>\n \n <!-- ============================================\n SECTION 5: TERMINAL COMPONENT\n ============================================ -->\n <style>\n \/* 5.1 Terminal Container *\/\n .terminal-wrapper {\n position: relative;\n }\n\n .terminal {\n background: var(--bg-secondary);\n border: 1px solid var(--border);\n border-radius: 16px;\n overflow: hidden;\n box-shadow: 0 25px 80px rgba(0,0,0,0.5);\n }\n\n \/* 5.2 Terminal Header *\/\n .terminal-header {\n background: rgba(0,0,0,0.2);\n padding: 14px 18px;\n display: flex;\n align-items: center;\n gap: 8px;\n border-bottom: 1px solid var(--border);\n }\n\n .terminal-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n }\n\n .dot-red { background: #ef4444; }\n .dot-yellow { background: #f59e0b; }\n .dot-green { background: var(--accent-green); }\n\n .terminal-title {\n margin-left: auto;\n color: var(--text-secondary);\n font-size: 0.8rem;\n font-family: 'Fira Code', monospace;\n }\n\n \/* 5.3 Terminal Body *\/\n .terminal-body {\n padding: 24px;\n font-family: 'Fira Code', 'Courier New', monospace;\n font-size: 0.9rem;\n line-height: 1.8;\n }\n\n .terminal-line {\n margin-bottom: 4px;\n }\n\n .prompt { color: var(--accent-green); }\n .command { color: var(--text-primary); }\n .output { color: var(--text-secondary); }\n .success { color: var(--accent-green); }\n .error { color: #ef4444; }\n\n .cursor {\n display: inline-block;\n width: 10px;\n height: 18px;\n background: var(--accent-cyan);\n animation: blink 1s infinite;\n vertical-align: middle;\n }\n\n @keyframes blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n }\n <\/style>\n \n <!-- ============================================\n SECTION 6: STATS SECTION\n ============================================ -->\n <style>\n \/* 6.1 Stats Container *\/\n .stats-section {\n padding: 40px 30px;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n .stats-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 20px;\n }\n\n \/* 6.2 Stat Card *\/\n .stat-card {\n background: var(--bg-secondary);\n border: 1px solid var(--border);\n border-radius: 16px;\n padding: 30px;\n text-align: center;\n transition: all 0.3s;\n }\n\n .stat-card:hover {\n border-color: var(--accent-cyan);\n transform: translateY(-5px);\n }\n\n .stat-number {\n font-size: 2.5rem;\n font-weight: 800;\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n margin-bottom: 8px;\n }\n\n .stat-label {\n color: var(--text-secondary);\n font-size: 0.85rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n <\/style>\n \n <!-- ============================================\n SECTION 7: SKILLS SECTION\n ============================================ -->\n <style>\n \/* 7.1 Section Container *\/\n .section {\n padding: 100px 30px;\n max-width: 1400px;\n margin: 0 auto;\n }\n\n .section-header {\n margin-bottom: 60px;\n }\n\n .section-tag {\n display: inline-block;\n padding: 8px 16px;\n background: rgba(6, 182, 212, 0.1);\n border: 1px solid var(--accent-cyan);\n border-radius: 50px;\n color: var(--accent-cyan);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 2px;\n margin-bottom: 20px;\n }\n\n .section-title {\n font-size: clamp(2rem, 4vw, 3rem);\n font-weight: 800;\n margin-bottom: 15px;\n }\n\n .section-desc {\n color: var(--text-secondary);\n font-size: 1.1rem;\n max-width: 600px;\n }\n\n \/* 7.2 Skills Grid *\/\n .skills-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\n gap: 24px;\n }\n\n \/* 7.3 Skill Card *\/\n .skill-card {\n background: var(--bg-secondary);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 35px;\n position: relative;\n overflow: hidden;\n transition: all 0.3s;\n }\n\n .skill-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));\n transform: scaleX(0);\n transition: transform 0.3s;\n }\n\n .skill-card:hover::before {\n transform: scaleX(1);\n }\n\n .skill-card:hover {\n transform: translateY(-5px);\n border-color: var(--accent-cyan);\n }\n\n \/* 7.4 Skill Header *\/\n .skill-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 25px;\n }\n\n .skill-icon-box {\n width: 55px;\n height: 55px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.6rem;\n border: 1px solid var(--border);\n }\n\n .skill-cyan { background: rgba(6, 182, 212, 0.1); border-color: var(--accent-cyan); }\n .skill-purple { background: rgba(139, 92, 246, 0.1); border-color: var(--accent-purple); }\n .skill-green { background: rgba(16, 185, 129, 0.1); border-color: var(--accent-green); }\n\n .skill-card h3 {\n font-size: 1.3rem;\n }\n\n \/* 7.5 Skill List *\/\n .skill-list {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .skill-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px;\n background: var(--bg-card);\n border-radius: 10px;\n font-size: 0.95rem;\n color: var(--text-secondary);\n transition: all 0.3s;\n }\n\n .skill-item:hover {\n background: rgba(6, 182, 212, 0.05);\n color: var(--text-primary);\n }\n\n .skill-item::before {\n content: '\u203a';\n color: var(--accent-cyan);\n font-weight: bold;\n font-size: 1.2rem;\n }\n <\/style>\n \n <!-- ============================================\n SECTION 8: PROJECTS SECTION\n ============================================ -->\n <style>\n \/* 8.1 Projects Grid *\/\n .projects-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));\n gap: 30px;\n }\n\n \/* 8.2 Project Card *\/\n .project-card {\n background: var(--bg-secondary);\n border: 1px solid var(--border);\n border-radius: 20px;\n overflow: hidden;\n transition: all 0.4s;\n display: flex;\n flex-direction: column;\n }\n\n .project-card:hover {\n transform: translateY(-8px);\n border-color: var(--accent-purple);\n box-shadow: 0 20px 50px var(--glow-purple);\n }\n\n \/* 8.3 Project Visual *\/\n .project-visual {\n height: 220px;\n background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary));\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n position: relative;\n overflow: hidden;\n }\n\n .project-visual::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, transparent, rgba(139, 92, 246, 0.1));\n }\n\n \/* 8.4 Project Content *\/\n .project-content {\n padding: 28px;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n .project-category {\n display: inline-block;\n padding: 5px 14px;\n background: rgba(139, 92, 246, 0.1);\n border: 1px solid var(--accent-purple);\n border-radius: 50px;\n color: var(--accent-purple);\n font-size: 0.7rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 1px;\n width: fit-content;\n margin-bottom: 15px;\n }\n\n .project-card h3 {\n font-size: 1.25rem;\n margin-bottom: 12px;\n }\n\n .project-description {\n color: var(--text-secondary);\n font-size: 0.95rem;\n line-height: 1.7;\n flex: 1;\n margin-bottom: 20px;\n }\n\n \/* 8.5 Tech Tags *\/\n .tech-tags {\n display: flex;\n gap: 10px;\n flex-wrap: wrap;\n }\n\n .tech-tag {\n padding: 6px 14px;\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 6px;\n font-size: 0.8rem;\n color: var(--text-secondary);\n font-family: monospace;\n }\n <\/style>\n \n <!-- ============================================\n SECTION 9: CONTACT SECTION\n ============================================ -->\n <style>\n \/* 9.1 Contact Layout *\/\n .contact-layout {\n display: grid;\n grid-template-columns: 1fr 1.3fr;\n gap: 50px;\n }\n\n \/* 9.2 Contact Info Cards *\/\n .contact-info {\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n\n .contact-card {\n display: flex;\n align-items: center;\n gap: 18px;\n padding: 25px;\n background: var(--bg-secondary);\n border: 1px solid var(--border);\n border-radius: 16px;\n transition: all 0.3s;\n }\n\n .contact-card:hover {\n border-color: var(--accent-cyan);\n transform: translateX(8px);\n }\n\n .contact-icon {\n width: 50px;\n height: 50px;\n border-radius: 12px;\n background: rgba(6, 182, 212, 0.1);\n border: 1px solid var(--accent-cyan);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.4rem;\n flex-shrink: 0;\n }\n\n .contact-text small {\n display: block;\n color: var(--text-secondary);\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 5px;\n }\n\n .contact-text a {\n color: var(--text-primary);\n text-decoration: none;\n font-size: 1.05rem;\n font-weight: 600;\n }\n\n .contact-text a:hover {\n color: var(--accent-cyan);\n }\n\n \/* 9.3 Contact Form *\/\n .contact-form-container {\n background: var(--bg-secondary);\n border: 1px solid var(--border);\n border-radius: 20px;\n padding: 40px;\n }\n\n .form-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n margin-bottom: 20px;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n .form-group label {\n display: block;\n color: var(--text-secondary);\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n margin-bottom: 10px;\n }\n\n .form-group input,\n .form-group textarea,\n .form-group select {\n width: 100%;\n padding: 14px 16px;\n background: var(--bg-card);\n border: 1px solid var(--border);\n border-radius: 10px;\n color: var(--text-primary);\n font-size: 1rem;\n transition: all 0.3s;\n }\n\n .form-group input:focus,\n .form-group textarea:focus,\n .form-group select:focus {\n outline: none;\n border-color: var(--accent-cyan);\n box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);\n }\n\n .btn-submit {\n width: 100%;\n padding: 16px;\n background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));\n border: none;\n border-radius: 10px;\n color: white;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.3s;\n }\n\n .btn-submit:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 40px var(--glow-cyan);\n }\n <\/style>\n \n <!-- ============================================\n SECTION 10: FOOTER\n ============================================ -->\n <style>\n \/* 10.1 Footer Container *\/\n footer {\n border-top: 1px solid var(--border);\n padding: 50px 30px;\n text-align: center;\n }\n\n \/* 10.2 Social Links *\/\n .social-links {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n }\n\n .social-link {\n width: 50px;\n height: 50px;\n border-radius: 12px;\n background: var(--bg-secondary);\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n color: var(--text-secondary);\n font-size: 1.3rem;\n transition: all 0.3s;\n }\n\n .social-link:hover {\n background: var(--accent-cyan);\n border-color: var(--accent-cyan);\n color: var(--bg-primary);\n transform: translateY(-5px);\n }\n\n \/* 10.3 Copyright *\/\n .copyright {\n color: var(--text-secondary);\n font-size: 0.95rem;\n }\n <\/style>\n \n <!-- ============================================\n SECTION 11: RESPONSIVE DESIGN\n ============================================ -->\n <style>\n \/* 11.1 Tablet Breakpoint *\/\n @media (max-width: 1024px) {\n .menu-toggle {\n display: flex;\n }\n\n .nav-links {\n position: fixed;\n top: 70px;\n right: -100%;\n width: 300px;\n height: calc(100vh - 70px);\n background: var(--bg-secondary);\n flex-direction: column;\n padding: 30px;\n gap: 20px;\n transition: right 0.3s;\n }\n\n .nav-links.active {\n right: 0;\n }\n\n .hero {\n grid-template-columns: 1fr;\n text-align: center;\n gap: 40px;\n }\n\n .hero-desc {\n margin-left: auto;\n margin-right: auto;\n }\n\n .hero-buttons {\n justify-content: center;\n }\n\n .terminal-wrapper {\n order: -1;\n max-width: 600px;\n margin: 0 auto;\n }\n\n .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .skills-grid {\n grid-template-columns: 1fr;\n }\n\n .projects-grid {\n grid-template-columns: 1fr;\n }\n\n .contact-layout {\n grid-template-columns: 1fr;\n }\n\n .form-row {\n grid-template-columns: 1fr;\n }\n }\n\n \/* 11.2 Mobile Breakpoint *\/\n @media (max-width: 640px) {\n .section {\n padding: 60px 20px;\n }\n\n .nav-container {\n padding: 0 20px;\n }\n\n .hero {\n padding-left: 20px;\n padding-right: 20px;\n }\n\n .stats-grid {\n grid-template-columns: 1fr;\n }\n\n .stat-card {\n padding: 25px;\n }\n\n .section-title {\n font-size: 1.8rem;\n }\n }\n <\/style>\n<\/head>\n\n<!-- ============================================\n HTML BODY CONTENT\n ============================================ -->\n<body>\n\n <!-- Background Effects -->\n <div class=\"bg-grid\"><\/div>\n <div class=\"bg-glow\"><\/div>\n\n <!-- ============================================\n COMPONENT: Navigation\n ============================================ -->\n <nav>\n <div class=\"nav-container\">\n <a href=\"#\" class=\"logo\">ALEX<span>.CHEN<\/span><\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#home\">Home<\/a><\/li>\n <li><a href=\"#skills\">Skills<\/a><\/li>\n <li><a href=\"#projects\">Projects<\/a><\/li>\n <li><a href=\"#certs\">Certs<\/a><\/li>\n <li><a href=\"#contact\">Contact<\/a><\/li>\n <\/ul>\n <button class=\"menu-toggle\" onclick=\"toggleMenu()\">\n <span><\/span>\n <span><\/span>\n <span><\/span>\n <\/button>\n <\/div>\n <\/nav>\n\n <!-- ============================================\n SECTION: Hero\n ============================================ -->\n <section class=\"hero\" id=\"home\">\n <div class=\"hero-content\">\n <div class=\"status-badge\">\u25cf Available for Hire<\/div>\n <h1>Cybersecurity <span class=\"gradient-text\">Analyst<\/span> & Cloud Architect<\/h1>\n <p class=\"hero-subtitle\">Securing Digital Infrastructure<\/p>\n <p class=\"hero-desc\">\n Specializing in penetration testing, cloud security architecture, and threat intelligence. \n Building resilient defenses for modern enterprises through proactive security assessments.\n <\/p>\n <div class=\"hero-buttons\">\n <a href=\"#contact\" class=\"btn btn-primary\">Start Project \u2192<\/a>\n <a href=\"#projects\" class=\"btn btn-secondary\">View Work<\/a>\n <\/div>\n <\/div>\n <div class=\"terminal-wrapper\">\n <div class=\"terminal\">\n <div class=\"terminal-header\">\n <div class=\"terminal-dot dot-red\"><\/div>\n <div class=\"terminal-dot dot-yellow\"><\/div>\n <div class=\"terminal-dot dot-green\"><\/div>\n <span class=\"terminal-title\">root@security-ops:~<\/span>\n <\/div>\n <div class=\"terminal-body\">\n <div class=\"terminal-line\">\n <span class=\"prompt\">$<\/span> <span class=\"command\">nmap -sV target.network<\/span>\n <\/div>\n <div class=\"terminal-line output\">Starting Nmap 7.94 scan...<\/div>\n <div class=\"terminal-line success\">\u2713 Discovered 3 vulnerabilities<\/div>\n <div class=\"terminal-line output\">Patching CVE-2024-XXXX...<\/div>\n <div class=\"terminal-line success\">\u2713 Firewall rules updated<\/div>\n <div class=\"terminal-line\">\n <span class=\"prompt\">$<\/span> <span class=\"command\">python3 secure_deploy.py<\/span> <span class=\"cursor\"><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================================\n SECTION: Stats\n ============================================ -->\n <section class=\"stats-section\">\n <div class=\"stats-grid\">\n <div class=\"stat-card\">\n <div class=\"stat-number\">150+<\/div>\n <div class=\"stat-label\">Security Audits<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-number\">50+<\/div>\n <div class=\"stat-label\">Critical Vulns<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-number\">25+<\/div>\n <div class=\"stat-label\">Enterprise Clients<\/div>\n <\/div>\n <div class=\"stat-card\">\n <div class=\"stat-number\">99%<\/div>\n <div class=\"stat-label\">Client Retention<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================================\n SECTION: Skills\n ============================================ -->\n <section class=\"section\" id=\"skills\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Technical Arsenal<\/div>\n <h2 class=\"section-title\">Core Competencies<\/h2>\n <p class=\"section-desc\">Expert-level proficiency across security, cloud, and networking domains.<\/p>\n <\/div>\n \n <div class=\"skills-grid\">\n <!-- Skill Category 1 -->\n <div class=\"skill-card\">\n <div class=\"skill-header\">\n <div class=\"skill-icon-box skill-cyan\">\ud83d\udee1\ufe0f<\/div>\n <h3>Offensive Security<\/h3>\n <\/div>\n <div class=\"skill-list\">\n <div class=\"skill-item\">Penetration Testing & Vulnerability Assessment<\/div>\n <div class=\"skill-item\">Web & Mobile Application Security<\/div>\n <div class=\"skill-item\">Social Engineering & Phishing Simulations<\/div>\n <div class=\"skill-item\">Red Team Operations<\/div>\n <div class=\"skill-item\">Exploit Development<\/div>\n <\/div>\n <\/div>\n\n <!-- Skill Category 2 -->\n <div class=\"skill-card\">\n <div class=\"skill-header\">\n <div class=\"skill-icon-box skill-purple\">\u2601\ufe0f<\/div>\n <h3>Cloud Security<\/h3>\n <\/div>\n <div class=\"skill-list\">\n <div class=\"skill-item\">AWS\/Azure\/GCP Security Architecture<\/div>\n <div class=\"skill-item\">Kubernetes & Container Security<\/div>\n <div class=\"skill-item\">Infrastructure as Code (Terraform)<\/div>\n <div class=\"skill-item\">Zero Trust Implementation<\/div>\n <div class=\"skill-item\">Cloud SIEM & Monitoring<\/div>\n <\/div>\n <\/div>\n\n <!-- Skill Category 3 -->\n <div class=\"skill-card\">\n <div class=\"skill-header\">\n <div class=\"skill-icon-box skill-green\">\ud83c\udf10<\/div>\n <h3>Network Defense<\/h3>\n <\/div>\n <div class=\"skill-list\">\n <div class=\"skill-item\">Enterprise Firewall Configuration<\/div>\n <div class=\"skill-item\">Network Segmentation & VLANs<\/div>\n <div class=\"skill-item\">VPN & SD-WAN Solutions<\/div>\n <div class=\"skill-item\">DDoS Mitigation Strategies<\/div>\n <div class=\"skill-item\">Traffic Analysis & Forensics<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================================\n SECTION: Projects\n ============================================ -->\n <section class=\"section\" id=\"projects\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Featured Work<\/div>\n <h2 class=\"section-title\">Selected Projects<\/h2>\n <p class=\"section-desc\">Real-world security implementations and assessments.<\/p>\n <\/div>\n\n <div class=\"projects-grid\">\n <!-- Project 1 -->\n <div class=\"project-card\">\n <div class=\"project-visual\">\ud83d\udd0d<\/div>\n <div class=\"project-content\">\n <div class=\"project-category\">Penetration Testing<\/div>\n <h3>FinTech Security Assessment<\/h3>\n <p class=\"project-description\">\n Comprehensive audit for $2B fintech platform. Identified critical vulnerabilities in payment processing and cloud infrastructure.\n <\/p>\n <div class=\"tech-tags\">\n <span class=\"tech-tag\">Burp Suite<\/span>\n <span class=\"tech-tag\">AWS<\/span>\n <span class=\"tech-tag\">Kubernetes<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Project 2 -->\n <div class=\"project-card\">\n <div class=\"project-visual\">\ud83c\udfd7\ufe0f<\/div>\n <div class=\"project-content\">\n <div class=\"project-category\">Security Architecture<\/div>\n <h3>Zero Trust Implementation<\/h3>\n <p class=\"project-description\">\n Designed and deployed zero-trust architecture for healthcare provider, securing 10,000+ endpoints with HIPAA compliance.\n <\/p>\n <div class=\"tech-tags\">\n <span class=\"tech-tag\">Okta<\/span>\n <span class=\"tech-tag\">CrowdStrike<\/span>\n <span class=\"tech-tag\">Palo Alto<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Project 3 -->\n <div class=\"project-card\">\n <div class=\"project-visual\">\ud83e\udd16<\/div>\n <div class=\"project-content\">\n <div class=\"project-category\">Threat Intelligence<\/div>\n <h3>AI-Powered SOC Platform<\/h3>\n <p class=\"project-description\">\n Built ML-powered threat detection reducing incident response time by 75%. Real-time anomaly detection and automated response.\n <\/p>\n <div class=\"tech-tags\">\n <span class=\"tech-tag\">Python<\/span>\n <span class=\"tech-tag\">TensorFlow<\/span>\n <span class=\"tech-tag\">Splunk<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Project 4 -->\n <div class=\"project-card\">\n <div class=\"project-visual\">\ud83d\udd17<\/div>\n <div class=\"project-content\">\n <div class=\"project-category\">Blockchain Security<\/div>\n <h3>Smart Contract Audit<\/h3>\n <p class=\"project-description\">\n Security review of DeFi protocol preventing $50M+ exploit. Discovered reentrancy and access control vulnerabilities.\n <\/p>\n <div class=\"tech-tags\">\n <span class=\"tech-tag\">Solidity<\/span>\n <span class=\"tech-tag\">Slither<\/span>\n <span class=\"tech-tag\">Mythril<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================================\n SECTION: Contact\n ============================================ -->\n <section class=\"section\" id=\"contact\">\n <div class=\"section-header\">\n <div class=\"section-tag\">Get In Touch<\/div>\n <h2 class=\"section-title\">Let's Work Together<\/h2>\n <p class=\"section-desc\">Have a project in mind? Let's discuss your security needs.<\/p>\n <\/div>\n\n <div class=\"contact-layout\">\n <!-- Contact Info -->\n <div class=\"contact-info\">\n <div class=\"contact-card\">\n <div class=\"contact-icon\">\ud83d\udce7<\/div>\n <div class=\"contact-text\">\n <small>Email<\/small>\n <a href=\"mailto:alex.chen@security.dev\">alex.chen@security.dev<\/a>\n <\/div>\n <\/div>\n \n <div class=\"contact-card\">\n <div class=\"contact-icon\">\ud83d\udcbc<\/div>\n <div class=\"contact-text\">\n <small>LinkedIn<\/small>\n <a href=\"#\">linkedin.com\/in\/alexchen<\/a>\n <\/div>\n <\/div>\n \n <div class=\"contact-card\">\n <div class=\"contact-icon\">\ud83d\udc19<\/div>\n <div class=\"contact-text\">\n <small>GitHub<\/small>\n <a href=\"#\">github.com\/alexchen-security<\/a>\n <\/div>\n <\/div>\n\n <div class=\"contact-card\">\n <div class=\"contact-icon\">\ud83d\udccd<\/div>\n <div class=\"contact-text\">\n <small>Location<\/small>\n <a href=\"#\">San Francisco, CA<\/a>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Contact Form -->\n <div class=\"contact-form-container\">\n <form onsubmit=\"handleSubmit(event)\">\n <div class=\"form-row\">\n <div class=\"form-group\">\n <label for=\"name\">Name<\/label>\n <input type=\"text\" id=\"name\" placeholder=\"John Doe\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Email<\/label>\n <input type=\"email\" id=\"email\" placeholder=\"john@company.com\" required>\n <\/div>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"company\">Company<\/label>\n <input type=\"text\" id=\"company\" placeholder=\"Acme Inc.\">\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"service\">Service<\/label>\n <select id=\"service\">\n <option value=\"\">Select a service...<\/option>\n <option value=\"pentest\">Penetration Testing<\/option>\n <option value=\"audit\">Security Audit<\/option>\n <option value=\"consulting\">Security Consulting<\/option>\n <option value=\"cloud\">Cloud Security<\/option>\n <\/select>\n <\/div>\n \n <div class=\"form-group\">\n <label for=\"message\">Message<\/label>\n <textarea id=\"message\" rows=\"4\" placeholder=\"Tell me about your project...\" required><\/textarea>\n <\/div>\n \n <button type=\"submit\" class=\"btn-submit\">Send Message \u2192<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ============================================\n COMPONENT: Footer\n ============================================ -->\n <footer>\n <div class=\"social-links\">\n <a href=\"#\" class=\"social-link\">\ud83d\udcbc<\/a>\n <a href=\"#\" class=\"social-link\">\ud83d\udc19<\/a>\n <a href=\"#\" class=\"social-link\">\ud83d\udc26<\/a>\n <a href=\"#\" class=\"social-link\">\u2709\ufe0f<\/a>\n <\/div>\n <p class=\"copyright\">\u00a9 2024 Alex Chen. Security Engineer & Cloud Architect.<\/p>\n <\/footer>\n\n <!-- ============================================\n JAVASCRIPT: Interactive Functions\n ============================================ -->\n <script>\n \/**\n * Toggle mobile navigation menu\n *\/\n function toggleMenu() {\n document.getElementById('navLinks').classList.toggle('active');\n }\n\n \/**\n * Handle contact form submission\n * @param {Event} e - Form submit event\n *\/\n function handleSubmit(e) {\n e.preventDefault();\n const btn = e.target.querySelector('.btn-submit');\n const originalText = btn.textContent;\n \n btn.textContent = 'Message Sent \u2713';\n btn.style.background = 'var(--accent-green)';\n \n setTimeout(() => {\n e.target.reset();\n btn.textContent = originalText;\n btn.style.background = '';\n }, 2000);\n }\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Alex Chen | Cybersecurity Engineer ALEX.CHEN Home Skills Projects Certs Contact \u25cf Available for Hire Cybersecurity Analyst & Cloud Architect Securing Digital Infrastructure Specializing in penetration testing, cloud security architecture, and threat intelligence. Building resilient defenses for modern enterprises through proactive security assessments. Start Project \u2192 View Work root@security-ops:~ $ nmap -sV target.network Starting Nmap […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-115","page","type-page","status-publish","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/www.karlds.online\/index.php?rest_route=\/wp\/v2\/pages\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.karlds.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.karlds.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.karlds.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.karlds.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=115"}],"version-history":[{"count":5,"href":"https:\/\/www.karlds.online\/index.php?rest_route=\/wp\/v2\/pages\/115\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/www.karlds.online\/index.php?rest_route=\/wp\/v2\/pages\/115\/revisions\/120"}],"wp:attachment":[{"href":"https:\/\/www.karlds.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}