{
  "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><span class='projects__particles'><i class='projects__particle projects__particle--1'></i><i class='projects__particle projects__particle--2'></i><i class='projects__particle projects__particle--3'></i><i class='projects__particle projects__particle--4'></i><i class='projects__particle projects__particle--5'></i><i class='projects__particle projects__particle--6'></i></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 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='currentColor' stroke-width='2' stroke-linejoin='round'/><path d='M2 17L12 22L22 17' stroke='currentColor' stroke-width='2' stroke-linejoin='round'/><path d='M2 12L12 17L22 12' stroke='currentColor' 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='currentColor' stroke-width='2' stroke-linejoin='round'/><path d='M8 8H16' stroke='currentColor' stroke-width='2' stroke-linecap='round'/><path d='M8 12H14' stroke='currentColor' stroke-width='2' stroke-linecap='round'/><path d='M8 16H12' stroke='currentColor' stroke-width='2' stroke-linecap='round'/></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; background: linear-gradient(180deg, #ffffff 0%, #f0fdff 100%); } .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; will-change: transform; } .projects .projects__blob--1 { width: 420px; height: 420px; top: -120px; left: -100px; background: radial-gradient(circle at 30% 30%, #67e8f9, #22d3ee 45%, transparent 70%); animation: projects-blob-float 14s ease-in-out infinite; } .projects .projects__blob--2 { width: 360px; height: 360px; bottom: -140px; right: -80px; background: radial-gradient(circle at 60% 40%, #38bdf8, #0ea5e9 50%, transparent 72%); animation: projects-blob-float 18s ease-in-out infinite reverse; } .projects .projects__blob--3 { width: 300px; height: 300px; top: 40%; left: 55%; background: radial-gradient(circle at 50% 50%, #22d3ee, #06b6d4 55%, transparent 75%); animation: projects-blob-drift 22s ease-in-out infinite; } .projects .projects__particles { position: absolute; inset: 0; } .projects .projects__particle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 12px 2px rgba(34, 211, 238, 0.6); opacity: 0.7; animation: projects-particle-rise 12s linear infinite; } .projects .projects__particle--1 { left: 8%; bottom: -20px; animation-delay: 0s; animation-duration: 11s; } .projects .projects__particle--2 { left: 22%; bottom: -20px; width: 6px; height: 6px; background: #67e8f9; animation-delay: 2s; animation-duration: 14s; } .projects .projects__particle--3 { left: 40%; bottom: -20px; width: 10px; height: 10px; background: #38bdf8; animation-delay: 4s; animation-duration: 16s; } .projects .projects__particle--4 { left: 58%; bottom: -20px; animation-delay: 1s; animation-duration: 13s; } .projects .projects__particle--5 { left: 74%; bottom: -20px; width: 5px; height: 5px; background: #0ea5e9; animation-delay: 3s; animation-duration: 15s; } .projects .projects__particle--6 { left: 90%; bottom: -20px; width: 7px; height: 7px; background: #06b6d4; animation-delay: 5s; animation-duration: 12s; } .projects .projects__inner { position: relative; z-index: 1; } .projects .projects__title { background: linear-gradient(90deg, #06b6d4, #22d3ee, #38bdf8, #06b6d4); 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__grid { perspective: 1200px; } .projects .projects__card { position: relative; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(34, 211, 238, 0.25); box-shadow: 0 4px 24px rgba(6, 182, 212, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; animation: projects-card-glow 4s ease-in-out infinite; } .projects .projects__card::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(34, 211, 238, 0.6), rgba(56, 189, 248, 0.1) 40%, rgba(103, 232, 249, 0.6)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; } .projects .projects__card:hover { transform: translateY(-6px) rotateX(6deg) rotateY(-6deg) scale(1.02); box-shadow: 0 24px 48px rgba(6, 182, 212, 0.22), 0 0 0 1px rgba(34, 211, 238, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8); border-color: rgba(34, 211, 238, 0.55); } .projects .projects__card:hover::before { opacity: 1; } .projects .projects__icon { background: linear-gradient(135deg, #67e8f9, #22d3ee); color: #ffffff; box-shadow: 0 8px 20px rgba(34, 211, 238, 0.35); 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.08) rotate(-4deg); box-shadow: 0 12px 28px rgba(6, 182, 212, 0.5); } .projects .projects__card-title { transition: color 0.3s ease; } .projects .projects__card:hover .projects__card-title { color: #06b6d4; } @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-blob-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-60px, -40px) scale(1.15); } } @keyframes projects-particle-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.6; } 100% { transform: translateY(-620px) translateX(30px); opacity: 0; } } @keyframes projects-title-shine { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } } @keyframes projects-card-glow { 0%, 100% { box-shadow: 0 4px 24px rgba(6, 182, 212, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); } 50% { box-shadow: 0 8px 32px rgba(34, 211, 238, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6); } } @keyframes projects-icon-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(34, 211, 238, 0.35); } 50% { box-shadow: 0 8px 28px rgba(34, 211, 238, 0.6); } }"
}