{
  "html": "<section class='projects'><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card'><span class='projects__shine'></span><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M12 2L2 7L12 12L22 7L12 2Z' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/><path d='M2 17L12 22L22 17' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/><path d='M2 12L12 17L22 12' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/></svg></div><h3 class='projects__card-title'>Нейрокад</h3><p class='projects__card-text'>Инструмент для автоматизированного проектирования с использованием нейросетей.</p><span class='projects__link'>Подробнее</span></a><a href='#' class='projects__card'><span class='projects__shine'></span><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 4H20V20H4V4Z' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/><path d='M8 12L11 15L16 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации email-адресов в реальном времени.</p><span class='projects__link'>Подробнее</span></a></div><div class='projects__particles' aria-hidden='true'><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span><span class='projects__particle'></span></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; animation: projects-breathe 6s ease-in-out infinite; } .projects .projects__inner { position: relative; z-index: 2; } .projects .projects__card { position: relative; overflow: hidden; } .projects .projects__shine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(96,165,250,0.35) 45%, rgba(255,255,255,0.85) 50%, rgba(96,165,250,0.35) 55%, rgba(255,255,255,0) 70%); transform: translateX(-120%); transition: transform 0.9s ease; } .projects .projects__card:hover .projects__shine { transform: translateX(120%); } .projects .projects__link { position: relative; display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 600; color: #2563eb; padding-bottom: 4px; background-image: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb); background-size: 200% 2px; background-position: 100% 100%; background-repeat: no-repeat; transition: background-position 0.6s ease; } .projects .projects__card:hover .projects__link { background-position: 0% 100%; animation: projects-underline-reverse 2s linear infinite; } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; } .projects .projects__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #60a5fa; opacity: 0.5; animation: projects-float 4s ease-in-out infinite; } .projects .projects__particle:nth-child(1) { left: 8%; top: 70%; animation-delay: 0s; background: #3b82f6; } .projects .projects__particle:nth-child(2) { left: 22%; top: 40%; animation-delay: 0.6s; width: 6px; height: 6px; background: #93c5fd; } .projects .projects__particle:nth-child(3) { left: 45%; top: 80%; animation-delay: 1.2s; background: #60a5fa; } .projects .projects__particle:nth-child(4) { left: 68%; top: 30%; animation-delay: 1.8s; width: 10px; height: 10px; background: #bfdbfe; } .projects .projects__particle:nth-child(5) { left: 82%; top: 65%; animation-delay: 2.4s; background: #3b82f6; } .projects .projects__particle:nth-child(6) { left: 92%; top: 20%; animation-delay: 3s; width: 6px; height: 6px; background: #93c5fd; } @keyframes projects-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } } @keyframes projects-float { 0%, 100% { transform: translate(0, 0); opacity: 0.4; } 50% { transform: translate(14px, -22px); opacity: 0.85; } } @keyframes projects-underline-reverse { 0% { background-position: 100% 100%; } 100% { background-position: 0% 100%; } }"
}