{"id":23,"date":"2026-09-29T06:16:02","date_gmt":"2026-09-29T06:16:02","guid":{"rendered":"https:\/\/docu.xzry.biz.id\/?page_id=23"},"modified":"2026-09-29T06:16:02","modified_gmt":"2026-09-29T06:16:02","slug":"23-2","status":"publish","type":"page","link":"https:\/\/docu.xzry.biz.id\/?page_id=23","title":{"rendered":""},"content":{"rendered":"\n<style>\n\/* ================================\n   PORTFOLIO \u2014 DARK NETWORK STYLE\n   ================================ *\/\n\n.portfolio {\n    --bg: #0f1418;\n    --card: #171e23;\n    --card-hover: #1b252b;\n    --text: #edf4f7;\n    --muted: #8c9aa3;\n    --cyan: #22d3ee;\n    --cyan-soft: rgba(34,211,238,.12);\n    --border: #273239;\n\n    background: var(--bg);\n    color: var(--text);\n    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,\n                 \"Segoe UI\", sans-serif;\n\n    padding: 70px 25px;\n    border-radius: 18px;\n}\n\n.portfolio * {\n    box-sizing: border-box;\n}\n\n.portfolio-container {\n    max-width: 1100px;\n    margin: auto;\n}\n\n\n\/* ================================\n   HERO\n   ================================ *\/\n\n.hero {\n    padding: 45px 0 80px;\n}\n\n.status {\n    display: inline-flex;\n    align-items: center;\n    gap: 9px;\n\n    padding: 8px 14px;\n\n    background: var(--cyan-soft);\n    border: 1px solid rgba(34,211,238,.25);\n    border-radius: 999px;\n\n    color: var(--cyan);\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: .3px;\n}\n\n.status-dot {\n    width: 7px;\n    height: 7px;\n    background: var(--cyan);\n    border-radius: 50%;\n    box-shadow: 0 0 10px var(--cyan);\n}\n\n.hero h1 {\n    margin: 25px 0 15px;\n\n    font-size: clamp(42px, 7vw, 78px);\n    line-height: .98;\n    letter-spacing: -3px;\n    font-weight: 800;\n}\n\n.hero h1 span {\n    color: var(--cyan);\n}\n\n.hero p {\n    max-width: 650px;\n\n    margin: 0;\n\n    color: var(--muted);\n\n    font-size: 18px;\n    line-height: 1.7;\n}\n\n\n\/* ================================\n   BUTTON\n   ================================ *\/\n\n.buttons {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n\n    margin-top: 30px;\n}\n\n.btn {\n    display: inline-block;\n\n    padding: 12px 20px;\n\n    border-radius: 9px;\n\n    text-decoration: none !important;\n\n    font-size: 14px;\n    font-weight: 600;\n\n    transition: .2s ease;\n}\n\n.btn-primary {\n    background: var(--cyan);\n    color: #081014 !important;\n}\n\n.btn-primary:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(34,211,238,.2);\n}\n\n.btn-secondary {\n    border: 1px solid var(--border);\n    color: var(--text) !important;\n    background: #141b20;\n}\n\n.btn-secondary:hover {\n    border-color: var(--cyan);\n    color: var(--cyan) !important;\n}\n\n\n\/* ================================\n   SECTION\n   ================================ *\/\n\n.section {\n    padding: 55px 0;\n}\n\n.section-title {\n    margin-bottom: 25px;\n}\n\n.section-title small {\n    color: var(--cyan);\n    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    text-transform: uppercase;\n}\n\n.section-title h2 {\n    margin: 7px 0 0;\n\n    color: var(--text);\n\n    font-size: 32px;\n    letter-spacing: -1px;\n}\n\n\n\/* ================================\n   SKILLS\n   ================================ *\/\n\n.skills {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    gap: 15px;\n}\n\n.skill {\n    padding: 22px;\n\n    background: var(--card);\n\n    border: 1px solid var(--border);\n    border-radius: 13px;\n\n    transition: .2s ease;\n}\n\n.skill:hover {\n    transform: translateY(-4px);\n    background: var(--card-hover);\n    border-color: rgba(34,211,238,.45);\n}\n\n.skill-icon {\n    font-size: 25px;\n    margin-bottom: 12px;\n}\n\n.skill h3 {\n    margin: 0 0 7px;\n\n    color: var(--text);\n    font-size: 17px;\n}\n\n.skill p {\n    margin: 0;\n\n    color: var(--muted);\n    font-size: 14px;\n    line-height: 1.6;\n}\n\n\n\/* ================================\n   PROJECTS\n   ================================ *\/\n\n.projects {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 18px;\n}\n\n.project {\n    padding: 27px;\n\n    background: var(--card);\n\n    border: 1px solid var(--border);\n    border-radius: 14px;\n\n    transition: .2s ease;\n}\n\n.project:hover {\n    transform: translateY(-4px);\n    border-color: rgba(34,211,238,.4);\n}\n\n.project-label {\n    color: var(--cyan);\n\n    font-size: 11px;\n    font-weight: 700;\n\n    letter-spacing: 1.5px;\n    text-transform: uppercase;\n}\n\n.project h3 {\n    margin: 12px 0 10px;\n\n    color: var(--text);\n    font-size: 21px;\n}\n\n.project p {\n    margin: 0;\n\n    color: var(--muted);\n\n    font-size: 14px;\n    line-height: 1.7;\n}\n\n.tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 7px;\n\n    margin-top: 18px;\n}\n\n.tag {\n    padding: 5px 9px;\n\n    background: #11181c;\n\n    border: 1px solid var(--border);\n    border-radius: 6px;\n\n    color: #aebbc2;\n\n    font-size: 11px;\n}\n\n\n\/* ================================\n   ABOUT\n   ================================ *\/\n\n.about {\n    display: grid;\n    grid-template-columns: 1.2fr .8fr;\n    gap: 20px;\n}\n\n.about-box {\n    padding: 28px;\n\n    background: var(--card);\n\n    border: 1px solid var(--border);\n    border-radius: 14px;\n}\n\n.about-box p {\n    margin: 0;\n\n    color: var(--muted);\n\n    line-height: 1.8;\n    font-size: 15px;\n}\n\n\n\/* ================================\n   CONTACT\n   ================================ *\/\n\n.contact {\n    margin-top: 30px;\n    padding: 40px;\n\n    background:\n        linear-gradient(\n            135deg,\n            rgba(34,211,238,.10),\n            transparent 60%\n        ),\n        var(--card);\n\n    border: 1px solid rgba(34,211,238,.22);\n    border-radius: 16px;\n}\n\n.contact h2 {\n    margin: 0 0 10px;\n\n    color: var(--text);\n    font-size: 28px;\n}\n\n.contact p {\n    margin: 0 0 22px;\n\n    color: var(--muted);\n}\n\n\n\/* ================================\n   MOBILE\n   ================================ *\/\n\n@media (max-width: 750px) {\n\n    .portfolio {\n        padding: 45px 18px;\n    }\n\n    .hero {\n        padding-top: 20px;\n    }\n\n    .hero h1 {\n        letter-spacing: -2px;\n    }\n\n    .skills {\n        grid-template-columns: 1fr;\n    }\n\n    .projects {\n        grid-template-columns: 1fr;\n    }\n\n    .about {\n        grid-template-columns: 1fr;\n    }\n}\n<\/style>\n\n\n<div class=\"portfolio\">\n\n<div class=\"portfolio-container\">\n\n\n    <!-- HERO -->\n    <section class=\"hero\">\n\n        <div class=\"status\">\n            <span class=\"status-dot\"><\/span>\n            NOC \/ NETWORKING\n        <\/div>\n\n        <h1>\n            Building networks.<br>\n            <span>Solving problems.<\/span>\n        <\/h1>\n\n        <p>\n            I&#8217;m a Network Operations enthusiast focused on\n            networking, infrastructure, troubleshooting and\n            building reliable systems.\n        <\/p>\n\n        <div class=\"buttons\">\n\n            <a href=\"#projects\" class=\"btn btn-primary\">\n                View Projects\n            <\/a>\n\n            <a href=\"#about\" class=\"btn btn-secondary\">\n                About Me\n            <\/a>\n\n        <\/div>\n\n    <\/section>\n\n\n    <!-- SKILLS -->\n    <section class=\"section\">\n\n        <div class=\"section-title\">\n            <small>What I do<\/small>\n            <h2>Technical Skills<\/h2>\n        <\/div>\n\n\n        <div class=\"skills\">\n\n            <div class=\"skill\">\n                <div class=\"skill-icon\">\ud83c\udf10<\/div>\n\n                <h3>Networking<\/h3>\n\n                <p>\n                    Routing, switching, VLAN, VPN,\n                    OSPF, BGP and network troubleshooting.\n                <\/p>\n            <\/div>\n\n\n            <div class=\"skill\">\n                <div class=\"skill-icon\">\ud83d\udce1<\/div>\n\n                <h3>ISP \/ NOC<\/h3>\n\n                <p>\n                    Network monitoring, FTTH,\n                    OLT\/ONU, incident handling\n                    and customer connectivity.\n                <\/p>\n            <\/div>\n\n\n            <div class=\"skill\">\n                <div class=\"skill-icon\">\ud83d\udda5\ufe0f<\/div>\n\n                <h3>Infrastructure<\/h3>\n\n                <p>\n                    Linux server, virtualization,\n                    web server, security and\n                    infrastructure management.\n                <\/p>\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n    <!-- PROJECTS -->\n    <section class=\"section\" id=\"projects\">\n\n        <div class=\"section-title\">\n            <small>Selected work<\/small>\n            <h2>Projects<\/h2>\n        <\/div>\n\n\n        <div class=\"projects\">\n\n\n            <div class=\"project\">\n\n                <div class=\"project-label\">\n                    Infrastructure\n                <\/div>\n\n                <h3>Linux Web Infrastructure<\/h3>\n\n                <p>\n                    Building and managing Linux-based\n                    web infrastructure with Nginx,\n                    PHP, MariaDB and WordPress.\n                <\/p>\n\n                <div class=\"tags\">\n                    <span class=\"tag\">Linux<\/span>\n                    <span class=\"tag\">Nginx<\/span>\n                    <span class=\"tag\">MariaDB<\/span>\n                    <span class=\"tag\">WordPress<\/span>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"project\">\n\n                <div class=\"project-label\">\n                    Networking\n                <\/div>\n\n                <h3>ISP Network Operations<\/h3>\n\n                <p>\n                    Monitoring and troubleshooting\n                    customer connectivity, routing,\n                    FTTH and network infrastructure.\n                <\/p>\n\n                <div class=\"tags\">\n                    <span class=\"tag\">MikroTik<\/span>\n                    <span class=\"tag\">FTTH<\/span>\n                    <span class=\"tag\">OLT<\/span>\n                    <span class=\"tag\">Routing<\/span>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"project\">\n\n                <div class=\"project-label\">\n                    Security\n                <\/div>\n\n                <h3>Server Hardening<\/h3>\n\n                <p>\n                    Improving Linux server security\n                    through SSH hardening, firewall,\n                    Fail2Ban and backup strategies.\n                <\/p>\n\n                <div class=\"tags\">\n                    <span class=\"tag\">SSH<\/span>\n                    <span class=\"tag\">Firewall<\/span>\n                    <span class=\"tag\">Fail2Ban<\/span>\n                    <span class=\"tag\">Backup<\/span>\n                <\/div>\n\n            <\/div>\n\n\n            <div class=\"project\">\n\n                <div class=\"project-label\">\n                    Lab\n                <\/div>\n\n                <h3>Network Laboratory<\/h3>\n\n                <p>\n                    Testing routing, switching,\n                    VLAN, VPN and network designs\n                    using virtual and physical devices.\n                <\/p>\n\n                <div class=\"tags\">\n                    <span class=\"tag\">GNS3<\/span>\n                    <span class=\"tag\">MikroTik<\/span>\n                    <span class=\"tag\">Cisco<\/span>\n                    <span class=\"tag\">Virtualization<\/span>\n                <\/div>\n\n            <\/div>\n\n\n        <\/div>\n\n    <\/section>\n\n\n    <!-- ABOUT -->\n    <section class=\"section\" id=\"about\">\n\n        <div class=\"section-title\">\n            <small>About<\/small>\n            <h2>A little about me<\/h2>\n        <\/div>\n\n\n        <div class=\"about\">\n\n            <div class=\"about-box\">\n\n                <p>\n                    I&#8217;m interested in computer networking,\n                    ISP infrastructure and system administration.\n                    I enjoy troubleshooting problems, learning\n                    new technologies and understanding how\n                    systems work behind the scenes.\n                <\/p>\n\n            <\/div>\n\n\n            <div class=\"about-box\">\n\n                <p>\n                    Currently focused on developing deeper\n                    skills in routing, switching, network\n                    security, Linux infrastructure and\n                    enterprise networking.\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n    <\/section>\n\n\n    <!-- CONTACT -->\n    <section class=\"contact\">\n\n        <h2>Let&#8217;s connect.<\/h2>\n\n        <p>\n            Interested in networking, infrastructure\n            or technology? Feel free to reach out.\n        <\/p>\n\n        <a href=\"mailto:noc@homelabs\" class=\"btn btn-primary\">\n            Contact Me\n        <\/a>\n\n    <\/section>\n\n\n<\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>NOC \/ NETWORKING Building networks. Solving problems. I&#8217;m a Network Operations enthusiast focused on networking, infrastructure, troubleshooting and building reliable systems. View Projects About Me What I do Technical Skills \ud83c\udf10 Networking Routing, switching, VLAN, VPN, OSPF, BGP and network troubleshooting. \ud83d\udce1 ISP \/ NOC Network monitoring, FTTH, OLT\/ONU, incident handling and customer connectivity. \ud83d\udda5\ufe0f &#8230; <a title=\"\" class=\"read-more\" href=\"https:\/\/docu.xzry.biz.id\/?page_id=23\" aria-label=\"Read more about \">Read more<\/a><\/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-23","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=23"}],"version-history":[{"count":1,"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=\/wp\/v2\/pages\/23\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/docu.xzry.biz.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}