{
  "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><span class='projects__card-link' 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' 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><span class='projects__card-link' aria-hidden='true'></span></a></div></div></section>",
  "css": ".projects .projects__card { position: relative; background: rgba(248, 250, 252, 0.65); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(59, 130, 246, 0.14); overflow: hidden; } .projects .projects__card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(37, 99, 235, 0.06) 45%, rgba(255, 255, 255, 0) 70%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .projects .projects__card:hover::before, .projects .projects__card:focus-within::before { opacity: 1; } .projects .projects__card:hover { box-shadow: 0 18px 36px rgba(37, 99, 235, 0.18); transform: translateY(-4px); } .projects .projects__card-title { position: relative; display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .projects .projects__card:focus-within .projects__card-title { clip-path: inset(0 0 0 0); } .projects .projects__card-text { position: relative; clip-path: inset(0 100% 0 0); transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.08s; } .projects .projects__card:focus-within .projects__card-text { clip-path: inset(0 0 0 0); } .projects .projects__card-link { position: absolute; left: 32px; right: 32px; bottom: 20px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #2563eb); background-size: 200% 100%; opacity: 0; transform: scaleX(0); transform-origin: left center; transition: opacity 0.3s ease, transform 0.4s ease; } .projects .projects__card:hover .projects__card-link, .projects .projects__card:focus-within .projects__card-link { opacity: 1; transform: scaleX(1); animation: projects-underline-run 2.4s linear infinite; animation-delay: 0.2s; } @keyframes projects-underline-run { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }"
}