LEVEL 3 // CODESPACE

CODESPACE

Programming languages, tools, and frameworks we love and use. Every language is welcome.

Languages & Technologies

Python Rust JavaScript TypeScript C++ Go Haskell Zig Julia Elixir Solidity Godot

Tools & Frameworks

Docker & Containers

Containerize everything. Share reproducible environments across all platforms.

#devops

Kubernetes

Orchestrate containers at scale. The infrastructure layer of modern applications.

#cloud

Git & GitHub

Version control mastery. Collaborative workflows, CI/CD, and open source contribution.

#git

Neovim & VS Code

Editor wars? We love both. Share configs, plugins, and productivity tips.

#editors

Source Code Showcase

📜 codespace.html — Language Grid

Lines: 156Lang: HTML

Responsive grid of programming languages with tooltip support.

<!-- Language Grid Component -->
<div class="lang-grid">
  <button class="lang-chip" 
    data-tooltip="Python - Data Science, AI">
    <span aria-hidden="true">🐍</span>Python
  </button>
  <button class="lang-chip" 
    data-tooltip="Rust - Systems, Performance">
    <span aria-hidden="true">🦀</span>Rust
  </button>
  <!-- More languages... -->
</div>

<!-- CSS Grid Implementation -->
<style>
.lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
</style>

🎨 Tooltip CSS Styling

ComponentLang: CSS

Floating tooltip system positioned via JavaScript with fade transitions.

/* Tooltip Container */
#ctx-tooltip {
  position: fixed;
  z-index: 9998;
  background: rgba(3, 5, 8, 0.98);
  border: 1px solid #00d4ff;
  color: #00d4ff;
  padding: 0.5rem 1rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.8rem;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  max-width: 250px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

#ctx-tooltip.visible {
  opacity: 1;
}

⚡ Tooltip JavaScript

ModuleLang: JS

Tooltip system that follows mouse cursor and shows on hover.

const Tooltips = {
  init() {
    const triggers = document.querySelectorAll('[data-tooltip]');
    const tooltip = document.getElementById('ctx-tooltip');
    
    triggers.forEach(trigger => {
      trigger.addEventListener('mouseenter', () => {
        tooltip.textContent = trigger.dataset.tooltip;
        tooltip.classList.add('visible');
      });

      trigger.addEventListener('mousemove', (e) => {
        tooltip.style.left = (e.clientX + 15) + 'px';
        tooltip.style.top = (e.clientY + 15) + 'px';
      });

      trigger.addEventListener('mouseleave', () => {
        tooltip.classList.remove('visible');
      });
    });
  }
};

Source Explorer

Browse the actual source files of this project

stykalabria/
📄 styles.css ~47KB • Main Stylesheet 
/* ============================================
   STYKALABRIA VIRTUAL HACKERSPACE
   Fixed Stylesheet - Accessibility, Animations, z-index
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron...');

/* ===== CSS VARIABLES (THEME INTEGRATION) ===== */
:root {
  --primary: #00ffaa;
  --secondary: #ff5aa0;
  --bg-primary: #030508;
  /* ... 30+ more variables ... */
}

/* ===== FILE EXPLORER ===== */
.file-explorer {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  /* ... */
}/* 2100+ lines of styles */

💡 Click any file in the explorer to view it. The CMS (Content Management System) is available in the cms/ folder.