{% load static %}

<section id="hero" class="hero-section d-flex align-items-center">
  <!-- Particles Background -->
  <div id="particles-js" class="particles"></div>

  <!-- Floating Shapes -->
  <div class="floating-shape shape-1"></div>
  <div class="floating-shape shape-2"></div>

  <!-- Content -->
  <div class="container position-relative">
    <div class="row align-items-center justify-content-center text-center text-lg-start">
      <div class="col-lg-8 hero-text">
        <p class="tagline">Dream • Develop • Deliver</p>
        <h1 class="hero-title">Hi, I'm <span class="highlight">Ian Onyango</span></h1>
        <h2 class="role">Software Developer | React | Django | Flutter | DevOps</h2>
        <p class="hero-description">
          I build digital experiences that combine creativity and functionality.  
          Let’s turn ideas into impactful products.
        </p>

        <div class="cta-buttons mt-4">
          <a href="#contact" class="btn btn-primary">Get In Touch</a>
          <a href="#portfolio" class="btn btn-outline-light">View Work</a>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
/* Hero Base */
.hero-section {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #091a5c, #0d2b8a);
  color: #fff;
  overflow: hidden;
  padding: 100px 0;
}

.hero-text {
  text-align: left;
  padding: 20px 40px;
}

.tagline {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 15px 0;
}

.hero-title .highlight {
  color: #ff6b35;
}

.role {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.9);
}

.hero-description {
  font-size: 1rem;
  margin-bottom: 30px;
  max-width: 700px;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-primary {
  background: #ff6b35;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-primary:hover {
  background: #e65a28;
}

.btn-outline-light {
  border: 2px solid #fff;
  color: #fff;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
}

.btn-outline-light:hover {
  background: #fff;
  color: #091a5c;
}

/* Particles */
.particles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Floating Shapes */
.floating-shape {
  position: absolute;
  border-radius: 50%;
  z-index: 2;
  animation: float 6s ease-in-out infinite;
}

.shape-1 {
  width: 120px;
  height: 120px;
  top: 15%;
  left: 10%;
  background: rgba(255, 107, 53, 0.2);
}

.shape-2 {
  width: 80px;
  height: 80px;
  bottom: 20%;
  right: 15%;
  background: rgba(13, 43, 138, 0.2);
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Ensure content above particles */
.container {
  position: relative;
  z-index: 3;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hero-text {
    text-align: center;
    padding: 0 20px;
  }
}
</style>

<!-- Particles.js -->
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
<script>
particlesJS('particles-js', {
  particles: {
    number: { value: 60 },
    size: { value: 3 },
    move: { enable: true, speed: 1 },
    opacity: { value: 0.3 },
    line_linked: { enable: true, opacity: 0.2 }
  }
});
</script>