<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Senior IT Leader &amp; Full-Stack Developer with 20+ years across government and private sectors — national security systems, ISO 27001, AI integration, and enterprise platform delivery." />
  <meta name="keywords" content="senior IT director, system project manager, full-stack developer, ISO 27001, AI integration, enterprise systems, MACC, buditech, Putrajaya" />
  <meta name="author" content="buditech.dev" />
  <meta name="robots" content="index, follow" />

  <!-- Open Graph -->
  <meta property="og:title" content="Senior IT Leader &amp; Full-Stack Developer — buditech.dev" />
  <meta property="og:description" content="20+ years delivering mission-critical systems across government and private sectors. ISO 27001 · AI Integration · Enterprise Platform Development." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://buditech.dev" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Senior IT Leader &amp; Full-Stack Developer — buditech.dev" />
  <meta name="twitter:description" content="20+ years delivering mission-critical systems across government and private sectors." />

  <title>Senior IT Leader &amp; Full-Stack Developer — buditech.dev</title>

  <!-- Schema.org -->
  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "url": "https://buditech.dev",
    "email": "budihermawan@gmail.com",
    "jobTitle": "Senior Assistant Director | Senior Web Developer | System Project Manager",
    "description": "IT leader with 20+ years of experience across government and private sectors, specialising in national security systems, ISO 27001 compliance, enterprise platform development, and AI integration.",
    "address": { "@type": "PostalAddress", "addressLocality": "Putrajaya", "addressCountry": "MY" }
  }
  </script>
  

  <!-- Google Fonts: Inter · Space Grotesk · JetBrains Mono -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />

  <style>
    /* ─── RESET & BASE ─────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg-primary:   #050d1a;
      --bg-secondary: #0a1628;
      --bg-card:      #0d1e35;
      --bg-card-hover:#112240;
      --navy-mid:     #162944;
      --accent:       #1a6fff;
      --accent-light: #4d91ff;
      --accent-glow:  rgba(26, 111, 255, 0.25);
      --text-primary: #e8f0fe;
      --text-secondary:#8fafd4;
      --text-muted:   #4a6890;
      --border:       rgba(26, 111, 255, 0.15);
      --border-hover: rgba(26, 111, 255, 0.45);
      --gradient-hero: linear-gradient(135deg, #050d1a 0%, #0a1a40 50%, #050d1a 100%);
      --gradient-accent: linear-gradient(135deg, #1a6fff, #0050d0);
      --gradient-card: linear-gradient(145deg, #0d1e35, #0a1628);
      --font-sans:    'Inter', 'Segoe UI', system-ui, sans-serif;
      --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
      --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
      /* legacy aliases for backward compat */
      --font: var(--font-sans);
      --mono: var(--font-mono);
      --radius: 12px;
      --radius-lg: 20px;
      --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --shadow: 0 4px 24px rgba(0,0,0,0.4);
      --shadow-accent: 0 0 40px rgba(26, 111, 255, 0.2);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--font-sans);
      background: var(--bg-primary);
      color: var(--text-primary);
      line-height: 1.7;
      overflow-x: hidden;
    }

    ::selection { background: var(--accent-glow); color: var(--accent-light); }

    /* ─── SCROLLBAR ─────────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-primary); }
    ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }

    /* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
    h1, h2, h3, h4 {
      font-family: var(--font-display);
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
    h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
    h3 { font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
    p  { color: var(--text-secondary); }

    a { color: var(--accent-light); text-decoration: none; transition: color var(--transition); }
    a:hover { color: #fff; }

    .highlight { color: var(--accent-light); }
    .tag {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.72rem;
      font-weight: 600;
      font-family: var(--font-mono);
      background: rgba(26,111,255,0.12);
      color: var(--accent-light);
      border: 1px solid var(--border);
      letter-spacing: 0.04em;
    }

    /* ─── LAYOUT ─────────────────────────────────────────────────── */
    .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
    section { padding: 100px 0; position: relative; }

    /* ─── NOISE OVERLAY ──────────────────────────────────────────── */
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 0; opacity: 0.4;
    }

    /* ─── NAV ────────────────────────────────────────────────────── */
    #navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
      padding: 20px 0;
      transition: padding var(--transition);
    }
    #navbar.scrolled { padding: 10px 0; }

    /* Pill container — appears on scroll */
    .nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      max-width: 1180px; margin: 0 auto; padding: 0 28px;
      border-radius: 16px;
      transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    #navbar.scrolled .nav-inner {
      background: rgba(8, 16, 34, 0.88);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      box-shadow: 0 2px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
      border: 1px solid rgba(26, 111, 255, 0.12);
      padding: 10px 20px;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* Logo */
    .nav-logo {
      font-family: var(--font-display);
      font-size: 1.15rem; font-weight: 800;
      color: var(--text-primary);
      letter-spacing: -0.03em;
      display: flex; align-items: center; gap: 2px;
      transition: opacity var(--transition);
    }
    .nav-logo:hover { opacity: 0.85; color: var(--text-primary); }
    .nav-logo .dot { color: var(--accent-light); }
    .nav-logo-badge {
      font-family: var(--font-mono);
      font-size: 0.6rem; font-weight: 600;
      color: var(--accent-light);
      background: rgba(26,111,255,0.12);
      border: 1px solid rgba(26,111,255,0.25);
      padding: 2px 6px; border-radius: 4px;
      margin-left: 8px; letter-spacing: 0.08em;
      vertical-align: middle;
    }

    /* Desktop links */
    .nav-links {
      display: flex; align-items: center; gap: 4px; list-style: none;
    }
    .nav-links li a {
      font-family: var(--font-sans);
      color: var(--text-secondary);
      font-size: 0.88rem; font-weight: 500;
      padding: 7px 14px;
      border-radius: 8px;
      position: relative;
      transition: color var(--transition), background var(--transition);
      letter-spacing: 0.01em;
    }
    .nav-links li a:hover {
      color: var(--text-primary);
      background: rgba(255,255,255,0.05);
    }
    .nav-links li a.active {
      color: var(--accent-light);
      background: rgba(26,111,255,0.1);
    }

    /* CTA button */
    .nav-cta {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 20px !important;
      background: var(--gradient-accent) !important;
      color: #fff !important;
      border-radius: 10px !important;
      font-size: 0.85rem !important; font-weight: 600 !important;
      box-shadow: 0 4px 16px rgba(26,111,255,0.35);
      transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition) !important;
      margin-left: 8px;
      white-space: nowrap;
    }
    .nav-cta:hover {
      transform: translateY(-2px) !important;
      box-shadow: 0 8px 28px rgba(26,111,255,0.5) !important;
      opacity: 0.95;
      color: #fff !important;
    }
    .nav-cta::after { display: none !important; }
    .nav-cta-icon { font-size: 0.8rem; }

    /* ─── HAMBURGER ─────────────────────────────────────────────── */
    .hamburger {
      display: none;
      flex-direction: column; justify-content: center;
      gap: 5px; cursor: pointer;
      width: 40px; height: 40px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 8px;
      transition: background var(--transition), border-color var(--transition);
    }
    .hamburger:hover {
      background: rgba(26,111,255,0.1);
      border-color: var(--border-hover);
    }
    .hamburger span {
      display: block; width: 100%; height: 2px;
      background: var(--text-primary); border-radius: 2px;
      transform-origin: center;
      transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
                  opacity 0.25s ease,
                  width 0.25s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ─── MOBILE DRAWER ─────────────────────────────────────────── */
    .mobile-menu {
      display: none;
      position: fixed; inset: 0; top: 0;
      z-index: 998;
      flex-direction: column;
      /* Slide-in from right */
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
      opacity: 0;
    }
    @media (max-width: 768px) {
      .mobile-menu.open {
        display: flex;
        transform: translateX(0);
        opacity: 1;
      }
    }

    /* Backdrop blur panel */
    .mobile-menu-inner {
      position: absolute; top: 0; right: 0;
      width: min(320px, 88vw); height: 100%;
      background: rgba(5, 13, 26, 0.97);
      backdrop-filter: blur(32px);
      -webkit-backdrop-filter: blur(32px);
      border-left: 1px solid rgba(26,111,255,0.15);
      display: flex; flex-direction: column;
      padding: 0;
      box-shadow: -8px 0 60px rgba(0,0,0,0.6);
    }

    /* Drawer header */
    .mobile-menu-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid rgba(26,111,255,0.1);
    }
    .mobile-menu-logo {
      font-family: var(--font-display);
      font-size: 1.05rem; font-weight: 800;
      color: var(--text-primary); letter-spacing: -0.02em;
    }
    .mobile-menu-logo .dot { color: var(--accent-light); }
    .mobile-close {
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--text-secondary);
      font-size: 1rem;
      transition: all var(--transition);
    }
    .mobile-close:hover {
      background: rgba(255,255,255,0.1);
      color: var(--text-primary);
      border-color: var(--border-hover);
    }

    /* Drawer nav links */
    .mobile-nav-links {
      display: flex; flex-direction: column;
      padding: 24px 16px;
      gap: 4px;
      flex: 1;
    }
    .mobile-nav-links a {
      display: flex; align-items: center; gap: 14px;
      padding: 14px 16px;
      border-radius: 10px;
      color: var(--text-secondary);
      font-size: 1rem; font-weight: 500;
      text-decoration: none;
      transition: all var(--transition);
      border: 1px solid transparent;
      /* Stagger fade-in */
      opacity: 0; transform: translateX(20px);
      transition: color var(--transition), background var(--transition),
                  border-color var(--transition), opacity 0.3s ease, transform 0.3s ease;
    }
    .mobile-menu.open .mobile-nav-links a:nth-child(1) { opacity:1; transform:translateX(0); transition-delay:0.08s; }
    .mobile-menu.open .mobile-nav-links a:nth-child(2) { opacity:1; transform:translateX(0); transition-delay:0.13s; }
    .mobile-menu.open .mobile-nav-links a:nth-child(3) { opacity:1; transform:translateX(0); transition-delay:0.18s; }
    .mobile-menu.open .mobile-nav-links a:nth-child(4) { opacity:1; transform:translateX(0); transition-delay:0.23s; }
    .mobile-nav-links a:hover {
      color: var(--text-primary);
      background: rgba(255,255,255,0.04);
      border-color: var(--border);
    }
    .mobile-nav-links a .nav-num {
      font-family: var(--font-mono);
      font-size: 0.65rem; color: var(--text-muted);
      min-width: 22px;
    }

    /* Drawer CTA */
    .mobile-menu-footer {
      padding: 20px 16px 32px;
      border-top: 1px solid rgba(26,111,255,0.1);
    }
    .mobile-cta {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      width: 100%; padding: 14px;
      background: var(--gradient-accent);
      color: #fff; font-weight: 600; font-size: 0.95rem;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(26,111,255,0.35);
      text-decoration: none;
      transition: all var(--transition);
      opacity: 0; transform: translateY(10px);
    }
    .mobile-menu.open .mobile-cta {
      opacity: 1; transform: translateY(0);
      transition-delay: 0.28s;
    }
    .mobile-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(26,111,255,0.5);
      color: #fff;
    }

    /* Overlay backdrop (left side, dimmed) */
    .mobile-menu-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.5);
    }

    /* ─── HERO ───────────────────────────────────────────────────── */
    #hero {
      min-height: 100vh;
      display: flex; align-items: center;
      padding: 0;
      background: var(--gradient-hero);
      position: relative; overflow: hidden;
    }

    /* Animated grid background */
    #hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(26,111,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,111,255,0.05) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
    }

    /* Orbs */
    .orb {
      position: absolute; border-radius: 50%;
      filter: blur(80px); pointer-events: none; opacity: 0.25;
    }
    .orb-1 {
      width: 600px; height: 600px;
      background: radial-gradient(circle, #1a6fff 0%, transparent 70%);
      top: -200px; right: -100px;
      animation: orbFloat 8s ease-in-out infinite;
    }
    .orb-2 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, #0050d0 0%, transparent 70%);
      bottom: -100px; left: -100px;
      animation: orbFloat 10s ease-in-out infinite reverse;
    }

    @keyframes orbFloat {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33%       { transform: translate(20px, -30px) scale(1.05); }
      66%       { transform: translate(-15px, 20px) scale(0.95); }
    }

    .hero-content {
      position: relative; z-index: 1;
      padding: 120px 0 80px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: start;
    }
    .hero-left { display: flex; flex-direction: column; }

    /* ── Code block ─────────────────────────────────────────────── */
    .hero-code {
      position: relative;
      opacity: 0; animation: fadeUp 0.7s 0.9s forwards;
    }
    .hero-code-window {
      background: rgba(8, 16, 34, 0.85);
      border: 1px solid rgba(26, 111, 255, 0.2);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03), inset 0 1px 0 rgba(255,255,255,0.04);
      backdrop-filter: blur(12px);
    }
    .hero-code-titlebar {
      display: flex; align-items: center; gap: 8px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.03);
      border-bottom: 1px solid rgba(26,111,255,0.1);
    }
    .titlebar-dot {
      width: 12px; height: 12px; border-radius: 50%;
    }
    .titlebar-dot.red    { background: #ff5f57; }
    .titlebar-dot.yellow { background: #febc2e; }
    .titlebar-dot.green  { background: #28c840; }
    .titlebar-filename {
      font-family: var(--font-mono);
      font-size: 0.72rem; color: var(--text-muted);
      margin-left: 8px; letter-spacing: 0.04em;
    }
    .hero-code-body {
      padding: 24px 28px 28px;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      line-height: 1.9;
      white-space: pre;
    }
    /* Syntax colours */
    .c-comment  { color: #4a6890; font-style: italic; }
    .c-keyword  { color: #7eb6ff; }
    .c-const    { color: #c792ea; }
    .c-string   { color: #c3e88d; }
    .c-prop     { color: #8fafd4; }
    .c-bracket  { color: #ffd700; }
    .c-num      { color: #f78c6c; }
    .c-cursor {
      display: inline-block;
      width: 2px; height: 1em;
      background: var(--accent-light);
      vertical-align: text-bottom;
      margin-left: 1px;
      animation: blink 1.1s step-end infinite;
    }
    @keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:0; } }

    /* Glow ring around the code window */
    .hero-code::before {
      content: '';
      position: absolute; inset: -1px;
      border-radius: 17px;
      background: linear-gradient(135deg, rgba(26,111,255,0.3), transparent 60%);
      z-index: -1;
      filter: blur(16px);
      opacity: 0.6;
    }

    @media (max-width: 900px) {
      .hero-content { grid-template-columns: 1fr; gap: 48px; }
      .hero-code { order: -1; }
    }
    .hero-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.85rem; color: var(--accent-light);
      letter-spacing: 0.15em; text-transform: uppercase;
      margin-bottom: 20px;
      display: flex; align-items: center; gap: 12px;
      opacity: 0; animation: fadeUp 0.6s 0.2s forwards;
    }
    .hero-eyebrow::before {
      content: ''; display: block; width: 40px; height: 1px; background: var(--accent);
    }

    .hero-title {
      margin-bottom: 24px;
      opacity: 0; animation: fadeUp 0.6s 0.4s forwards;
    }
    .hero-title .line-2 { color: var(--text-secondary); }

    .hero-subtitle {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--text-secondary);
      max-width: 560px;
      margin-bottom: 44px;
      opacity: 0; animation: fadeUp 0.6s 0.6s forwards;
    }

    .hero-actions {
      display: flex; gap: 16px; flex-wrap: wrap;
      opacity: 0; animation: fadeUp 0.6s 0.8s forwards;
    }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 28px;
      border-radius: var(--radius);
      font-weight: 600; font-size: 0.95rem;
      cursor: pointer; border: none;
      transition: all var(--transition);
      text-decoration: none;
    }
    .btn-primary {
      background: var(--gradient-accent);
      color: #fff;
      box-shadow: 0 4px 20px rgba(26,111,255,0.35);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(26,111,255,0.5);
      color: #fff;
    }
    .btn-outline {
      background: transparent;
      color: var(--text-primary);
      border: 1px solid var(--border-hover);
    }
    .btn-outline:hover {
      background: rgba(26,111,255,0.08);
      border-color: var(--accent);
      color: var(--text-primary);
      transform: translateY(-2px);
    }

    .hero-stats {
      display: flex; gap: 48px; margin-top: 64px;
      opacity: 0; animation: fadeUp 0.6s 1s forwards;
    }
    .stat-item { }
    .stat-num {
      font-family: var(--font-display);
      font-size: 2rem; font-weight: 800;
      background: linear-gradient(135deg, var(--accent-light), #fff);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-label { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; letter-spacing: 0.06em; }

    /* ─── SECTION HEADERS ────────────────────────────────────────── */
    .section-header { text-align: center; margin-bottom: 64px; }
    .section-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.78rem; color: var(--accent-light);
      letter-spacing: 0.2em; text-transform: uppercase;
      margin-bottom: 12px;
    }
    .section-title { margin-bottom: 16px; }
    .section-desc { color: var(--text-secondary); max-width: 520px; margin: 0 auto; }
    .section-line {
      width: 48px; height: 3px;
      background: var(--gradient-accent);
      border-radius: 2px;
      margin: 20px auto 0;
    }

    /* ─── ABOUT ──────────────────────────────────────────────────── */
    #about { background: var(--bg-secondary); }
    .about-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center;
    }
    .about-avatar-wrap {
      position: relative;
      display: flex; justify-content: center;
    }
    .about-avatar-frame {
      width: 100%;
      max-width: 420px;
    }
    .about-avatar-frame img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: var(--radius-lg);
    }
    .about-text h2 { margin-bottom: 20px; }
    .about-text p { margin-bottom: 16px; }
    .about-skills {
      display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;
    }
    .skill-chip {
      padding: 6px 14px;
      background: rgba(26,111,255,0.08);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--accent-light);
      transition: all var(--transition);
    }
    .skill-chip:hover {
      background: rgba(26,111,255,0.18);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    /* ─── SKILLS TICKER ──────────────────────────────────────────── */
    #skills-bar {
      background: var(--bg-primary);
      padding: 24px 0;
      overflow: hidden;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .ticker-wrap { overflow: hidden; position: relative; }
    .ticker-wrap::before, .ticker-wrap::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2;
    }
    .ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--bg-primary), transparent); }
    .ticker-wrap::after  { right: 0; background: linear-gradient(to left, var(--bg-primary), transparent); }
    .ticker-track {
      display: flex; gap: 40px;
      animation: ticker 30s linear infinite;
      width: max-content;
    }
    .ticker-item {
      display: flex; align-items: center; gap: 10px;
      font-family: var(--font-mono); font-size: 0.85rem;
      color: var(--text-muted); white-space: nowrap;
    }
    .ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ─── PROJECTS ───────────────────────────────────────────────── */
    #projects { background: var(--bg-primary); }
    .filter-tabs {
      display: flex; gap: 8px; flex-wrap: wrap;
      justify-content: center; margin-bottom: 48px;
    }
    .filter-btn {
      padding: 8px 20px;
      border-radius: 8px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-secondary);
      font-size: 0.85rem; font-weight: 500;
      cursor: pointer;
      transition: all var(--transition);
    }
    .filter-btn:hover, .filter-btn.active {
      background: rgba(26,111,255,0.12);
      border-color: var(--accent);
      color: var(--accent-light);
    }

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .project-card {
      background: var(--gradient-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      cursor: pointer;
      transition: all var(--transition);
      position: relative;
    }
    .project-card:hover {
      transform: translateY(-6px);
      border-color: var(--border-hover);
      box-shadow: var(--shadow-accent);
    }
    .project-card.hidden { display: none; }

    .project-img {
      height: 200px; overflow: hidden; position: relative;
    }
    .project-img-bg {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 3.5rem;
      transition: transform var(--transition);
    }
    .project-card:hover .project-img-bg { transform: scale(1.08); }
    .project-card:hover .project-img img { transform: scale(1.05); }

    /* Color variants for project cards */
    .proj-c1 { background: linear-gradient(135deg, #0a1628 0%, #0d2244 100%); }
    .proj-c2 { background: linear-gradient(135deg, #0a1628 0%, #14203a 100%); }
    .proj-c3 { background: linear-gradient(135deg, #0a1628 0%, #0f2035 100%); }
    .proj-c4 { background: linear-gradient(135deg, #0a1628 0%, #0c1e38 100%); }
    .proj-c5 { background: linear-gradient(135deg, #0a1628 0%, #112040 100%); }
    .proj-c6 { background: linear-gradient(135deg, #0a1628 0%, #0e1f36 100%); }

    .project-body { padding: 22px; }
    .project-type { font-size: 0.7rem; font-family: var(--font-mono); color: var(--accent-light); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 8px; }
    .project-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
    .project-desc { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.6; }
    .project-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
    .project-footer {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }
    .project-links { display: flex; gap: 12px; }
    .project-link {
      color: var(--text-secondary);
      font-size: 0.8rem;
      display: flex; align-items: center; gap: 5px;
      transition: color var(--transition);
    }
    .project-link:hover { color: var(--accent-light); }
    .project-link svg { width: 14px; height: 14px; }

    .view-case-btn {
      font-size: 0.78rem; font-weight: 600;
      color: var(--accent-light);
      background: rgba(26,111,255,0.08);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 12px;
      cursor: pointer;
      transition: all var(--transition);
    }
    .view-case-btn:hover {
      background: rgba(26,111,255,0.18);
      border-color: var(--accent);
    }

    /* ─── CASE STUDY MODAL ───────────────────────────────────────── */
    .modal-overlay {
      position: fixed; inset: 0;
      background: rgba(5,13,26,0.92);
      backdrop-filter: blur(12px);
      z-index: 2000;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; pointer-events: none;
      transition: opacity var(--transition);
    }
    .modal-overlay.open { opacity: 1; pointer-events: all; }
    .modal {
      background: var(--bg-card);
      border: 1px solid var(--border-hover);
      border-radius: var(--radius-lg);
      max-width: 760px; width: 100%;
      max-height: 90vh; overflow-y: auto;
      transform: translateY(30px) scale(0.97);
      transition: transform var(--transition);
      box-shadow: 0 24px 80px rgba(0,0,0,0.6), var(--shadow-accent);
    }
    .modal-overlay.open .modal { transform: translateY(0) scale(1); }
    .modal-header {
      padding: 32px 32px 24px;
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    .modal-close {
      position: absolute; top: 24px; right: 24px;
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-secondary);
      font-size: 1.1rem;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: all var(--transition);
    }
    .modal-close:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }
    .modal-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent-light); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; }
    .modal-title { font-size: 1.8rem; margin-bottom: 12px; }
    .modal-subtitle { color: var(--text-secondary); }
    .modal-body { padding: 32px; }
    .modal-section { margin-bottom: 32px; }
    .modal-section h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-light); font-family: var(--font-mono); margin-bottom: 12px; }
    .modal-section p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.8; }
    .modal-metrics {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px;
    }
    .modal-metric {
      background: rgba(26,111,255,0.06);
      border: 1px solid var(--border);
      border-radius: 10px; padding: 16px; text-align: center;
    }
    .modal-metric .num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--accent-light); }
    .modal-metric .lbl { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.06em; }
    .modal-tags { display: flex; flex-wrap: wrap; gap: 8px; }

    /* ─── SERVICES SECTION ───────────────────────────────────────── */
    #services { background: var(--bg-primary); }
    .services-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    }
    .service-card {
      background: var(--gradient-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      transition: all var(--transition);
      position: relative; overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .service-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: var(--gradient-accent);
      transform: scaleX(0); transform-origin: left;
      transition: transform var(--transition);
    }
    .service-card:hover::before { transform: scaleX(1); }
    .service-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-hover);
      box-shadow: var(--shadow-accent);
    }
    .service-icon {
      width: 48px; height: 48px; border-radius: 12px;
      background: rgba(26,111,255,0.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem; color: var(--accent-light);
    }
    .service-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
    .service-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.75; }

    /* ─── CASE STUDIES SECTION ───────────────────────────────────── */
    #case-studies { background: var(--bg-secondary); }
    .cases-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
    }
    .case-card {
      background: var(--gradient-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
      transition: all var(--transition);
      position: relative; overflow: hidden;
    }
    .case-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: var(--gradient-accent);
      transform: scaleX(0); transform-origin: left;
      transition: transform var(--transition);
    }
    .case-card:hover::before { transform: scaleX(1); }
    .case-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-hover);
      box-shadow: var(--shadow-accent);
    }
    .case-num {
      font-family: var(--font-mono);
      font-size: 0.72rem; color: var(--text-muted);
      letter-spacing: 0.1em; margin-bottom: 16px;
    }
    .case-title { font-size: 1.25rem; margin-bottom: 12px; }
    .case-desc { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.75; margin-bottom: 24px; }
    .case-result {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(26,111,255,0.1);
      border: 1px solid var(--border);
      border-radius: 8px; padding: 10px 16px;
      font-size: 0.85rem; font-weight: 600;
      color: var(--accent-light);
    }
    .case-result .arrow { font-size: 1rem; }

    /* ─── TESTIMONIALS ───────────────────────────────────────────── */
    #testimonials { background: var(--bg-primary); }
    .testimonials-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    }
    .testimonial-card {
      background: var(--gradient-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 28px;
      transition: all var(--transition);
    }
    .testimonial-card:hover {
      transform: translateY(-4px);
      border-color: var(--border-hover);
    }
    .testimonial-quote {
      font-size: 2rem; color: var(--accent);
      font-family: Georgia, serif; line-height: 1; margin-bottom: 12px;
    }
    .testimonial-text {
      color: var(--text-secondary); font-size: 0.9rem; line-height: 1.75;
      margin-bottom: 20px;
    }
    .testimonial-author { display: flex; align-items: center; gap: 12px; }
    .author-avatar {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--gradient-accent);
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 0.85rem; color: #fff;
      flex-shrink: 0;
    }
    .author-name { font-weight: 600; font-size: 0.9rem; }
    .author-role { font-size: 0.78rem; color: var(--text-muted); }

    /* ─── CONTACT ────────────────────────────────────────────────── */
    #contact { background: var(--bg-secondary); }
    .contact-wrap {
      display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start;
    }
    .contact-info h2 { margin-bottom: 16px; }
    .contact-info p { margin-bottom: 32px; }
    .contact-channels { display: flex; flex-direction: column; gap: 16px; }
    .channel {
      display: flex; align-items: center; gap: 14px;
      padding: 16px;
      background: var(--gradient-card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      transition: all var(--transition);
      text-decoration: none;
    }
    .channel:hover {
      border-color: var(--border-hover);
      transform: translateX(4px);
      background: var(--bg-card-hover);
    }
    .channel-icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(26,111,255,0.12);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 1.1rem;
    }
    .channel-label { font-size: 0.72rem; color: var(--text-muted); }
    .channel-value { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }

    /* Form */
    .contact-form {
      background: var(--gradient-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      padding: 36px;
    }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { margin-bottom: 20px; }
    .form-group label {
      display: block;
      font-family: var(--font-mono);
      font-size: 0.78rem; font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 8px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      background: rgba(10,22,40,0.8);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 16px;
      color: var(--text-primary);
      font-family: var(--font-sans);
      font-size: 0.9rem;
      transition: border-color var(--transition), box-shadow var(--transition);
      outline: none;
      appearance: none;
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder { color: var(--text-muted); }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-group select option { background: var(--bg-card); }

    .form-submit {
      width: 100%;
      padding: 14px;
      background: var(--gradient-accent);
      color: #fff;
      border: none; border-radius: var(--radius);
      font-size: 0.95rem; font-weight: 600;
      cursor: pointer;
      transition: all var(--transition);
      box-shadow: 0 4px 20px rgba(26,111,255,0.3);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .form-submit:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(26,111,255,0.45);
    }
    .form-submit:active { transform: translateY(0); }

    .form-success {
      display: none; text-align: center; padding: 20px;
      color: #4ade80; font-weight: 600;
    }
    .form-success.visible { display: block; }

    .field-error {
      font-size: 0.75rem; color: #f87171;
      margin-top: 4px; display: none;
    }
    .field-error.visible { display: block; }
    .form-group input.invalid,
    .form-group textarea.invalid { border-color: #f87171; }

    /* ─── FOOTER ─────────────────────────────────────────────────── */
    footer {
      background: var(--bg-primary);
      border-top: 1px solid var(--border);
      padding: 48px 0 32px;
    }
    .footer-inner {
      display: flex; flex-direction: column; align-items: center; gap: 24px;
    }
    .footer-logo {
      font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
      letter-spacing: -0.02em;
    }
    .footer-logo span { color: var(--accent-light); }
    .footer-links { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }
    .footer-links a { color: var(--text-muted); font-size: 0.85rem; }
    .footer-links a:hover { color: var(--accent-light); }
    .footer-social { display: flex; gap: 16px; }
    .social-btn {
      width: 40px; height: 40px; border-radius: 10px;
      background: rgba(26,111,255,0.08);
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      color: var(--text-secondary);
      font-size: 1rem;
      transition: all var(--transition);
    }
    .social-btn:hover {
      background: rgba(26,111,255,0.18);
      border-color: var(--accent);
      color: var(--accent-light);
      transform: translateY(-3px);
    }
    .footer-copy { font-size: 0.78rem; color: var(--text-muted); }

    /* ─── BACK TO TOP ────────────────────────────────────────────── */
    #back-top {
      position: fixed; bottom: 28px; right: 28px; z-index: 900;
      width: 44px; height: 44px; border-radius: 10px;
      background: var(--gradient-accent);
      border: none; color: #fff; font-size: 1.1rem;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(26,111,255,0.4);
      opacity: 0; transform: translateY(20px);
      transition: all var(--transition);
      display: flex; align-items: center; justify-content: center;
    }
    #back-top.visible { opacity: 1; transform: translateY(0); }
    #back-top:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(26,111,255,0.5); }

    /* ─── ANIMATIONS ─────────────────────────────────────────────── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity: 1; transform: translateY(0); }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ─── RESPONSIVE ─────────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .projects-grid { grid-template-columns: repeat(2, 1fr); }
      .testimonials-grid { grid-template-columns: 1fr 1fr; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (min-width: 769px) {
      .nav-links { display: flex !important; }
      .hamburger { display: none !important; }
      .mobile-menu { display: none !important; }
    }
    @media (max-width: 768px) {
      section { padding: 70px 0; }
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .about-grid { grid-template-columns: 1fr; gap: 40px; }
      .about-avatar-wrap { order: -1; }
      .about-avatar-frame { max-width: 300px; }
      .projects-grid { grid-template-columns: 1fr; }
      .services-grid { grid-template-columns: 1fr; }
      .cases-grid { grid-template-columns: 1fr; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .contact-wrap { grid-template-columns: 1fr; gap: 40px; }
      .form-row { grid-template-columns: 1fr; }
      .hero-stats { gap: 28px; flex-wrap: wrap; }
      .modal-metrics { grid-template-columns: 1fr 1fr; }
      .modal-body { padding: 20px; }
      .modal-header { padding: 24px 20px; }
    }
    @media (max-width: 480px) {
      .hero-actions { flex-direction: column; }
      .btn { justify-content: center; }
      .modal-metrics { grid-template-columns: 1fr; }
    }
  </style>
</head>
<body>

<!-- ─── NAV ────────────────────────────────────────────────────── -->
<nav id="navbar">
  <div class="nav-inner">
    <a href="#hero" class="nav-logo">
      buditech.<span class="dot">dev</span>
      <span class="nav-logo-badge">MY</span>
    </a>
    <ul class="nav-links">
      <li><a href="#about">Tentang</a></li>
      <li><a href="#services">Servis</a></li>
      <li><a href="#projects">Projek</a></li>
      <li><a href="#case-studies">Kajian Kes</a></li>
      <li><a href="#testimonials">Ulasan</a></li>
      <li><a href="#contact" class="nav-cta">
        <span class="nav-cta-icon">✦</span> Hubungi Saya
      </a></li>
    </ul>
    <button class="hamburger" id="hamburger" aria-label="Toggle menu">
      <span></span><span></span><span></span>
    </button>
  </div>
</nav>

<!-- ─── MOBILE DRAWER ─────────────────────────────────────────── -->
<div class="mobile-menu" id="mobileMenu" role="dialog" aria-modal="true" aria-label="Navigation menu">
  <div class="mobile-menu-backdrop" id="mobileBackdrop"></div>
  <div class="mobile-menu-inner">
    <div class="mobile-menu-header">
      <span class="mobile-menu-logo">budi<span class="dot">tech</span>.dev</span>
      <button class="mobile-close" id="mobileClose" aria-label="Close menu">✕</button>
    </div>
    <nav class="mobile-nav-links">
      <a href="#about" class="mobile-link">
        <span class="nav-num">01</span> Tentang
      </a>
      <a href="#services" class="mobile-link">
        <span class="nav-num">02</span> Servis
      </a>
      <a href="#projects" class="mobile-link">
        <span class="nav-num">03</span> Projek
      </a>
      <a href="#case-studies" class="mobile-link">
        <span class="nav-num">04</span> Kajian Kes
      </a>
      <a href="#testimonials" class="mobile-link">
        <span class="nav-num">05</span> Ulasan
      </a>
    </nav>
    <div class="mobile-menu-footer">
      <a href="#contact" class="mobile-cta mobile-link">
        ✦ &nbsp;Hubungi Saya
      </a>
    </div>
  </div>
</div>


<!-- ─── HERO ────────────────────────────────────────────────────── -->
<section id="hero">
  <div class="orb orb-1"></div>
  <div class="orb orb-2"></div>
  <div class="container">
    <div class="hero-content">

      <!-- LEFT: text -->
      <div class="hero-left">
        <h1 class="hero-title" style="opacity:0;animation:fadeUp 0.6s 0.2s forwards;">
          Pembangunan<br>Full-Stack<br><span class="highlight">Selamat, Mampan &amp; Berprestasi.</span>
        </h1>
        <p class="hero-subtitle" style="opacity:0;animation:fadeUp 0.6s 0.4s forwards;">
          Menyediakan perkhidmatan pembangunan sistem full-stack yang direka khas (tailor-made) mengikut keperluan unik organisasi, menggunakan seni bina framework MVC terkini yang tangkas dan selamat.
        </p>
        <div class="hero-actions" style="opacity:0;animation:fadeUp 0.6s 0.6s forwards;">
          <a href="#projects" class="btn btn-primary">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 12l10-10 10 10M5 9v11h14V9"/></svg>
            Lihat Karya Saya
          </a>
          <a href="#contact" class="btn btn-outline">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>
            Mari Berbincang
          </a>
        </div>
        <div class="hero-stats" style="opacity:0;animation:fadeUp 0.6s 0.8s forwards;">
          <div class="stat-item">
            <div class="stat-num">20+</div>
            <div class="stat-label">Tahun Pengalaman</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">10+</div>
            <div class="stat-label">Tahun di Sektor Awam</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">3</div>
            <div class="stat-label">Anugerah &amp; Pengiktirafan</div>
          </div>
          <div class="stat-item">
            <div class="stat-num">ISO</div>
            <div class="stat-label">27001 Bertauliah</div>
          </div>
        </div>
      </div>

      <!-- RIGHT: code block -->
      <div class="hero-code">
        <div class="hero-code-window">
          <div class="hero-code-titlebar">
            <span class="titlebar-dot red"></span>
            <span class="titlebar-dot yellow"></span>
            <span class="titlebar-dot green"></span>
            <span class="titlebar-filename">identity.js</span>
          </div>
          <div class="hero-code-body"><span class="c-comment">// Core developer identity block</span>
<span class="c-keyword">const</span> <span class="c-const">engineer</span> <span class="c-bracket">=</span> <span class="c-bracket">{</span>
  <span class="c-prop">role</span><span class="c-bracket">:</span> <span class="c-string">"Systems &amp; Security Architect"</span><span class="c-bracket">,</span>
  <span class="c-prop">domain</span><span class="c-bracket">:</span> <span class="c-string">"buditech.dev"</span><span class="c-bracket">,</span>
  <span class="c-prop">focus</span><span class="c-bracket">:</span> <span class="c-bracket">[</span>
    <span class="c-string">"Interactive Web Portals"</span><span class="c-bracket">,</span>
    <span class="c-string">"Local AI Solutions"</span>
  <span class="c-bracket">],</span>
  <span class="c-prop">experience</span><span class="c-bracket">:</span> <span class="c-num">20</span><span class="c-bracket">,</span> <span class="c-comment">// years</span>
  <span class="c-prop">clearance</span><span class="c-bracket">:</span> <span class="c-string">"ISO 27001 · ISMS"</span><span class="c-bracket">,</span>
  <span class="c-prop">stack</span><span class="c-bracket">:</span> <span class="c-bracket">[</span><span class="c-string">"PHP"</span><span class="c-bracket">,</span> <span class="c-string">"MySQL"</span><span class="c-bracket">,</span> <span class="c-string">"JS"</span><span class="c-bracket">],</span>
  <span class="c-prop">status</span><span class="c-bracket">:</span> <span class="c-string">"available"</span> <span class="c-comment">// ✦ open to work</span>
<span class="c-bracket">};</span>

<span class="c-keyword">export default</span> <span class="c-const">engineer</span><span class="c-bracket">;</span><span class="c-cursor"></span></div>
        </div>
      </div>

    </div>
  </div>
</section>

<!-- ─── SKILLS TICKER ─────────────────────────────────────────── -->
<div id="skills-bar">
  <div class="ticker-wrap">
    <div class="ticker-track" id="tickerTrack">
      <span class="ticker-item"><span class="dot"></span>PHP</span>
      <span class="ticker-item"><span class="dot"></span>MySQL / MariaDB</span>
      <span class="ticker-item"><span class="dot"></span>Bootstrap</span>
      <span class="ticker-item"><span class="dot"></span>JavaScript</span>
      <span class="ticker-item"><span class="dot"></span>Livewire</span>
      <span class="ticker-item"><span class="dot"></span>Chart.js</span>
      <span class="ticker-item"><span class="dot"></span>HTML5 · CSS3</span>
      <span class="ticker-item"><span class="dot"></span>AI Text Analysis</span>
      <span class="ticker-item"><span class="dot"></span>Full-Text Search</span>
      <span class="ticker-item"><span class="dot"></span>ISO 27001 / ISMS</span>
      <span class="ticker-item"><span class="dot"></span>Enterprise Virtualisation</span>
      <span class="ticker-item"><span class="dot"></span>VAPT</span>
      <span class="ticker-item"><span class="dot"></span>Digital Forensics</span>
      <span class="ticker-item"><span class="dot"></span>Linux Server Hardening</span>
      <span class="ticker-item"><span class="dot"></span>SDLC</span>
      <span class="ticker-item"><span class="dot"></span>Git</span>
      <!-- Duplicate for seamless loop -->
      <span class="ticker-item"><span class="dot"></span>PHP</span>
      <span class="ticker-item"><span class="dot"></span>MySQL / MariaDB</span>
      <span class="ticker-item"><span class="dot"></span>Bootstrap</span>
      <span class="ticker-item"><span class="dot"></span>JavaScript</span>
      <span class="ticker-item"><span class="dot"></span>Livewire</span>
      <span class="ticker-item"><span class="dot"></span>Chart.js</span>
      <span class="ticker-item"><span class="dot"></span>HTML5 · CSS3</span>
      <span class="ticker-item"><span class="dot"></span>AI Text Analysis</span>
      <span class="ticker-item"><span class="dot"></span>Full-Text Search</span>
      <span class="ticker-item"><span class="dot"></span>ISO 27001 / ISMS</span>
      <span class="ticker-item"><span class="dot"></span>Enterprise Virtualisation</span>
      <span class="ticker-item"><span class="dot"></span>VAPT</span>
      <span class="ticker-item"><span class="dot"></span>Digital Forensics</span>
      <span class="ticker-item"><span class="dot"></span>Linux Server Hardening</span>
      <span class="ticker-item"><span class="dot"></span>SDLC</span>
      <span class="ticker-item"><span class="dot"></span>Git</span>
    </div>
  </div>
</div>

<!-- ─── ABOUT ───────────────────────────────────────────────────── -->
<section id="about">
  <div class="container">
    <div class="about-grid">
      <div class="about-avatar-wrap reveal">
        <div class="about-avatar-frame">
          <img src="http://www.budihermawan.com/coding.png" alt="Developer at work" />
        </div>
      </div>
      <div class="about-text reveal reveal-delay-2">
        <div class="section-eyebrow">Tentang Saya</div>
        <h2>Di mana kepimpinan IT bertemu kedalaman teknikal</h2>
        <p>Pemimpin IT dengan pengalaman lebih 20 tahun merentas sektor kerajaan dan swasta — dekad terakhir dihabiskan mengurus sistem keselamatan negara yang kritikal di Suruhanjaya Pencegahan Rasuah Malaysia (SPRM).</p>
        <p>Saya beroperasi dengan selesa di peringkat teknikal dan eksekutif: menyumbang kepada Jawatankuasa Pemandu ICT, membentangkan penyelesaian kepada kepimpinan kanan, dan secara peribadi mereka bentuk sistem yang menjalankannya. Daripada virtualisasi perusahaan dan pematuhan ISO 27001 hingga membina platform bersepadu AI dari awal, saya menyampaikan penyelesaian hujung-ke-hujung.</p>
        <p>Di luar tugas harian, saya berkhidmat sebagai Penasihat Industri untuk Program Ijazah Sarjana Muda Keselamatan Siber di Universiti Malaysia Sabah (UMS) dan kerap berucap tentang keselamatan siber dan transformasi digital di universiti dan sekolah.</p>
        <div class="about-skills">
          <span class="skill-chip">PHP</span>
          <span class="skill-chip">MySQL / MariaDB</span>
          <span class="skill-chip">Bootstrap</span>
          <span class="skill-chip">JavaScript</span>
          <span class="skill-chip">Livewire</span>
          <span class="skill-chip">Chart.js</span>
          <span class="skill-chip">AI Text Analysis</span>
          <span class="skill-chip">Full-Text Search</span>
          <span class="skill-chip">ISO 27001 / ISMS</span>
          <span class="skill-chip">VAPT &amp; Digital Forensics</span>
          <span class="skill-chip">Enterprise Virtualisation</span>
          <span class="skill-chip">Linux Server Hardening</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ─── SERVICES ─────────────────────────────────────────────────── -->
<section id="services">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-eyebrow">Kepakaran & Perkhidmatan</div>
      <h2 class="section-title">Servis <span class="highlight">Kami</span></h2>
      <p class="section-desc">Penyelesaian teknologi berkualiti tinggi yang direka khas untuk keperluan perniagaan dan organisasi anda. Saya menyediakan pembangunan web dan perisian secara menyeluruh (hujung-ke-hujung) — bermula dari konsep, reka bentuk, pengekodan, dan pengujian sehinggalah pengehosan serta sokongan selepas pelancaran.</p>
      <div class="section-line"></div>
    </div>

    <div class="services-grid">
      <!-- Service 1 -->
      <div class="service-card reveal">
        <div class="service-icon">💻</div>
        <h3 class="service-title">Pembangunan Sistem Full-Stack</h3>
        <p class="service-desc">Pembangunan sistem secara full stack menggunakan Framework MVC yang terkini (seperti Laravel, Livewire, dan Tailwind) untuk prestasi optimum, sekuriti tinggi, dan mesra pengguna.</p>
      </div>

      <!-- Service 2 -->
      <div class="service-card reveal reveal-delay-1">
        <div class="service-icon">🤝</div>
        <h3 class="service-title">Khidmat Nasihat Pembangunan Sistem</h3>
        <p class="service-desc">Khidmat nasihat profesional dan perundingan seni bina sistem (system architecture) untuk memastikan projek IT anda dibina dengan standard kualiti tertinggi serta struktur data yang betul.</p>
      </div>

      <!-- Service 3 -->
      <div class="service-card reveal reveal-delay-2">
        <div class="service-icon">🛡️</div>
        <h3 class="service-title">Taklimat Keselamatan Siber</h3>
        <p class="service-desc">Taklimat, ceramah, dan latihan kesedaran keselamatan siber berasaskan standard industri (ISO 27001) untuk kakitangan awam, swasta, serta institusi pendidikan.</p>
      </div>

      <!-- Service 4 -->
      <div class="service-card reveal">
        <div class="service-icon">⚡</div>
        <h3 class="service-title">Pengerasan & Pengoptimuman Server</h3>
        <p class="service-desc">Mengoptimumkan prestasi server serta mempertingkatkan keselamatan infrastruktur (server hardening) bagi menangkis ancaman keselamatan siber dan meminimumkan gangguan sistem.</p>
      </div>

      <!-- Service 5 -->
      <div class="service-card reveal reveal-delay-1">
        <div class="service-icon">☁️</div>
        <h3 class="service-title">Pengehosan & Konfigurasi Awan</h3>
        <p class="service-desc">Penyediaan perkhidmatan pengehosan awan (cloud hosting) yang stabil, persediaan dan konfigurasi pelayan (AWS, GCP, DigitalOcean), serta migrasi data dan sistem dengan selamat.</p>
      </div>

      <!-- Service 6 -->
      <div class="service-card reveal reveal-delay-2">
        <div class="service-icon">📊</div>
        <h3 class="service-title">Papan Pemuka &amp; Pengurusan Pangkalan Data</h3>
        <p class="service-desc">Pembangunan papan pemuka (dashboard) interaktif untuk visualisasi data masa nyata, serta reka bentuk, pengoptimuman, dan pengurusan pangkalan data berskala besar.</p>
      </div>
    </div>
  </div>
</section>

<!-- ─── PROJECTS ─────────────────────────────────────────────────── -->
<section id="projects">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-eyebrow">Portfolio</div>
      <h2 class="section-title">Projek <span class="highlight">Pilihan</span></h2>
      <p class="section-desc">Koleksi terpilih karya merangkuni platform SaaS, portal web, dan pembangunan sistem perusahaan.</p>
      <div class="section-line"></div>
    </div>

    <div class="filter-tabs reveal reveal-delay-1">
      <button class="filter-btn active" data-filter="all">Semua Projek</button>
      <button class="filter-btn" data-filter="saas">Platform &amp; Portal</button>
      <button class="filter-btn" data-filter="fullstack">Full-Stack</button>
      <button class="filter-btn" data-filter="frontend">Papan Pemuka</button>
      <button class="filter-btn" data-filter="backend">Infrastruktur</button>
    </div>

    <div class="projects-grid" id="projectsGrid">
                  <div class="project-card reveal " data-category="fullstack saas" data-case="0">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/bcp-dashboard.png" alt="Sistem Pengurusan Aduan BCP"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Pilihan · Integrasi AI · MACC (SPRM)</div>
          <h3 class="project-title">Sistem Pengurusan Aduan BCP</h3>
          <p class="project-desc">Platform pengurusan aduan sehenti untuk Bahagian Cemerlang &amp; Profesionalisme MACC. Mengendalikan keseluruhan kitaran hayat aduan dengan enjin AI yang menganalisis setiap kes menggunakan rangka kerja 5W1H dan mencadangkan undang-undang yang berkenaan.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">MySQL</span>
                              <span class="tag">AI Analysis</span>
                              <span class="tag">5W1H</span>
                              <span class="tag">Bootstrap</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--text-muted);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                Sistem Dalaman
              </span>
            </div>
                          <button class="view-case-btn" onclick="openModal(0)">Kajian Kes →</button>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal reveal-delay-1" data-category="fullstack backend" data-case="1">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/imacs.png" alt="IMaCS — Sistem Aduan Integriti &amp; Salah Laku"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Full-Stack · Platform Selamat · MACC (SPRM)</div>
          <h3 class="project-title">IMaCS — Sistem Aduan Integriti &amp; Salah Laku</h3>
          <p class="project-desc">Platform khusus yang selamat untuk kakitangan SPRM melaporkan salah laku dan pelanggaran integriti secara tanpa nama. Dibina dengan teknologi keselamatan moden yang memastikan kerahsiaan, rekod anti-usik, dan kesediaan audit. Memenangi Anugerah Khas Ketua Pesuruhjaya 2026.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">MySQL</span>
                              <span class="tag">Secure Platform</span>
                              <span class="tag">Bootstrap</span>
                              <span class="tag">JavaScript</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--accent-light);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg>
                                🏆 Award 2026
              </span>
            </div>
                          <button class="view-case-btn" onclick="openModal(1)">Kajian Kes →</button>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal reveal-delay-2" data-category="fullstack saas" data-case="2">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/yps.png" alt="Portal Yayasan Prihatin SPRM"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Full-Stack · Portal Ahli · Yayasan Prihatin SPRM</div>
          <h3 class="project-title">Portal Yayasan Prihatin SPRM</h3>
          <p class="project-desc">Portal pengurusan ahli dan platform perkhidmatan dalam talian untuk yayasan kebajikan SPRM yang melayani 2,000+ ahli. Mendigitalkan pentadbiran keahlian, kutipan yuran, permohonan bantuan kebajikan, dan meja bantuan dalam talian — menggantikan sepenuhnya proses manual berasaskan kertas.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">MySQL</span>
                              <span class="tag">2,000+ Members</span>
                              <span class="tag">Bootstrap</span>
                              <span class="tag">JavaScript</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--text-muted);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                Sistem Dalaman
              </span>
            </div>
                          <button class="view-case-btn" onclick="openModal(2)">Kajian Kes →</button>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal " data-category="fullstack frontend" data-case="3">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/espj.png" alt="eSPJ — Sistem Pelaporan Tadbir Urus Nasional"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Full-Stack · Papan Pemuka Nasional · MACC (SPRM)</div>
          <h3 class="project-title">eSPJ — Sistem Pelaporan Tadbir Urus Nasional</h3>
          <p class="project-desc">Platform pelaporan dan pemantauan peringkat nasional untuk mesyuarat jawatankuasa tadbir urus (JTK) merentas semua kementerian dan kerajaan negeri. Menampilkan papan pemuka pematuhan masa nyata, carta kedudukan kementerian, penjejakan KPB, dan perpustakaan rujukan digital e-Buku.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">MySQL</span>
                              <span class="tag">Chart.js</span>
                              <span class="tag">JTK / KPB</span>
                              <span class="tag">Bootstrap</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--text-muted);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                Kerajaan Dalaman
              </span>
            </div>
                          <button class="view-case-btn" onclick="openModal(3)">Kajian Kes →</button>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal reveal-delay-1" data-category="fullstack backend" data-case="4">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/uploads/1780016612_Screenshot 2026-05-29 090232.png" alt="JARIS — Sistem Jawatankuasa Anti-Rasuah"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Full-Stack · Anti-Rasuah · MACC (SPRM)</div>
          <h3 class="project-title">JARIS — Sistem Jawatankuasa Anti-Rasuah</h3>
          <p class="project-desc">Sistem komprehensif mengurus mesyuarat Jawatankuasa Anti-Rasuah merentas semua kementerian dan kerajaan negeri. Merangkumi pengurusan dokumen hujung-ke-hujung, pemantauan respons minit, repositori OACP, dan penyimpanan dokumen ABMS — semuanya dalam satu platform berpusat.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">MySQL</span>
                              <span class="tag">OACP / ABMS</span>
                              <span class="tag">Bootstrap</span>
                              <span class="tag">JavaScript</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--text-muted);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                Kerajaan Dalaman
              </span>
            </div>
                          <button class="view-case-btn" onclick="openModal(4)">Kajian Kes →</button>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal reveal-delay-2" data-category="backend" data-case="5">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/careinfra.png" alt="CARE-INFRA — Pengurusan Infrastruktur ICT"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Full-Stack · Pengurusan Infrastruktur · MACC (SPRM)</div>
          <h3 class="project-title">CARE-INFRA — Pengurusan Infrastruktur ICT</h3>
          <p class="project-desc">Sistem pengurusan infrastruktur berpusat untuk Cawangan Aplikasi Rekod SPRM. Merangkumi pengurusan alamat IP, daftar aset ICT, penjadualan sandaran, penjejakan pematuhan lesen, dan portal perkongsian ilmu dalaman — menghapuskan pentadbiran berasaskan hamparan.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">MySQL</span>
                              <span class="tag">Infrastructure</span>
                              <span class="tag">Bootstrap</span>
                              <span class="tag">JavaScript</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--text-muted);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                Sistem Dalaman
              </span>
            </div>
                          <button class="view-case-btn" onclick="openModal(5)">Kajian Kes →</button>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal " data-category="fullstack" data-case="">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/uploads/1780019517_Screenshot 2026-05-29 094124.png" alt="Sistem Tempahan Bilik Mesyuarat (BookMe)"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Sistem Tempahan</div>
          <h3 class="project-title">Sistem Tempahan Bilik Mesyuarat (BookMe)</h3>
          <p class="project-desc">Sebuah sistem pengurusan bilik mesyuarat yang komprehensif merangkumi tempahan bilik, pengurusan mesyuarat (pemantauan kehadiran, dokumentasi minit, dan gambar mesyuarat), serta paparan jadual mesyuarat masa nyata untuk skrin di luar bilik mesyuarat — telah memenangi Anugerah Khas di Hari Inovasi SPRM 2025.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">Livewire</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--accent-light);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></svg>
                                Anugerah Khas di Hari Inovasi SPRM 2025
              </span>
            </div>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal reveal-delay-1" data-category="fullstack" data-case="">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/uploads/1780060344_Screenshot 2026-05-29 211010.png" alt="Global Integrated Anti-Corruption Consultancy"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">GIACC</div>
          <h3 class="project-title">Global Integrated Anti-Corruption Consultancy</h3>
          <p class="project-desc">GIACC is a consultancy dedicated to empowering organizations to sustain ethical performance and uphold public trust. We specialize in systematic identification of gaps to strengthen governance, embed compliance, and reinforce institutional integrity.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                              <span class="tag">Bootstrap</span>
                              <span class="tag">MariaDB</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--text-muted);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                Portal GIACC
              </span>
            </div>
                      </div>
        </div>
      </div>
                  <div class="project-card reveal reveal-delay-2" data-category="fullstack" data-case="">
        <div class="project-img">
                                    <img src="http://www.budihermawan.com/uploads/1780060595_Screenshot 2026-05-29 211522.png" alt="Portal Koperasi Kakitangan SPRM"
                   style="width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);" />
                              </div>
        <div class="project-body">
          <div class="project-type">Kospera</div>
          <h3 class="project-title">Portal Koperasi Kakitangan SPRM</h3>
          <p class="project-desc">Koperasi Suruhanjaya Pencegahan Rasuah Malaysia Berhad (KOSPERA) merupakan koperasi kakitangan yang ditubuhkan bagi memberi manfaat kewangan kepada wargakerja SPRM. Koperasi ini telah berdaftar dengan Suruhanjaya Koperasi Malaysia (SKM) dan beroperasi secara penuh mengikut Akta Koperasi 1993.</p>
          <div class="project-tags">
                                          <span class="tag">PHP</span>
                                    </div>
          <div class="project-footer">
            <div class="project-links">
              <span class="project-link" style="color:var(--text-muted);cursor:default;">
                                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                                
              </span>
            </div>
                      </div>
        </div>
      </div>
          </div><!-- /projects-grid -->
  </div>
</section>

<!-- ─── CASE STUDIES ──────────────────────────────────────────────── -->
<section id="case-studies">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-eyebrow">Penerokaan Mendalam</div>
      <h2 class="section-title">Kajian <span class="highlight">Kes</span></h2>
      <p class="section-desc">Di sebalik tabir projek-projek paling berimpak — masalah, keputusan, dan hasilnya.</p>
      <div class="section-line"></div>
    </div>

    <div class="cases-grid">
            <div class="case-card reveal ">
        <div class="case-num">KES / 01</div>
        <h3 class="case-title">Membina AI ke dalam Sistem Aduan Kerajaan</h3>
        <p class="case-desc">Sistem Pengurusan Aduan BCP menggantikan proses aduan manual yang berpecah-belah dengan platform bersatu yang menyematkan enjin AI yang menilai setiap aduan berdasarkan rangka kerja 5W1H dan secara automatik mencadangkan undang-undang yang berkenaan — yang pertama seumpamanya dalam SPRM.</p>
        <div class="case-result">
                      <span class="arrow">→</span>
                    Automasi kitaran hayat hujung-ke-hujung · Cadangan perundangan AI · Jejak audit di setiap peringkat
        </div>
      </div>
            <div class="case-card reveal reveal-delay-1">
        <div class="case-num">KES / 02</div>
        <h3 class="case-title">Platform Pemberi Maklumat Pemenang Anugerah — IMaCS</h3>
        <p class="case-desc">Mereka bentuk dan membina sistem pelaporan salah laku dalaman SPRM yang selamat dengan penyerahan tanpa nama, rekod anti-usik, dan aliran kerja kes berstruktur — mengukuhkan dasar sifar toleransi SPRM terhadap salah laku. Memenangi Anugerah Khas Ketua Pesuruhjaya 2026.</p>
        <div class="case-result">
                      <span class="arrow">🏆</span>
                    🏆 Anugerah Khas Ketua Pesuruhjaya 2026 · Pelaporan tanpa nama yang selamat
        </div>
      </div>
            <div class="case-card reveal ">
        <div class="case-num">KES / 03</div>
        <h3 class="case-title">Mendigitalkan Perkhidmatan Kebajikan 2,000+ Ahli</h3>
        <p class="case-desc">Portal Yayasan Prihatin SPRM menggantikan pentadbiran keahlian berasaskan kertas sepenuhnya dengan sistem web yang sepenuhnya bersepadu — kutipan yuran dalam talian, permohonan bantuan kebajikan, profil ahli layan diri, dan meja bantuan tiket untuk 2,000+ kakitangan SPRM.</p>
        <div class="case-result">
                      <span class="arrow">↑</span>
                    ↑ 2,000+ ahli dilayan · Perkhidmatan digital penuh · Sifar kertas kerja manual
        </div>
      </div>
            <div class="case-card reveal reveal-delay-1">
        <div class="case-num">KES / 04</div>
        <h3 class="case-title">Tadbir Urus Anti-Rasuah Nasional dalam Skala Besar — JARIS &amp; eSPJ</h3>
        <p class="case-desc">Membina dua platform nasional saling melengkapi: JARIS untuk pengurusan dokumen mesyuarat JAR hujung-ke-hujung dan repositori OACP/ABMS merentas semua kementerian, dan eSPJ untuk pemantauan pematuhan tadbir urus masa nyata dengan carta langsung, kiraan masa terakhir, dan kedudukan kementerian nasional.</p>
        <div class="case-result">
                      <span class="arrow">✓</span>
                    ✓ Skala nasional · Semua kementerian &amp; kerajaan negeri · Keterlihatan pematuhan masa nyata
        </div>
      </div>
            <div class="case-card reveal ">
        <div class="case-num">KES / 05</div>
        <h3 class="case-title">Tadbir Urus Anti-Rasuah Nasional — JARIS</h3>
        <p class="case-desc">Mengurus dokumentasi mesyuarat Jawatankuasa Anti-Rasuah (JAR) merentas semua kementerian dan kerajaan negeri Malaysia adalah sepenuhnya manual dan tersilo — dokumen tersimpan di komputer pegawai individu, menjadikannya mustahil untuk menjejak perkara tindakan tertunggak atau mengekalkan rekod yang konsisten apabila pegawai ditukar.</p>
        <div class="case-result">
                      <span class="arrow">✓</span>
                    ✓ Repositori Dokumen OACP &amp; ABMS
        </div>
      </div>
            <div class="case-card reveal reveal-delay-1">
        <div class="case-num">KES / 06</div>
        <h3 class="case-title">Platform Pentadbiran ICT Berpusat — CARE-INFRA</h3>
        <p class="case-desc">Cawangan Aplikasi Rekod (CAR) SPRM dalam BPRM mengurus semua pentadbiran infrastruktur ICT melalui hamparan yang tidak bersambung — alamat IP, aset perkakasan, jadual sandaran, dan lesen perisian dijejaki dalam fail berasingan oleh kakitangan yang berbeza, mengakibatkan rekod yang lapuk dan kesediaan audit yang lemah.</p>
        <div class="case-result">
                      <span class="arrow">✓</span>
                    ✓ Sedia Audit &amp; Sifar Kebergantungan Hamparan
        </div>
      </div>
          </div>
  </div>
</section>

<!-- ─── TESTIMONIALS ──────────────────────────────────────────────── -->
<section id="testimonials">
  <div class="container">
    <div class="section-header reveal">
      <div class="section-eyebrow">Bukti Sosial</div>
      <h2 class="section-title">Apa yang Mereka <span class="highlight">Katakan</span></h2>
      <div class="section-line"></div>
    </div>
    <div class="testimonials-grid">
      <div class="testimonial-card reveal">
        <div class="testimonial-quote">"</div>
        <p class="testimonial-text">Seorang profesional cemerlang secara teknikal yang sama berkesan di bilik lembaga mahupun di bilik pelayan. Sistem IMaCS yang dibinanya telah memperkukuh operasi siasatan kami dengan bermakna.</p>
        <div class="testimonial-author">
          <div class="author-avatar">AF</div>
          <div>
            <div class="author-name">Ahmad Faiz Bin Hasan</div>
            <div class="author-role">Timbalan Pengarah, BPRM — MACC</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card reveal reveal-delay-1">
        <div class="testimonial-quote">"</div>
        <p class="testimonial-text">Keupayaannya menterjemahkan keperluan keselamatan yang kompleks kepada sistem yang berfungsi dan boleh diselenggara adalah jarang ditemui. Beliau telah memacu pematuhan ISO 27001 kami dengan tepat dan mengekalkan pensijilan kami dari tahun ke tahun.</p>
        <div class="testimonial-author">
          <div class="author-avatar">IT</div>
          <div>
            <div class="author-name">Jawatankuasa Pemandu ICT</div>
            <div class="author-role">Suruhanjaya Pencegahan Rasuah Malaysia</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card reveal reveal-delay-2">
        <div class="testimonial-quote">"</div>
        <p class="testimonial-text">Penasihat Industri yang luar biasa yang membawa pengalaman IT kerajaan dan perusahaan dunia sebenar terus ke dalam bilik darjah. Pelajar secara konsisten menilai sesi beliau sebagai yang paling berimpak dalam program ini.</p>
        <div class="testimonial-author">
          <div class="author-avatar">UMS</div>
          <div>
            <div class="author-name">Fakulti Komputeran &amp; Informatik</div>
            <div class="author-role">Universiti Malaysia Sabah (UMS)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ─── CONTACT ───────────────────────────────────────────────────── -->
<section id="contact">
  <div class="container">
    <div class="contact-wrap">
      <div class="contact-info reveal">
        <div class="section-eyebrow">Hubungi Saya</div>
        <h2>Mari kita bina sesuatu <span class="highlight">yang bermakna</span></h2>
        <p>Sama ada anda memerlukan perunding IT kanan, pengurus projek sistem, pembangun full-stack, atau penceramah tentang keselamatan siber dan transformasi digital — saya berbesar hati untuk berhubung. Berpangkalan di Putrajaya, tersedia untuk penglibatan di seluruh Malaysia dan luar negara.</p>
        <div class="contact-channels">
          <a href="mailto:budihermawan@gmail.com" class="channel">
            <div class="channel-icon">✉️</div>
            <div>
              <div class="channel-label">E-mel</div>
              <div class="channel-value">budihermawan@gmail.com</div>
            </div>
          </a>
          <a href="https://github.com/buditech" target="_blank" rel="noopener" class="channel">
            <div class="channel-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.21 11.39.6.11.82-.26.82-.58v-2.03c-3.34.72-4.04-1.61-4.04-1.61-.54-1.38-1.33-1.74-1.33-1.74-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.23 1.84 1.23 1.07 1.83 2.8 1.3 3.49 1 .1-.77.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.11-3.17 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.65 1.65.25 2.87.12 3.17.77.84 1.23 1.91 1.23 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58A12 12 0 0 0 24 12C24 5.37 18.63 0 12 0z"/></svg>
            </div>
            <div>
              <div class="channel-label">GitHub</div>
              <div class="channel-value">github.com/buditech</div>
            </div>
          </a>
          <a href="https://linkedin.com/in/buditech" target="_blank" rel="noopener" class="channel">
            <div class="channel-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.44-2.13 2.94v5.67H9.38V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.59 0 4.25 2.37 4.25 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM3.56 20.45h3.55V9H3.56v11.45z"/></svg>
            </div>
            <div>
              <div class="channel-label">LinkedIn</div>
              <div class="channel-value">linkedin.com/in/buditech</div>
            </div>
          </a>
        </div>
      </div>

      <div class="contact-form reveal reveal-delay-2" id="contactForm">
        <form id="mainForm" novalidate>
          <div class="form-row">
            <div class="form-group">
              <label for="fname">Nama Pertama *</label>
              <input type="text" id="fname" placeholder="Budi" required />
              <div class="field-error" id="fname-err">Sila masukkan nama pertama anda.</div>
            </div>
            <div class="form-group">
              <label for="lname">Nama Akhir *</label>
              <input type="text" id="lname" placeholder="Hermawan" required />
              <div class="field-error" id="lname-err">Sila masukkan nama akhir anda.</div>
            </div>
          </div>
          <div class="form-group">
            <label for="email">Alamat E-mel *</label>
            <input type="email" id="email" placeholder="anda@syarikat.com" required />
            <div class="field-error" id="email-err">Sila masukkan alamat e-mel yang sah.</div>
          </div>
          <div class="form-group">
            <label for="budget">Bajet Projek</label>
            <select id="budget">
              <option value="">Pilih julat...</option>
              <option>Bawah RM20,000</option>
              <option>RM20,000 – RM60,000</option>
              <option>RM60,000 – RM200,000</option>
              <option>RM200,000+</option>
              <option>Terbuka untuk berbincang</option>
            </select>
          </div>
          <div class="form-group">
            <label for="message">Ceritakan tentang projek anda *</label>
            <textarea id="message" placeholder="Huraikan projek anda, matlamat, jangka masa, dan sebarang kekangan teknikal..." required></textarea>
            <div class="field-error" id="msg-err">Sila huraikan projek anda.</div>
          </div>
          <button type="submit" class="form-submit">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22,2 15,22 11,13 2,9 22,2"/></svg>
            Hantar Mesej
          </button>
          <div class="form-success" id="formSuccess">
            ✅ Mesej dihantar! Saya akan menghubungi anda dalam masa 24 jam.
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

<!-- ─── FOOTER ───────────────────────────────────────────────────── -->
<footer>
  <div class="container">
    <div class="footer-inner">
      <div class="footer-logo">budi<span>tech</span>.dev</div>
      <nav class="footer-links">
        <a href="#about">Tentang</a>
        <a href="#projects">Projek</a>
        <a href="#case-studies">Kajian Kes</a>
        <a href="#contact">Hubungi</a>
      </nav>
      <div class="footer-social">
        <a href="https://github.com/buditech" target="_blank" rel="noopener" class="social-btn" aria-label="GitHub">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.3 3.44 9.8 8.21 11.39.6.11.82-.26.82-.58v-2.03c-3.34.72-4.04-1.61-4.04-1.61-.54-1.38-1.33-1.74-1.33-1.74-1.09-.74.08-.73.08-.73 1.2.08 1.84 1.23 1.84 1.23 1.07 1.83 2.8 1.3 3.49 1 .1-.77.42-1.3.76-1.6-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.11-3.17 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 0 1 3-.4c1.02 0 2.04.13 3 .4 2.28-1.55 3.29-1.23 3.29-1.23.65 1.65.25 2.87.12 3.17.77.84 1.23 1.91 1.23 3.22 0 4.61-2.81 5.63-5.48 5.92.43.37.81 1.1.81 2.22v3.29c0 .32.22.7.83.58A12 12 0 0 0 24 12C24 5.37 18.63 0 12 0z"/></svg>
        </a>
        <a href="https://linkedin.com/in/buditech" target="_blank" rel="noopener" class="social-btn" aria-label="LinkedIn">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.44-2.13 2.94v5.67H9.38V9h3.41v1.56h.05c.47-.9 1.63-1.85 3.36-1.85 3.59 0 4.25 2.37 4.25 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM3.56 20.45h3.55V9H3.56v11.45z"/></svg>
        </a>
        <a href="mailto:budihermawan@gmail.com" class="social-btn" aria-label="Email">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/></svg>
        </a>
      </div>
      <div class="footer-copy">
        © 2026 buditech.dev · Putrajaya, Malaysia · Dibina dengan ketepatan &amp; semangat
      </div>
    </div>
  </div>
</footer>

<!-- ─── BACK TO TOP ──────────────────────────────────────────────── -->
<button id="back-top" aria-label="Back to top">↑</button>

<!-- ─── CASE STUDY MODAL ─────────────────────────────────────────── -->
<div class="modal-overlay" id="modalOverlay" role="dialog" aria-modal="true">
  <div class="modal" id="modalContent">
    <div class="modal-header">
      <div class="modal-eyebrow" id="modalEyebrow"></div>
      <h2 class="modal-title" id="modalTitle"></h2>
      <p class="modal-subtitle" id="modalSubtitle"></p>
      <button class="modal-close" id="modalClose" aria-label="Close modal">✕</button>
    </div>
    <div class="modal-body">
      <div class="modal-section">
        <h4>Cabaran</h4>
        <p id="modalChallenge"></p>
      </div>
      <div class="modal-section">
        <h4>Penyelesaian</h4>
        <p id="modalSolution"></p>
      </div>
      <div class="modal-section">
        <h4>Keputusan Utama</h4>
        <div class="modal-metrics" id="modalMetrics"></div>
      </div>
      <div class="modal-section">
        <h4>Teknologi Digunakan</h4>
        <div class="modal-tags" id="modalTags"></div>
      </div>
    </div>
  </div>
</div>

<!-- ─── JAVASCRIPT ───────────────────────────────────────────────── -->
<script>
// ── Case study data ──────────────────────────────────────────────
const caseStudies = [
    {
    eyebrow: "Pilihan · Integrasi AI · MACC (SPRM)",
    title: "Membina AI ke dalam Sistem Aduan Kerajaan",
    subtitle: "Platform pengurusan aduan sehenti dengan enjin analisis AI terbina dalam",
    challenge: "Bahagian Cemerlang & Profesionalisme (BCP) MACC mengurus aduan salah laku terhadap kakitangan SPRM melalui proses manual yang berpecah-belah. Tiada sistem bersatu \u2014 pengambilan, penjejakan siasatan, dan tindakan akhir dikendalikan secara berasingan, menjadikan audit sukar dan pengawasan kes tidak konsisten.",
    solution: "Membangunkan platform pengurusan aduan hujung-ke-hujung dalam PHP\/MySQL dengan frontend Bootstrap. Ciri menonjolnya adalah enjin analisis AI bersepadu yang menilai setiap aduan menggunakan rangka kerja 5W1H (Apa, Siapa, Bila, Di mana, Mengapa, Bagaimana) dan secara automatik mencadangkan undang-undang dan peruntukan yang berkenaan. Sistem ini merangkumi setiap peringkat kitaran hayat aduan \u2014 dari pengambilan melalui aliran kerja siasatan hingga tindakan akhir \u2014 dengan penjejakan status dan jejak audit lengkap di setiap langkah.",
    metrics: [{"num":"5W1H","lbl":"Rangka Kerja AI"},{"num":"E2E","lbl":"Penjejakan Kitaran"},{"num":"Auto","lbl":"Cadangan Undang-Undang"}],
    tags: ["PHP","MySQL","Bootstrap","JavaScript","AI Text Analysis","5W1H Framework"]
  },
    {
    eyebrow: "Full-Stack · Platform Selamat · MACC (SPRM)",
    title: "Platform Pemberi Maklumat Pemenang Anugerah \u2014 IMaCS",
    subtitle: "Sistem pelaporan pemberi maklumat selamat pemenang anugerah \u2014 Anugerah Khas Ketua Pesuruhjaya 2026",
    challenge: "SPRM memerlukan saluran khusus yang selamat untuk kakitangannya sendiri melaporkan salah laku dan pelanggaran integriti \u2014 dengan jaminan mutlak kerahsiaan pelapor. Sebarang kompromi terhadap identiti pelapor akan menjejaskan keseluruhan tujuan sistem dan menghalang pelaporan pada masa hadapan.",
    solution: "Membina IMaCS sebagai platform bertujuan khusus menggunakan teknologi keselamatan moden dan diperkukuh yang memastikan kerahsiaan, integriti data, dan pelaporan tanpa nama yang selamat. Sistem ini menampilkan aliran kerja penyerahan kes berstruktur dengan penjejakan status, rekod aduan anti-usik, dan kesediaan audit penuh. Kesannya dalam mengukuhkan akauntabiliti dalaman SPRM memenangi Anugerah Khas Ketua Pesuruhjaya 2026 \u2014 pengiktirafan pesuruhjaya tertinggi MACC.",
    metrics: [{"num":"\ud83c\udfc6","lbl":"Anugerah KPP 2026"},{"num":"100%","lbl":"Pelaporan Tanpa Nama"},{"num":"Anti-Usik","lbl":"Rekod Audit"}],
    tags: ["PHP","MySQL","Bootstrap","JavaScript","Secure Platform","Audit Trail","Role-Based Access"]
  },
    {
    eyebrow: "Full-Stack · Portal Ahli · Yayasan Prihatin SPRM",
    title: "Mendigitalkan Perkhidmatan Kebajikan 2,000+ Ahli",
    subtitle: "Platform pengurusan ahli digital sepenuhnya melayan 2,000+ ahli kebajikan SPRM",
    challenge: "Yayasan Prihatin SPRM \u2014 yayasan kebajikan untuk kakitangan SPRM \u2014 menjalankan semua pentadbiran keahlian secara manual di atas kertas: daftar keahlian, rekod kutipan yuran, permohonan bantuan kebajikan, dan pertanyaan ahli semuanya dikendalikan secara manual, mewujudkan beban pentadbiran yang signifikan dan risiko kesilapan.",
    solution: "Membina portal ahli komprehensif yang mendigitalkan keseluruhan kitaran hayat ahli. Ciri-ciri termasuk daftar keahlian penuh untuk 2,000+ ahli dengan penjejakan profil dan sejarah, kutipan yuran dalam talian dan rekod pembayaran, modul permohonan bantuan kebajikan (Permohonan Bantuan) dengan penjejakan dalam talian, dan sistem tiket meja bantuan (Meja Bantuan) untuk pertanyaan sokongan ahli. Ahli mendapat akses layan diri yang selamat kepada rekod dan status permohonan mereka sendiri.",
    metrics: [{"num":"2,000+","lbl":"Ahli Dilayan"},{"num":"4","lbl":"Modul Teras"},{"num":"0","lbl":"Proses Kertas"}],
    tags: ["PHP","MySQL","Bootstrap","JavaScript","Member Management","Online Helpdesk","Fee Management"]
  },
    {
    eyebrow: "Full-Stack · Papan Pemuka Nasional · MACC (SPRM)",
    title: "Tadbir Urus Anti-Rasuah Nasional dalam Skala Besar \u2014 JARIS & eSPJ",
    subtitle: "Pemantauan pematuhan masa nyata merentas semua kementerian dan kerajaan negeri Malaysia",
    challenge: "MACC memerlukan platform peringkat nasional untuk memantau pematuhan mesyuarat Jawatankuasa Tata Kelola (JTK) merentas semua kementerian dan kerajaan negeri. Sistem pendahulu JARIS menggunakan terminologi JAR yang lebih lama; eSPJ memerlukan evolusi penuh kepada rangka kerja JTK yang dikemaskini sambil menambah keupayaan pelaporan masa nyata yang lebih berkuasa.",
    solution: "Membangunkan eSPJ dengan papan pemuka langsung yang menampilkan kiraan masa nyata ke mesyuarat dan tarikh akhir penyerahan berikutnya, panel pentadbir yang menunjukkan status penyerahan secara sekilas pandang (belum hantar \/ selesai), carta pematuhan statistik melalui Chart.js, dan kedudukan Top 5 kementerian dan kerajaan negeri mengikut jumlah penyerahan. Penjejakan KPB (Kesepaduan Pelan Bertindak) dan perpustakaan rujukan digital e-Buku bersepadu. Akses berasaskan peranan memastikan pegawai melihat data mereka sendiri manakala pentadbir melihat gambaran nasional penuh.",
    metrics: [{"num":"Nasional","lbl":"Liputan Skala"},{"num":"Masa Nyata","lbl":"Papan Pemuka"},{"num":"Pelbagai Peranan","lbl":"Kawalan Akses"}],
    tags: ["PHP","MySQL","Bootstrap","JavaScript","Chart.js","JTK \/ KPB","Role-Based Access"]
  },
    {
    eyebrow: "Full-Stack · Anti-Rasuah · MACC (SPRM)",
    title: "Tadbir Urus Anti-Rasuah Nasional \u2014 JARIS",
    subtitle: "Platform berpusat mengurus operasi jawatankuasa anti-rasuah merentas semua kementerian",
    challenge: "Mengurus dokumentasi mesyuarat Jawatankuasa Anti-Rasuah (JAR) merentas semua kementerian dan kerajaan negeri Malaysia adalah sepenuhnya manual dan tersilo \u2014 dokumen tersimpan di komputer pegawai individu, menjadikannya mustahil untuk menjejak perkara tindakan tertunggak atau mengekalkan rekod yang konsisten apabila pegawai ditukar.",
    solution: "Membina JARIS sebagai platform hujung-ke-hujung komprehensif yang merangkumi pengurusan dokumen mesyuarat JAR (dari agenda hingga penjejakan respons minit), papan pemuka pematuhan masa nyata untuk KSU\/SUK menjejak tindakan tertunggak dan selesai mengikut kementerian atau negeri, jejak audit berterusan yang tidak terjejas oleh penempatan semula kakitangan, repositori dokumen OACP berpusat untuk semua kementerian dan agensi, dan penyimpanan dokumen untuk organisasi bertauliah ABMS.",
    metrics: [{"num":"Nasional","lbl":"Liputan kementerian"},{"num":"OACP","lbl":"Repositori Dokumen"},{"num":"Berterusan","lbl":"Jejak Audit"}],
    tags: ["PHP","MySQL","Bootstrap","JavaScript","OACP","ABMS","Document Management"]
  },
    {
    eyebrow: "Full-Stack · Pengurusan Infrastruktur · MACC (SPRM)",
    title: "Platform Pentadbiran ICT Berpusat \u2014 CARE-INFRA",
    subtitle: "Platform pentadbiran ICT berpusat untuk Cawangan Aplikasi Rekod SPRM",
    challenge: "Cawangan Aplikasi Rekod (CAR) SPRM dalam BPRM mengurus semua pentadbiran infrastruktur ICT melalui hamparan yang tidak bersambung \u2014 alamat IP, aset perkakasan, jadual sandaran, dan lesen perisian dijejaki dalam fail berasingan oleh kakitangan yang berbeza, mengakibatkan rekod yang lapuk dan kesediaan audit yang lemah.",
    solution: "Membina CARE-INFRA sebagai platform dalaman tunggal yang menyatukan semua tugas pentadbiran ICT: pengurusan alamat IP penuh dengan keterlihatan merentas rangkaian, daftar aset ICT dengan sejarah tugasan dan penjejakan status, penjadualan dan pemantauan kerja sandaran dan pemulihan, penjejakan tamat lesen dan bilangan tempat duduk dengan amaran pembaharuan, dan portal Tutorial & Cara-Cara dalaman untuk perkongsian ilmu kakitangan. Menghapuskan kebergantungan hamparan dan meningkatkan kesediaan audit dengan ketara.",
    metrics: [{"num":"6","lbl":"Modul Pentadbiran"},{"num":"0","lbl":"Kebergantungan Hamparan"},{"num":"Sedia Audit","lbl":"Rekod ICT"}],
    tags: ["PHP","MySQL","Bootstrap","JavaScript","IP Management","Asset Register","Licence Tracking"]
  },
  ];

// ── Modal logic ──────────────────────────────────────────────────
function openModal(idx) {
  const cs = caseStudies[idx];
  document.getElementById('modalEyebrow').textContent    = cs.eyebrow;
  document.getElementById('modalTitle').textContent      = cs.title;
  document.getElementById('modalSubtitle').textContent   = cs.subtitle;
  document.getElementById('modalChallenge').textContent  = cs.challenge;
  document.getElementById('modalSolution').textContent   = cs.solution;
  document.getElementById('modalMetrics').innerHTML      = cs.metrics.map(m =>
    `<div class="modal-metric"><div class="num">${m.num}</div><div class="lbl">${m.lbl}</div></div>`
  ).join('');
  document.getElementById('modalTags').innerHTML         = cs.tags.map(t =>
    `<span class="tag">${t}</span>`
  ).join('');
  document.getElementById('modalOverlay').classList.add('open');
  document.body.style.overflow = 'hidden';
}

function closeModal() {
  document.getElementById('modalOverlay').classList.remove('open');
  document.body.style.overflow = '';
}

document.getElementById('modalClose').addEventListener('click', closeModal);
document.getElementById('modalOverlay').addEventListener('click', e => {
  if (e.target === document.getElementById('modalOverlay')) closeModal();
});
document.addEventListener('keydown', e => { if (e.key === 'Escape') closeModal(); });

// ── Filter tabs ──────────────────────────────────────────────────
document.querySelectorAll('.filter-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    const filter = btn.dataset.filter;
    document.querySelectorAll('.project-card').forEach(card => {
      if (filter === 'all' || card.dataset.category.includes(filter)) {
        card.classList.remove('hidden');
      } else {
        card.classList.add('hidden');
      }
    });
  });
});

// ── Scroll: nav sticky ───────────────────────────────────────────
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
  navbar.classList.toggle('scrolled', window.scrollY > 40);
  // Back to top
  document.getElementById('back-top').classList.toggle('visible', window.scrollY > 400);
}, { passive: true });

// ── Back to top ──────────────────────────────────────────────────
document.getElementById('back-top').addEventListener('click', () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

// ── Hamburger & Mobile Drawer ────────────────────────────────────
const hamburger    = document.getElementById('hamburger');
const mobileMenu   = document.getElementById('mobileMenu');
const mobileClose  = document.getElementById('mobileClose');
const mobileBackdrop = document.getElementById('mobileBackdrop');

function openMobileMenu() {
  hamburger.classList.add('open');
  mobileMenu.classList.add('open');
  document.body.style.overflow = 'hidden';
}
function closeMobileMenu() {
  hamburger.classList.remove('open');
  mobileMenu.classList.remove('open');
  document.body.style.overflow = '';
}

hamburger.addEventListener('click', () => {
  mobileMenu.classList.contains('open') ? closeMobileMenu() : openMobileMenu();
});
mobileClose.addEventListener('click', closeMobileMenu);
mobileBackdrop.addEventListener('click', closeMobileMenu);

document.querySelectorAll('.mobile-link').forEach(link => {
  link.addEventListener('click', closeMobileMenu);
});

// ── Active nav link on scroll ────────────────────────────────────
const sections   = ['about','projects','case-studies','testimonials','contact'];
const navAnchors = document.querySelectorAll('.nav-links li a:not(.nav-cta)');

function updateActiveNav() {
  let current = '';
  sections.forEach(id => {
    const el = document.getElementById(id);
    if (el && window.scrollY >= el.offsetTop - 120) current = id;
  });
  navAnchors.forEach(a => {
    const href = a.getAttribute('href').replace('#','');
    a.classList.toggle('active', href === current);
  });
}
window.addEventListener('scroll', updateActiveNav, { passive: true });
updateActiveNav();

// ── Scroll reveal ────────────────────────────────────────────────
const revealObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      revealObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });

document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));

// ── Contact form validation ──────────────────────────────────────
function validateEmail(v) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}
function setFieldError(id, errId, show) {
  const field = document.getElementById(id);
  const err   = document.getElementById(errId);
  field.classList.toggle('invalid', show);
  err.classList.toggle('visible', show);
  return !show;
}

document.getElementById('mainForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const fname   = document.getElementById('fname').value.trim();
  const lname   = document.getElementById('lname').value.trim();
  const email   = document.getElementById('email').value.trim();
  const message = document.getElementById('message').value.trim();

  const v1 = setFieldError('fname',   'fname-err', !fname);
  const v2 = setFieldError('lname',   'lname-err', !lname);
  const v3 = setFieldError('email',   'email-err', !validateEmail(email));
  const v4 = setFieldError('message', 'msg-err',   !message);

  if (v1 && v2 && v3 && v4) {
    // Simulate send
    const btn = this.querySelector('.form-submit');
    btn.textContent = 'Sending…';
    btn.disabled = true;
    setTimeout(() => {
      document.getElementById('formSuccess').classList.add('visible');
      this.reset();
      btn.textContent = 'Message Sent ✓';
      setTimeout(() => {
        btn.textContent = 'Send Message';
        btn.disabled = false;
        document.getElementById('formSuccess').classList.remove('visible');
      }, 5000);
    }, 1200);
  }
});

// Clear errors on input
['fname','lname','email','message'].forEach(id => {
  document.getElementById(id).addEventListener('input', function() {
    this.classList.remove('invalid');
    const errMap = { fname:'fname-err', lname:'lname-err', email:'email-err', message:'msg-err' };
    document.getElementById(errMap[id]).classList.remove('visible');
  });
});
</script>
</body>
</html>

