Widget Playground

<style>
.glow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #00c8ff;
  color: #080810;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(0,200,255,0.4);
  transition: all 0.3s ease;
  animation: pulse-glow 2s infinite;
}
.glow-btn:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(0,200,255,0.6);
}
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 24px rgba(0,200,255,0.4); }
  50% { box-shadow: 0 0 40px rgba(0,200,255,0.7); }
}
</style>

<button class="glow-btn">
  Let's Talk ✦
</button>

<style>
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,200,255,0.15);
  border-radius: 20px;
  padding: 32px;
  max-width: 280px;
  text-align: center;
  color: #e8e8f0;
  font-family: 'DM Sans', sans-serif;
}
.glass-card h3 {
  font-size: 2rem;
  font-weight: 800;
  color: #00c8ff;
  margin: 0 0 8px;
}
.glass-card p {
  font-size: 0.9rem;
  color: #8080a0;
  margin: 0;
}
</style>

<div class="glass-card">
  <h3>50+</h3>
  <p>Projects Completed</p>
</div>

<style>
.skill { margin-bottom: 20px; }
.skill-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: #e8e8f0;
  margin-bottom: 8px;
}
.skill-track {
  height: 6px;
  background: rgba(0,200,255,0.08);
  border-radius: 100px;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  background: linear-gradient(90deg,#00c8ff,#0080ff);
  border-radius: 100px;
  width: 0;
  transition: width 1.2s ease;
}
</style>

<div class="skill">
  <div class="skill-label">
    <span>WordPress</span>
    <span>95%</span>
  </div>
  <div class="skill-track">
    <div class="skill-fill" id="sf"></div>
  </div>
</div>

<script>
  setTimeout(() =>
    document.getElementById('sf')
    .style.width = '95%', 300);
</script>