# Projects

I build practical tools that solve real problems. Each project is a chance to learn something new, ship something useful, and get better at the craft.

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

  <!-- The Future You -->
  <div class="relative group rounded-xl bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-cyan-500/60 p-6 flex flex-col transition-all duration-300 shadow-sm overflow-hidden">
    <div class="absolute top-0 right-0 w-32 h-32 bg-cyan-500/5 rounded-bl-full pointer-events-none group-hover:bg-cyan-500/10 transition-all"></div>
    <div class="flex items-center gap-3 mb-4">
      <div class="w-12 h-12 rounded-xl bg-cyan-500/10 border border-cyan-500/20 flex items-center justify-center text-2xl flex-shrink-0">🚀</div>
      <div>
        <h3 class="text-base font-bold text-[var(--fg-primary)] m-0">The Future You</h3>
        <span class="text-xs text-[var(--header-h3)] font-medium">AI · Reflection · MVP</span>
      </div>
    </div>
    <p class="text-sm text-[var(--fg-secondary)] leading-relaxed flex-1 mb-5">
      A zero-cost AI-powered reflection and self-growth companion using private, video-based emotional analysis. Designed to help you understand the future version of yourself through daily reflections.
    </p>
    <div class="space-y-2 mb-5">
      <div class="text-xs text-[var(--fg-secondary)] font-semibold uppercase tracking-wide">Stack</div>
      <div class="flex flex-wrap gap-1.5">
        <span class="text-xs px-2 py-0.5 rounded bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">React</span>
        <span class="text-xs px-2 py-0.5 rounded bg-purple-500/10 border border-purple-500/20 text-purple-400">Vite</span>
        <span class="text-xs px-2 py-0.5 rounded bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">Supabase</span>
        <span class="text-xs px-2 py-0.5 rounded bg-blue-500/10 border border-blue-500/20 text-blue-400">Gemini API</span>
      </div>
    </div>
    <div class="flex gap-2">
      <a href="https://the-future-you.vercel.app/" target="_blank" rel="noopener noreferrer" class="flex-1 block text-center px-3 py-2 rounded-lg bg-cyan-600 hover:bg-cyan-500 text-white text-xs font-semibold no-underline transition-colors" style="color: #ffffff !important;">
        🌐 Live Demo
      </a>
      <a href="https://github.com/yashmagar01/The-Future-You" target="_blank" rel="noopener noreferrer" class="flex-1 block text-center px-3 py-2 rounded-lg bg-[var(--bg-main)] border border-[var(--border-main)] hover:border-cyan-500/60 text-[var(--fg-primary)] text-xs font-semibold no-underline transition-colors">
        🐙 GitHub
      </a>
    </div>
  </div>

  <!-- Persona -->
  <div class="relative group rounded-xl bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-purple-500/60 p-6 flex flex-col transition-all duration-300 shadow-sm overflow-hidden">
    <div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-bl-full pointer-events-none group-hover:bg-purple-500/10 transition-all"></div>
    <div class="flex items-center gap-3 mb-4">
      <div class="w-12 h-12 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-2xl flex-shrink-0">🧠</div>
      <div>
        <h3 class="text-base font-bold text-[var(--fg-primary)] m-0">Persona</h3>
        <span class="text-xs text-[var(--header-h1)] font-medium">AI · Identity · Behavior Toolkit</span>
      </div>
    </div>
    <p class="text-sm text-[var(--fg-secondary)] leading-relaxed flex-1 mb-5">
      An AI-driven identity & behavior toolkit for structured, contextual interactions inside your apps. Helps define how different personas think, speak, and respond in various situations.
    </p>
    <div class="space-y-2 mb-5">
      <div class="text-xs text-[var(--fg-secondary)] font-semibold uppercase tracking-wide">Stack</div>
      <div class="flex flex-wrap gap-1.5">
        <span class="text-xs px-2 py-0.5 rounded bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">React</span>
        <span class="text-xs px-2 py-0.5 rounded bg-teal-500/10 border border-teal-500/20 text-teal-400">Tailwind</span>
        <span class="text-xs px-2 py-0.5 rounded bg-violet-500/10 border border-violet-500/20 text-violet-400">AI APIs</span>
        <span class="text-xs px-2 py-0.5 rounded bg-slate-500/10 border border-slate-500/20 text-slate-400">Vercel</span>
      </div>
    </div>
    <div class="flex gap-2">
      <a href="https://personanew.vercel.app/" target="_blank" rel="noopener noreferrer" class="flex-1 block text-center px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-500 text-white text-xs font-semibold no-underline transition-colors" style="color: #ffffff !important;">
        🌐 Live Demo
      </a>
      <a href="https://github.com/yashmagar01/Persona" target="_blank" rel="noopener noreferrer" class="flex-1 block text-center px-3 py-2 rounded-lg bg-[var(--bg-main)] border border-[var(--border-main)] hover:border-purple-500/60 text-[var(--fg-primary)] text-xs font-semibold no-underline transition-colors">
        🐙 GitHub
      </a>
    </div>
  </div>

  <!-- Generation Tools -->
  <div class="relative group rounded-xl bg-[var(--bg-sidebar)] border border-[var(--border-main)] hover:border-pink-500/60 p-6 flex flex-col transition-all duration-300 shadow-sm overflow-hidden">
    <div class="absolute top-0 right-0 w-32 h-32 bg-pink-500/5 rounded-bl-full pointer-events-none group-hover:bg-pink-500/10 transition-all"></div>
    <div class="flex items-center gap-3 mb-4">
      <div class="w-12 h-12 rounded-xl bg-pink-500/10 border border-pink-500/20 flex items-center justify-center text-2xl flex-shrink-0">🛠️</div>
      <div>
        <h3 class="text-base font-bold text-[var(--fg-primary)] m-0">Generation Tools</h3>
        <span class="text-xs text-[var(--header-h2)] font-medium">Dev Tools · Utilities · 12-in-1</span>
      </div>
    </div>
    <p class="text-sm text-[var(--fg-secondary)] leading-relaxed flex-1 mb-5">
      A clean, fast 12-in-1 utility suite for developers — UUIDs, CSS gradients, placeholder images, dummy text, and more. Built to keep all "small but important" dev tools in one modern interface.
    </p>
    <div class="space-y-2 mb-5">
      <div class="text-xs text-[var(--fg-secondary)] font-semibold uppercase tracking-wide">Stack</div>
      <div class="flex flex-wrap gap-1.5">
        <span class="text-xs px-2 py-0.5 rounded bg-cyan-500/10 border border-cyan-500/20 text-cyan-400">React</span>
        <span class="text-xs px-2 py-0.5 rounded bg-teal-500/10 border border-teal-500/20 text-teal-400">Tailwind</span>
        <span class="text-xs px-2 py-0.5 rounded bg-slate-500/10 border border-slate-500/20 text-slate-400">Vercel</span>
      </div>
    </div>
    <div class="flex gap-2">
      <a href="https://generations-tools.vercel.app/" target="_blank" rel="noopener noreferrer" class="flex-1 block text-center px-3 py-2 rounded-lg bg-pink-600 hover:bg-pink-500 text-white text-xs font-semibold no-underline transition-colors" style="color: #ffffff !important;">
        🌐 Live Demo
      </a>
      <a href="https://github.com/yashmagar01/Generation-Tools" target="_blank" rel="noopener noreferrer" class="flex-1 block text-center px-3 py-2 rounded-lg bg-[var(--bg-main)] border border-[var(--border-main)] hover:border-pink-500/60 text-[var(--fg-primary)] text-xs font-semibold no-underline transition-colors">
        🐙 GitHub
      </a>
    </div>
  </div>

  <!-- More Coming Soon -->
  <div class="rounded-xl bg-[var(--bg-sidebar)] border border-dashed border-[var(--border-main)] p-6 flex flex-col items-center justify-center text-center gap-3 min-h-[200px] opacity-60">
    <div class="text-3xl">🔜</div>
    <div>
      <p class="text-sm font-medium text-[var(--fg-primary)] m-0">More coming soon</p>
      <p class="text-xs text-[var(--fg-secondary)] mt-1 m-0">Building in public. Stay tuned.</p>
    </div>
    <a href="https://github.com/yashmagar01" target="_blank" rel="noopener noreferrer" class="text-xs text-[var(--header-h1)] hover:underline no-underline mt-1">
      Follow on GitHub →
    </a>
  </div>

</div>

---

## Open Source

All projects are open source. Contributions, feedback, and forks are welcome.

👉 [View all repositories on GitHub](https://github.com/yashmagar01?tab=repositories)