{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card'><div class='projects__icon'><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'/><path d='M12 6v6l4 2'/></svg></div><h3 class='projects__card-title'>Нейрокад</h3><p class='projects__card-text'>Инструмент для автоматизации проектирования с помощью нейросетей.</p><span class='projects__ripple' aria-hidden='true'></span></a><a href='#' class='projects__card'><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации электронных адресов в реальном времени.</p><span class='projects__ripple' aria-hidden='true'></span></a></div></div></section>",
  "css": ".projects .projects__title { position: relative; padding-bottom: 18px; } .projects .projects__title::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 120px; height: 4px; margin-left: -60px; border-radius: 4px; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #3b82f6, #2563eb); background-size: 200% 100%; animation: projects-wave-line 2.4s ease-in-out infinite; animation-delay: 0.2s; } .projects .projects__card { position: relative; overflow: hidden; } .projects .projects__card::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%); transform: translateX(0) skewX(-18deg); pointer-events: none; animation: projects-shine 5s ease-in-out infinite; } .projects .projects__card:nth-child(2)::before { animation-delay: 1.2s; } .projects .projects__ripple { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,0.35) 0%, rgba(59,130,246,0.15) 45%, rgba(59,130,246,0) 70%); transform: scale(0); opacity: 0; pointer-events: none; animation: projects-ripple 3s ease-out infinite; } .projects .projects__card:nth-child(2) .projects__ripple { animation-delay: 1.5s; } .projects .projects__card:hover .projects__ripple { animation-duration: 1.6s; } @keyframes projects-wave-line { 0% { background-position: 0% 50%; transform: scaleX(0.85); opacity: 0.7; } 50% { background-position: 100% 50%; transform: scaleX(1); opacity: 1; } 100% { background-position: 0% 50%; transform: scaleX(0.85); opacity: 0.7; } } @keyframes projects-shine { 0% { left: -60%; } 35% { left: 130%; } 100% { left: 130%; } } @keyframes projects-ripple { 0% { transform: scale(0); opacity: 0.9; } 70% { transform: scale(14); opacity: 0; } 100% { transform: scale(14); opacity: 0; } }"
}