Designer Portfolio Hero Section

<section class="sm:py-24 lg:py-32 pt-24 pb-24 px-8"
  data-element-locator="html &gt; body:nth-of-type(1) &gt; div:nth-of-type(1) &gt; section:nth-of-type(1)">
  <div class="max-w-4xl [animation:fadeSlideIn_0.8s_ease-out_0s_both] animate-on-scroll">
    <h1
      class="text-5xl sm:text-6xl lg:text-8xl md:text-7xl leading-[1.05] font-medium text-neutral-900 mb-6 font-geist tracking-tighter">
      Designing digital
      <img alt="Product UI" class="inline-block align-middle sm:h-16 sm:w-28 md:h-20 md:w-36 lg:h-24 lg:w-40 w-16 h-12 object-cover rounded-2xl mr-2 ml-2 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/5fb37561-0fbe-434c-aa29-2fd9d562d134_320w.webp">
      experiences that users love
      <img alt="Design system" class="inline-block align-middle sm:h-16 sm:w-20 md:h-20 md:w-28 lg:h-24 lg:w-32 w-14 h-12 object-cover rounded-2xl mr-2 ml-2 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/30104e3c-5eea-4b93-93e9-5313698a7156_320w.webp">
    </h1>
    <p
      class="text-lg sm:text-xl text-neutral-600 mb-8 max-w-2xl leading-relaxed font-geist [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll">
      UI/UX Designer based in San Francisco. I craft intuitive interfaces
      and design systems that help teams build better products—from
      zero-to-one to scale.
    </p>
    <div class="flex flex-wrap gap-2.5 mb-8 [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll">
      <span class="inline-flex items-center gap-2 text-xs text-neutral-700 bg-neutral-100 border-neutral-200 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-geist shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px]">
          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" class=""></path>
          <polyline points="7.5 4.21 12 6.81 16.5 4.21" class=""></polyline>
          <polyline points="7.5 19.79 7.5 14.6 3 12" class=""></polyline>
          <polyline points="21 12 16.5 14.6 16.5 19.79" class=""></polyline>
          <polyline points="3.27 6.96 12 12.01 20.73 6.96" class=""></polyline>
          <line x1="12" y1="22.08" x2="12" y2="12" class=""></line>
        </svg>
        UI/UX Design
      </span>
      <span class="inline-flex items-center gap-2 text-xs text-neutral-700 bg-neutral-100 border border-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-geist shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px]">
          <rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
          <rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
          <rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
          <rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
        </svg>
        Design Systems
      </span>
      <span class="inline-flex items-center gap-2 text-xs text-neutral-700 bg-neutral-100 border border-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-geist shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px]">
          <rect width="18" height="18" x="3" y="3" rx="2" class=""></rect>
          <path d="M9 3v18" class=""></path>
          <path d="M9 15h12" class=""></path>
        </svg>
        Prototyping
      </span>
      <span class="inline-flex items-center gap-2 text-xs text-neutral-700 bg-neutral-100 border border-neutral-200 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-geist shadow-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="w-[14px] h-[14px]">
          <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" class=""></path>
          <circle cx="12" cy="12" r="3" class=""></circle>
        </svg>
        User Research
      </span>
    </div>
    <div
      class="flex flex-col sm:flex-row items-start gap-3 sm:gap-4 [animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll">
      <div class="button-wrap relative z-10 rounded-full bg-transparent pointer-events-none">
        <button class="glass-button all-unset cursor-pointer relative rounded-full pointer-events-auto z-30 outline-none focus:outline-none">
          <span class="button-text relative block select-none font-medium text-base text-neutral-800 tracking-tight px-6 py-3.5 font-geist" style="font-size: 17px;">
            View my work
          </span>
          <div class="button-shine"></div>
        </button>
        <style>
          @property --angle-1 {
            syntax: "<angle>";
            inherits: false;
            initial-value: -75deg
          }

          @property --angle-2 {
            syntax: "<angle>";
            inherits: false;
            initial-value: -45deg
          }

          .button-wrap {
            transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1)
          }

          .glass-button {
            background: linear-gradient(-75deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.25em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em rgba(255, 255, 255, 0.2) inset, 0 0 0 0 rgba(255, 255, 255, 1);
            backdrop-filter: blur(clamp(1px, 0.125em, 4px));
            transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1)
          }

          .glass-button:hover {
            transform: scale(0.975);
            backdrop-filter: blur(0.01em);
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.15em 0.05em -0.1em rgba(0, 0, 0, 0.25), 0 0 0.05em 0.1em rgba(255, 255, 255, 0.5) inset, 0 0 0 0 rgba(255, 255, 255, 1)
          }

          .glass-button:active {
            transform: scale(0.95) rotate3d(1, 0, 0, 25deg);
            box-shadow: inset 0 0.125em 0.125em rgba(0, 0, 0, 0.05), inset 0 -0.125em 0.125em rgba(255, 255, 255, 0.5), 0 0.125em 0.125em -0.125em rgba(0, 0, 0, 0.2), 0 0 0.1em 0.25em rgba(255, 255, 255, 0.2) inset, 0 0.225em 0.05em 0 rgba(0, 0, 0, 0.05), 0 0.25em 0 0 rgba(255, 255, 255, 0.75), inset 0 0.25em 0.05em 0 rgba(0, 0, 0, 0.15)
          }

          .button-text {
            text-shadow: 0em 0.25em 0.05em rgba(0, 0, 0, 0.1);
            transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1)
          }

          .glass-button:hover .button-text {
            text-shadow: 0.025em 0.025em 0.025em rgba(0, 0, 0, 0.12)
          }

          .glass-button:active .button-text {
            text-shadow: 0.025em 0.25em 0.05em rgba(0, 0, 0, 0.12)
          }

          .glass-button::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 999px;
            width: calc(100% + 2px);
            height: calc(100% + 2px);
            top: -1px;
            left: -1px;
            padding: 1px;
            box-sizing: border-box;
            background: conic-gradient(from var(--angle-1) at 50% 50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 5% 40%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 60% 95%, rgba(0, 0, 0, 0.5)), linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
            transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1), --angle-1 500ms ease;
            box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5)
          }

          .glass-button:hover::after {
            --angle-1: -125deg
          }

          .glass-button:active::after {
            --angle-1: -75deg
          }

          .button-shine {
            position: absolute;
            inset: 0;
            border-radius: 999px;
            width: calc(100% - 1px);
            height: calc(100% - 1px);
            top: 0.5px;
            left: 0.5px;
            background: linear-gradient(var(--angle-2), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 40% 50%, rgba(255, 255, 255, 0) 55%);
            mix-blend-mode: screen;
            pointer-events: none;
            background-size: 200% 200%;
            background-position: 0% 50%;
            background-repeat: no-repeat;
            transition: background-position 500ms cubic-bezier(0.25, 1, 0.5, 1), --angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1)
          }

          .glass-button:hover .button-shine {
            background-position: 25% 50%
          }

          .glass-button:active .button-shine {
            background-position: 50% 15%;
            --angle-2: -15deg
          }
        </style>
      </div>
      <a href="mailto:hello@jinsung.design"
        class="inline-flex items-center justify-center hover:bg-neutral-100 text-base font-medium text-neutral-900 bg-white border-neutral-200 border rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] font-geist">
        Contact me
      </a>
    </div>
  </div>
  <div
    class="mt-16 grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 [animation:fadeSlideIn_0.8s_ease-out_0.8s_both] animate-on-scroll">
    <div
      class="relative overflow-hidden rounded-3xl aspect-square ring-1 ring-neutral-200 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c8e48a5a-a172-4ead-919c-bf35b5db4dc8_800w.webp" alt="3D Blue Navigation Pin App Icon" class="w-full h-full object-cover">
    </div>
    <div
      class="relative overflow-hidden rounded-3xl aspect-square ring-1 ring-neutral-200 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/6a3354ce-cfb4-4e82-b458-faabddc2d0bd_800w.webp" alt="Glowing Blue Minimalist Clock Icon" class="w-full h-full object-cover">
    </div>
    <div
      class="relative overflow-hidden rounded-3xl aspect-square ring-1 ring-neutral-200 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/bf763d5d-3860-46d9-843b-a85136ecf41b_800w.jpg" class="w-full h-full object-cover">
    </div>
    <div
      class="relative overflow-hidden rounded-3xl aspect-square ring-1 ring-neutral-200 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
      <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2a5d80ec-fd5e-4db7-9b51-378cd6af85f2_800w.jpg" alt="3D Glass Code Icon on Sky Background" class="w-full h-full object-cover">
    </div>
  </div>
  <style>
    .button {
      cursor: pointer;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: all 0.25s ease;
      background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(255, 165, 0, 0.8) 0%, rgba(255, 165, 0, 0) 100%), linear-gradient(0deg, #f97316, #f97316);
      border-radius: 9999px;
      border: none;
      outline: none;
      padding: 12px 24px;
      min-height: 48px;
      min-width: 102px
    }

    .button::before,
    .button::after {
      content: "";
      position: absolute;
      transition: all 0.5s ease-in-out;
      z-index: 0
    }

    .button::before {
      inset: 1px;
      background: linear-gradient(177.95deg, rgba(255, 255, 255, 0.19) 0%, rgba(255, 255, 255, 0) 100%);
      border-radius: 9999px
    }

    .button::after {
      inset: 2px;
      background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(255, 165, 0, 0.8) 0%, rgba(255, 165, 0, 0) 100%), linear-gradient(0deg, #f97316, #f97316);
      border-radius: 9999px
    }

    .button:active {
      transform: scale(0.95)
    }

    .points_wrapper {
      overflow: hidden;
      width: 100%;
      height: 100%;
      pointer-events: none;
      position: absolute;
      z-index: 1
    }

    .points_wrapper .point {
      bottom: -10px;
      position: absolute;
      animation: floating-points infinite ease-in-out;
      pointer-events: none;
      width: 2px;
      height: 2px;
      background-color: #fff;
      border-radius: 9999px
    }

    @keyframes floating-points {
      0% {
        transform: translateY(0)
      }

      85% {
        opacity: 0
      }

      100% {
        transform: translateY(-55px);
        opacity: 0
      }
    }

    .points_wrapper .point:nth-child(1) {
      left: 10%;
      opacity: 1;
      animation-duration: 2.35s;
      animation-delay: 0.2s
    }

    .points_wrapper .point:nth-child(2) {
      left: 30%;
      opacity: 0.7;
      animation-duration: 2.5s;
      animation-delay: 0.5s
    }

    .points_wrapper .point:nth-child(3) {
      left: 25%;
      opacity: 0.8;
      animation-duration: 2.2s;
      animation-delay: 0.1s
    }

    .points_wrapper .point:nth-child(4) {
      left: 44%;
      opacity: 0.6;
      animation-duration: 2.05s
    }

    .points_wrapper .point:nth-child(5) {
      left: 50%;
      opacity: 1;
      animation-duration: 1.9s
    }

    .points_wrapper .point:nth-child(6) {
      left: 75%;
      opacity: 0.5;
      animation-duration: 1.5s;
      animation-delay: 1.5s
    }

    .points_wrapper .point:nth-child(7) {
      left: 88%;
      opacity: 0.9;
      animation-duration: 2.2s;
      animation-delay: 0.2s
    }

    .points_wrapper .point:nth-child(8) {
      left: 58%;
      opacity: 0.8;
      animation-duration: 2.25s;
      animation-delay: 0.2s
    }

    .points_wrapper .point:nth-child(9) {
      left: 98%;
      opacity: 0.6;
      animation-duration: 2.6s;
      animation-delay: 0.1s
    }

    .points_wrapper .point:nth-child(10) {
      left: 65%;
      opacity: 1;
      animation-duration: 2.5s;
      animation-delay: 0.2s
    }

    .inner {
      z-index: 2;
      gap: 6px;
      position: relative;
      width: 100%;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 500;
      line-height: 1.5;
      transition: color 0.2s ease-in-out
    }

    .inner svg.icon {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
      stroke: white;
      fill: none
    }

    .button:hover svg.icon {
      transform: translateX(2px)
    }

    .button:hover svg.icon path {
      animation: dash 0.8s linear forwards
    }

    @keyframes dash {
      0% {
        stroke-dasharray: 0, 20;
        stroke-dashoffset: 0
      }

      50% {
        stroke-dasharray: 10, 10;
        stroke-dashoffset: -5
      }

      100% {
        stroke-dasharray: 20, 0;
        stroke-dashoffset: -10
      }
    }
  </style>
</section>