我们的数字基础设施、开源仓库和协作项目
探索我们社区构建的项目。从网站到 AI 实验， 从游戏模板到学习资源——一切开源，一切欢迎贡献。
由社区构建，为社区服务
这个网站本身——静态 HTML/CSS/JS、多语言、WebGL 效果。欢迎贡献。
我们的 Discord 社区机器人。活动调度、代码片段和 moderation 工具。
AI 实验和教程。从 LLM 微调到生成艺术模型。
我们月度游戏黑客松的 Godot 启动模板。包含 CI/CD、导出配置。
为所有级别策划的学习路径。从入门到精通任何语言。
高性能 CLI 工具。文件处理、数据转换等。
展示开源项目的仓库卡片网格，带 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 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;
}
});
}
};我们的所有项目都是开源的，欢迎贡献。 无论你是修复 bug、添加功能，还是改进文档——每个贡献都很重要。