Ahmad Labib Prabowo | Portfolio<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- VARIABEL & RESET --- *\/\n :root {\n --bg-color: #030712; \/* Sangat gelap, hampir hitam *\/\n --text-main: #f9fafb;\n --text-muted: #9ca3af;\n --primary: #6366f1; \/* Indigo *\/\n --accent: #a855f7; \/* Purple *\/\n --glass: rgba(255, 255, 255, 0.05);\n --glass-border: rgba(255, 255, 255, 0.1);\n --nav-glass: rgba(3, 7, 18, 0.7);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-main);\n overflow-x: hidden;\n min-height: 100vh;\n position: relative;\n }\n\n \/* --- BACKGROUND DECORATIONS (Agar Rame) --- *\/\n .bg-grid {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);\n background-size: 40px 40px;\n z-index: -2;\n opacity: 0.2;\n }\n\n .glow-orb {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n z-index: -1;\n opacity: 0.4;\n }\n\n .orb-1 {\n width: 400px;\n height: 400px;\n background: var(--primary);\n top: -100px;\n left: -100px;\n animation: floatOrb 10s infinite alternate;\n }\n\n .orb-2 {\n width: 300px;\n height: 300px;\n background: var(--accent);\n bottom: 10%;\n right: -50px;\n animation: floatOrb 15s infinite alternate-reverse;\n }\n\n @keyframes floatOrb {\n 0% { transform: translate(0, 0); }\n 100% { transform: translate(50px, 30px); }\n }\n\n \/* --- NAVBAR (LEADING PAGE) --- *\/\n nav {\n position: fixed;\n top: 0;\n width: 100%;\n padding: 20px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--nav-glass);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n z-index: 1000;\n border-bottom: 1px solid var(--glass-border);\n }\n\n .logo {\n font-weight: 800;\n font-size: 1.5rem;\n letter-spacing: -1px;\n background: linear-gradient(to right, #fff, var(--primary));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .nav-links {\n display: flex;\n gap: 30px;\n list-style: none;\n }\n\n .nav-links a {\n text-decoration: none;\n color: var(--text-muted);\n font-size: 0.9rem;\n font-weight: 500;\n transition: color 0.3s;\n position: relative;\n }\n\n .nav-links a:hover {\n color: #fff;\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 0;\n background: var(--primary);\n transition: width 0.3s;\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .nav-btn {\n padding: 8px 20px;\n background: rgba(255,255,255,0.1);\n color: white;\n text-decoration: none;\n border-radius: 50px;\n font-size: 0.85rem;\n font-weight: 600;\n border: 1px solid rgba(255,255,255,0.2);\n transition: all 0.3s;\n }\n\n .nav-btn:hover {\n background: white;\n color: black;\n }\n\n \/* --- HERO SECTION (LAYOUT UTAMA) --- *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 120px 5% 50px;\n gap: 50px;\n position: relative;\n }\n\n .hero-left {\n flex: 1;\n max-width: 600px;\n z-index: 2;\n }\n\n .hero-tag {\n display: inline-block;\n padding: 6px 12px;\n background: rgba(99, 102, 241, 0.15);\n color: #818cf8;\n border-radius: 6px;\n font-size: 0.8rem;\n font-weight: 600;\n margin-bottom: 20px;\n border: 1px solid rgba(99, 102, 241, 0.3);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .hero-left h1 {\n font-size: 4rem;\n line-height: 1.1;\n font-weight: 800;\n margin-bottom: 20px;\n letter-spacing: -2px;\n }\n\n .hero-left h1 span {\n color: var(--primary);\n background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .hero-left p {\n font-size: 1.1rem;\n color: var(--text-muted);\n margin-bottom: 30px;\n line-height: 1.6;\n max-width: 90%;\n }\n\n .cta-group {\n display: flex;\n gap: 15px;\n }\n\n .btn-primary {\n padding: 12px 28px;\n background: white;\n color: black;\n text-decoration: none;\n border-radius: 8px;\n font-weight: 600;\n transition: transform 0.2s;\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n }\n\n .btn-secondary {\n padding: 12px 28px;\n background: rgba(255,255,255,0.05);\n color: white;\n text-decoration: none;\n border-radius: 8px;\n font-weight: 600;\n border: 1px solid var(--glass-border);\n transition: all 0.2s;\n }\n\n .btn-secondary:hover {\n background: rgba(255,255,255,0.1);\n }\n\n \/* --- HERO RIGHT (VISUAL CARD) --- *\/\n .hero-right {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n perspective: 1000px;\n }\n\n \/* Kartu Profil 3D *\/\n .profile-card-3d {\n width: 380px;\n background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));\n backdrop-filter: blur(20px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 30px;\n position: relative;\n transform: rotateY(-10deg) rotateX(5deg);\n box-shadow: -20px 20px 50px rgba(0,0,0,0.5);\n transition: transform 0.5s ease;\n }\n\n .hero-right:hover .profile-card-3d {\n transform: rotateY(0deg) rotateX(0deg) scale(1.02);\n }\n\n .card-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 25px;\n border-bottom: 1px solid rgba(255,255,255,0.1);\n padding-bottom: 20px;\n }\n\n .card-img {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n object-fit: cover;\n border: 2px solid var(--primary);\n }\n\n .card-title h3 {\n font-size: 1.2rem;\n margin-bottom: 2px;\n }\n\n .card-title span {\n font-size: 0.8rem;\n color: var(--accent);\n background: rgba(168, 85, 247, 0.1);\n padding: 2px 8px;\n border-radius: 4px;\n }\n\n .stat-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n font-size: 0.9rem;\n }\n\n .stat-label { color: var(--text-muted); }\n .stat-value { font-weight: 600; text-align: right;}\n\n .tech-icons {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n justify-content: center;\n }\n\n .tech-icon {\n width: 35px;\n height: 35px;\n background: rgba(255,255,255,0.05);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-muted);\n border: 1px solid var(--glass-border);\n transition: 0.3s;\n }\n\n .tech-icon:hover {\n background: var(--primary);\n color: white;\n transform: translateY(-3px);\n }\n\n \/* --- FLOATING DECORATION AROUND CARD --- *\/\n .floating-badge {\n position: absolute;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(10px);\n padding: 10px 15px;\n border-radius: 12px;\n border: 1px solid var(--glass-border);\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 0.8rem;\n font-weight: 600;\n box-shadow: 0 10px 20px rgba(0,0,0,0.3);\n animation: float 4s ease-in-out infinite;\n }\n\n .badge-1 { top: -20px; right: -20px; }\n .badge-2 { bottom: -30px; left: -30px; animation-delay: 1s; }\n \n .badge-icon {\n width: 30px;\n height: 30px;\n background: var(--primary);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n \/* --- MARQUEE (TEKS BERJALAN) --- *\/\n .marquee-container {\n position: absolute;\n bottom: 0;\n width: 100%;\n background: rgba(0,0,0,0.3);\n backdrop-filter: blur(5px);\n border-top: 1px solid var(--glass-border);\n padding: 10px 0;\n overflow: hidden;\n white-space: nowrap;\n z-index: 10;\n }\n\n .marquee-content {\n display: inline-block;\n animation: marquee 20s linear infinite;\n color: var(--text-muted);\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n }\n\n .marquee-content span {\n margin: 0 30px;\n color: var(--primary);\n }\n\n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* --- RESPONSIVE --- *\/\n @media (max-width: 900px) {\n .hero { flex-direction: column; padding-top: 100px; text-align: center; }\n .hero-left { margin-bottom: 50px; }\n .hero-left h1 { font-size: 2.5rem; }\n .hero-left p { margin-left: auto; margin-right: auto; }\n .cta-group { justify-content: center; }\n .nav-links { display: none; } \/* Sembunyikan menu di mobile untuk simplicity *\/\n .profile-card-3d { width: 100%; max-width: 350px; transform: none; margin-bottom: 50px; }\n .hero-right:hover .profile-card-3d { transform: none; }\n .badge-1, .badge-2 { display: none; } \/* Hilangkan dekorasi floating di mobile biar rapi *\/\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"bg-grid\"><\/div>\n <div class=\"glow-orb orb-1\"><\/div>\n <div class=\"glow-orb orb-2\"><\/div>\n\n \n <nav>\n <div class=\"logo\">ALP<span style=\"color:var(--primary)\">.<\/span><\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#\">Beranda<\/a><\/li>\n <li><a href=\"#\">Tentang<\/a><\/li>\n <li><a href=\"#\">Portofolio<\/a><\/li>\n <li><a href=\"#\">Kontak<\/a><\/li>\n <\/ul>\n <a href=\"#\" class=\"nav-btn\">Hubungi Saya<\/a>\n <\/nav>\n\n \n <section class=\"hero\">\n \n \n <div class=\"hero-left\">\n <span class=\"hero-tag\">Student X TJKT B<\/span>\n <h1>Membangun Jaringan Masa Depan.<\/h1>\n <p>\n Halo, saya <strong>Ahmad Labib Prabowo<\/strong>. Seorang pelajar yang antusias dalam dunia Teknik Jaringan Komputer dan Telekomunikasi. Berbasis di Siowan Lor.\n <\/p>\n <div class=\"cta-group\">\n <a href=\"#\" class=\"btn-primary\">Lihat Profil<\/a>\n <a href=\"#\" class=\"btn-secondary\"><i class=\"fas fa-download\"><\/i> Download CV<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"hero-right\">\n \n \n <div class=\"floating-badge badge-1\">\n <div class=\"badge-icon\"><i class=\"fas fa-check\"><\/i><\/div>\n <div>\n <div style=\"font-size: 10px; color: #aaa;\">Status<\/div>\n <div>Aktif Belajar<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"profile-card-3d\">\n <div class=\"card-header\">\n <img decoding=\"async\" src=\"WhatsApp Image 2026-05-20 at 14.41.45 (1).jpeg\" alt=\"Profile\" class=\"card-img\">\n <div class=\"card-title\">\n <h3>Ahmad Labib P.<\/h3>\n <span>X TJKT B<\/span>\n <\/div>\n <\/div>\n\n <div class=\"stat-row\">\n <div class=\"stat-label\">Tanggal Lahir<\/div>\n <div class=\"stat-value\">17 Agustus 1945<\/div>\n <\/div>\n <div class=\"stat-row\">\n <div class=\"stat-label\">Alamat<\/div>\n <div class=\"stat-value\">Siowan Lor<\/div>\n <\/div>\n <div class=\"stat-row\">\n <div class=\"stat-label\">Minat<\/div>\n <div class=\"stat-value\">Networking, Cyber<\/div>\n <\/div>\n\n <div style=\"margin-top: 20px; height: 1px; background: rgba(255,255,255,0.1);\"><\/div>\n\n <div class=\"tech-icons\">\n <div class=\"tech-icon\" title=\"HTML\"><i class=\"fab fa-html5\"><\/i><\/div>\n <div class=\"tech-icon\" title=\"CSS\"><i class=\"fab fa-css3-alt\"><\/i><\/div>\n <div class=\"tech-icon\" title=\"Network\"><i class=\"fas fa-network-wired\"><\/i><\/div>\n <div class=\"tech-icon\" title=\"Server\"><i class=\"fas fa-server\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"floating-badge badge-2\">\n <div class=\"badge-icon\" style=\"background: var(--accent);\"><i class=\"fas fa-map-marker-alt\"><\/i><\/div>\n <div>\n <div style=\"font-size: 10px; color: #aaa;\">Location<\/div>\n <div>Siowan Lor, ID<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <div class=\"marquee-container\">\n <div class=\"marquee-content\">\n Siswa Teladan \u2022 Teknisi Muda \u2022 Penggemar Coding \u2022 17 Agustus 1945 \u2022 Siowan Lor \u2022 X TJKT B \u2022 Network Enthusiast \u2022 \n Siswa Teladan \u2022 Teknisi Muda \u2022 Penggemar Coding \u2022 17 Agustus 1945 \u2022 Siowan Lor \u2022 X TJKT B \u2022 Network Enthusiast \u2022\n <\/div>\n <\/div>\n\n <script>\n \/\/ Script sederhana untuk efek parallax mouse pada latar belakang orb\n document.addEventListener('mousemove', (e) => {\n const orbs = document.querySelectorAll('.glow-orb');\n const x = e.clientX \/ window.innerWidth;\n const y = e.clientY \/ window.innerHeight;\n\n orbs.forEach((orb, index) => {\n const speed = (index + 1) * 20;\n orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`;\n });\n });\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ahmad Labib Prabowo | Portfolio ALP. Beranda Tentang Portofolio Kontak Hubungi Saya Student X TJKT B Membangun Jaringan Masa Depan. Halo, saya Ahmad Labib Prabowo. Seorang pelajar yang antusias dalam dunia Teknik Jaringan Komputer dan Telekomunikasi. Berbasis di Siowan Lor. Lihat Profil Download CV Status Aktif Belajar Ahmad Labib P. X TJKT B Tanggal Lahir […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-250","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages\/250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=250"}],"version-history":[{"count":5,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages\/250\/revisions"}],"predecessor-version":[{"id":257,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages\/250\/revisions\/257"}],"wp:attachment":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\n\n\n \n \n Ahmad Labib Prabowo | Portfolio<\/title>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;600;800&display=swap\" rel=\"stylesheet\">\n \n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n <style>\n \/* --- VARIABEL & RESET --- *\/\n :root {\n --bg-color: #030712; \/* Sangat gelap, hampir hitam *\/\n --text-main: #f9fafb;\n --text-muted: #9ca3af;\n --primary: #6366f1; \/* Indigo *\/\n --accent: #a855f7; \/* Purple *\/\n --glass: rgba(255, 255, 255, 0.05);\n --glass-border: rgba(255, 255, 255, 0.1);\n --nav-glass: rgba(3, 7, 18, 0.7);\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Inter', sans-serif;\n scroll-behavior: smooth;\n }\n\n body {\n background-color: var(--bg-color);\n color: var(--text-main);\n overflow-x: hidden;\n min-height: 100vh;\n position: relative;\n }\n\n \/* --- BACKGROUND DECORATIONS (Agar Rame) --- *\/\n .bg-grid {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);\n background-size: 40px 40px;\n z-index: -2;\n opacity: 0.2;\n }\n\n .glow-orb {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n z-index: -1;\n opacity: 0.4;\n }\n\n .orb-1 {\n width: 400px;\n height: 400px;\n background: var(--primary);\n top: -100px;\n left: -100px;\n animation: floatOrb 10s infinite alternate;\n }\n\n .orb-2 {\n width: 300px;\n height: 300px;\n background: var(--accent);\n bottom: 10%;\n right: -50px;\n animation: floatOrb 15s infinite alternate-reverse;\n }\n\n @keyframes floatOrb {\n 0% { transform: translate(0, 0); }\n 100% { transform: translate(50px, 30px); }\n }\n\n \/* --- NAVBAR (LEADING PAGE) --- *\/\n nav {\n position: fixed;\n top: 0;\n width: 100%;\n padding: 20px 40px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: var(--nav-glass);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n z-index: 1000;\n border-bottom: 1px solid var(--glass-border);\n }\n\n .logo {\n font-weight: 800;\n font-size: 1.5rem;\n letter-spacing: -1px;\n background: linear-gradient(to right, #fff, var(--primary));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .nav-links {\n display: flex;\n gap: 30px;\n list-style: none;\n }\n\n .nav-links a {\n text-decoration: none;\n color: var(--text-muted);\n font-size: 0.9rem;\n font-weight: 500;\n transition: color 0.3s;\n position: relative;\n }\n\n .nav-links a:hover {\n color: #fff;\n }\n\n .nav-links a::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 0;\n background: var(--primary);\n transition: width 0.3s;\n }\n\n .nav-links a:hover::after {\n width: 100%;\n }\n\n .nav-btn {\n padding: 8px 20px;\n background: rgba(255,255,255,0.1);\n color: white;\n text-decoration: none;\n border-radius: 50px;\n font-size: 0.85rem;\n font-weight: 600;\n border: 1px solid rgba(255,255,255,0.2);\n transition: all 0.3s;\n }\n\n .nav-btn:hover {\n background: white;\n color: black;\n }\n\n \/* --- HERO SECTION (LAYOUT UTAMA) --- *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 120px 5% 50px;\n gap: 50px;\n position: relative;\n }\n\n .hero-left {\n flex: 1;\n max-width: 600px;\n z-index: 2;\n }\n\n .hero-tag {\n display: inline-block;\n padding: 6px 12px;\n background: rgba(99, 102, 241, 0.15);\n color: #818cf8;\n border-radius: 6px;\n font-size: 0.8rem;\n font-weight: 600;\n margin-bottom: 20px;\n border: 1px solid rgba(99, 102, 241, 0.3);\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n\n .hero-left h1 {\n font-size: 4rem;\n line-height: 1.1;\n font-weight: 800;\n margin-bottom: 20px;\n letter-spacing: -2px;\n }\n\n .hero-left h1 span {\n color: var(--primary);\n background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .hero-left p {\n font-size: 1.1rem;\n color: var(--text-muted);\n margin-bottom: 30px;\n line-height: 1.6;\n max-width: 90%;\n }\n\n .cta-group {\n display: flex;\n gap: 15px;\n }\n\n .btn-primary {\n padding: 12px 28px;\n background: white;\n color: black;\n text-decoration: none;\n border-radius: 8px;\n font-weight: 600;\n transition: transform 0.2s;\n }\n\n .btn-primary:hover {\n transform: translateY(-2px);\n }\n\n .btn-secondary {\n padding: 12px 28px;\n background: rgba(255,255,255,0.05);\n color: white;\n text-decoration: none;\n border-radius: 8px;\n font-weight: 600;\n border: 1px solid var(--glass-border);\n transition: all 0.2s;\n }\n\n .btn-secondary:hover {\n background: rgba(255,255,255,0.1);\n }\n\n \/* --- HERO RIGHT (VISUAL CARD) --- *\/\n .hero-right {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n perspective: 1000px;\n }\n\n \/* Kartu Profil 3D *\/\n .profile-card-3d {\n width: 380px;\n background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));\n backdrop-filter: blur(20px);\n border: 1px solid var(--glass-border);\n border-radius: 20px;\n padding: 30px;\n position: relative;\n transform: rotateY(-10deg) rotateX(5deg);\n box-shadow: -20px 20px 50px rgba(0,0,0,0.5);\n transition: transform 0.5s ease;\n }\n\n .hero-right:hover .profile-card-3d {\n transform: rotateY(0deg) rotateX(0deg) scale(1.02);\n }\n\n .card-header {\n display: flex;\n align-items: center;\n gap: 15px;\n margin-bottom: 25px;\n border-bottom: 1px solid rgba(255,255,255,0.1);\n padding-bottom: 20px;\n }\n\n .card-img {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n object-fit: cover;\n border: 2px solid var(--primary);\n }\n\n .card-title h3 {\n font-size: 1.2rem;\n margin-bottom: 2px;\n }\n\n .card-title span {\n font-size: 0.8rem;\n color: var(--accent);\n background: rgba(168, 85, 247, 0.1);\n padding: 2px 8px;\n border-radius: 4px;\n }\n\n .stat-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 15px;\n font-size: 0.9rem;\n }\n\n .stat-label { color: var(--text-muted); }\n .stat-value { font-weight: 600; text-align: right;}\n\n .tech-icons {\n display: flex;\n gap: 10px;\n margin-top: 20px;\n justify-content: center;\n }\n\n .tech-icon {\n width: 35px;\n height: 35px;\n background: rgba(255,255,255,0.05);\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-muted);\n border: 1px solid var(--glass-border);\n transition: 0.3s;\n }\n\n .tech-icon:hover {\n background: var(--primary);\n color: white;\n transform: translateY(-3px);\n }\n\n \/* --- FLOATING DECORATION AROUND CARD --- *\/\n .floating-badge {\n position: absolute;\n background: rgba(0,0,0,0.6);\n backdrop-filter: blur(10px);\n padding: 10px 15px;\n border-radius: 12px;\n border: 1px solid var(--glass-border);\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 0.8rem;\n font-weight: 600;\n box-shadow: 0 10px 20px rgba(0,0,0,0.3);\n animation: float 4s ease-in-out infinite;\n }\n\n .badge-1 { top: -20px; right: -20px; }\n .badge-2 { bottom: -30px; left: -30px; animation-delay: 1s; }\n \n .badge-icon {\n width: 30px;\n height: 30px;\n background: var(--primary);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n }\n\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n\n \/* --- MARQUEE (TEKS BERJALAN) --- *\/\n .marquee-container {\n position: absolute;\n bottom: 0;\n width: 100%;\n background: rgba(0,0,0,0.3);\n backdrop-filter: blur(5px);\n border-top: 1px solid var(--glass-border);\n padding: 10px 0;\n overflow: hidden;\n white-space: nowrap;\n z-index: 10;\n }\n\n .marquee-content {\n display: inline-block;\n animation: marquee 20s linear infinite;\n color: var(--text-muted);\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 2px;\n }\n\n .marquee-content span {\n margin: 0 30px;\n color: var(--primary);\n }\n\n @keyframes marquee {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* --- RESPONSIVE --- *\/\n @media (max-width: 900px) {\n .hero { flex-direction: column; padding-top: 100px; text-align: center; }\n .hero-left { margin-bottom: 50px; }\n .hero-left h1 { font-size: 2.5rem; }\n .hero-left p { margin-left: auto; margin-right: auto; }\n .cta-group { justify-content: center; }\n .nav-links { display: none; } \/* Sembunyikan menu di mobile untuk simplicity *\/\n .profile-card-3d { width: 100%; max-width: 350px; transform: none; margin-bottom: 50px; }\n .hero-right:hover .profile-card-3d { transform: none; }\n .badge-1, .badge-2 { display: none; } \/* Hilangkan dekorasi floating di mobile biar rapi *\/\n }\n <\/style>\n<\/head>\n<body>\n\n \n <div class=\"bg-grid\"><\/div>\n <div class=\"glow-orb orb-1\"><\/div>\n <div class=\"glow-orb orb-2\"><\/div>\n\n \n <nav>\n <div class=\"logo\">ALP<span style=\"color:var(--primary)\">.<\/span><\/div>\n <ul class=\"nav-links\">\n <li><a href=\"#\">Beranda<\/a><\/li>\n <li><a href=\"#\">Tentang<\/a><\/li>\n <li><a href=\"#\">Portofolio<\/a><\/li>\n <li><a href=\"#\">Kontak<\/a><\/li>\n <\/ul>\n <a href=\"#\" class=\"nav-btn\">Hubungi Saya<\/a>\n <\/nav>\n\n \n <section class=\"hero\">\n \n \n <div class=\"hero-left\">\n <span class=\"hero-tag\">Student X TJKT B<\/span>\n <h1>Membangun Jaringan Masa Depan.<\/h1>\n <p>\n Halo, saya <strong>Ahmad Labib Prabowo<\/strong>. Seorang pelajar yang antusias dalam dunia Teknik Jaringan Komputer dan Telekomunikasi. Berbasis di Siowan Lor.\n <\/p>\n <div class=\"cta-group\">\n <a href=\"#\" class=\"btn-primary\">Lihat Profil<\/a>\n <a href=\"#\" class=\"btn-secondary\"><i class=\"fas fa-download\"><\/i> Download CV<\/a>\n <\/div>\n <\/div>\n\n \n <div class=\"hero-right\">\n \n \n <div class=\"floating-badge badge-1\">\n <div class=\"badge-icon\"><i class=\"fas fa-check\"><\/i><\/div>\n <div>\n <div style=\"font-size: 10px; color: #aaa;\">Status<\/div>\n <div>Aktif Belajar<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"profile-card-3d\">\n <div class=\"card-header\">\n <img decoding=\"async\" src=\"WhatsApp Image 2026-05-20 at 14.41.45 (1).jpeg\" alt=\"Profile\" class=\"card-img\">\n <div class=\"card-title\">\n <h3>Ahmad Labib P.<\/h3>\n <span>X TJKT B<\/span>\n <\/div>\n <\/div>\n\n <div class=\"stat-row\">\n <div class=\"stat-label\">Tanggal Lahir<\/div>\n <div class=\"stat-value\">17 Agustus 1945<\/div>\n <\/div>\n <div class=\"stat-row\">\n <div class=\"stat-label\">Alamat<\/div>\n <div class=\"stat-value\">Siowan Lor<\/div>\n <\/div>\n <div class=\"stat-row\">\n <div class=\"stat-label\">Minat<\/div>\n <div class=\"stat-value\">Networking, Cyber<\/div>\n <\/div>\n\n <div style=\"margin-top: 20px; height: 1px; background: rgba(255,255,255,0.1);\"><\/div>\n\n <div class=\"tech-icons\">\n <div class=\"tech-icon\" title=\"HTML\"><i class=\"fab fa-html5\"><\/i><\/div>\n <div class=\"tech-icon\" title=\"CSS\"><i class=\"fab fa-css3-alt\"><\/i><\/div>\n <div class=\"tech-icon\" title=\"Network\"><i class=\"fas fa-network-wired\"><\/i><\/div>\n <div class=\"tech-icon\" title=\"Server\"><i class=\"fas fa-server\"><\/i><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"floating-badge badge-2\">\n <div class=\"badge-icon\" style=\"background: var(--accent);\"><i class=\"fas fa-map-marker-alt\"><\/i><\/div>\n <div>\n <div style=\"font-size: 10px; color: #aaa;\">Location<\/div>\n <div>Siowan Lor, ID<\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <div class=\"marquee-container\">\n <div class=\"marquee-content\">\n Siswa Teladan \u2022 Teknisi Muda \u2022 Penggemar Coding \u2022 17 Agustus 1945 \u2022 Siowan Lor \u2022 X TJKT B \u2022 Network Enthusiast \u2022 \n Siswa Teladan \u2022 Teknisi Muda \u2022 Penggemar Coding \u2022 17 Agustus 1945 \u2022 Siowan Lor \u2022 X TJKT B \u2022 Network Enthusiast \u2022\n <\/div>\n <\/div>\n\n <script>\n \/\/ Script sederhana untuk efek parallax mouse pada latar belakang orb\n document.addEventListener('mousemove', (e) => {\n const orbs = document.querySelectorAll('.glow-orb');\n const x = e.clientX \/ window.innerWidth;\n const y = e.clientY \/ window.innerHeight;\n\n orbs.forEach((orb, index) => {\n const speed = (index + 1) * 20;\n orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`;\n });\n });\n <\/script>\n<\/body>\n<\/html>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ahmad Labib Prabowo | Portfolio ALP. Beranda Tentang Portofolio Kontak Hubungi Saya Student X TJKT B Membangun Jaringan Masa Depan. Halo, saya Ahmad Labib Prabowo. Seorang pelajar yang antusias dalam dunia Teknik Jaringan Komputer dan Telekomunikasi. Berbasis di Siowan Lor. Lihat Profil Download CV Status Aktif Belajar Ahmad Labib P. X TJKT B Tanggal Lahir […]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-250","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages\/250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=250"}],"version-history":[{"count":5,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages\/250\/revisions"}],"predecessor-version":[{"id":257,"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=\/wp\/v2\/pages\/250\/revisions\/257"}],"wp:attachment":[{"href":"https:\/\/pemdas.smkw9.my.id\/bk4\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}