{
  "html": "<section class='projects'><div class='projects__blob projects__blob--1'></div><div class='projects__blob projects__blob--2'></div><div class='projects__blob projects__blob--3'></div><div class='projects__particles'><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><span class='projects__particle'></span><span class='projects__particle'></span></div><div class='projects__inner'><h2 class='projects__title'>Мои проекты</h2><div class='projects__grid'><a href='#' class='projects__card'><div class='projects__icon'><svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a10 10 0 1 0 10 10 10 10 0 0 0-10-10z'/><path d='M12 6v6l4 2'/></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 xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис для валидации и верификации email-адресов в реальном времени.</p></a></div></div></section>",
  "css": ".projects { background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%); } .projects .projects__blob { filter: blur(70px); opacity: 0.45; } .projects .projects__blob--1 { background: radial-gradient(circle, #2563eb 0%, transparent 70%); } .projects .projects__blob--2 { background: radial-gradient(circle, #3b82f6 0%, transparent 70%); } .projects .projects__blob--3 { background: radial-gradient(circle, #60a5fa 0%, transparent 70%); } .projects .projects__particle { background: #3b82f6; box-shadow: 0 0 10px #3b82f6; } .projects .projects__particle:nth-child(2) { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; } .projects .projects__particle:nth-child(3) { background: #2563eb; box-shadow: 0 0 10px #2563eb; } .projects .projects__particle:nth-child(5) { background: #3b82f6; box-shadow: 0 0 10px #3b82f6; } .projects .projects__particle:nth-child(7) { background: #60a5fa; box-shadow: 0 0 10px #60a5fa; } .projects .projects__title { position: relative; display: inline-block; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa, #2563eb); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: projects-title-shine 6s linear infinite; } .projects .projects__title::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 60px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #60a5fa); transform: translateX(-50%); box-shadow: 0 0 12px rgba(37, 99, 235, 0.6); animation: projects-underline-pulse 3s ease-in-out infinite; } .projects .projects__card { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(59, 130, 246, 0.25); box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08); transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease; transform-style: preserve-3d; perspective: 1000px; } .projects .projects__card::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; background: linear-gradient(120deg, transparent 30%, rgba(96, 165, 250, 0.35) 50%, transparent 70%); background-size: 250% 250%; opacity: 0; transition: opacity 0.35s ease; animation: projects-card-sheen 4s linear infinite; pointer-events: none; z-index: 0; } .projects .projects__card > * { position: relative; z-index: 1; } .projects .projects__card:hover { box-shadow: 0 22px 44px rgba(37, 99, 235, 0.22), 0 0 0 1px rgba(59, 130, 246, 0.4); transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) scale(1.02); border-color: #3b82f6; } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__icon { background: linear-gradient(135deg, #2563eb, #60a5fa); color: #ffffff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35); transition: transform 0.35s ease, box-shadow 0.35s ease; } .projects .projects__card:hover .projects__icon { transform: scale(1.12) rotate(-6deg); box-shadow: 0 10px 26px rgba(37, 99, 235, 0.55); animation: projects-icon-pulse 1.6s ease-in-out infinite; } .projects .projects__card-title { transition: color 0.3s ease; } .projects .projects__card:hover .projects__card-title { color: #2563eb; } @keyframes projects-title-shine { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes projects-underline-pulse { 0%, 100% { width: 60px; opacity: 0.8; box-shadow: 0 0 12px rgba(37, 99, 235, 0.5); } 50% { width: 110px; opacity: 1; box-shadow: 0 0 22px rgba(59, 130, 246, 0.85); } } @keyframes projects-card-sheen { 0% { background-position: 0% 0%; } 100% { background-position: 250% 250%; } } @keyframes projects-icon-pulse { 0%, 100% { box-shadow: 0 10px 26px rgba(37, 99, 235, 0.5); } 50% { box-shadow: 0 10px 34px rgba(59, 130, 246, 0.85); } }"
}