Gradient ring skills

.card-068 {
  width: 250px;
  padding: 26px 20px 22px;
  text-align: center;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-068__ring {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  padding: 4px;
  border-radius: 50%;
  background: conic-gradient(#f97316,#ec4899,#8b5cf6,#f97316);
  transition: transform .3s
}
.card-068__ring span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(135deg,#fde68a,#fb923c)
}
.card-068:hover .card-068__ring {
  transform: rotate(180deg) scale(1.05)
}
.card-068 h3 {
  margin: 0;
  font-size: 17px
}
.card-068 p {
  margin: 4px 0 14px;
  font-size: 13px;
  color: #6b7280
}
.card-068__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px
}
.card-068__tags i {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f4f6;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #374151
}

<article class="card-068">
  <div class="card-068__ring"><span></span></div>
  <h3>Kenji Watanabe</h3>
  <p>Motion designer · Tokyo</p>
  <div class="card-068__tags"><i>After Effects</i><i>Rive</i><i>CSS</i></div>
</article>