Network Topology

Open Source Projects

stykalabria/website

This very website — static HTML/CSS/JS, multi-language, WebGL effects. Contributions welcome.

⭐ 42 🍴 12 HTML/CSS

stykalabria/discord-bot

Community bot for our Discord. Event scheduling, code snippets, and moderation tools.

⭐ 28 🍴 8 Python

stykalabria/ai-lab

AI experiments and tutorials. From LLM fine-tuning to generative art models.

⭐ 67 🍴 23 Python/PyTorch

stykalabria/game-jam-template

Godot starter template for our monthly game jams. CI/CD, export configs included.

⭐ 35 🍴 15 GDScript

stykalabria/learning-resources

Curated learning paths for all levels. From zero to hero in any language.

⭐ 89 🍴 34 Markdown

stykalabria/rust-cli-tools

High-performance CLI utilities. File processing, data transformation, and more.

⭐ 56 🍴 18 Rust

Source Code Showcase

📜 cyberdomain.html — Repo Grid

Repository card grid showcasing open source projects with GitHub-style metadata.

<!-- Repository Grid -->
<div class="repo-grid">
  <article class="repo-card">
    <h3 class="repo-name">stykalabria/website</h3>
    <p class="repo-desc">
      This very website — static HTML/CSS/JS, 
      multi-language, WebGL effects.
    </p>
    <div class="repo-meta">
      <span>⭐ 42</span>
      <span>🍴 12</span>
      <span>HTML/CSS</span>
    </div>
  </article>
</div>

🎨 Hex Grid CSS

Hexagonal grid layout using CSS clip-path for network topology visualization.

/* Hexagonal Grid */
.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;
  /* Hexagon shape */
  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 Particle System

Background particle system with mouse repulsion and smooth animation.

// WebGL Background
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;

      // Mouse repulsion
      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;
      }
    });
  }
};