---
layout: default
title: Playground - Shivering
description: Explore experimental web projects and interactive demos including animated skill bars, calculators, pixel art tools, weather widgets, and creative coding experiments.
---

<h1>🧪 Playground</h1>
<p>Experimental projects and demos</p>

<div class="playground-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 24px;">
  <a href="calculator/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Numbers icon">🔢</span> Calculator</h2>
    <p style="margin: 0; font-size: 14px;">Simple calculator without JavaScript</p>
  </a>

  <a href="pixelart/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Artist palette icon">🎨</span> Pixel Art</h2>
    <p style="margin: 0; font-size: 14px;">Draw pixel art in your browser</p>
  </a>

  <a href="weather/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Sun behind cloud icon">🌤️</span> Weather</h2>
    <p style="margin: 0; font-size: 14px;">Weather application demo</p>
  </a>

  <a href="animated-skills-bar/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Chart icon">📊</span> Animated Skills</h2>
    <p style="margin: 0; font-size: 14px;">Animated skill bars</p>
  </a>

  <a href="funky-tags/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Label icon">🏷️</span> Funky Tags</h2>
    <p style="margin: 0; font-size: 14px;">Stylish tag components</p>
  </a>

  <a href="signature/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Writing hand icon">✍️</span> Signature</h2>
    <p style="margin: 0; font-size: 14px;">Digital signature pad</p>
  </a>

  <a href="loading-animation/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Hourglass icon">⏳</span> Loading Animation</h2>
    <p style="margin: 0; font-size: 14px;">Reusable loading spinner component</p>
  </a>

  <a href="scroll-animations/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Scroll icon">📜</span> Scroll Animations</h2>
    <p style="margin: 0; font-size: 14px;">Scroll-triggered effects</p>
  </a>

  <a href="magic-8ball/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Crystal ball icon">🔮</span> Magic 8-Ball</h2>
    <p style="margin: 0; font-size: 14px;">Ask a question and get mystical answers</p>
  </a>

  <a href="tools/" style="display: block; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none;">
    <h2 style="margin: 0 0 8px 0;"><span role="img" aria-label="Wrench icon">🔧</span> Professional Toolset</h2>
    <p style="margin: 0; font-size: 14px;">PDF and image processing tools</p>
  </a>
</div>

<style>
  .playground-grid a:focus {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
  }

  @media (max-width: 480px) {
    .playground-grid {
      grid-template-columns: 1fr !important;
      gap: 12px !important;
    }

    .playground-grid a {
      padding: 12px !important;
    }

    .playground-grid h2 {
      font-size: 1.1rem;
    }

    .playground-grid p {
      font-size: 13px !important;
    }
  }
</style>