{
  "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></section>",
  "css": ".projects .projects__card { position: relative; overflow: hidden; backdrop-filter: blur(10px); background: rgba(248, 250, 252, 0.75); border: 1px solid rgba(37, 99, 235, 0.08); transition: box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s; } .projects .projects__card::after { content: ''; position: absolute; top: 0; left: -150%; width: 100%; height: 100%; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, rgba(96, 165, 250, 0.35) 60%, transparent 75%); transform: skewX(-20deg); transition: left 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; } .projects .projects__card:hover { 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:hover::after { left: 150%; } .projects .projects__icon { transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s; } .projects .projects__card:hover .projects__icon { transform: rotate(360deg); background: #DBEAFE; } .projects .projects__link { display: inline-block; position: relative; margin-top: 20px; font-size: 15px; font-weight: 600; color: #2563EB; text-decoration: none; padding-bottom: 4px; background-image: linear-gradient(90deg, #2563EB, #3B82F6, #60A5FA, #2563EB); background-size: 200% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-position 0.6s ease; } .projects .projects__link--reverse { background-image: linear-gradient(270deg, #2563EB, #3B82F6, #60A5FA, #2563EB); } .projects .projects__card:hover .projects__link { background-position: 100% 100%; animation: projects-link-run 1.6s linear infinite; } .projects .projects__card:hover .projects__link--reverse { animation: projects-link-run-reverse 1.6s linear infinite; } @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%; } }"
}