<!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" />
  <style>
    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }
    .header-floating {
      width: min(860px, calc(100% - 4rem));
      margin: 3.5rem 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.5);
      backdrop-filter: blur(12px);
    }
    .global-glow {
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(circle at 10% 10%, rgba(16, 185, 129, 0.22), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(20, 184, 166, 0.18), transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(56, 189, 248, 0.16), transparent 55%),
        linear-gradient(120deg, rgba(15, 23, 42, 0.04), rgba(255, 255, 255, 0.2));
      filter: blur(60px);
      opacity: 0.55;
      pointer-events: none;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 85%);
      -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0) 85%);
    }
  </style>
</head>
<body>
      <nav id="site-header">
        PortoAdib
          <a href="#work">Work</a>
          <a href="#services">Services</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
      </nav>
      <section>
          <p>UI/UX Designer</p>
          <h1>
            Mendesain produk digital yang rapi, jelas, dan terasa manusiawi.
          </h1>
          <p>
            PortoAdib fokus pada riset, flow yang sederhana, dan visual yang konsisten. Semua konten masih dummy.
          </p>
            Strategy
            Research
            Design System
            Prototype
            <a href="#contact">
              Book a Call
            </a>
            <a href="#work">
              View Case Studies
            </a>
            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=900&q=80" alt="Workspace design" />
                6+
                Years
                38
                Projects
                14
                Brands
      </section>
            Product Design - Mobile App - SaaS Dashboard - Brand System - Research - Prototyping -
            Product Design - Mobile App - SaaS Dashboard - Brand System - Research - Prototyping -
      <section id="work">
            <h2>Selected Work</h2>
            <p>Ringkas, fokus pada dampak dan hasil.</p>
            <button data-carousel-button="carousel-work" data-carousel-dir="prev">Prev</button>
            <button data-carousel-button="carousel-work" data-carousel-dir="next">Next</button>
            <article data-card>
              <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=900&q=80" alt="Analytics dashboard" />
            <p>Fintech - Dashboard</p>
            <h3>Helio - alur subscription lebih cepat</h3>
            <p>Informasi dipadatkan, keputusan finance lebih cepat.</p>
          </article>
            <article data-card>
            <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=900&q=80" alt="Team collaboration" />
            <p>SaaS - Collaboration</p>
            <h3>Nova - onboarding lebih singkat</h3>
            <p>Aktivasi naik, drop-off turun di minggu pertama.</p>
          </article>
            <article data-card>
            <img src="https://images.unsplash.com/photo-1523475472560-d2df97ec485c?auto=format&fit=crop&w=900&q=80" alt="Mobile experience" />
            <p>Lifestyle - Mobile</p>
            <h3>Meraki - habit tracking yang hangat</h3>
            <p>Copy dan motion ringan untuk konsistensi harian.</p>
          </article>
            <article data-card>
              <img src="https://images.unsplash.com/photo-1487014679447-9f8336841d58?auto=format&fit=crop&w=900&q=80" alt="Brand studio" />
              <p>Brand - Identity</p>
              <h3>Luma - sistem visual modular</h3>
              <p>Brand kit fleksibel untuk kampanye cepat.</p>
            </article>
            <article data-card>
              <img src="https://images.unsplash.com/photo-1492724441997-5dc865305da7?auto=format&fit=crop&w=900&q=80" alt="Retail analytics" />
              <p>Retail - Analytics</p>
              <h3>Atlas - insight toko harian</h3>
              <p>Dashboard ringkas untuk operasional outlet.</p>
            </article>
      </section>
      <section id="services">
            <h2>Services</h2>
            <p>Paket fleksibel sesuai kebutuhan tim.</p>
            <button data-carousel-button="carousel-services" data-carousel-dir="prev">Prev</button>
            <button data-carousel-button="carousel-services" data-carousel-dir="next">Next</button>
              <h3>Discovery Sprint</h3>
            <p>Audit UX, mapping masalah, dan prioritas solusi.</p>
            <h3>Product UX</h3>
            <p>Wireframe hingga testing untuk iterasi cepat.</p>
            <h3>Visual Identity</h3>
            <p>Guideline komponen dan art direction.</p>
              <h3>Design System</h3>
              <p>Library komponen untuk konsistensi multi-team.</p>
              <h3>UX Writing</h3>
              <p>Microcopy yang jelas dan bersuara brand.</p>
      </section>
      <section id="about">
            <h2>About PortoAdib</h2>
            <p>Riset, sistem, dan storytelling visual yang fokus.</p>
            <button data-carousel-button="carousel-about" data-carousel-dir="prev">Prev</button>
            <button data-carousel-button="carousel-about" data-carousel-dir="next">Next</button>
              <h3>Workflow</h3>
            <p>Problem framing, journey, hingga design QA.</p>
            <h3>Tools</h3>
            <p>Figma, FigJam, Notion, Webflow (dummy).</p>
            <h3>Values</h3>
            <p>Empati, jelas, dan berani eksplorasi.</p>
              <h3>Process</h3>
              <p>Workshop, synthesis, hingga roadmap visual.</p>
              <h3>Focus</h3>
              <p>Sederhana, usable, dan scalable untuk growth.</p>
      </section>
      <section>
            <h2>Testimonials</h2>
            <p>Respons dari tim yang pernah kolaborasi.</p>
            <button data-carousel-button="carousel-testimonials" data-carousel-dir="prev">Prev</button>
            <button data-carousel-button="carousel-testimonials" data-carousel-dir="next">Next</button>
              <p>"Kolaborasinya cepat, keputusan tim lebih tajam."</p>
          <p>Andi - Product Lead</p>
          <p>"Desain rapi dan insight-nya selalu to the point."</p>
          <p>Rina - Founder</p>
              <p>"Komunikasi jelas, timeline selalu on track."</p>
              <p>Dewi - PM</p>
              <p>"Sistem desainnya mudah diadopsi tim dev."</p>
              <p>Rafi - Tech Lead</p>
      </section>
      <section id="contact">
            <h2>Siap kolaborasi?</h2>
            <p>Sesi singkat 30 menit untuk bahas kebutuhan produk.</p>
              hello@portoadib.com
              Jakarta - Remote
              <a href="mailto:hello@portoadib.com">Email Me</a>
              <a href="#work">Download CV</a>
      </section>
      <footer>
        (c) 2025 PortoAdib
        Behance - Dribbble - LinkedIn
      </footer>
</body>
</html>