<!-- wp:html -->
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>PortoAdib - UI/UX Designer</title>
  <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=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ["Manrope", "system-ui", "sans-serif"],
          },
          keyframes: {
            fadeUp: {
              "0%": { opacity: "0", transform: "translateY(16px)" },
              "100%": { opacity: "1", transform: "translateY(0)" },
            },
            marquee: {
              "0%": { transform: "translateX(0)" },
              "100%": { transform: "translateX(-50%)" },
            },
          },
          animation: {
            "fade-up": "fadeUp 0.7s ease forwards",
            marquee: "marquee 16s linear infinite",
          },
        },
      },
    };
  </script>
  <style>
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .header-floating {
      width: min(920px, calc(100% - 3.5rem));
      margin: 0.75rem auto 0;
      border-radius: 999px;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
      border: 1px solid rgba(226, 232, 240, 0.8);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(12px);
    }
  </style>
</head>
<body class="font-sans text-slate-900 bg-slate-950/5 min-h-screen">
  <div class="relative overflow-visible">
    <div class="absolute -top-24 -left-20 h-[320px] w-[320px] rounded-full bg-emerald-400/30 blur-3xl"></div>
    <div class="absolute top-20 -right-24 h-[360px] w-[360px] rounded-full bg-emerald-500/25 blur-3xl"></div>
    <div class="absolute bottom-0 left-1/3 h-[360px] w-[360px] rounded-full bg-teal-400/20 blur-3xl"></div>

    <div class="max-w-6xl mx-auto px-5 py-10 relative">
      <nav id="site-header" class="sticky top-3 z-50 -mx-5 px-6 py-5 flex flex-col gap-5 md:flex-row md:items-center md:justify-between bg-transparent border-b border-transparent transition-all duration-300">
        <div class="text-base tracking-[0.28em] uppercase font-semibold">PortoAdib</div>
        <div class="flex flex-wrap gap-5 text-sm uppercase tracking-[0.2em] font-semibold text-slate-600">
          <a href="#work" class="hover:text-emerald-600">Work</a>
          <a href="#services" class="hover:text-emerald-600">Services</a>
          <a href="#about" class="hover:text-emerald-600">About</a>
          <a href="#contact" class="hover:text-emerald-600">Contact</a>
        </div>
      </nav>

      <section class="grid gap-10 md:grid-cols-[1.05fr_0.95fr] items-center pt-10">
        <div class="animate-fade-up">
          <p class="uppercase tracking-[0.25em] text-xs font-semibold text-emerald-600">UI/UX Designer</p>
          <h1 class="text-4xl sm:text-5xl lg:text-6xl font-semibold leading-tight mt-4">
            Mendesain produk digital yang rapi, jelas, dan terasa manusiawi.
          </h1>
          <p class="text-base sm:text-lg text-slate-600 mt-5 max-w-xl">
            PortoAdib fokus pada riset, flow yang sederhana, dan visual yang konsisten. Semua konten masih dummy.
          </p>
          <div class="flex flex-wrap gap-3 mt-6">
            <span class="px-4 py-2 rounded-full border border-slate-200 text-xs uppercase tracking-[0.2em] bg-white/70">Strategy</span>
            <span class="px-4 py-2 rounded-full border border-slate-200 text-xs uppercase tracking-[0.2em] bg-white/70">Research</span>
            <span class="px-4 py-2 rounded-full border border-slate-200 text-xs uppercase tracking-[0.2em] bg-white/70">Design System</span>
            <span class="px-4 py-2 rounded-full border border-slate-200 text-xs uppercase tracking-[0.2em] bg-white/70">Prototype</span>
          </div>
          <div class="flex flex-wrap gap-4 mt-8">
            <a href="#contact" class="px-6 py-3 rounded-full bg-emerald-500 text-white text-xs font-semibold uppercase tracking-[0.2em] shadow-[0_18px_50px_rgba(16,185,129,0.35)]">
              Book a Call
            </a>
            <a href="#work" class="px-6 py-3 rounded-full border border-slate-900 text-xs font-semibold uppercase tracking-[0.2em] hover:bg-slate-900 hover:text-white transition">
              View Case Studies
            </a>
          </div>
        </div>
        <div class="animate-fade-up [animation-delay:0.2s]">
          <div class="relative bg-white/90 p-6 rounded-[26px] shadow-[0_24px_60px_rgba(15,23,42,0.12)] backdrop-blur">
            <div class="absolute inset-[-12px] border border-dashed border-slate-200 rounded-[32px] pointer-events-none"></div>
            <img class="rounded-[20px]" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=900&q=80" alt="Workspace design" />
            <div class="grid grid-cols-3 gap-3 mt-5">
              <div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 text-center">
                <div class="text-xl font-semibold">6+</div>
                <div class="text-[10px] uppercase tracking-[0.2em] text-slate-500 mt-1">Years</div>
              </div>
              <div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 text-center">
                <div class="text-xl font-semibold">38</div>
                <div class="text-[10px] uppercase tracking-[0.2em] text-slate-500 mt-1">Projects</div>
              </div>
              <div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 text-center">
                <div class="text-xl font-semibold">14</div>
                <div class="text-[10px] uppercase tracking-[0.2em] text-slate-500 mt-1">Brands</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div class="overflow-hidden border-y border-slate-200 mt-12 py-5 uppercase tracking-[0.28em] text-sm sm:text-base font-semibold text-slate-600">
        <div class="flex w-[200%] animate-marquee">
          <span class="whitespace-nowrap">
            Product Design - Mobile App - SaaS Dashboard - Brand System - Research - Prototyping -
          </span>
          <span class="whitespace-nowrap pl-10">
            Product Design - Mobile App - SaaS Dashboard - Brand System - Research - Prototyping -
          </span>
        </div>
      </div>

      <section id="work" class="mt-16">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div class="max-w-lg">
            <h2 class="text-3xl sm:text-4xl font-semibold">Selected Work</h2>
            <p class="text-slate-600 mt-2">Ringkas, fokus pada dampak dan hasil.</p>
          </div>
          <div class="flex gap-3">
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-work" data-carousel-dir="prev">Prev</button>
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-work" data-carousel-dir="next">Next</button>
          </div>
        </div>
        <div class="flex flex-col gap-4 mt-4">
          <div id="carousel-work" class="flex gap-6 overflow-x-auto overflow-y-visible no-scrollbar scroll-smooth snap-x snap-mandatory py-4">
            <article data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[22px] p-5 border border-slate-200 animate-fade-up snap-start">
              <img class="rounded-[18px]" src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=900&q=80" alt="Analytics dashboard" />
            <p class="text-xs uppercase tracking-[0.2em] text-slate-500 mt-4">Fintech - Dashboard</p>
            <h3 class="text-lg font-semibold mt-2">Helio - alur subscription lebih cepat</h3>
            <p class="text-sm text-slate-600 mt-2">Informasi dipadatkan, keputusan finance lebih cepat.</p>
          </article>
            <article data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[22px] p-5 border border-slate-200 animate-fade-up [animation-delay:0.2s] snap-start">
            <img class="rounded-[18px]" src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=900&q=80" alt="Team collaboration" />
            <p class="text-xs uppercase tracking-[0.2em] text-slate-500 mt-4">SaaS - Collaboration</p>
            <h3 class="text-lg font-semibold mt-2">Nova - onboarding lebih singkat</h3>
            <p class="text-sm text-slate-600 mt-2">Aktivasi naik, drop-off turun di minggu pertama.</p>
          </article>
            <article data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[22px] p-5 border border-slate-200 animate-fade-up [animation-delay:0.4s] snap-start">
            <img class="rounded-[18px]" src="https://images.unsplash.com/photo-1523475472560-d2df97ec485c?auto=format&fit=crop&w=900&q=80" alt="Mobile experience" />
            <p class="text-xs uppercase tracking-[0.2em] text-slate-500 mt-4">Lifestyle - Mobile</p>
            <h3 class="text-lg font-semibold mt-2">Meraki - habit tracking yang hangat</h3>
            <p class="text-sm text-slate-600 mt-2">Copy dan motion ringan untuk konsistensi harian.</p>
          </article>
            <article data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[22px] p-5 border border-slate-200 animate-fade-up snap-start">
              <img class="rounded-[18px]" src="https://images.unsplash.com/photo-1487014679447-9f8336841d58?auto=format&fit=crop&w=900&q=80" alt="Brand studio" />
              <p class="text-xs uppercase tracking-[0.2em] text-slate-500 mt-4">Brand - Identity</p>
              <h3 class="text-lg font-semibold mt-2">Luma - sistem visual modular</h3>
              <p class="text-sm text-slate-600 mt-2">Brand kit fleksibel untuk kampanye cepat.</p>
            </article>
            <article data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[22px] p-5 border border-slate-200 animate-fade-up snap-start">
              <img class="rounded-[18px]" src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?auto=format&fit=crop&w=900&q=80" alt="Retail analytics" />
              <p class="text-xs uppercase tracking-[0.2em] text-slate-500 mt-4">Retail - Analytics</p>
              <h3 class="text-lg font-semibold mt-2">Atlas - insight toko harian</h3>
              <p class="text-sm text-slate-600 mt-2">Dashboard ringkas untuk operasional outlet.</p>
            </article>
          </div>
        </div>
      </section>

      <section id="services" class="mt-16">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div class="max-w-lg">
            <h2 class="text-3xl sm:text-4xl font-semibold">Services</h2>
            <p class="text-slate-600 mt-2">Paket fleksibel sesuai kebutuhan tim.</p>
          </div>
          <div class="flex gap-3">
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-services" data-carousel-dir="prev">Prev</button>
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-services" data-carousel-dir="next">Next</button>
          </div>
        </div>
        <div class="flex flex-col gap-4 mt-4">
          <div id="carousel-services" class="flex gap-5 overflow-x-auto overflow-y-visible no-scrollbar scroll-smooth snap-x snap-mandatory py-4">
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] border border-slate-200 rounded-[22px] p-6 bg-white/70 animate-fade-up snap-start">
              <h3 class="text-lg font-semibold">Discovery Sprint</h3>
            <p class="text-sm text-slate-600 mt-2">Audit UX, mapping masalah, dan prioritas solusi.</p>
          </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] border border-slate-200 rounded-[22px] p-6 bg-white/70 animate-fade-up [animation-delay:0.2s] snap-start">
            <h3 class="text-lg font-semibold">Product UX</h3>
            <p class="text-sm text-slate-600 mt-2">Wireframe hingga testing untuk iterasi cepat.</p>
          </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] border border-slate-200 rounded-[22px] p-6 bg-white/70 animate-fade-up [animation-delay:0.4s] snap-start">
            <h3 class="text-lg font-semibold">Visual Identity</h3>
            <p class="text-sm text-slate-600 mt-2">Guideline komponen dan art direction.</p>
          </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] border border-slate-200 rounded-[22px] p-6 bg-white/70 animate-fade-up snap-start">
              <h3 class="text-lg font-semibold">Design System</h3>
              <p class="text-sm text-slate-600 mt-2">Library komponen untuk konsistensi multi-team.</p>
            </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] border border-slate-200 rounded-[22px] p-6 bg-white/70 animate-fade-up snap-start">
              <h3 class="text-lg font-semibold">UX Writing</h3>
              <p class="text-sm text-slate-600 mt-2">Microcopy yang jelas dan bersuara brand.</p>
            </div>
          </div>
        </div>
      </section>

      <section id="about" class="mt-16">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div class="max-w-lg">
            <h2 class="text-3xl sm:text-4xl font-semibold">About PortoAdib</h2>
            <p class="text-slate-600 mt-2">Riset, sistem, dan storytelling visual yang fokus.</p>
          </div>
          <div class="flex gap-3">
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-about" data-carousel-dir="prev">Prev</button>
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-about" data-carousel-dir="next">Next</button>
          </div>
        </div>
        <div class="flex flex-col gap-4 mt-4">
          <div id="carousel-about" class="flex gap-6 overflow-x-auto overflow-y-visible no-scrollbar scroll-smooth snap-x snap-mandatory py-4">
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] bg-white/90 rounded-[22px] p-6 border border-slate-200 animate-fade-up snap-start">
              <h3 class="text-lg font-semibold">Workflow</h3>
            <p class="text-sm text-slate-600 mt-2">Problem framing, journey, hingga design QA.</p>
          </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] bg-white/90 rounded-[22px] p-6 border border-slate-200 animate-fade-up [animation-delay:0.2s] snap-start">
            <h3 class="text-lg font-semibold">Tools</h3>
            <p class="text-sm text-slate-600 mt-2">Figma, FigJam, Notion, Webflow (dummy).</p>
          </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] bg-white/90 rounded-[22px] p-6 border border-slate-200 animate-fade-up [animation-delay:0.4s] snap-start">
            <h3 class="text-lg font-semibold">Values</h3>
            <p class="text-sm text-slate-600 mt-2">Empati, jelas, dan berani eksplorasi.</p>
          </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] bg-white/90 rounded-[22px] p-6 border border-slate-200 animate-fade-up snap-start">
              <h3 class="text-lg font-semibold">Process</h3>
              <p class="text-sm text-slate-600 mt-2">Workshop, synthesis, hingga roadmap visual.</p>
            </div>
            <div data-card class="min-w-[240px] sm:min-w-[280px] md:min-w-[320px] bg-white/90 rounded-[22px] p-6 border border-slate-200 animate-fade-up snap-start">
              <h3 class="text-lg font-semibold">Focus</h3>
              <p class="text-sm text-slate-600 mt-2">Sederhana, usable, dan scalable untuk growth.</p>
            </div>
          </div>
        </div>
      </section>

      <section class="mt-16">
        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
          <div class="max-w-lg">
            <h2 class="text-3xl sm:text-4xl font-semibold">Testimonials</h2>
            <p class="text-slate-600 mt-2">Respons dari tim yang pernah kolaborasi.</p>
          </div>
          <div class="flex gap-3">
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-testimonials" data-carousel-dir="prev">Prev</button>
            <button class="px-4 py-2 rounded-full border border-slate-300 text-xs uppercase tracking-[0.2em] bg-white/70 hover:bg-slate-900 hover:text-white transition" data-carousel-button="carousel-testimonials" data-carousel-dir="next">Next</button>
          </div>
        </div>
        <div class="flex flex-col gap-4 mt-4">
          <div id="carousel-testimonials" class="flex gap-6 overflow-x-auto overflow-y-visible no-scrollbar scroll-smooth snap-x snap-mandatory py-4">
            <div data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[24px] p-6 border border-slate-200 animate-fade-up snap-start">
              <p class="text-slate-600">"Kolaborasinya cepat, keputusan tim lebih tajam."</p>
          <p class="font-semibold mt-4">Andi - Product Lead</p>
        </div>
            <div data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[24px] p-6 border border-slate-200 animate-fade-up [animation-delay:0.2s] snap-start">
          <p class="text-slate-600">"Desain rapi dan insight-nya selalu to the point."</p>
          <p class="font-semibold mt-4">Rina - Founder</p>
        </div>
            <div data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[24px] p-6 border border-slate-200 animate-fade-up snap-start">
              <p class="text-slate-600">"Komunikasi jelas, timeline selalu on track."</p>
              <p class="font-semibold mt-4">Dewi - PM</p>
            </div>
            <div data-card class="min-w-[260px] sm:min-w-[320px] md:min-w-[360px] bg-white/90 rounded-[24px] p-6 border border-slate-200 animate-fade-up snap-start">
              <p class="text-slate-600">"Sistem desainnya mudah diadopsi tim dev."</p>
              <p class="font-semibold mt-4">Rafi - Tech Lead</p>
            </div>
          </div>
        </div>
      </section>

      <section id="contact" class="mt-16">
        <div class="bg-slate-900 text-white rounded-[28px] p-8 md:p-10 grid gap-6 md:grid-cols-[1.1fr_0.9fr]">
          <div>
            <h2 class="text-3xl sm:text-4xl font-semibold">Siap kolaborasi?</h2>
            <p class="text-white/70 mt-3">Sesi singkat 30 menit untuk bahas kebutuhan produk.</p>
          </div>
          <div>
            <div class="flex flex-wrap gap-3">
              <span class="px-4 py-2 rounded-full border border-white/40 text-xs uppercase tracking-[0.2em]">hello@portoadib.com</span>
              <span class="px-4 py-2 rounded-full border border-white/40 text-xs uppercase tracking-[0.2em]">Jakarta - Remote</span>
            </div>
            <div class="flex flex-wrap gap-4 mt-6">
              <a class="px-6 py-3 rounded-full border border-white text-xs font-semibold uppercase tracking-[0.2em] hover:bg-white hover:text-slate-900 transition" href="mailto:hello@portoadib.com">Email Me</a>
              <a class="px-6 py-3 rounded-full bg-emerald-500 text-white text-xs font-semibold uppercase tracking-[0.2em]" href="#work">Download CV</a>
            </div>
          </div>
        </div>
      </section>

      <footer class="mt-12 pb-6 text-xs uppercase tracking-[0.25em] text-slate-500 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <span>(c) 2025 PortoAdib</span>
        <span>Behance - Dribbble - LinkedIn</span>
      </footer>
    </div>
  </div>
  <script>
    const getStep = (container) => {
      const card = container.querySelector("[data-card]");
      if (!card) return 0;
      const styles = getComputedStyle(container);
      const gap = parseFloat(styles.columnGap || styles.gap || 0);
      return card.getBoundingClientRect().width + gap;
    };

    const scrollByCard = (container, dir) => {
      const amount = getStep(container);
      if (!amount) return;
      container.scrollBy({ left: dir * amount, behavior: "smooth" });
    };

    const setupDragScroll = (container) => {
      let isDown = false;
      let startX = 0;
      let scrollLeft = 0;

      container.addEventListener("pointerdown", (e) => {
        isDown = true;
        startX = e.clientX;
        scrollLeft = container.scrollLeft;
        container.style.cursor = "grabbing";
        container.setPointerCapture(e.pointerId);
      });

      container.addEventListener("pointermove", (e) => {
        if (!isDown) return;
        e.preventDefault();
        const walk = startX - e.clientX;
        container.scrollLeft = scrollLeft + walk;
      });

      const endDrag = (e) => {
        if (!isDown) return;
        isDown = false;
        container.style.cursor = "grab";
        if (e.pointerId !== undefined) {
          container.releasePointerCapture(e.pointerId);
        }
      };

      container.addEventListener("pointerup", endDrag);
      container.addEventListener("pointerleave", endDrag);
    };

    document.querySelectorAll("[data-carousel-button]").forEach((btn) => {
      btn.addEventListener("click", () => {
        const id = btn.getAttribute("data-carousel-button");
        const dir = btn.getAttribute("data-carousel-dir") === "next" ? 1 : -1;
        const container = document.getElementById(id);
        if (container) scrollByCard(container, dir);
      });
    });

    document.querySelectorAll("#carousel-work, #carousel-services, #carousel-about, #carousel-testimonials").forEach((container) => {
      container.style.cursor = "grab";
      setupDragScroll(container);
    });

    const header = document.getElementById("site-header");

    window.addEventListener("scroll", () => {
      const currentY = window.scrollY;
      header.classList.toggle("header-floating", currentY > 8);
      if (currentY > 8) {
        header.classList.remove("-mx-5");
        header.classList.add("mx-auto");
      } else {
        header.classList.add("-mx-5");
        header.classList.remove("mx-auto");
      }
    }, { passive: true });
  </script>
</body>
</html>

<!-- /wp:html -->