构建

我们的数字基础设施、开源仓库和协作项目

探索我们社区构建的项目。从网站到 AI 实验, 从游戏模板到学习资源——一切开源,一切欢迎贡献。

网络拓扑

开源项目

由社区构建,为社区服务

stykalabria/website

这个网站本身——静态 HTML/CSS/JS、多语言、WebGL 效果。欢迎贡献。

⭐ 42 🍴 12 HTML/CSS

stykalabria/discord-bot

我们的 Discord 社区机器人。活动调度、代码片段和 moderation 工具。

⭐ 28 🍴 8 Python

stykalabria/ai-lab

AI 实验和教程。从 LLM 微调到生成艺术模型。

⭐ 67 🍴 23 Python/PyTorch

stykalabria/game-jam-template

我们月度游戏黑客松的 Godot 启动模板。包含 CI/CD、导出配置。

⭐ 35 🍴 15 GDScript

stykalabria/learning-resources

为所有级别策划的学习路径。从入门到精通任何语言。

⭐ 89 🍴 34 Markdown

stykalabria/rust-cli-tools

高性能 CLI 工具。文件处理、数据转换等。

⭐ 56 🍴 18 Rust

源代码展示

📜 cyberdomain.html — 仓库网格

展示开源项目的仓库卡片网格,带 GitHub 风格元数据。

<!-- 仓库网格 -->
<div class="repo-grid">
  <article class="repo-card">
    <h3 class="repo-name">stykalabria/website</h3>
    <p class="repo-desc">
      这个网站——静态 HTML/CSS/JS,
      多语言,WebGL 效果。
    </p>
    <div class="repo-meta">
      <span>⭐ 42</span>
      <span>🍴 12</span>
      <span>HTML/CSS</span>
    </div>
  </article>
</div>

🎨 六边形网格 CSS

使用 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 粒子系统

带鼠标排斥和平滑动画的背景粒子系统。

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

贡献

我们的所有项目都是开源的,欢迎贡献。 无论你是修复 bug、添加功能,还是改进文档——每个贡献都很重要。