# Vlogs

<div class="not-prose mb-8">
  <div class="flex items-center gap-4 p-5 rounded-xl bg-[var(--bg-sidebar)] border border-[var(--border-main)] shadow-sm">
    <div class="w-12 h-12 rounded-xl bg-red-500/10 border border-red-500/20 flex items-center justify-center text-2xl flex-shrink-0">
      📺
    </div>
    <div>
      <h2 class="text-base font-bold text-[var(--fg-primary)] m-0">Video Content</h2>
      <p class="text-sm text-[var(--fg-secondary)] mt-1 mb-0">
        Follow along on YouTube for AI journalism, project builds, and developer content.
      </p>
    </div>
    <a
      href="https://www.youtube.com/@yashmagar01"
      target="_blank"
      rel="noopener noreferrer"
      class="ml-auto flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-red-600 hover:bg-red-500 text-white text-xs font-semibold no-underline transition-colors shadow-sm"
      style="color: #ffffff !important;"
    >
      ▶ Subscribe
    </a>
  </div>
</div>

## Coming Soon

<div class="not-prose grid grid-cols-1 md:grid-cols-2 gap-4 my-6">

  <!-- Placeholder 1 -->
  <div class="rounded-xl bg-[var(--bg-sidebar)] border border-dashed border-[var(--border-main)] overflow-hidden">
    <div class="aspect-video bg-gradient-to-br from-red-950/20 to-[var(--bg-main)] flex flex-col items-center justify-center gap-3">
      <div class="w-14 h-14 rounded-full bg-red-600/20 border border-red-600/20 flex items-center justify-center">
        <span class="text-2xl">🎬</span>
      </div>
      <span class="text-xs text-[var(--fg-secondary)] font-medium">Will be published soon</span>
    </div>
    <div class="p-4">
      <div class="h-3 bg-[var(--border-main)] rounded-full w-3/4 mb-2"></div>
      <div class="h-2 bg-[var(--border-main)] rounded-full w-1/2 opacity-60"></div>
    </div>
  </div>

  <!-- Placeholder 2 -->
  <div class="rounded-xl bg-[var(--bg-sidebar)] border border-dashed border-[var(--border-main)] overflow-hidden">
    <div class="aspect-video bg-gradient-to-br from-purple-950/20 to-[var(--bg-main)] flex flex-col items-center justify-center gap-3">
      <div class="w-14 h-14 rounded-full bg-purple-600/20 border border-purple-600/20 flex items-center justify-center">
        <span class="text-2xl">🤖</span>
      </div>
      <span class="text-xs text-[var(--fg-secondary)] font-medium">Will be published soon</span>
    </div>
    <div class="p-4">
      <div class="h-3 bg-[var(--border-main)] rounded-full w-4/5 mb-2"></div>
      <div class="h-2 bg-[var(--border-main)] rounded-full w-2/5 opacity-60"></div>
    </div>
  </div>

</div>

## What to Expect

- 🤖 **AI Tool Reviews** — honest takes on the latest AI tools and models
- 🛠️ **Build-in-Public** — watching me ship projects from idea to deployment
- 📝 **Dev Logs** — the real process of learning and building as a diploma student
- 🌐 **Web Dev Tips** — practical tips for React, Node, and full-stack development

---

> **Subscribe to get notified** when the first videos drop → [youtube.com/@yashmagar01](https://www.youtube.com/@yashmagar01)