{
  "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' xmlns='http://www.w3.org/2000/svg'><path d='M12 2L2 7L12 12L22 7L12 2Z' stroke='#2563EB' stroke-width='2' stroke-linejoin='round'/><path d='M2 17L12 22L22 17' stroke='#2563EB' stroke-width='2' stroke-linejoin='round'/><path d='M2 12L12 17L22 12' stroke='#2563EB' 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'><div class='projects__icon'><svg width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='2' y='4' width='20' height='16' rx='2' stroke='#2563EB' stroke-width='2'/><path d='M22 6L12 13L2 6' stroke='#2563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации электронных адресов в реальном времени.</p><span class='projects__link projects__link--reverse'>Подробнее</span></a></div></div><div class='projects__particles' aria-hidden='true'><span class='projects__particle projects__particle--1'></span><span class='projects__particle projects__particle--2'></span><span class='projects__particle projects__particle--3'></span><span class='projects__particle projects__particle--4'></span><span class='projects__particle projects__particle--5'></span><span class='projects__particle projects__particle--6'></span><span class='projects__particle projects__particle--7'></span><span class='projects__particle projects__particle--8'></span></div></section>",
  "css": ".projects { position: relative; overflow: hidden; } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, #60a5fa 60%, #3b82f6 100%); box-shadow: 0 0 8px rgba(96, 165, 250, 0.6); opacity: 0; animation: projects-particle-float 12s linear infinite; } .projects .projects__particle--1 { left: 8%; top: 20%; animation-delay: 0s; animation-duration: 11s; } .projects .projects__particle--2 { left: 22%; top: 70%; animation-delay: 1.5s; animation-duration: 14s; width: 4px; height: 4px; } .projects .projects__particle--3 { left: 38%; top: 35%; animation-delay: 3s; animation-duration: 10s; } .projects .projects__particle--4 { left: 52%; top: 80%; animation-delay: 0.8s; animation-duration: 13s; width: 5px; height: 5px; } .projects .projects__particle--5 { left: 66%; top: 15%; animation-delay: 2.2s; animation-duration: 12s; } .projects .projects__particle--6 { left: 78%; top: 60%; animation-delay: 4s; animation-duration: 15s; width: 4px; height: 4px; } .projects .projects__particle--7 { left: 90%; top: 30%; animation-delay: 1s; animation-duration: 11s; } .projects .projects__particle--8 { left: 15%; top: 50%; animation-delay: 3.5s; animation-duration: 13s; width: 5px; height: 5px; } @keyframes projects-particle-float { 0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; } 10% { opacity: 0.9; } 50% { transform: translate3d(30px, -60px, 0) scale(1); opacity: 0.7; } 90% { opacity: 0.2; } 100% { transform: translate3d(-20px, -140px, 0) scale(0.5); opacity: 0; } } .projects .projects__card-title { background-image: linear-gradient(90deg, #1e293b 0%, #1e293b 100%); background-clip: text; -webkit-background-clip: text; transition: color 0.3s; } .projects .projects__card:hover .projects__card-title { animation: projects-title-reveal 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes projects-title-reveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } } .projects .projects__card:focus-within .projects__link { background-position: 100% 100%; animation: projects-link-run 1.6s linear infinite; } .projects .projects__card:focus-within .projects__link--reverse { animation: projects-link-run-reverse 1.6s linear infinite; } .projects .projects__card:focus-within { transform: translateY(-6px) scale(1.02); background: rgba(255, 255, 255, 0.9); box-shadow: 0 24px 40px -12px rgba(37, 99, 235, 0.25), 0 8px 16px -8px rgba(37, 99, 235, 0.15); } .projects .projects__card:focus-within::after { left: 150%; } @keyframes projects-link-run { 0% { background-position: 0% 100%; } 100% { background-position: 200% 100%; } } @keyframes projects-link-run-reverse { 0% { background-position: 200% 100%; } 100% { background-position: 0% 100%; } }"
}