astro_hts/frontend/src/components/about/AboutHero.astro

---
import PageHeading from '@components/base/PageHeading.astro'

const skills = [
  "Astro",
  "NextJS",
  "SolidJS",
  "Preact",
  "React",  
  "SolidJS",
  "TypeScript",  
  "Tailwind CSS"
]
---

<section class="space-y-8 md:space-y-12">
  <PageHeading
    title="Информация и профессиональный опыт"
    description="Привет 👋 Я Redi, Jamstack-разработчик. Создаю современные веб-приложения, увлекаюсь новыми технологиями и делюсь опыт через статьи и open-source проекты."
  />

  <!-- Первая строка: изображение + блок доступности + текст -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 mb-8 md:mb-12">

    <!-- Левая колонка - 2 ячейки -->
    <div class="lg:col-span-1 space-y-4 md:space-y-6">
      <!-- Картинка -->
      <div class="relative group">
        <div class="relative overflow-hidden rounded-xl md:rounded-2xl shadow-lg md:shadow-2xl">
          <img
            src="/images/about.avif"
            width={280}
            height={280}
            alt="RediBedi - Веб-разработчик"
            class="w-full h-auto object-cover transition-transform duration-700 group-hover:scale-105"
            loading="eager"
          />
          <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
        </div>
      </div>

      <!-- Блок "Доступен для проектов" с анимированной ракетой -->
      <div class="p-4 md:p-6 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-xl md:rounded-2xl shadow-md md:shadow-lg overflow-hidden relative rocket-container">
        <div class="text-center relative z-10">
          <div class="rocket-animation">
            <div class="rocket text-2xl md:text-4xl">🚀</div>
            <div class="exhaust"></div>
            <div class="stars">
              {Array.from({ length: 10 }).map((_, i) => (
                <div class={`star star-${i + 1}`}></div>
              ))}
            </div>
          </div>
          <h3 class="text-base md:text-lg font-semibold text-white mb-1 md:mb-2 mt-2 md:mt-4">Доступен для проектов</h3>
          <p class="text-indigo-100 text-xs md:text-sm">Готов к новым вызовам и интересным проектам</p>
        </div>
      </div>
    </div>

    <!-- Правая колонка - Текст -->
    <div class="lg:col-span-2">
      <div class="p-4 md:p-6 lg:p-8 bg-white dark:bg-neutral-900 rounded-xl md:rounded-2xl shadow-md md:shadow-lg border border-gray-100 dark:border-neutral-800 h-full">
        <p class="text-md md:text-base text-center md:text-left lg:text-lg leading-7 md:leading-8 text-gray-700 dark:text-neutral-300">
          Jamstack-разработчик с 12+ годами опыта, специализируюсь на создании высоконагруженных веб-приложений.
          Люблю работать с современным стеком технологий и решать сложные архитектурные задачи.
          Постоянно изучаю новые подходы к разработке и делюсь знаниями с сообществом через технические статьи
          и open-source проекты. Верю в силу сообщества и открытого кода.
        </p>
      </div>
    </div>
  </div>

  <!-- Вторая строка: Технологии на всю ширину -->
  <div>
    <h2 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-4 md:mb-6 lg:mb-8 text-center">
      Технологии которые я использую
    </h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2 md:gap-3 lg:gap-4">
      {skills.map((skill, index) => (
        <div
          class="flex items-center justify-center p-2 md:p-3 lg:p-4 bg-gradient-to-br from-white to-gray-50 dark:from-neutral-800 dark:to-neutral-700 rounded-lg md:rounded-xl shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 border border-gray-200 dark:border-neutral-600 group"
          style={`animation-delay: ${index * 50}ms`}
        >
          <span class="text-xs md:text-sm font-medium text-gray-700 dark:text-neutral-200 text-center group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
            {skill}
          </span>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  /* Анимация для карточек технологий */
  .grid.grid-cols-2 > div {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Плавные переходы */
  .group {
    transition: all 0.3s ease-in-out;
  }

  /* Анимация ракеты */
  .rocket-container {
    overflow: hidden;
  }

  .rocket-animation {
    position: relative;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @media (min-width: 768px) {
    .rocket-animation {
      height: 80px;
    }
  }

  .rocket {
    animation: rocketFloat 3s ease-in-out infinite;
    z-index: 2;
    position: relative;
  }

  .exhaust {
    position: absolute;
    bottom: -8px;
    width: 16px;
    height: 24px;
    background: linear-gradient(to top, #ff9d00, #ff2c00, transparent);
    border-radius: 50% 50% 0 0;
    opacity: 0.8;
    animation: exhaustPulse 1.5s ease-in-out infinite;
    z-index: 1;
    filter: blur(2px);
  }

  @media (min-width: 768px) {
    .exhaust {
      bottom: -10px;
      width: 20px;
      height: 30px;
      filter: blur(3px);
    }
  }

  .stars {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .star {
    position: absolute;
    background-color: white;
    border-radius: 50%;
    opacity: 0;
  }

  /* Создаем несколько звездочек с разными позициями и анимациями */
  .star-1 { width: 1px; height: 1px; top: 20%; left: 30%; animation: starShine 3s 0.5s infinite; }
  .star-2 { width: 2px; height: 2px; top: 40%; left: 60%; animation: starShine 4s 1s infinite; }
  .star-3 { width: 1px; height: 1px; top: 60%; left: 20%; animation: starShine 3.5s 0.8s infinite; }
  .star-4 { width: 2px; height: 2px; top: 30%; left: 80%; animation: starShine 4.5s 1.2s infinite; }
  .star-5 { width: 1px; height: 1px; top: 70%; left: 40%; animation: starShine 3.2s 0.6s infinite; }
  .star-6 { width: 2px; height: 2px; top: 10%; left: 50%; animation: starShine 4.2s 1.4s infinite; }
  .star-7 { width: 1px; height: 1px; top: 50%; left: 10%; animation: starShine 3.8s 0.9s infinite; }
  .star-8 { width: 2px; height: 2px; top: 80%; left: 70%; animation: starShine 4.8s 1.6s infinite; }
  .star-9 { width: 1px; height: 1px; top: 25%; left: 90%; animation: starShine 3.3s 1.1s infinite; }
  .star-10 { width: 2px; height: 2px; top: 65%; left: 30%; animation: starShine 4.3s 0.7s infinite; }

  @media (min-width: 768px) {
    .star-1, .star-3, .star-5, .star-7, .star-9 { width: 2px; height: 2px; }
    .star-2, .star-4, .star-6, .star-8, .star-10 { width: 3px; height: 3px; }
  }

  @keyframes rocketFloat {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-4px) rotate(2deg);
    }
    50% {
      transform: translateY(0) rotate(0deg);
    }
    75% {
      transform: translateY(4px) rotate(-2deg);
    }
  }

  @keyframes exhaustPulse {
    0%, 100% {
      height: 16px;
      opacity: 0.6;
    }
    50% {
      height: 24px;
      opacity: 0.9;
    }
  }

  @media (min-width: 768px) {
    @keyframes exhaustPulse {
      0%, 100% {
        height: 20px;
        opacity: 0.6;
      }
      50% {
        height: 30px;
        opacity: 0.9;
      }
    }
  }

  @keyframes starShine {
    0%, 100% {
      opacity: 0;
      transform: scale(0.5);
    }
    50% {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* Эффект при наведении на контейнер */
  .rocket-container:hover .rocket {
    animation: rocketHover 2s ease-in-out;
  }

  .rocket-container:hover .exhaust {
    animation: exhaustBoost 1s ease-in-out;
  }

  @keyframes rocketHover {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @media (min-width: 768px) {
    @keyframes rocketHover {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
      100% {
        transform: translateY(0);
      }
    }
  }

  @keyframes exhaustBoost {
    0%, 100% {
      height: 16px;
      opacity: 0.6;
    }
    50% {
      height: 32px;
      opacity: 1;
    }
  }

  @media (min-width: 768px) {
    @keyframes exhaustBoost {
      0%, 100% {
        height: 20px;
        opacity: 0.6;
      }
      50% {
        height: 40px;
        opacity: 1;
      }
    }
  }
</style>