{
  "html": "<section class='projects'><div class='projects__bg'><span class='projects__blob projects__blob--1'></span><span class='projects__blob projects__blob--2'></span><span class='projects__blob projects__blob--3'></span></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='#2563eb' 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='#2563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg></div><h3 class='projects__card-title'>Проверка Email</h3><p class='projects__card-text'>Сервис валидации и верификации email-адресов в реальном времени.</p></a></div></div></section>",
  "css": ".projects { position: relative; overflow: hidden; } .projects .projects__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .projects .projects__blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; } .projects .projects__blob--1 { width: 380px; height: 380px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #60a5fa, #2563eb 60%, transparent 70%); animation: projects-blob-float 14s ease-in-out infinite; } .projects .projects__blob--2 { width: 320px; height: 320px; bottom: -140px; right: -80px; background: radial-gradient(circle at 70% 70%, #a78bfa, #7c3aed 60%, transparent 70%); animation: projects-blob-float 18s ease-in-out infinite reverse; } .projects .projects__blob--3 { width: 260px; height: 260px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #22d3ee, #0891b2 60%, transparent 70%); animation: projects-blob-float 22s ease-in-out infinite; } .projects .projects__particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .projects .projects__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #2563eb; opacity: 0.35; box-shadow: 0 0 12px rgba(37, 99, 235, 0.6); } .projects .projects__particle:nth-child(1) { left: 10%; top: 80%; animation: projects-particle-rise 9s linear infinite; } .projects .projects__particle:nth-child(2) { left: 25%; top: 90%; width: 6px; height: 6px; animation: projects-particle-rise 12s linear infinite 2s; } .projects .projects__particle:nth-child(3) { left: 45%; top: 85%; animation: projects-particle-rise 10s linear infinite 1s; } .projects .projects__particle:nth-child(4) { left: 65%; top: 95%; width: 10px; height: 10px; animation: projects-particle-rise 14s linear infinite 3s; } .projects .projects__particle:nth-child(5) { left: 80%; top: 88%; width: 5px; height: 5px; animation: projects-particle-rise 11s linear infinite 0.5s; } .projects .projects__particle:nth-child(6) { left: 92%; top: 92%; animation: projects-particle-rise 13s linear infinite 4s; } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__title { background: linear-gradient(90deg, #2563eb, #7c3aed, #0891b2, #2563eb); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: projects-title-shine 6s linear infinite; } .projects .projects__grid { perspective: 1200px; } .projects .projects__card { position: relative; background: rgba(248, 250, 252, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(37, 99, 235, 0.12); transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease; animation: projects-card-pulse 4s ease-in-out infinite; } .projects .projects__card::before { content: ''; position: absolute; inset: -2px; border-radius: 22px; background: linear-gradient(135deg, rgba(37, 99, 235, 0.5), rgba(124, 58, 237, 0.4), rgba(8, 145, 178, 0.5)); opacity: 0; transition: opacity 0.35s ease; z-index: -1; filter: blur(8px); } .projects .projects__card:hover { transform: translateY(-8px) rotateX(6deg) rotateY(-6deg) scale(1.02); box-shadow: 0 24px 48px rgba(37, 99, 235, 0.25); border-color: rgba(37, 99, 235, 0.4); animation-play-state: paused; } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__icon { transition: transform 0.35s ease, box-shadow 0.35s ease; } .projects .projects__card:hover .projects__icon { transform: translateZ(30px) rotate(-6deg) scale(1.08); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12), 0 0 24px rgba(37, 99, 235, 0.45); } .projects .projects__card-title { transition: color 0.3s ease; } .projects .projects__card:hover .projects__card-title { color: #2563eb; } @keyframes projects-blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-30px, 25px) scale(0.95); } } @keyframes projects-particle-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.5; } 50% { transform: translateY(-260px) translateX(20px); opacity: 0.4; } 90% { opacity: 0.1; } 100% { transform: translateY(-520px) translateX(-20px); opacity: 0; } } @keyframes projects-title-shine { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes projects-card-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 0 0 0 rgba(37, 99, 235, 0.25); } 50% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04), 0 0 0 10px rgba(37, 99, 235, 0); } }"
}