{
  "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' style='--x: 10%; --y: 20%; --d: 0s;'></span><span class='projects__particle' style='--x: 25%; --y: 70%; --d: 1.2s;'></span><span class='projects__particle' style='--x: 45%; --y: 15%; --d: 2.4s;'></span><span class='projects__particle' style='--x: 65%; --y: 80%; --d: 0.6s;'></span><span class='projects__particle' style='--x: 80%; --y: 35%; --d: 1.8s;'></span><span class='projects__particle' style='--x: 92%; --y: 60%; --d: 3s;'></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 8v8'/><path d='M8 12h8'/></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'><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'>Сервис валидации и верификации электронных адресов в реальном времени.</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: 320px; height: 320px; background: radial-gradient(circle at 30% 30%, #4f6ef7, transparent 70%); top: -80px; left: -60px; animation: projects-blob-float 14s ease-in-out infinite; } .projects .projects__blob--2 { width: 280px; height: 280px; background: radial-gradient(circle at 70% 70%, #a855f7, transparent 70%); bottom: -100px; right: -40px; animation: projects-blob-float 18s ease-in-out infinite reverse; } .projects .projects__blob--3 { width: 220px; height: 220px; background: radial-gradient(circle at 50% 50%, #22d3ee, transparent 70%); top: 40%; left: 55%; 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; left: var(--x); top: var(--y); width: 8px; height: 8px; border-radius: 50%; background: #4f6ef7; box-shadow: 0 0 12px #4f6ef7; opacity: 0.7; animation: projects-particle-float 6s ease-in-out infinite; animation-delay: var(--d); } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__title { position: relative; } .projects .projects__title::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 80px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #4f6ef7, #a855f7, #22d3ee); transform: translateX(-50%); animation: projects-underline-pulse 2.5s ease-in-out infinite; } .projects .projects__card { position: relative; background: rgba(248, 250, 255, 0.65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(79, 110, 247, 0.15); transform-style: preserve-3d; perspective: 800px; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .projects .projects__card::before { content: ''; position: absolute; inset: -2px; border-radius: 26px; background: linear-gradient(135deg, rgba(79, 110, 247, 0.5), rgba(168, 85, 247, 0.4), rgba(34, 211, 238, 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(79, 110, 247, 0.25), 0 0 0 1px rgba(79, 110, 247, 0.2); border-color: rgba(79, 110, 247, 0.4); } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__icon { position: relative; transition: transform 0.35s ease, box-shadow 0.35s ease; animation: projects-icon-pulse 3s ease-in-out infinite; } .projects .projects__card:hover .projects__icon { transform: translateZ(30px) scale(1.1); box-shadow: 0 0 24px rgba(79, 110, 247, 0.5); } .projects .projects__card-title { transition: color 0.3s ease; } .projects .projects__card:hover .projects__card-title { color: #4f6ef7; } @keyframes projects-blob-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.1); } 66% { transform: translate(-30px, 20px) scale(0.95); } } @keyframes projects-particle-float { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; } 50% { transform: translateY(-40px) scale(1.4); opacity: 0.2; } } @keyframes projects-underline-pulse { 0%, 100% { width: 80px; opacity: 1; } 50% { width: 140px; opacity: 0.6; } } @keyframes projects-icon-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 110, 247, 0.3); } 50% { box-shadow: 0 0 0 10px rgba(79, 110, 247, 0); } }"
}