---
layout: default
title: Shivering - Personal Projects
description: A shivering collection of personal web development projects - HTML5 games, interactive experiments, and creative playground demos.
keywords: HTML5 games, web games, JavaScript games, interactive demos, web development, portfolio, Snake, Tetris, Pong, Breakout
---

<h1>👋 Welcome to Shivering</h1>
<p>Personal projects and experiments in web development.</p>

<div style="margin-top: 48px;">
  <h2>🎮 Featured Sections</h2>

  <div class="featured-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 24px;">
    <a href="/games/" style="display: block; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;">
      <div class="emoji" style="font-size: 48px; margin-bottom: 16px;" role="img" aria-label="Game controller icon">🎮</div>
      <h3 style="margin: 0 0 8px 0; color: var(--text-primary);">Games</h3>
      <p style="margin: 0; color: var(--text-secondary);">Classic games built with HTML5 Canvas</p>
    </a>

    <a href="/playground/" style="display: block; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;">
      <div class="emoji" style="font-size: 48px; margin-bottom: 16px;" role="img" aria-label="Test tube icon">🧪</div>
      <h3 style="margin: 0 0 8px 0; color: var(--text-primary);">Playground</h3>
      <p style="margin: 0; color: var(--text-secondary);">Experimental projects and demos</p>
    </a>

    <a href="/jobs/" style="display: block; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;">
      <div class="emoji" style="font-size: 48px; margin-bottom: 16px;" role="img" aria-label="Briefcase icon">💼</div>
      <h3 style="margin: 0 0 8px 0; color: var(--text-primary);">Jobs</h3>
      <p style="margin: 0; color: var(--text-secondary);">Career opportunities</p>
    </a>
  </div>
</div>

<style>
  a[href^="/"] {
    transition: transform 0.2s, box-shadow 0.2s;
  }

  a[href^="/"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px var(--shadow);
  }

  a[href^="/"]:focus {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
  }

  @media (max-width: 768px) {
    .featured-grid {
      gap: 16px !important;
    }

    .featured-grid a {
      padding: 20px !important;
    }

    .featured-grid h3 {
      font-size: 1.3rem;
    }
  }

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

    .featured-grid a {
      padding: 16px !important;
    }

    .featured-grid .emoji {
      font-size: 36px !important;
      margin-bottom: 12px !important;
    }
  }
</style>