{
  "html": "<section class='projects'><div class='projects__blob projects__blob--1'></div><div class='projects__blob projects__blob--2'></div><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 10 10 10 10 0 0 0-10-10z'/><path d='M12 6v6l4 2'/></svg></div><h3 class='projects__card-title'>Нейрокад</h3><p class='projects__card-text'>Инструмент для автоматизации проектирования с помощью нейросетей.</p></a><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации email-адресов в реальном времени.</p></a></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; animation: projects-breathe 4s ease-in-out infinite; } .projects .projects__blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px); opacity: 0.55; z-index: 0; } .projects .projects__blob--1 { width: 420px; height: 420px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #60a5fa 0%, rgba(96, 165, 250, 0) 70%); animation: projects-blob-move-1 14s ease-in-out infinite; animation-delay: 0.2s; } .projects .projects__blob--2 { width: 380px; height: 380px; bottom: -140px; right: -80px; background: radial-gradient(circle at 70% 70%, #3b82f6 0%, rgba(59, 130, 246, 0) 70%); animation: projects-blob-move-2 16s ease-in-out infinite; animation-delay: 0.2s; } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__card { position: relative; } .projects .projects__card::before { content: ''; position: absolute; top: 20px; right: 20px; width: 10px; height: 10px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); transform: scale(0); transform-origin: center; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .projects .projects__card:hover::before, .projects .projects__card:focus-visible::before { transform: scale(1); } .projects .projects__card:focus-within { box-shadow: 0 12px 32px rgba(37, 99, 235, 0.2); transform: translateY(-4px); } @keyframes projects-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } } @keyframes projects-blob-move-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 40px) scale(1.15); } } @keyframes projects-blob-move-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -40px) scale(1.1); } }"
}