Telebort | Learning to code made fun!

bash

# Create a cool welcome message
cat > ~/.welcome.sh << 'EOF'
#!/bin/bash
clear
echo "
╔════════════════════════════════════╗
║     VIBE CODING STREAM LIVE 🔴     ║
║         Welcome Everyone! 🎉        ║
╚════════════════════════════════════╝
" | lolcat

echo "Today's Project: Building Something Cool!" | figlet | lolcat
echo ""
echo "Chat Commands: !theme !music !project" | lolcat
EOF

chmod +x ~/.welcome.sh

# Add to your shell config
echo "~/.welcome.sh" >> ~/.zshrc

json

// Add to settings.json for streaming
{
  "editor.fontSize": 18,  // Larger for viewers
  "editor.lineHeight": 1.8,  // More readable
  "terminal.integrated.fontSize": 16,
  "editor.minimap.enabled": false,  // Less clutter
  "editor.renderWhitespace": "none",
  "editor.cursorBlinking": "smooth",
  "editor.cursorStyle": "block",
  "workbench.colorTheme": "Synthwave '84",
  
  // Disable distractions
  "editor.suggestOnTriggerCharacters": false,
  "editor.parameterHints.enabled": false,
  "git.decorations.enabled": false
}

html

{/* starting-soon.html */}
<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    font-family: 'Fira Code', monospace;
    color: white;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.content {
    text-align: center;
    text-shadow: 0 0 20px rgba(0,0,0,0.5);
}

h1 {
    font-size: 4em;
    margin: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.countdown {
    font-size: 2em;
    margin-top: 20px;
}

.social {
    margin-top: 40px;
    font-size: 1.2em;
}
</style>
</head>
<body>
    <div class="content">
        <h1>STARTING SOON</h1>
        <div class="countdown" id="countdown">Setting up the vibes...</div>
        <div class="social">
            Follow @YourUsername | Chat: !commands
        </div>
    </div>
    
    <script>
    // Animated countdown
    let count = 5;
    setInterval(() => {
        count = count > 0 ? count - 1 : 5;
        document.getElementById('countdown').textContent = 
            count > 0 ? `Starting in ${count}...` : 'Welcome to the stream!';
    }, 1000);
    </script>
</body>
</html>

markdown

OBS Audio Settings:
1. Desktop Audio: -15db (background music)
2. Mic/Auxiliary: 0db (your voice)
3. Add Filters to Mic:
   - Noise Suppression (RNNoise)
   - Gain: +5db
   - Compressor (3:1 ratio)

html

{/* clock-widget.html */}
<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;900&display=swap');

body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0f0f0f;
    font-family: 'Orbitron', monospace;
    overflow: hidden;
}

.clock-container {
    position: relative;
    padding: 40px;
    background: linear-gradient(145deg, #1a1a2e, #16213e);
    border-radius: 20px;
    box-shadow: 
        0 0 50px rgba(138, 43, 226, 0.5),
        inset 0 0 20px rgba(138, 43, 226, 0.2);
}

.clock {
    font-size: 5em;
    font-weight: 900;
    background: linear-gradient(90deg, #00ff88, #00ffff, #ff00ff);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 3s ease infinite;
    text-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.date {
    text-align: center;
    color: #888;
    margin-top: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: linear-gradient(90deg, #00ff88, #ff00ff);
    border-radius: 50%;
    animation: float 10s infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(100px);
        opacity: 0;
    }
}
</style>
</head>
<body>
    <div class="clock-container">
        <div class="particles" id="particles"></div>
        <div class="clock" id="clock">00:00:00</div>
        <div class="date" id="date">Loading...</div>
    </div>

    <script>
    // Clock update
    function updateClock() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        
        document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
        
        const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
        document.getElementById('date').textContent = now.toLocaleDateString('en-US', options);
    }

    // Create particles
    function createParticles() {
        const container = document.getElementById('particles');
        for(let i = 0; i < 20; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.animationDelay = Math.random() * 10 + 's';
            particle.style.animationDuration = (10 + Math.random() * 10) + 's';
            container.appendChild(particle);
        }
    }

    setInterval(updateClock, 1000);
    updateClock();
    createParticles();
    </script>
</body>
</html>

javascript

// Simple chat bot responses (for demonstration)
const commands = {
    "!theme": "Using Synthwave '84 with custom glow effects!",
    "!music": "Lo-fi hip hop - beats to code/relax to",
    "!project": "Building an aesthetic clock widget with particles!",
    "!vibe": "Maximum vibes achieved! 🌈✨",
    "!socials": "Follow @YourUsername on all platforms!"
};

css

"Hey everyone! Welcome to my vibe coding stream!
Today we're building an aesthetic clock widget.
Drop a 🌈 in chat if you can hear the music!"

arduino

"Thanks for vibing with me today!
Follow for more aesthetic coding streams!
What should we build next time?"

less

Just finished my first vibe coding stream! 🎨✨

Built an aesthetic clock widget while vibing to lo-fi beats 🎵

Thanks to everyone who joined! 

VOD: [link]
Code: [github]

#VibeCoding #CodeStream #LoFi #WebDev

Project 1: Stream Your Code

Project 1: Stream Your Code