{"id":29,"date":"2026-05-15T03:00:52","date_gmt":"2026-05-15T03:00:52","guid":{"rendered":"https:\/\/mejia-dev.online\/?page_id=29"},"modified":"2026-05-15T03:14:14","modified_gmt":"2026-05-15T03:14:14","slug":"elementor-29","status":"publish","type":"page","link":"https:\/\/mejia-dev.online\/","title":{"rendered":"Home"},"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\r\n\r\n\r\n \r\n \r\n Mejia-Dev<\/title>\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --neon-red: #FF204E;\r\n --deep-crimson: #A0153E;\r\n --dark-burgundy: #5D0E41;\r\n --navy-blue: #00224D;\r\n --light-text: #e0e0e0;\r\n --dark-bg: #0a0a0f;\r\n --card-bg: #111118;\r\n --border-color: #1a1a2e;\r\n }\r\n\r\n \/* BREAK OUT OF ELEMENTOR CONTAINER *\/\r\n .elementor-html-widget-container,\r\n .elementor-widget-html,\r\n .elementor-widget-container {\r\n max-width: 100% !important;\r\n width: 100% !important;\r\n padding: 0 !important;\r\n margin: 0 !important;\r\n }\r\n\r\n .cyber-portfolio {\r\n width: 100vw;\r\n margin-left: calc(-50vw + 50%);\r\n position: relative;\r\n font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\r\n line-height: 1.6;\r\n color: var(--light-text);\r\n overflow-x: hidden;\r\n background: var(--dark-bg);\r\n }\r\n\r\n \/* Navigation *\/\r\n .navbar {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n padding: 1.2rem 5%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n z-index: 1000;\r\n background: rgba(10, 10, 15, 0.95);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .logo {\r\n font-size: 1.6rem;\r\n font-weight: 800;\r\n color: var(--neon-red);\r\n letter-spacing: 1px;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .logo::before {\r\n content: '\u25c8';\r\n color: var(--neon-red);\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.5; }\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2.5rem;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n text-decoration: none;\r\n color: var(--light-text);\r\n font-weight: 500;\r\n position: relative;\r\n transition: color 0.3s;\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .nav-links a:hover {\r\n color: var(--neon-red);\r\n }\r\n\r\n .nav-links a::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -5px;\r\n left: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--neon-red);\r\n transition: width 0.3s;\r\n box-shadow: 0 0 10px var(--neon-red);\r\n }\r\n\r\n .nav-links a:hover::after {\r\n width: 100%;\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n min-height: 100vh;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n padding: 8rem 5% 4rem;\r\n background: linear-gradient(135deg, var(--navy-blue) 0%, var(--dark-bg) 50%, var(--dark-burgundy) 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: \r\n radial-gradient(circle at 20% 50%, rgba(255, 32, 78, 0.15) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 80%, rgba(160, 21, 62, 0.2) 0%, transparent 50%),\r\n radial-gradient(circle at 40% 20%, rgba(0, 34, 77, 0.3) 0%, transparent 50%);\r\n pointer-events: none;\r\n }\r\n\r\n .grid-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background-image: \r\n linear-gradient(rgba(255, 32, 78, 0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(255, 32, 78, 0.03) 1px, transparent 1px);\r\n background-size: 50px 50px;\r\n pointer-events: none;\r\n }\r\n\r\n .hero-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 4rem;\r\n align-items: center;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.5rem 1rem;\r\n background: rgba(255, 32, 78, 0.1);\r\n border: 1px solid var(--neon-red);\r\n color: var(--neon-red);\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n font-weight: 600;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n margin-bottom: 1.5rem;\r\n animation: blink 2s infinite;\r\n }\r\n\r\n @keyframes blink {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.7; }\r\n }\r\n\r\n .hero-content h1 {\r\n font-size: clamp(2.5rem, 5vw, 4rem);\r\n font-weight: 800;\r\n line-height: 1.1;\r\n margin-bottom: 1.5rem;\r\n color: white;\r\n }\r\n\r\n .hero-content h1 span {\r\n color: var(--neon-red);\r\n text-shadow: 0 0 20px rgba(255, 32, 78, 0.5);\r\n }\r\n\r\n .hero-content p {\r\n font-size: 1.1rem;\r\n color: #a0a0a0;\r\n margin-bottom: 2rem;\r\n max-width: 500px;\r\n line-height: 1.7;\r\n }\r\n\r\n .hero-stats {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 2rem;\r\n margin-bottom: 2.5rem;\r\n padding: 1.5rem;\r\n background: rgba(17, 17, 24, 0.8);\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .stat {\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .stat:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n right: -1rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n height: 40px;\r\n width: 1px;\r\n background: linear-gradient(to bottom, transparent, var(--deep-crimson), transparent);\r\n }\r\n\r\n .stat-number {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--neon-red);\r\n display: block;\r\n text-shadow: 0 0 10px rgba(255, 32, 78, 0.3);\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.8rem;\r\n color: #666;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .cta-group {\r\n display: flex;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .btn {\r\n padding: 1rem 2rem;\r\n border-radius: 4px;\r\n text-decoration: none;\r\n font-weight: 600;\r\n transition: all 0.3s;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 0.95rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--neon-red);\r\n color: white;\r\n box-shadow: 0 0 20px rgba(255, 32, 78, 0.4);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .btn-primary::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\r\n transition: left 0.5s;\r\n }\r\n\r\n .btn-primary:hover::before {\r\n left: 100%;\r\n }\r\n\r\n .btn-primary:hover {\r\n background: var(--deep-crimson);\r\n box-shadow: 0 0 30px rgba(255, 32, 78, 0.6);\r\n transform: translateY(-2px);\r\n }\r\n\r\n .btn-outline {\r\n background: transparent;\r\n color: var(--light-text);\r\n border: 1px solid var(--deep-crimson);\r\n }\r\n\r\n .btn-outline:hover {\r\n border-color: var(--neon-red);\r\n color: var(--neon-red);\r\n box-shadow: 0 0 15px rgba(255, 32, 78, 0.2);\r\n }\r\n\r\n .hero-visual {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .terminal-window {\r\n width: 100%;\r\n max-width: 500px;\r\n background: var(--card-bg);\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: 0 20px 60px rgba(0,0,0,0.5);\r\n }\r\n\r\n .terminal-header {\r\n background: #1a1a2e;\r\n padding: 0.8rem 1rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .terminal-btn {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: 50%;\r\n }\r\n\r\n .terminal-btn:nth-child(1) { background: var(--neon-red); }\r\n .terminal-btn:nth-child(2) { background: var(--deep-crimson); }\r\n .terminal-btn:nth-child(3) { background: var(--dark-burgundy); }\r\n\r\n .terminal-body {\r\n padding: 1.5rem;\r\n font-family: 'Courier New', monospace;\r\n font-size: 0.85rem;\r\n line-height: 1.8;\r\n color: #00ff41;\r\n }\r\n\r\n .terminal-line {\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .terminal-prompt {\r\n color: var(--neon-red);\r\n }\r\n\r\n .cursor {\r\n display: inline-block;\r\n width: 10px;\r\n height: 18px;\r\n background: var(--neon-red);\r\n animation: cursor-blink 1s infinite;\r\n vertical-align: middle;\r\n }\r\n\r\n @keyframes cursor-blink {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0; }\r\n }\r\n\r\n \/* Skills Section *\/\r\n .skills {\r\n padding: 6rem 5%;\r\n background: var(--dark-bg);\r\n width: 100%;\r\n position: relative;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n max-width: 700px;\r\n margin: 0 auto 4rem;\r\n }\r\n\r\n .section-header h3 {\r\n color: var(--neon-red);\r\n text-transform: uppercase;\r\n letter-spacing: 3px;\r\n font-size: 0.8rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2.5rem;\r\n margin-bottom: 1rem;\r\n color: white;\r\n }\r\n\r\n .section-header p {\r\n color: #888;\r\n }\r\n\r\n .skills-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 2rem;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .skill-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n padding: 2rem;\r\n transition: all 0.3s;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .skill-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--neon-red), var(--deep-crimson));\r\n transform: scaleX(0);\r\n transition: transform 0.3s;\r\n }\r\n\r\n .skill-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .skill-card:hover {\r\n border-color: var(--deep-crimson);\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 40px rgba(160, 21, 62, 0.2);\r\n }\r\n\r\n .skill-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: rgba(255, 32, 78, 0.1);\r\n border: 1px solid var(--deep-crimson);\r\n border-radius: 10px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n color: var(--neon-red);\r\n }\r\n\r\n .skill-card:nth-child(2) .skill-icon {\r\n color: #00d4aa;\r\n border-color: #00d4aa;\r\n background: rgba(0, 212, 170, 0.1);\r\n }\r\n\r\n .skill-card:nth-child(3) .skill-icon {\r\n color: #00b4d8;\r\n border-color: #00b4d8;\r\n background: rgba(0, 180, 216, 0.1);\r\n }\r\n\r\n .skill-card:nth-child(4) .skill-icon {\r\n color: #f9c74f;\r\n border-color: #f9c74f;\r\n background: rgba(249, 199, 79, 0.1);\r\n }\r\n\r\n .skill-card h3 {\r\n font-size: 1.3rem;\r\n margin-bottom: 1rem;\r\n color: white;\r\n }\r\n\r\n .skill-list {\r\n list-style: none;\r\n }\r\n\r\n .skill-list li {\r\n padding: 0.5rem 0;\r\n color: #888;\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .skill-list li::before {\r\n content: '\u25b8';\r\n color: var(--neon-red);\r\n font-weight: bold;\r\n }\r\n\r\n \/* Certifications *\/\r\n .certs {\r\n padding: 4rem 5%;\r\n background: linear-gradient(135deg, var(--navy-blue), var(--dark-burgundy));\r\n width: 100%;\r\n }\r\n\r\n .certs-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 2rem;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .cert-item {\r\n background: rgba(17, 17, 24, 0.8);\r\n border: 1px solid var(--border-color);\r\n padding: 1.5rem;\r\n border-radius: 8px;\r\n text-align: center;\r\n transition: all 0.3s;\r\n }\r\n\r\n .cert-item:hover {\r\n border-color: var(--neon-red);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .cert-badge {\r\n width: 60px;\r\n height: 60px;\r\n background: linear-gradient(135deg, var(--neon-red), var(--deep-crimson));\r\n border-radius: 50%;\r\n margin: 0 auto 1rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.5rem;\r\n }\r\n\r\n .cert-item h4 {\r\n color: white;\r\n font-size: 1rem;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .cert-item p {\r\n color: #666;\r\n font-size: 0.8rem;\r\n }\r\n\r\n \/* Projects Section *\/\r\n .projects {\r\n padding: 6rem 5%;\r\n background: var(--dark-bg);\r\n width: 100%;\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));\r\n gap: 2rem;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .project-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border-color);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n transition: all 0.3s;\r\n }\r\n\r\n .project-card:hover {\r\n border-color: var(--deep-crimson);\r\n box-shadow: 0 10px 40px rgba(160, 21, 62, 0.3);\r\n }\r\n\r\n .project-header {\r\n padding: 1.5rem;\r\n background: linear-gradient(135deg, rgba(255, 32, 78, 0.1), rgba(160, 21, 62, 0.1));\r\n border-bottom: 1px solid var(--border-color);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n }\r\n\r\n .project-type {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.3rem 0.8rem;\r\n background: rgba(255, 32, 78, 0.2);\r\n color: var(--neon-red);\r\n border-radius: 4px;\r\n font-size: 0.75rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 600;\r\n }\r\n\r\n .project-status {\r\n width: 8px;\r\n height: 8px;\r\n background: #00ff41;\r\n border-radius: 50%;\r\n box-shadow: 0 0 10px #00ff41;\r\n animation: pulse-status 2s infinite;\r\n }\r\n\r\n @keyframes pulse-status {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.5; }\r\n }\r\n\r\n .project-body {\r\n padding: 1.5rem;\r\n }\r\n\r\n .project-body h3 {\r\n color: white;\r\n font-size: 1.2rem;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .project-body p {\r\n color: #888;\r\n font-size: 0.9rem;\r\n line-height: 1.6;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .project-tech {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n }\r\n\r\n .tech-tag {\r\n padding: 0.3rem 0.8rem;\r\n background: var(--navy-blue);\r\n color: var(--light-text);\r\n border-radius: 4px;\r\n font-size: 0.75rem;\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n \/* Dashboard Preview Section *\/\r\n .dashboard {\r\n padding: 6rem 5%;\r\n background: linear-gradient(180deg, var(--dark-bg) 0%, var(--navy-blue) 100%);\r\n width: 100%;\r\n }\r\n\r\n .dashboard-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .dashboard-preview {\r\n background: var(--card-bg);\r\n border: 1px solid var(--border-color);\r\n border-radius: 15px;\r\n overflow: hidden;\r\n box-shadow: 0 30px 60px rgba(0,0,0,0.5);\r\n }\r\n\r\n .dashboard-header {\r\n background: #0f0f16;\r\n padding: 1rem 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n border-bottom: 1px solid var(--border-color);\r\n }\r\n\r\n .dashboard-title {\r\n color: white;\r\n font-size: 0.9rem;\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .dashboard-title::before {\r\n content: '\ud83d\udcca';\r\n }\r\n\r\n .dashboard-body {\r\n padding: 2rem;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 1.5rem;\r\n }\r\n\r\n .metric-card {\r\n background: rgba(255, 32, 78, 0.05);\r\n border: 1px solid var(--border-color);\r\n border-radius: 8px;\r\n padding: 1.5rem;\r\n text-align: center;\r\n }\r\n\r\n .metric-value {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--neon-red);\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n .metric-label {\r\n color: #666;\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .chart-placeholder {\r\n grid-column: span 3;\r\n height: 200px;\r\n background: linear-gradient(90deg, var(--navy-blue), var(--dark-burgundy));\r\n border-radius: 8px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #444;\r\n font-size: 0.9rem;\r\n border: 1px solid var(--border-color);\r\n }\r\n\r\n \/* Contact Section *\/\r\n .contact {\r\n padding: 6rem 5%;\r\n background: var(--dark-bg);\r\n width: 100%;\r\n text-align: center;\r\n }\r\n\r\n .contact-box {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n padding: 3rem;\r\n background: var(--card-bg);\r\n border: 1px solid var(--border-color);\r\n border-radius: 15px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .contact-box::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--neon-red), var(--deep-crimson), var(--dark-burgundy), var(--navy-blue));\r\n }\r\n\r\n .contact h2 {\r\n font-size: 2.5rem;\r\n color: white;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .contact h2 span {\r\n color: var(--neon-red);\r\n }\r\n\r\n .contact p {\r\n color: #888;\r\n margin-bottom: 2rem;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .contact-links {\r\n display: flex;\r\n justify-content: center;\r\n gap: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .contact-link {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n color: var(--light-text);\r\n text-decoration: none;\r\n padding: 1rem 2rem;\r\n background: rgba(255, 32, 78, 0.1);\r\n border: 1px solid var(--deep-crimson);\r\n border-radius: 8px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .contact-link:hover {\r\n background: var(--neon-red);\r\n border-color: var(--neon-red);\r\n color: white;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background: #050508;\r\n color: #444;\r\n padding: 2rem 5%;\r\n text-align: center;\r\n border-top: 1px solid var(--border-color);\r\n }\r\n\r\n .footer-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .security-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n color: #00ff41;\r\n font-size: 0.8rem;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .security-badge::before {\r\n content: '\ud83d\udd12';\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 968px) {\r\n .hero-container {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n\r\n .hero-content p {\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .hero-stats {\r\n max-width: 400px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .hero-visual {\r\n order: -1;\r\n }\r\n\r\n .terminal-window {\r\n max-width: 100%;\r\n }\r\n\r\n .dashboard-body {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .chart-placeholder {\r\n grid-column: span 1;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .nav-links {\r\n display: none;\r\n }\r\n\r\n .skills-grid,\r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .contact-links {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .contact-link {\r\n width: 100%;\r\n max-width: 300px;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n \/* Scroll animations *\/\r\n .fade-in {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease-out;\r\n }\r\n\r\n .fade-in.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"cyber-portfolio\">\r\n <!-- Navigation -->\r\n <nav class=\"navbar\">\r\n <div class=\"logo\">MEJIA<span style=\"color: white;\">.DEV<\/span><\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#home\">Home<\/a><\/li>\r\n <li><a href=\"#skills\">Skills<\/a><\/li>\r\n <li><a href=\"#projects\">Projects<\/a><\/li>\r\n <li><a href=\"#certs\">Certs<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <\/nav>\r\n\r\n <!-- Hero Section -->\r\n <section class=\"hero\" id=\"home\">\r\n <div class=\"grid-overlay\"><\/div>\r\n <div class=\"hero-container\">\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge\">\u25cf Available for Hire<\/div>\r\n <h1>Cybersecurity <span>Analyst<\/span> & Cloud Architect<\/h1>\r\n <p>Securing digital infrastructure, optimizing network performance, and transforming data into actionable intelligence through advanced analytics.<\/p>\r\n \r\n <div class=\"hero-stats\">\r\n <div class=\"stat\">\r\n <span class=\"stat-number\">7+<\/span>\r\n <span class=\"stat-label\">Years Exp<\/span>\r\n <\/div>\r\n <div class=\"stat\">\r\n <span class=\"stat-number\">50+<\/span>\r\n <span class=\"stat-label\">Networks Secured<\/span>\r\n <\/div>\r\n <div class=\"stat\">\r\n <span class=\"stat-number\">99.9%<\/span>\r\n <span class=\"stat-label\">Uptime Achieved<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-group\">\r\n <a href=\"#projects\" class=\"btn btn-primary\">View Projects \u2192<\/a>\r\n <a href=\"#contact\" class=\"btn btn-outline\">Download Resume<\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"hero-visual\">\r\n <div class=\"terminal-window\">\r\n <div class=\"terminal-header\">\r\n <div class=\"terminal-btn\"><\/div>\r\n <div class=\"terminal-btn\"><\/div>\r\n <div class=\"terminal-btn\"><\/div>\r\n <span style=\"color: #666; font-size: 0.8rem; margin-left: 1rem;\">root@security-ops:~<\/span>\r\n <\/div>\r\n <div class=\"terminal-body\">\r\n <div class=\"terminal-line\"><span class=\"terminal-prompt\">$<\/span> nmap -sV target.network<\/div>\r\n <div class=\"terminal-line\">Starting Nmap scan...<\/div>\r\n <div class=\"terminal-line\">Discovered 3 vulnerabilities<\/div>\r\n <div class=\"terminal-line\">Patching CVE-2024-XXXX...<\/div>\r\n <div class=\"terminal-line\"><span style=\"color: #00ff41;\">[OK]<\/span> Firewall rules updated<\/div>\r\n <div class=\"terminal-line\"><span style=\"color: #00ff41;\">[OK]<\/span> IDS alerts configured<\/div>\r\n <div class=\"terminal-line\"><span style=\"color: #00ff41;\">[OK]<\/span> Cloud IAM policies set<\/div>\r\n <div class=\"terminal-line\"><span class=\"terminal-prompt\">$<\/span> python3 analyze_threats.py<span class=\"cursor\"><\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Skills Section -->\r\n <section class=\"skills\" id=\"skills\">\r\n <div class=\"section-header fade-in\">\r\n <h3>Technical Arsenal<\/h3>\r\n <h2>Core Competencies<\/h2>\r\n <p>Expert-level proficiency across the security and data stack.<\/p>\r\n <\/div>\r\n \r\n <div class=\"skills-grid\">\r\n <div class=\"skill-card fade-in\">\r\n <div class=\"skill-icon\">\ud83d\udee1\ufe0f<\/div>\r\n <h3>Cybersecurity<\/h3>\r\n <ul class=\"skill-list\">\r\n <li>Penetration Testing & Vulnerability Assessment<\/li>\r\n <li>SIEM Implementation (Splunk, QRadar)<\/li>\r\n <li>Incident Response & Forensics<\/li>\r\n <li>Security Policy Development<\/li>\r\n <li>Threat Intelligence Analysis<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"skill-card fade-in\">\r\n <div class=\"skill-icon\">\u2601\ufe0f<\/div>\r\n <h3>Cloud Infrastructure<\/h3>\r\n <ul class=\"skill-list\">\r\n <li>AWS\/Azure\/GCP Architecture<\/li>\r\n <li>Kubernetes & Docker Security<\/li>\r\n <li>Infrastructure as Code (Terraform)<\/li>\r\n <li>Cloud Security Posture Management<\/li>\r\n <li>Serverless Security Patterns<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"skill-card fade-in\">\r\n <div class=\"skill-icon\">\ud83c\udf10<\/div>\r\n <h3>Networking<\/h3>\r\n <ul class=\"skill-list\">\r\n <li>Cisco\/Juniper\/Palo Alto Configuration<\/li>\r\n <li>Network Segmentation & Zero Trust<\/li>\r\n <li>VPN & SD-WAN Implementation<\/li>\r\n <li>Traffic Analysis & Monitoring<\/li>\r\n <li>Wireless Security (WPA3, RADIUS)<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n <div class=\"skill-card fade-in\">\r\n <div class=\"skill-icon\">\ud83d\udcca<\/div>\r\n <h3>Data Analytics<\/h3>\r\n <ul class=\"skill-list\">\r\n <li>Power BI Dashboard Development<\/li>\r\n <li>Security Metrics & KPI Tracking<\/li>\r\n <li>Log Analysis & Visualization<\/li>\r\n <li>Python\/R for Data Processing<\/li>\r\n <li>Predictive Threat Modeling<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Certifications -->\r\n <section class=\"certs\" id=\"certs\">\r\n <div class=\"section-header fade-in\">\r\n <h3>Credentials<\/h3>\r\n <h2>Certifications<\/h2>\r\n <p>Industry-recognized validation of expertise.<\/p>\r\n <\/div>\r\n\r\n <div class=\"certs-grid fade-in\">\r\n <div class=\"cert-item\">\r\n <div class=\"cert-badge\">CISSP<\/div>\r\n <h4>CISSP<\/h4>\r\n <p>ISC\u00b2 Certified<\/p>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-badge\">CEH<\/div>\r\n <h4>CEH<\/h4>\r\n <p>EC-Council<\/p>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-badge\">AWS<\/div>\r\n <h4>AWS SAA<\/h4>\r\n <p>Solutions Architect<\/p>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-badge\">AZ<\/div>\r\n <h4>Azure Sec<\/h4>\r\n <p>AZ-500 Certified<\/p>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-badge\">CCNA<\/div>\r\n <h4>CCNA<\/h4>\r\n <p>Cisco Certified<\/p>\r\n <\/div>\r\n <div class=\"cert-item\">\r\n <div class=\"cert-badge\">PBI<\/div>\r\n <h4>Power BI<\/h4>\r\n <p>Data Analyst<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Projects Section -->\r\n <section class=\"projects\" id=\"projects\">\r\n <div class=\"section-header fade-in\">\r\n <h3>Portfolio<\/h3>\r\n <h2>Featured Projects<\/h2>\r\n <p>Real-world implementations demonstrating security and data expertise.<\/p>\r\n <\/div>\r\n\r\n <div class=\"projects-grid\">\r\n <div class=\"project-card fade-in\">\r\n <div class=\"project-header\">\r\n <span class=\"project-type\">\ud83d\udd34 Security<\/span>\r\n <div class=\"project-status\"><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <h3>Enterprise SOC Implementation<\/h3>\r\n <p>Designed and deployed a 24\/7 Security Operations Center for a financial institution, processing 50K+ events daily with automated threat response.<\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"tech-tag\">Splunk<\/span>\r\n <span class=\"tech-tag\">SOAR<\/span>\r\n <span class=\"tech-tag\">Python<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card fade-in\">\r\n <div class=\"project-header\">\r\n <span class=\"project-type\" style=\"background: rgba(0, 212, 170, 0.2); color: #00d4aa;\">\ud83d\udfe2 Cloud<\/span>\r\n <div class=\"project-status\"><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <h3>Zero Trust Architecture Migration<\/h3>\r\n <p>Led migration of legacy infrastructure to Azure AD with conditional access policies, reducing attack surface by 80% and improving compliance posture.<\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"tech-tag\">Azure AD<\/span>\r\n <span class=\"tech-tag\">Terraform<\/span>\r\n <span class=\"tech-tag\">Sentinel<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card fade-in\">\r\n <div class=\"project-header\">\r\n <span class=\"project-type\" style=\"background: rgba(0, 180, 216, 0.2); color: #00b4d8;\">\ud83d\udd35 Network<\/span>\r\n <div class=\"project-status\"><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <h3>Global SD-WAN Deployment<\/h3>\r\n <p>Architected and implemented SD-WAN across 40+ international sites, improving network reliability by 99.95% while reducing costs by 35%.<\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"tech-tag\">Palo Alto<\/span>\r\n <span class=\"tech-tag\">BGP<\/span>\r\n <span class=\"tech-tag\">Wireshark<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card fade-in\">\r\n <div class=\"project-header\">\r\n <span class=\"project-type\" style=\"background: rgba(249, 199, 79, 0.2); color: #f9c74f;\">\ud83d\udfe1 Data<\/span>\r\n <div class=\"project-status\"><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <h3>Security Analytics Dashboard<\/h3>\r\n <p>Built comprehensive Power BI security metrics dashboard for C-suite, tracking MTTD, MTTR, and risk scores with real-time data feeds.<\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"tech-tag\">Power BI<\/span>\r\n <span class=\"tech-tag\">DAX<\/span>\r\n <span class=\"tech-tag\">SQL<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card fade-in\">\r\n <div class=\"project-header\">\r\n <span class=\"project-type\">\ud83d\udd34 Security<\/span>\r\n <div class=\"project-status\"><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <h3>Penetration Testing Framework<\/h3>\r\n <p>Developed automated penetration testing framework using Python and Metasploit, reducing assessment time by 60% while improving coverage.<\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"tech-tag\">Python<\/span>\r\n <span class=\"tech-tag\">Metasploit<\/span>\r\n <span class=\"tech-tag\">Nmap<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"project-card fade-in\">\r\n <div class=\"project-header\">\r\n <span class=\"project-type\" style=\"background: rgba(0, 212, 170, 0.2); color: #00d4aa;\">\ud83d\udfe2 Cloud<\/span>\r\n <div class=\"project-status\"><\/div>\r\n <\/div>\r\n <div class=\"project-body\">\r\n <h3>Kubernetes Security Hardening<\/h3>\r\n <p>Implemented Pod Security Standards, network policies, and Falco runtime detection for 200+ microservices in production EKS clusters.<\/p>\r\n <div class=\"project-tech\">\r\n <span class=\"tech-tag\">Kubernetes<\/span>\r\n <span class=\"tech-tag\">Falco<\/span>\r\n <span class=\"tech-tag\">OPA<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Dashboard Preview -->\r\n <section class=\"dashboard\">\r\n <div class=\"section-header fade-in\">\r\n <h3>Data Visualization<\/h3>\r\n <h2>Power BI Expertise<\/h2>\r\n <p>Transforming complex security data into executive-ready insights.<\/p>\r\n <\/div>\r\n\r\n <div class=\"dashboard-container fade-in\">\r\n <div class=\"dashboard-preview\">\r\n <div class=\"dashboard-header\">\r\n <div class=\"dashboard-title\">Security Operations Dashboard<\/div>\r\n <span style=\"color: #00ff41; font-size: 0.8rem;\">\u25cf Live Data<\/span>\r\n <\/div>\r\n <div class=\"dashboard-body\">\r\n <div class=\"metric-card\">\r\n <div class=\"metric-value\">24<\/div>\r\n <div class=\"metric-label\">Critical Alerts<\/div>\r\n <\/div>\r\n <div class=\"metric-card\">\r\n <div class=\"metric-value\">156<\/div>\r\n <div class=\"metric-label\">Resolved Today<\/div>\r\n <\/div>\r\n <div class=\"metric-card\">\r\n <div class=\"metric-value\">12m<\/div>\r\n <div class=\"metric-label\">Avg Response<\/div>\r\n <\/div>\r\n <div class=\"chart-placeholder\">\r\n [Power BI Visualization: Threat Trend Analysis with Interactive Filters]\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Contact Section -->\r\n <section class=\"contact\" id=\"contact\">\r\n <div class=\"contact-box fade-in\">\r\n <h2>Let's Secure Your <span>Infrastructure<\/span><\/h2>\r\n <p>Available for security consulting, architecture reviews, and data analytics projects. Clearances available upon request.<\/p>\r\n <div class=\"contact-links\">\r\n <a href=\"mailto:security@portfolio.com\" class=\"contact-link\">\ud83d\udce7 Email Me<\/a>\r\n <a href=\"#\" class=\"contact-link\">\ud83d\udcbc LinkedIn<\/a>\r\n <a href=\"#\" class=\"contact-link\">\ud83d\udc19 GitHub<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Footer -->\r\n <footer>\r\n <div class=\"footer-content\">\r\n <div class=\"security-badge\">Connection Secured via TLS 1.3<\/div>\r\n <p>\u00a9 2026 Secure.Dev | All systems monitored<\/p>\r\n <\/div>\r\n <\/footer>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ Scroll animations\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: \"0px 0px -50px 0px\"\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('.fade-in').forEach((el) => observer.observe(el));\r\n\r\n \/\/ Smooth scroll\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\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>Mejia-Dev MEJIA.DEV Home Skills Projects Certs Contact \u25cf Available for Hire Cybersecurity Analyst & Cloud Architect Securing digital infrastructure, optimizing network performance, and transforming data into actionable intelligence through advanced analytics. 7+ Years Exp 50+ Networks Secured 99.9% Uptime Achieved View Projects \u2192 Download Resume root@security-ops:~ $ nmap -sV target.network Starting Nmap scan… Discovered 3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mejia-dev.online\/index.php?rest_route=\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mejia-dev.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mejia-dev.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mejia-dev.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mejia-dev.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":5,"href":"https:\/\/mejia-dev.online\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/mejia-dev.online\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/mejia-dev.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}