LEVEL 4 // CYBERDOMAIN
Our digital infrastructure, open source repositories, and collaborative projects.
This very website — static HTML/CSS/JS, multi-language, WebGL effects. Contributions welcome.
Community bot for our Discord. Event scheduling, code snippets, and moderation tools.
AI experiments and tutorials. From LLM fine-tuning to generative art models.
Godot starter template for our monthly game jams. CI/CD, export configs included.
Curated learning paths for all levels. From zero to hero in any language.
High-performance CLI utilities. File processing, data transformation, and more.
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>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);
}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;
}
});
}
};