{
  "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='#3B82F6' stroke-width='2' stroke-linejoin='round'/><path d='M2 17L12 22L22 17' stroke='#3B82F6' stroke-width='2' stroke-linejoin='round'/><path d='M2 12L12 17L22 12' stroke='#3B82F6' stroke-width='2' stroke-linejoin='round'/></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 width='32' height='32' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M4 4H20V20H4V4Z' stroke='#3B82F6' stroke-width='2' stroke-linejoin='round'/><path d='M8 12L11 15L16 9' stroke='#3B82F6' 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></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; border-radius: 4px; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #3b82f6, #2563eb); background-size: 200% 100%; transform: translateX(-50%); animation: projects-wave-line 3s ease-in-out infinite; } @keyframes projects-wave-line { 0% { background-position: 0% 50%; transform: translateX(-50%) scaleX(0.85); } 50% { background-position: 100% 50%; transform: translateX(-50%) scaleX(1); } 100% { background-position: 0% 50%; transform: translateX(-50%) scaleX(0.85); } } .projects .projects__card { position: relative; overflow: hidden; } .projects .projects__card::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: linear-gradient(180deg, #2563eb, #3b82f6, #60a5fa); transform: skewY(-8deg) translateY(-100%); transform-origin: top left; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .projects .projects__card:hover::before { transform: skewY(-8deg) translateY(0); } .projects .projects__card-title { position: relative; display: inline-block; } .projects .projects__card-title::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #2563eb); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; } .projects .projects__card:hover .projects__card-title::after { transform: scaleX(1); animation: projects-run-gradient 1.6s linear infinite; } @keyframes projects-run-gradient { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }"
}