প্রকল্প

নেটওয়ার্ক টপোলজি ভিজ্যুয়ালাইজেশনের জন্য CSS clip-path ব্যবহার করে ষড়ভুজ গ্রিড লেআউট।

/* ষড়ভুজাকার গ্রিড */
.hex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.hex {
  width: 70px;
  height: 60px;
  background: rgba(0, 255, 170, 0.05);
  border: 1px solid rgba(0, 255, 170, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  color: #5a7a68;
  /* ষড়ভুজ আকৃতি */
  clip-path: polygon(
    50% 0%, 100% 25%, 100% 75%, 
    50% 100%, 0% 75%, 0% 25%
  );
  transition: all 0.3s ease;
}

.hex:hover {
  background: rgba(0, 255, 170, 0.15);
  border-color: #00ffaa;
  color: #00ffaa;
  transform: scale(1.05);
}

মাউস বিকর্ষণ এবং স্মুথ অ্যানিমেশন সহ ব্যাকগ্রাউন্ড পার্টিকেল সিস্টেম।

// WebGL ব্যাকগ্রাউন্ড
const WebGLBackground = {
  createParticles() {
    for (let i = 0; i < 100; i++) {
      this.particles.push({
        x: Math.random() * 2 - 1,
        y: Math.random() * 2 - 1,
        vx: (Math.random() - 0.5) * 0.002,
        vy: (Math.random() - 0.5) * 0.002,
        size: Math.random() * 2 + 1
      });
    }
  },

  animate() {
    this.particles.forEach(p => {
      p.x += p.vx;
      p.y += p.vy;

      // মাউস বিকর্ষণ
      const dx = p.x - (this.mouseX * 2 - 1);
      const dy = p.y - (this.mouseY * 2 - 1);
      const dist = Math.sqrt(dx * dx + dy * dy);
      if (dist < 0.2) {
        p.vx += dx * 0.0001;
        p.vy += dy * 0.0001;
      }
    });
  }
};